/* KurenaiOS — css/layout.css · @layer layout
   The app shell and the layout primitives (UI rebuild, Graphite design).

     #topbar   60px: brand (194px) · search pill (480px, centred) · clock,
               bell, assistant, sync dot (194px)
     #rail     212px: seven kanji tiles with labels, the profile chip at the
               foot; 72px tiles-only when collapsed or beside the spec spine
     #tree     the spec spine, 284px, only where a view opens it
     #stage    the content area: padding 20/24/28, sections 20 apart;
               #subnav (the pill bar) then #main

   State the shell reads (never a class): #cols[data-rail="compact"],
   #cols[data-tree="none|open|closed"], <html data-shell="ready"> for the
   phone enhancements (invariant 72), aria-current on the lit rail item.

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

/* ---------- the frame ---------- */
#app { display: flex; flex-direction: column; overflow: hidden; }

#topbar {
position: relative;
z-index: var(--z-topbar);
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--sp-16);
block-size: var(--topbar-h);
padding-inline: var(--sp-18) var(--sp-20);
border-block-end: var(--hairline) solid var(--line);
background: var(--bg);
}
.k-topbar-brand { inline-size: var(--brand-w); flex: 0 0 auto; display: flex; align-items: center; }
.k-topbar-centre { flex: 1 1 0; min-inline-size: 0; display: flex; justify-content: center; align-items: center; gap: var(--sp-8); }
.k-topbar-end { min-inline-size: var(--brand-w); flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-10); }

#cols { position: relative; flex: 1 1 0; min-block-size: 0; display: flex; }

/* ---------- top bar pieces ---------- */
.k-brand { display: flex; align-items: center; gap: var(--sp-9); border-radius: var(--r-12); }
.k-brand-logo { inline-size: var(--brand-logo); block-size: var(--brand-logo); object-fit: contain; }
.k-brand-name { font-size: var(--fs-17); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.k-search {
position: relative;
inline-size: var(--search-w);
max-inline-size: 100%;
display: flex;
align-items: center;
gap: var(--sp-10);
block-size: var(--search-h);
padding: 0 var(--sp-14);
border-radius: var(--r-pill);
background: var(--s1);
color: var(--muted);
font-size: var(--fs-14);
}
.k-search:focus-within { box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-search-input { flex: 1 1 0; min-inline-size: 0; min-block-size: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); font-size: var(--fs-14); outline: none; }
.k-search-glyph { display: grid; place-items: center; color: var(--muted); line-height: 1; }
.k-search-glyph > .k-icon { inline-size: var(--icon-glyph-sm); block-size: var(--icon-glyph-sm); }
.k-search-input::-webkit-search-cancel-button { display: none; }
.k-search:focus-within { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.k-search-key { font: var(--fs-11) var(--font-mono); padding: var(--hairline) var(--sp-7); border-radius: var(--r-6); background: var(--s2); color: var(--muted); }
.k-search-results {
position: absolute;
inset-block-start: calc(100% + var(--sp-8));
inset-inline: 0 auto;
/* never narrower than a readable result row, though the box narrows on
   an iPad in portrait */
inline-size: max(100%, min(var(--search-results-min), 60vw));
z-index: var(--z-menu);
max-block-size: min(70vh, var(--menu-max-h));
overflow-y: auto;
padding: var(--sp-8);
border-radius: var(--r-22);
background: var(--s2);
box-shadow: var(--elev-3);
color: var(--text);
display: none;
}
.k-search-results[data-state~="open"] { display: block; }
.k-sr-group + .k-sr-group { margin-block-start: var(--sp-6); }
.k-sr-group-h { display: flex; justify-content: space-between; padding: var(--sp-10) var(--sp-12) var(--sp-4); font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); font-weight: var(--weight-semibold); }
.k-sr-group-n { font-family: var(--font-mono); letter-spacing: 0; }
.k-sr-item { display: flex; align-items: baseline; gap: var(--sp-12); padding: var(--sp-9) var(--sp-12); border-radius: var(--r-14); cursor: pointer; }
.k-sr-item:hover, .k-sr-item[aria-selected="true"] { background: var(--s1); }
.k-sr-main { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; }
.k-sr-title { font-size: var(--fs-13-5); font-weight: var(--weight-medium); }
.k-sr-sub { font-size: var(--fs-11-5); color: var(--muted); }
.k-sr-snip { flex: 0 1 45%; min-inline-size: 0; font-size: var(--fs-11-5); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-sr-empty { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-12); font-size: var(--fs-13); color: var(--text-2); }
.k-sr-scopes { display: none; }
.k-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; margin-inline-end: var(--sp-4); }
.k-clock-time { font: var(--weight-medium) var(--fs-14) var(--font-mono); }
.k-clock-date { font-size: var(--fs-11); color: var(--muted); white-space: nowrap; }
.k-trigger-dot { position: absolute; inset-block-start: var(--sp-6); inset-inline-end: var(--sp-7); inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--bloom); box-shadow: 0 0 0 var(--focus-width) var(--s1); opacity: 0; transition: opacity var(--dur) var(--ease); }
#assistant-trigger[data-state~="is-busy"] .k-trigger-dot, #assistant-trigger[data-state~="is-confirm"] .k-trigger-dot { opacity: 1; }
#assistant-trigger[data-state~="is-confirm"] .k-trigger-dot { background: var(--amber); }
.k-bell-glyph { display: grid; place-items: center; }
.k-bell-glyph svg { inline-size: var(--icon-glyph); block-size: var(--icon-glyph); }
/* the compact shell's sheets (mobile-shell.js): the shared dialog, a bottom
   sheet at the phone tier. Provisional until the phone design (roadmap 3.1)
   restyles them; it keeps the hooks. */
.k-msheet { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-msheet-list { display: flex; flex-direction: column; }
/* More (15a): the profile row, then one row per destination */
.k-msheet-profile { display: flex; align-items: center; gap: var(--sp-12); min-block-size: var(--hit-coarse); margin-block-end: var(--sp-6); padding: var(--sp-10) var(--sp-12); border-radius: var(--r-16); background: var(--s2); color: var(--text); text-align: start; }
.k-msheet-profile-meta { display: flex; gap: var(--sp-8); }
.k-msheet-hp { color: var(--teal); }
.k-msheet-hp[data-hp="strained"] { color: var(--amber); }
.k-msheet-hp[data-hp="critical"] { color: var(--alarm); }
.k-msheet-gold { font-family: var(--font-mono); color: var(--gold); }
.k-msheet-dest { display: flex; align-items: center; gap: var(--sp-12); min-block-size: var(--sheet-row-h); padding: var(--sp-8) var(--sp-4); color: var(--text); text-align: start; }
.k-msheet-dest + .k-msheet-dest { border-block-start: var(--hairline) solid var(--line); }
.k-msheet-dest[data-state~="current"] .k-msheet-glyph { background: linear-gradient(150deg, var(--crimson-hi), var(--crimson-lo)); color: var(--crimson-ink); }
.k-msheet-glyph { inline-size: var(--sheet-glyph); block-size: var(--sheet-glyph); flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-10); background: var(--s2); font: var(--weight-semibold) var(--fs-17) / 1 var(--font-kanji); color: var(--text-2); }
.k-msheet-copy { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.k-msheet-copy > b { font-size: var(--fs-15); font-weight: var(--weight-medium); }
.k-msheet-copy > span { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-msheet-badge, .k-msheet-count { padding: 0 var(--sp-7); border-radius: var(--r-pill); font: var(--weight-semibold) var(--fs-11) var(--font-mono); }
.k-msheet-badge { background: var(--crimson); color: var(--crimson-ink); }
.k-msheet-count { background: var(--s2); color: var(--text-2); }
.k-msheet-chev { font-size: var(--fs-18); color: var(--muted); }
/* the section switch: a plain list, the current row checked */
.k-msheet-row { display: flex; align-items: center; gap: var(--sp-10); min-block-size: var(--sheet-row-h); padding-inline: var(--sp-4); color: var(--text-2); font-size: var(--fs-15); text-align: start; }
.k-msheet-row + .k-msheet-row { border-block-start: var(--hairline) solid var(--line); }
.k-msheet-row[aria-current="page"] { color: var(--text); font-weight: var(--weight-semibold); }
.k-msheet-row-l { flex: 1 1 0; min-inline-size: 0; }
.k-msheet-check { color: var(--crimson); }
.k-msheet-slot { min-inline-size: 0; }
.k-msheet-tools { display: flex; flex-direction: column; gap: var(--sp-12); }
/* the full-screen search sheet: the canonical field with Cancel beside it */
.k-msearch-head { display: flex; align-items: flex-start; gap: var(--sp-10); }
.k-msearch-head > .k-msheet-slot { flex: 1 1 0; }
.k-msearch-cancel { min-block-size: var(--hit-coarse); font-size: var(--fs-15); color: var(--text-2); }
/* the phone title bar (15a): hidden above the phone tier */
.k-ptitle { display: none; }
/* a review account (store.js KOS.dataMode) names itself in the header */
.k-datamode { white-space: nowrap; cursor: pointer; }
.k-bell-badge { font-size: 0; }
.k-bell-badge:not([data-state~="is-on"]) { display: none; }
/* the sync state is an 8px dot drawn INSIDE a real button: on touch the
   button takes the 44px target, so the dot itself was stretched into an
   8×44 pill (phone review) */
.k-syncdot { --sync-c: var(--muted); position: relative; inline-size: var(--hit); block-size: var(--hit); flex: 0 0 auto; padding: 0; border-radius: 50%; background: none; box-shadow: none; font-size: 0; color: transparent; overflow: hidden; }
/* centred absolutely: the chip's status label (font-size 0) still took a
   grid row of its own and pushed the dot to the top */
.k-syncdot::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--sync-c); box-shadow: 0 0 0 var(--rail-mark) color-mix(in oklch, var(--sync-c) 18%, transparent); }
.k-syncdot:hover { background: var(--s1); }
.k-syncdot[data-sync="ok"] { --sync-c: var(--teal); }
.k-syncdot[data-sync="busy"] { --sync-c: var(--amber); }
.k-syncdot[data-sync="error"] { --sync-c: var(--red); }


/* ---------- the main rail ---------- */
#rail {
position: relative;
z-index: var(--z-sticky);
flex: 0 0 auto;
inline-size: var(--rail-w);
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-18) var(--sp-14) var(--sp-16);
border-inline-end: var(--hairline) solid var(--line);
background: var(--bg);
}
.k-rail-item {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-12);
padding: var(--sp-10) var(--sp-12);
border-radius: var(--r-10);
color: var(--text-2);
font-size: var(--fs-15);
font-weight: var(--weight-medium);
text-align: start;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.k-rail-item:hover { background: var(--s1); color: var(--text); }
.k-rail-tile {
inline-size: var(--tile);
block-size: var(--tile);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-9);
color: var(--muted);
font: var(--weight-semibold) var(--fs-16) / 1 var(--font-kanji);
}
.k-rail-count { margin-inline-start: auto; font: var(--weight-medium) var(--fs-11) var(--font-mono); color: var(--muted); }
.k-rail-count:empty { display: none; }
.k-rail-item[aria-current="page"] { color: var(--text); }
.k-rail-item[aria-current="page"] .k-rail-tile {
background: linear-gradient(150deg, var(--crimson-hi), var(--crimson-lo));
color: var(--crimson-ink);
box-shadow: var(--tile-lift);
}
.k-rail-item[aria-current="page"]::before {
content: "";
position: absolute;
inset-inline-start: calc(var(--sp-14) * -1);
inset-block: 22%;
inline-size: var(--rail-mark);
border-radius: 0 var(--rail-mark) var(--rail-mark) 0;
background: var(--crimson);
}
.k-rail-toggle {
position: absolute;
inset-block-start: var(--sp-16);
inset-inline-end: calc(var(--sp-12) * -1);
z-index: var(--z-sticky);
inline-size: var(--sp-24);
block-size: var(--sp-24);
display: grid;
place-items: center;
border-radius: 50%;
background: var(--s2);
border: var(--hairline) solid var(--line);
color: var(--muted);
font-size: var(--fs-12);
}
.k-rail-toggle:hover { color: var(--text); }
/* touch (an iPad): the touch minimum raised its HEIGHT to 44px, so the
   tab drew as a squashed oval reaching down onto the subject spine. It
   keeps the desktop's place on the rail's edge and stays a circle, at the
   documented dense size (invariant 69). */
@media (pointer: coarse) {
.k-rail-toggle { min-inline-size: var(--hit-dense); min-block-size: var(--hit-dense); padding: 0; }
}
/* the profile chip: avatar in an HP ring, level, state and gold */
.k-profile { inline-size: 100%; display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-8) var(--sp-10) var(--sp-8) var(--sp-8); border-radius: var(--r-16); background: var(--s1); box-shadow: none; text-align: start; }
.k-profile:hover { background: var(--s2); }
.k-profile-ring { --ring: var(--teal); inline-size: var(--icon-btn); block-size: var(--icon-btn); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring) 0 var(--hp, 100%), var(--line) var(--hp, 100%) 100%); }
.k-profile[data-hp="strained"] .k-profile-ring { --ring: var(--amber); }
.k-profile[data-hp="critical"] .k-profile-ring { --ring: var(--alarm); }
.k-profile-txt { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; line-height: var(--lh-snug); }
.k-profile-name { font-size: var(--fs-13); font-weight: var(--weight-semibold); }
.k-profile-meta { display: flex; gap: var(--sp-6); font-size: var(--fs-11-5); color: var(--muted); }
.k-profile-state { color: var(--teal); }
.k-profile[data-hp="strained"] .k-profile-state { color: var(--amber); }
.k-profile[data-hp="critical"] .k-profile-state { color: var(--alarm); }
.k-profile-gold { margin-inline-start: auto; font-family: var(--font-mono); color: var(--amber); }
.k-avatar { inline-size: var(--avatar, var(--sp-32)); block-size: var(--avatar, var(--sp-32)); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--s2); }
.k-avatar > img, .k-avatar > svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-avatar > .k-avatar-art { object-fit: contain; }
/* a painted frame (34p): a keyed picture whose inner 66% holds the avatar,
   drawn outside any HP ring round it like the CSS frames */
.k-avatar-frame-art { position: absolute; inset-block-start: calc(-26% - var(--fo)); inset-inline-start: calc(-26% - var(--fo)); inline-size: calc(152% + 2 * var(--fo)); block-size: calc(152% + 2 * var(--fo)); max-inline-size: none; object-fit: contain; pointer-events: none; }
.k-avatar-host:has(> .k-avatar-frame-art)::before, .k-avatar-host:has(> .k-avatar-frame-art)::after { display: none; }
/* a worn frame (frame 22a): drawn by the host outside the portrait AND
   outside the HP ring around it (--frame-out, set by each ring), clear of
   the ring by a gap, so it never covers the arc. Two layers: ::before the
   band or orbit, ::after the ornament (studs, petals, bead, moon). */
.k-avatar-host { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%;
  --fb: var(--frame-b-s); --fgap: var(--frame-gap-s);
  --fo: calc(var(--frame-out, 0px) + var(--fgap)); }
.k-avatar-host[data-fsize="m"] { --fb: var(--frame-b-m); --fgap: var(--frame-gap-m); }
.k-avatar-host[data-fsize="l"] { --fb: var(--frame-b-l); --fgap: var(--frame-gap-l); }
.k-avatar-host[data-frame]::before, .k-avatar-host[data-frame]::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.k-avatar-host[data-frame]::before { inset: calc(-1 * (var(--fo) + var(--fb))); border: var(--fb) solid var(--frame-c, var(--line)); }
/* Gilt ring: gold; at hero size a fine outer line and engraved studs */
.k-avatar-host[data-frame="frame-gold"] { --frame-c: var(--frame-gold); }
.k-avatar-host[data-frame="frame-gold"][data-fsize="l"]::before { box-shadow: 0 0 0 var(--fgap) var(--frame-ground, var(--bg)), 0 0 0 calc(var(--fgap) + var(--hairline)) var(--frame-gold); }
.k-avatar-host[data-frame="frame-gold"][data-fsize="l"]::after { inset: calc(-1 * (var(--fo) + var(--fb))); background: repeating-conic-gradient(var(--frame-ground, var(--bg)) 0 3deg, transparent 3deg 30deg); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--fb) * 0.7), var(--text) calc(100% - var(--fb) * 0.7), var(--text) calc(100% - var(--fb) * 0.3), transparent calc(100% - var(--fb) * 0.3)); mask: radial-gradient(closest-side, transparent calc(100% - var(--fb) * 0.7), var(--text) calc(100% - var(--fb) * 0.7), var(--text) calc(100% - var(--fb) * 0.3), transparent calc(100% - var(--fb) * 0.3)); }
/* Kurenai bloom: crimson petals, no band — six small, eight at hero size */
.k-avatar-host[data-frame="frame-crimson"] { --frame-c: transparent; --petal-len: calc(var(--fb) * 2.4); }
.k-avatar-host[data-frame="frame-crimson"]::after { inset: calc(-1 * (var(--fo) + var(--petal-len))); background: repeating-conic-gradient(from -8deg, var(--frame-crimson) 0 16deg, transparent 16deg 60deg); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--petal-len)), var(--text) calc(100% - var(--petal-len) + var(--hairline))); mask: radial-gradient(closest-side, transparent calc(100% - var(--petal-len)), var(--text) calc(100% - var(--petal-len) + var(--hairline))); }
.k-avatar-host[data-frame="frame-crimson"][data-fsize="l"]::after { background: repeating-conic-gradient(from -7deg, var(--frame-crimson) 0 14deg, transparent 14deg 45deg); }
/* Jade band: a band and one bead at the top */
.k-avatar-host[data-frame="frame-jade"] { --frame-c: var(--frame-jade); }
.k-avatar-host[data-frame="frame-jade"]::after { inline-size: calc(var(--fb) * 2.4); block-size: calc(var(--fb) * 2.4); inset-block-start: calc(-1 * (var(--fo) + var(--fb) * 1.7)); inset-inline-start: 50%; transform: translateX(-50%); background: var(--frame-jade); box-shadow: 0 0 0 var(--hairline) var(--frame-ground, var(--bg)); }
/* Amethyst orbit: a thin orbit with a moon; a second, dotted orbit at hero size */
.k-avatar-host[data-frame="frame-amethyst"] { --frame-c: var(--frame-amethyst); --fb: var(--ring-1-5); }
.k-avatar-host[data-frame="frame-amethyst"][data-fsize="l"]::before { outline: var(--hairline) dotted var(--frame-amethyst); outline-offset: var(--fgap); }
.k-avatar-host[data-frame="frame-amethyst"]::after { inset: calc(-1 * (var(--fo) + var(--fb) + var(--moon) / 2)); background: radial-gradient(circle at 50% calc(var(--moon) / 2), var(--frame-amethyst) calc(var(--moon) / 2), transparent calc(var(--moon) / 2 + var(--hairline))); transform: rotate(42deg); --moon: var(--frame-moon-s); }
.k-avatar-host[data-frame="frame-amethyst"][data-fsize="l"]::after { --moon: var(--frame-moon-l); }
/* each HP ring says how far outside the portrait it reaches */
.k-profile-ring { --frame-out: var(--bar-3); }
#cols[data-rail="compact"] .k-profile, #cols[data-tree="open"]:not([data-rail="full"]) .k-profile, #cols[data-tree="closed"]:not([data-rail="full"]) .k-profile { inline-size: auto; padding: 0; background: none; }
#cols[data-rail="compact"] .k-profile-txt, #cols[data-tree="open"]:not([data-rail="full"]) .k-profile-txt, #cols[data-tree="closed"]:not([data-rail="full"]) .k-profile-txt { display: none; }
.k-rail-more { display: none; }
.k-rail-foot { margin-block-start: auto; padding-block-start: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }

/* the compact rail: tiles only (the user's choice, or beside the spine) */
#cols[data-rail="compact"] #rail, #cols[data-tree="open"]:not([data-rail="full"]) #rail, #cols[data-tree="closed"]:not([data-rail="full"]) #rail {
inline-size: var(--rail-w-compact);
align-items: center;
padding-inline: 0;
gap: var(--sp-6);
}
#cols[data-rail="compact"] .k-rail-item, #cols[data-tree="open"]:not([data-rail="full"]) .k-rail-item, #cols[data-tree="closed"]:not([data-rail="full"]) .k-rail-item {
padding: var(--sp-4) 0;
background: none;
}
#cols[data-rail="compact"] .k-rail-item::before, #cols[data-tree="open"]:not([data-rail="full"]) .k-rail-item::before, #cols[data-tree="closed"]:not([data-rail="full"]) .k-rail-item::before {
inset-inline-start: calc(var(--sp-20) * -1);
}
#cols[data-rail="compact"] .k-rail-tile, #cols[data-tree="open"]:not([data-rail="full"]) .k-rail-tile, #cols[data-tree="closed"]:not([data-rail="full"]) .k-rail-tile {
inline-size: var(--sp-32);
block-size: var(--sp-32);
border-radius: var(--r-10);
font-size: var(--fs-17);
}
#cols[data-rail="compact"] .k-rail-label, #cols[data-tree="open"]:not([data-rail="full"]) .k-rail-label, #cols[data-tree="closed"]:not([data-rail="full"]) .k-rail-label,
#cols[data-rail="compact"] .k-rail-count, #cols[data-tree="open"]:not([data-rail="full"]) .k-rail-count, #cols[data-tree="closed"]:not([data-rail="full"]) .k-rail-count {
position: absolute;
inline-size: var(--hairline);
block-size: var(--hairline);
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
#cols[data-rail="compact"] .k-rail-foot, #cols[data-tree="open"]:not([data-rail="full"]) .k-rail-foot, #cols[data-tree="closed"]:not([data-rail="full"]) .k-rail-foot {
border-block-start: 0;
}

/* ---------- the spec spine ---------- */
#tree {
flex: 0 0 auto;
inline-size: var(--spine-w);
overflow-y: auto;
padding: var(--sp-18) var(--sp-12);
border-inline-end: var(--hairline) solid var(--line);
}
/* a closed spine keeps a strip, like the inspector (review B): the
   expand button and the subject written down it; the drawer tiers hide it */
#cols[data-tree="closed"] #tree { inline-size: var(--sp-48); padding-inline: var(--sp-8); overflow: hidden; }
#tree-scrim { display: none; }

/* ---------- the stage ---------- */
#stage {
flex: 1 1 0;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: var(--sp-20);
padding: var(--sp-20) var(--sp-24) var(--sp-28);
overflow-y: auto;
}
.k-stage-head { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; min-inline-size: 0; }
.k-stage-head:has(> #subnav[hidden]):has(> #page-actions[hidden]) { display: none; }
#subnav { max-inline-size: 100%; }
.k-page-actions { display: flex; align-items: center; gap: var(--sp-10); margin-inline-start: auto; }
#main { display: flex; flex-direction: column; gap: var(--sp-20); min-inline-size: 0; }
/* a view that lays out its own full-bleed columns (the topic page, the
   assistant) asks for the stage without padding */
#stage[data-bleed] { padding: 0; gap: 0; }
#stage[data-bleed] #main { flex: 1 1 0; min-block-size: 0; }

/* ---------- layout primitives ---------- */
.k-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-20)); }
.k-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--sp-8)); }
.k-row { display: flex; align-items: center; gap: var(--row-gap, var(--sp-10)); min-inline-size: 0; }
.k-grid { display: grid; gap: var(--grid-gap, var(--sp-20)); grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr)); }
.k-split { display: grid; gap: var(--split-gap, var(--sp-20)); grid-template-columns: repeat(var(--split, 2), minmax(0, 1fr)); }
.k-sidebar { display: grid; gap: var(--sidebar-gap, var(--sp-20)); grid-template-columns: minmax(0, 1fr) var(--sidebar-w, var(--aside-w)); align-items: start; }
.k-spacer { margin-inline-start: auto; }

/* ---------- the five tiers, widest first ---------- */
@media (max-width: 1240px) {
.k-sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) {
/* the rail is tiles here unless opened (an iPad in portrait): opened
   ("full"), it lays over the page at its full width instead of pushing
   it narrower, and closes again on a destination (main.js) */
#cols:not([data-rail="full"]) #rail { align-items: center; padding-inline: 0; }
#cols:not([data-rail="full"]) .k-rail-item { padding: var(--sp-4) 0; }
#cols:not([data-rail="full"]) .k-rail-item::before { inset-inline-start: calc(var(--sp-20) * -1); }
#cols:not([data-rail="full"]) .k-rail-label, #cols:not([data-rail="full"]) .k-rail-count { position: absolute; inline-size: var(--hairline); block-size: var(--hairline); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the profile chip compacts with the rail: its ring alone, as in the compact rail */
#cols:not([data-rail="full"]) .k-profile { inline-size: auto; padding: 0; background: none; }
#cols:not([data-rail="full"]) .k-profile-txt { display: none; }
#cols:not([data-rail="full"]) .k-rail-foot { border-block-start: 0; }
#cols[data-rail="full"] #rail { inline-size: var(--rail-w-full); margin-inline-end: calc(var(--rail-w-compact) - var(--rail-w-full)); z-index: var(--z-drawer); box-shadow: var(--elev-3); }
.k-split { grid-template-columns: repeat(min(var(--split, 2), 2), minmax(0, 1fr)); }
}

@media (max-width: 860px) {
#cols[data-tree="closed"] #tree { display: none; }
#tree { position: fixed; inset-block: var(--topbar-h) 0; inset-inline-start: 0; z-index: var(--z-drawer); background: var(--bg); box-shadow: var(--elev-3); }
/* the scrim is an unclassed <button>, so it took base.css's pill radius
   and drew as a screen-sized ellipse over the page (phone review) */
#cols[data-tree="open"] #tree-scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); padding: 0; border-radius: 0; box-shadow: none; background: var(--shadow-ink); }
#stage { padding: var(--sp-16) var(--sp-16) var(--sp-24); }
.k-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
/* the phone stage scrolls a full-bleed topic page itself: #main grows with
   the page, so its clearance under the tab bar is in the scroll (the
   Assistant keeps its fixed height for the composer) */
#stage[data-bleed] #main:has(> .k-topic) { flex: 1 0 auto; }
/* the rail becomes the bottom tab bar (invariant 40) */
#rail {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: var(--z-tabbar);
inline-size: auto;
block-size: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
flex-direction: row;
justify-content: space-around;
align-items: stretch;
padding: 0 0 env(safe-area-inset-bottom);
border-inline-end: 0;
border-block-start: var(--hairline) solid var(--line);
}
#cols[data-rail="compact"] #rail, #cols[data-tree="open"]:not([data-rail="full"]) #rail, #cols[data-tree="closed"]:not([data-rail="full"]) #rail {
inline-size: auto;
flex-direction: row;
padding-inline: 0;
}
.k-rail-item { flex: 1 1 0; min-inline-size: 0; flex-direction: column; justify-content: center; gap: var(--sp-2); padding: var(--sp-6) 0; font-size: var(--fs-11); color: var(--muted); }
.k-rail-item:hover { background: none; }
/* 15a: no top mark; the lit tab is its crimson tile and a bright label */
.k-rail-item[aria-current="page"]::before, .k-rail-more[data-state~="active"]::before { display: none; }
.k-rail-item[aria-current="page"], .k-rail-more[data-state~="active"] { font-weight: var(--weight-semibold); }
.k-rail-more[data-state~="active"] .k-rail-tile { background: linear-gradient(150deg, var(--crimson-hi), var(--crimson-lo)); color: var(--crimson-ink); box-shadow: var(--tile-lift); }
.k-rail-tile { inline-size: var(--tab-tile); block-size: var(--tab-tile); font-size: var(--fs-15); }
.k-rail-label { white-space: nowrap; }
/* the tree states' compact-rail rules (ID-scoped) must not clip the tab
   labels on a phone, where the rail is the tab bar */
#cols[data-rail="compact"] .k-rail-label, #cols[data-tree="open"]:not([data-rail="full"]) .k-rail-label, #cols[data-tree="closed"]:not([data-rail="full"]) .k-rail-label { position: static; inline-size: auto; block-size: auto; clip: auto; overflow: visible; }
#cols[data-rail="compact"] .k-rail-item, #cols[data-tree="open"]:not([data-rail="full"]) .k-rail-item, #cols[data-tree="closed"]:not([data-rail="full"]) .k-rail-item { padding: var(--sp-6) 0; }
.k-rail-label { position: static; inline-size: auto; block-size: auto; clip: auto; overflow: visible; }
.k-rail-foot, .k-rail-toggle { display: none; }
#cols[data-rail="full"] #rail { inline-size: auto; margin-inline-end: 0; box-shadow: none; z-index: var(--z-tabbar); }
:root[data-shell="ready"] .k-rail-more { display: flex; }
#topbar { padding-inline: var(--sp-12); gap: var(--sp-8); padding-block-start: env(safe-area-inset-top); block-size: calc(var(--topbar-h) + env(safe-area-inset-top)); }
.k-topbar-brand { inline-size: auto; }
.k-topbar-end { inline-size: auto; }
#main { padding-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
/* 15a: the compact header — the logo, search, the bell, the sync dot; the
   wordmark, the clock and the Assistant emblem (in More) are dropped */
.k-brand-name, .k-clock { display: none; }
/* the section strip becomes the title bar's section switch */
:root[data-shell="ready"] .k-stage-head { display: none; }
.k-ptitle { display: flex; align-items: flex-end; gap: var(--sp-8); }
.k-ptitle-txt { flex: 1 1 0; min-inline-size: 0; }
.k-ptitle-row { display: flex; align-items: center; gap: var(--sp-8); margin-block-start: var(--sp-4); }
.k-ptitle-h { margin: 0; font-size: var(--fs-27); letter-spacing: var(--track-h1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-ptitle-switch { flex: 0 0 auto; background: var(--s1); font-size: var(--fs-11); color: var(--text-2); }
.k-ptitle-tools { display: flex; align-items: center; gap: var(--sp-8); }
.k-ptitle-tools > .k-btn { inline-size: var(--icon-btn); block-size: var(--icon-btn); padding: 0; justify-content: center; border-radius: 50%; }
.k-ptitle-tools .k-btn-label { display: none; }
/* invariant 72: canonical search and the three low-frequency destinations
   hide only once mobile-shell.js has mounted their replacements */
:root[data-shell="ready"] #searchbox { display: none; }
/* …except inside the full-screen search sheet, where it is the field, and
   the result list runs full width under it: the domain chips as a
   scroller, the groups as plain rows, no "/" hint and no snippet column */
:root[data-shell="ready"] .k-msheet #searchbox { display: flex; flex-wrap: wrap; inline-size: 100%; min-block-size: var(--hit-coarse); }
.k-msheet .k-search-key, .k-msheet .k-sr-snip { display: none; }
.k-msheet .k-search-input { font-size: var(--fs-16); }
.k-msheet .k-search-results { position: fixed; inset: calc(env(safe-area-inset-top) + var(--sp-12) + var(--hit-coarse) + var(--sp-12)) 0 0; max-block-size: none; margin: 0; padding: 0 var(--sp-12) var(--sp-24); border-radius: 0; background: var(--s1); box-shadow: none; overflow-y: auto; }
.k-msheet .k-sr-scopes { display: flex; gap: var(--sp-6); padding: var(--sp-4) var(--sp-4) var(--sp-8); overflow-x: auto; scrollbar-width: none; }
.k-msheet .k-sr-scope { flex: 0 0 auto; min-block-size: var(--hit-dense); gap: var(--sp-4); }
.k-sr-scope-n { font: var(--fs-11) var(--font-mono); opacity: 0.7; }
.k-msheet .k-sr-group + .k-sr-group { margin-block-start: 0; }
.k-msheet .k-sr-item { min-block-size: var(--hit-coarse); align-items: center; border-radius: 0; border-block-end: var(--hairline) solid var(--line); }
.k-msheet .k-sr-title { font-size: var(--fs-15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-msheet .k-sr-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-msheet .k-sr-sub { font-size: var(--fs-12-5); }
:root[data-shell="ready"] #mobile-search-trigger { inline-size: var(--icon-btn); block-size: var(--icon-btn); display: grid; place-items: center; border-radius: 50%; background: var(--s1); font-size: var(--fs-18); }
:root[data-shell="ready"] #rail [data-section="governor"], :root[data-shell="ready"] #rail [data-section="assistant"], :root[data-shell="ready"] #rail [data-section="system"] { display: none; }
}

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

@media (prefers-reduced-motion: reduce) {
#assistant-trigger, .k-rail-item, #rail { transition: none; animation: none; }
}

}