/* ============================================================================
 * styles.css — the kyr web shell: the frame that wears the product
 *
 * docs/BUNDLE_CONTRACT.md §13. The chrome reads only the --k-* tokens of
 * css/tokens/base.css, which a face's token sheet sets. Every selector is
 * scoped to the shell's own markup: the frame's ids and k- classes (#k-app,
 * .k-topbar, .k-rail, .k-overlay, .k-toast, .k-pill, .k-menu) and kyr's own
 * views under .k-views. No element, universal or attribute selector stands
 * alone, so nothing here reaches a bundle's markup in #bundle-root, which
 * inherits the tokens, the UI font and the ink, and nothing else.
 *
 *   1 the document   2 the frame   3 the rail   4 desktop states   5 phones
 *   6 controls       7 overlays    8 toast, pill, menus           9 kyr's views
 * ==========================================================================*/

/* --- 1. the document --------------------------------------------------------*/

html { background: var(--k-bg); }
body { margin: 0; background: var(--k-bg); color: var(--k-ink); font-family: var(--k-font-ui); }

/* a composed face paints nothing of the frame until its bundles mounted (a failsafe shows it after 6 s) */
html[data-face]:not(.face-ready) #k-app { visibility: hidden; animation: k-reveal 0s linear 6s forwards; }
@keyframes k-reveal { to { visibility: visible; } }

:where(.k-topbar, .k-rail, .k-rail-show, .k-overlay, .k-toast, .k-pill, .k-menu, .k-views, .k-bottombar),
:where(.k-topbar, .k-rail, .k-rail-show, .k-overlay, .k-toast, .k-pill, .k-menu, .k-views, .k-bottombar) :where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* --- 2. the frame: the rail fixed on the left, the content to its right ------*/

.k-app {
  --k-rail-w: 248px;
  --k-rail-now: var(--k-rail-w);
  --k-rail-line: color-mix(in srgb, var(--k-rail-ink) 13%, var(--k-rail-bg));
  --k-rail-quiet: color-mix(in srgb, var(--k-rail-ink) 70%, var(--k-rail-bg));
  --k-rail-guide: color-mix(in srgb, var(--k-rail-ink) 30%, var(--k-rail-bg)); /* the children's tree lines */
  --k-rail-hover: color-mix(in srgb, var(--k-rail-ink) 8%, transparent);
  min-height: 100vh;
  min-height: 100dvh;
}
.k-content {
  display: block;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  margin-left: var(--k-rail-now);
  transition: margin-left 180ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
#bundle-root { font-family: var(--k-font-ui); color: var(--k-ink); }
.k-views[hidden] { display: none; }

/* signed out under a face with a public view: that view alone, full bleed */
.k-app[data-public] { --k-rail-now: 0px; }
.k-app[data-public] :is(.k-topbar, .k-rail, .k-rail-show, .k-backdrop, .k-bottombar) { display: none; }

/* --- 3. the rail ------------------------------------------------------------*/

.k-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--k-rail-now);
  background: var(--k-rail-bg);
  color: var(--k-rail-ink);
  border-right: 1px solid var(--k-rail-line);
  font-family: var(--k-font-ui);
  font-size: 0.875rem;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
.k-rail:focus { outline: none; }

.k-rail-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 60px;
  padding: 10px 10px 10px 12px;
}
.k-rail-brand, .k-topbar-brand {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: var(--k-radius);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.k-rail-brand:hover, .k-topbar-brand:hover { background: var(--k-rail-hover); }

.k-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--k-accent);
}
.k-mark:empty { display: none; }
.k-rail .k-mark, .k-topbar .k-mark { color: var(--k-rail-accent, var(--k-accent)); } /* on the rail's own ground */
.k-mark svg, .k-mark img { display: block; width: 100%; height: 100%; }
.k-mark svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.k-brand-name {
  min-width: 0;
  overflow: hidden;
  color: var(--k-rail-ink);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
:root:not([data-face]) .k-brand-name { font-family: var(--k-font-mono); font-weight: 700; letter-spacing: -0.02em; }

/* the menu's box (1.17.0): the menu scrolls in it; a fade at an edge with more beyond it, and at the foot the sign that says how many
   entries are below and brings them into view (app.js railMore). Both come and go with one short opacity step, never while idle. */
.k-rail-scroll { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.k-rail-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 10px 16px;
  scrollbar-width: thin;
}
.k-rail-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
}
.k-rail-fade-top { top: 0; background: linear-gradient(var(--k-rail-bg), transparent); }
.k-rail-fade-bottom { bottom: 0; height: 48px; background: linear-gradient(transparent, var(--k-rail-bg) 62%); }
.k-rail-scroll[data-above] .k-rail-fade-top, .k-rail-scroll[data-below] .k-rail-fade-bottom { opacity: 1; }
.k-rail-more {
  appearance: none;
  position: absolute;
  bottom: 6px;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 20px);
  min-height: 28px;
  margin: 0;
  padding: 3px 12px 3px 8px;
  border: 1px solid var(--k-rail-line);
  border-radius: 999px;
  background: var(--k-rail-bg);
  color: var(--k-rail-ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity 150ms, transform 150ms, visibility 0s linear 150ms, background-color 120ms;
}
.k-rail-more svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-rail-more:hover { background: color-mix(in srgb, var(--k-rail-ink) 6%, var(--k-rail-bg)); color: var(--k-rail-active-ink); }
.k-rail-scroll[data-below] .k-rail-more { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 150ms, transform 150ms, background-color 120ms; }
.k-rail-group { display: flex; flex-direction: column; gap: 1px; }
.k-rail-group[hidden] { display: none; }
.k-rail-group + .k-rail-group { margin-top: 18px; }
.k-rail-group-title {
  margin: 0 0 4px;
  padding: 0 10px;
  overflow: hidden;
  color: var(--k-rail-quiet);
  font-size: 0.75rem;
  font-weight: 550;
  line-height: 20px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.k-rail-note {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: var(--k-radius);
  background: color-mix(in srgb, var(--k-danger) 12%, transparent);
  color: color-mix(in srgb, var(--k-danger) 65%, var(--k-rail-ink));
  font-size: 0.75rem;
  line-height: 1.4;
}
/* a page older than its server: Reload under the line (1.14.1), in the note's own ink */
.k-rail .k-rail-note .k-rail-reload { display: flex; margin-top: 6px; border-color: currentColor; color: inherit; }

.k-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--k-radius);
  background: transparent;
  color: var(--k-rail-ink);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}
.k-item[hidden] { display: none; }
.k-item:hover { background: var(--k-rail-hover); color: var(--k-rail-active-ink); }
.k-item.is-active { background: var(--k-rail-active-bg); color: var(--k-rail-active-ink); font-weight: 600; }
.k-item.is-off { opacity: 0.5; cursor: not-allowed; }
.k-item.is-off:hover { background: transparent; color: var(--k-rail-ink); }

.k-item-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}
.k-item-ico svg, .k-iconbtn svg, .k-btn-ico svg, .k-caret svg, .k-rail-tab svg, .k-rail-show svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.k-rail-menu[data-icons="none"] .k-item-ico { display: none; }
.k-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* the place one is at: a bar of the rail's accent on the item's edge, beside the active surface */
.k-item.is-active { position: relative; box-shadow: inset 3px 0 0 var(--k-rail-accent, var(--k-rail-active-ink)); }

/* --- 3a. an item that holds children (1.11.0, BUNDLE_CONTRACT §15): rows (a project each) and, under the open row, its entries */
.k-item-tree { display: flex; flex-direction: column; }
.k-item-tree[hidden] { display: none; }
.k-caret { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: -4px -6px -4px auto; border-radius: calc(var(--k-radius) * 0.75); color: var(--k-rail-quiet); transition: transform 160ms, background-color 120ms; }
.k-caret svg { width: 16px; height: 16px; }
.k-caret:hover { background: var(--k-rail-hover); color: var(--k-rail-active-ink); }
.k-item-tree:not(.is-open) .k-item-caret { transform: rotate(-90deg); }
.k-rail-children[hidden], .k-rail-children:empty { display: none; }
/* the children as a tree (1.15.0, §16), the drive's folder tree in the rail: a line per row and per entry, its guides like tree(1) in the
   rail's quiet line (a column per level, │ under every level that has more below, ├ or └ for the line itself, each under the chevron
   of the row it hangs from; the top rows hang from the item's icon), the chevron that folds a row, its icon in its tone, its label and
   its note on one line; the way to where one is in the rail's accent, down every line it follows and into the line it ends on */
.k-rail-children {
  --k-g: 14px;          /* a level */
  --k-tree-gap: 4px;
  --k-tree-caret: 16px;
  --k-tree-ico: 18px;
  --k-tree-line: 20px;  /* the first line of a row: its chevron, icon and connector sit on it */
  --k-tree-pad: 5px;
  --k-g-x: calc(var(--k-tree-gap) + var(--k-tree-caret) / 2); /* a guide's line: under the chevron of the row above */
  display: flex;
  flex-direction: column;
  margin: 2px 0 6px 4px;
}
.k-child {
  --k-tree-mid: calc(var(--k-tree-pad) + var(--k-tree-line) / 2);
  appearance: none;
  display: grid;
  grid-template-columns: auto var(--k-tree-caret) var(--k-tree-ico) minmax(0, 1fr);
  column-gap: var(--k-tree-gap);
  align-items: start;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--k-tree-pad) 8px var(--k-tree-pad) 4px;
  border: 0;
  border-radius: calc(var(--k-radius) * 0.75);
  background: transparent;
  color: var(--k-rail-ink);
  font: inherit;
  font-size: 0.8125rem;
  line-height: var(--k-tree-line);
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}
.k-child:hover { background: var(--k-rail-hover); color: var(--k-rail-active-ink); }
.k-tree-guides { display: flex; align-self: stretch; margin-block: calc(-1 * var(--k-tree-pad)); }
.k-g { position: relative; flex: none; width: var(--k-g); }
.k-g::before, .k-g::after { content: none; position: absolute; background: var(--k-rail-guide); }
.k-g.is-pipe::before, .k-g.is-tee::before { content: ""; left: var(--k-g-x); top: 0; bottom: 0; width: 1px; }
.k-g.is-elbow::before { content: ""; left: var(--k-g-x); top: 0; height: calc(var(--k-tree-mid) + 1px); width: 1px; }
.k-g.is-tee::after, .k-g.is-elbow::after { content: ""; left: var(--k-g-x); right: calc(-1 * var(--k-tree-gap) + 1px); top: var(--k-tree-mid); height: 1px; }
.k-child.is-leaf .k-g:last-child::after { right: calc(-2 * var(--k-tree-gap) - var(--k-tree-caret) + 3px); } /* a leaf: on to its icon */
.k-g.is-pipe.is-hot::before, .k-g.is-tee.is-through::before, .k-g.is-in::before, .k-g.is-in::after { background: var(--k-rail-accent, var(--k-rail-active-ink)); }
.k-g.is-tee.is-in::before { /* the way comes down to the line's middle and turns in; the plain line goes on below */
  background: linear-gradient(var(--k-rail-accent, var(--k-rail-active-ink)) 0 var(--k-tree-mid), transparent var(--k-tree-mid)),
              linear-gradient(to right, var(--k-rail-guide) 0 1px, transparent 1px);
}
.k-g.is-hot::before, .k-g.is-through::before, .k-g.is-in::before { width: 2px; }
.k-g.is-in::after { height: 2px; }
.k-tree-caret { display: grid; place-items: center; width: var(--k-tree-caret); height: var(--k-tree-line); border-radius: 3px; color: var(--k-rail-quiet); }
.k-tree-caret svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 120ms; }
.k-tree-caret.is-open svg { transform: rotate(90deg); }
.k-tree-caret:not(:empty):hover { background: var(--k-rail-hover); color: var(--k-rail-active-ink); }
.k-child .k-item-ico { width: var(--k-tree-ico); height: var(--k-tree-line); color: var(--k-rail-quiet); }
.k-child .k-item-ico svg { width: 16px; height: 16px; }
.k-child[data-tone="1"] .k-item-ico { color: var(--k-rail-tone-1, var(--k-rail-quiet)); }
.k-child[data-tone="2"] .k-item-ico { color: var(--k-rail-tone-2, var(--k-rail-quiet)); }
.k-child[data-tone="3"] .k-item-ico { color: var(--k-rail-tone-3, var(--k-rail-quiet)); }
.k-child[data-tone="4"] .k-item-ico { color: var(--k-rail-tone-4, var(--k-rail-quiet)); }
.k-child[data-tone="5"] .k-item-ico { color: var(--k-rail-tone-5, var(--k-rail-quiet)); }
.k-child[data-tone="6"] .k-item-ico { color: var(--k-rail-tone-6, var(--k-rail-quiet)); }
.k-child[data-tone="7"] .k-item-ico { color: var(--k-rail-tone-7, var(--k-rail-quiet)); }
.k-child[data-tone="8"] .k-item-ico { color: var(--k-rail-tone-8, var(--k-rail-quiet)); }
.k-child-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* one line, as tree(1)'s; the whole words in the title */
.k-child-row .k-child-label { color: var(--k-rail-ink); font-family: var(--k-font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; }
.k-child-note { color: var(--k-rail-quiet); font-size: 0.75rem; }
.k-child-row.is-active { background: color-mix(in srgb, var(--k-rail-active-bg) 55%, transparent); }
.k-child-row.is-active .k-child-label { color: var(--k-rail-active-ink); }
/* a row that recedes (a retired project): its words in the quiet ink, its icon untoned; still read whole */
.k-child-row.is-quiet .k-child-label { color: var(--k-rail-quiet); font-weight: 500; }
.k-child-row.is-quiet .k-child-note { font-style: italic; }
.k-child-row.is-quiet .k-item-ico { color: var(--k-rail-quiet); opacity: 0.7; }
.k-child-item.is-active { background: var(--k-rail-active-bg); color: var(--k-rail-active-ink); font-weight: 600; } /* the accent's way leads into it */
/* a child chosen: the item above it is where one is, not what one is on */
.k-item-tree:has(.k-child.is-active) > .k-item.is-active { background: transparent; box-shadow: none; }

/* --- 3b. the foot is the System group: the platform's pages, who is signed in, the theme, the way out */
.k-rail-foot { flex: none; padding: 8px 10px 10px; border-top: 1px solid var(--k-rail-line); background: color-mix(in srgb, var(--k-rail-ink) 3%, var(--k-rail-bg)); }
.k-rail-system .k-rail-group-title { margin-bottom: 2px; }
.k-rail-system-items { display: flex; flex-direction: column; gap: 1px; }
.k-item-small { min-height: 30px; padding: 4px 10px; font-size: 0.8125rem; }
.k-item-small .k-item-ico svg { width: 16px; height: 16px; }

/* the account: who (their account page), the theme, the face's language, sign in or out */
.k-account { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--k-rail-line); }
.k-scheme-compact { flex: 1 1 auto; min-width: 0; }
.k-scheme-compact .k-scheme-opt { flex-direction: row; min-height: 30px; padding: 4px; }
.k-scheme-compact .k-scheme-text { display: none; }
.k-scheme-compact .k-scheme-ico { width: 16px; height: 16px; }

/* the theme switch: three segments, each an icon and a word, the person's choice marked (the rail's account block; the phone's
   account menu sets its own colours below) */
.k-scheme {
  --k-scheme-line: var(--k-rail-line);
  --k-scheme-ink: var(--k-rail-quiet);
  --k-scheme-on-bg: var(--k-rail-active-bg);
  --k-scheme-on-ink: var(--k-rail-active-ink);
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--k-scheme-line);
  border-radius: var(--k-radius);
}
.k-scheme[hidden] { display: none; }
.k-scheme-opt {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 40px;
  padding: 5px 4px 4px;
  border-radius: calc(var(--k-radius) * 0.75);
  color: var(--k-scheme-ink);
  font-size: 0.71875rem;
  font-weight: 550;
  line-height: 1.15;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}
.k-scheme-opt:hover { color: var(--k-scheme-on-ink); background: color-mix(in srgb, var(--k-scheme-on-ink) 6%, transparent); }
.k-scheme-opt:has(.k-scheme-input:checked) { background: var(--k-scheme-on-bg); color: var(--k-scheme-on-ink); font-weight: 650; }
.k-scheme-opt:has(.k-scheme-input:focus-visible) { outline: 2px solid var(--k-focus); outline-offset: 1px; }
.k-scheme-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.k-scheme-ico { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.k-scheme-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-account-who {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--k-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.k-account-who[hidden] { display: none; }
.k-account-who:hover { background: var(--k-rail-hover); }
.k-account-who.is-active { background: var(--k-rail-active-bg); }
.k-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--k-accent);
  color: var(--k-on-accent);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1;
  text-transform: uppercase;
}
.k-account-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
/* the email: on one line, whole, at the first of three sizes it fits at (app.js fitEmail: data-fit 0, 1, 2 for 13, 12 and 11 px);
   until it is measured, and when none fits, on two lines broken at the @ (the <wbr> before it) */
.k-account-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--k-rail-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.k-account-name:is([data-fit="0"], [data-fit="1"], [data-fit="2"]) { display: block; white-space: nowrap; }
.k-account-name[data-fit="1"] { font-size: 0.75rem; line-height: 1.4; }
.k-account-name[data-fit="2"] { font-size: 0.6875rem; line-height: 1.5; }
/* the role line: the person's role in what the shown bundle says (ctx.setRole, §19), else the platform role; it wraps only between
   words and stops before the counts beside it (--k-badges-w, the width they take, app.js) */
.k-account-role { padding-right: var(--k-badges-w, 0px); color: var(--k-rail-quiet); font-size: 0.75rem; line-height: 1.3; overflow-wrap: normal; word-break: normal; }

/* who is signed in and, beside the name, the bundles' counts (ctx.setBadge, BUNDLE_CONTRACT §18): each a button of its own, a sibling
   of the account's, around a pill in the accent, its figures tabular. Open, the pills sit at the block's foot on the right, on the
   role's line (the role is one short word: the email keeps its whole width); in the icon rail and on the phone's top bar, a dot on
   the avatar's corner ringed in the rail's ground. A changed figure swaps in with one short step (two names of one keyframes: setting
   the other restarts it, no reflow). */
.k-account-row { position: relative; min-width: 0; }
.k-account-row[hidden] { display: none; }
.k-badges { position: absolute; right: 4px; bottom: 0; display: flex; gap: 2px; }
.k-badges[hidden] { display: none; }
.k-badge {
  appearance: none;
  display: grid;
  place-items: end center;
  min-width: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0 4px 5px; /* the pill's middle 15 px above the block's foot, as the role's line's: the block's 7 px padding, half its line */
  border: 0;
  border-radius: var(--k-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color 120ms;
}
.k-badge:hover { background: var(--k-rail-hover); }
.k-badge-num {
  display: block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--k-accent);
  color: var(--k-on-accent);
  font-size: 0.71875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}
.k-badge-num[data-swap="a"] { animation: k-badge-swap-a 180ms cubic-bezier(0.3, 0.7, 0.4, 1); }
.k-badge-num[data-swap="b"] { animation: k-badge-swap-b 180ms cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes k-badge-swap-a { from { opacity: 0; transform: scale(0.6); } }
@keyframes k-badge-swap-b { from { opacity: 0; transform: scale(0.6); } }
/* the corner (the phone's top bar here, the icon rail in 4): a 24 px target over the avatar's top right, the dot centred on it */
.k-topbar-who { position: relative; display: flex; }
.k-topbar-who[hidden] { display: none; }
.k-topbar-who .k-badges { top: -5px; right: auto; bottom: auto; left: 25px; flex-direction: column; } /* the 30 px avatar in its 44 px button: corner (37, 7) */
.k-topbar-who .k-badge { place-items: center; min-width: 24px; min-height: 24px; padding: 0; }
.k-topbar-who .k-badge-num { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 0.625rem; line-height: 16px; box-shadow: 0 0 0 2px var(--k-rail-bg); }
.k-topbar-who .k-badge:hover { background: transparent; }
.k-topbar-who .k-badge:hover .k-badge-num { box-shadow: 0 0 0 2px var(--k-rail-bg), 0 0 0 3px var(--k-rail-quiet); }
.k-account-actions { display: flex; align-items: center; gap: 2px; min-width: 0; }
.k-account-actions .k-btn-primary { flex: 1 1 auto; }
.k-account-actions .k-btn-quiet { margin-left: auto; }
.k-iconbtn.k-lang-btn { width: auto; gap: 5px; padding: 0 8px; }
.k-lang-code { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
.k-popover { position: relative; display: flex; }
.k-popover[hidden] { display: none; }
.k-popover-panel { position: absolute; left: 0; bottom: calc(100% + 6px); }

/* the edge: drag to resize; the tab hides the rail; the handle brings it back */
.k-rail-grip {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: 2;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}
.k-rail-grip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: transparent;
  transition: background-color 120ms;
}
.k-rail-grip:hover::after, .k-app.is-resizing .k-rail-grip::after, .k-rail-grip:focus-visible::after {
  background: color-mix(in srgb, var(--k-focus) 70%, transparent);
}
.k-app.is-resizing { cursor: col-resize; user-select: none; }
.k-app.is-resizing .k-content { transition: none; }

.k-rail-tab, .k-rail-show {
  appearance: none;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--k-rail-line);
  background: var(--k-rail-bg);
  color: var(--k-rail-ink);
  cursor: pointer;
}
.k-rail-tab {
  position: absolute;
  top: 50%;
  right: -12px;
  margin-top: -12px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  opacity: 0;
  transition: opacity 140ms;
}
.k-rail-tab svg { width: 14px; height: 14px; stroke-width: 2; }
.k-rail:hover .k-rail-tab, .k-rail-tab:focus-visible { opacity: 1; }
@media (hover: none) { .k-rail-tab { opacity: 1; } }
.k-rail-show {
  position: fixed;
  top: 50%;
  margin-top: -22px;
  left: 0;
  z-index: 30;
  width: 22px;
  height: 44px;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}
.k-rail-show[hidden] { display: none; }
.k-rail-show svg { width: 16px; height: 16px; stroke-width: 2; }

.k-topbar, #drawer-close, .k-backdrop { display: none; }

/* --- 4. desktop states: open, icons, hidden ---------------------------------*/

@media (min-width: 768px) {
  .k-app[data-rail="icons"] { --k-rail-now: 64px; }
  .k-app[data-rail="hidden"] { --k-rail-now: 0px; }
  .k-app[data-rail="hidden"] .k-rail { display: none; }
  .k-app[data-public] { --k-rail-now: 0px; }

  .k-app[data-rail="icons"] :is(.k-brand-name, .k-item-label, .k-caret, .k-account-text, .k-rail-note, .k-lang-code, .k-btn-label, .k-rail-grip, .k-rail-more-text) { display: none; }
  .k-app[data-rail="icons"] .k-rail-more { width: 30px; min-height: 30px; padding: 0; justify-content: center; } /* the chevron alone, its words its name */
  .k-app[data-rail="icons"] .k-rail-head { flex-direction: column; gap: 4px; padding: 12px 0 6px; }
  .k-app[data-rail="icons"] .k-rail-brand { flex: none; padding: 6px; }
  .k-app[data-rail="icons"] .k-chev { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
  .k-app[data-rail="icons"] :is(.k-rail-menu, .k-rail-foot) { padding-inline: 10px; }
  .k-app[data-rail="icons"] .k-rail-menu { scrollbar-width: none; }
  .k-app[data-rail="icons"] .k-rail-group-title { height: 1px; margin: 0 8px 8px; padding: 0; overflow: hidden; background: var(--k-rail-line); font-size: 0; }
  .k-app[data-rail="icons"] .k-rail-group:first-child .k-rail-group-title { display: none; }
  .k-app[data-rail="icons"] .k-rail-group + .k-rail-group { margin-top: 10px; }
  .k-app[data-rail="icons"] .k-item { justify-content: center; width: 44px; min-height: 40px; margin: 0 auto; padding: 0; }
  .k-app[data-rail="icons"] .k-rail-menu[data-icons="none"] .k-item-ico { display: grid; }
  .k-app[data-rail="icons"] .k-item-ico:empty::before { content: attr(data-initial); font-size: 0.8125rem; font-weight: 650; }
  .k-app[data-rail="icons"] .k-account-who { justify-content: center; padding: 6px 0; }
  .k-app[data-rail="icons"] #who-badges { top: -6px; right: auto; bottom: auto; left: calc(50% + 4px); flex-direction: column; } /* the 32 px avatar: corner (50% + 16, 6) */
  .k-app[data-rail="icons"] #who-badges .k-badge { place-items: center; min-width: 24px; min-height: 24px; padding: 0; }
  .k-app[data-rail="icons"] #who-badges .k-badge-num { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 0.625rem; line-height: 16px; box-shadow: 0 0 0 2px var(--k-rail-bg); }
  .k-app[data-rail="icons"] #who-badges .k-badge:hover { background: transparent; }
  .k-app[data-rail="icons"] #who-badges .k-badge:hover .k-badge-num { box-shadow: 0 0 0 2px var(--k-rail-bg), 0 0 0 3px var(--k-rail-quiet); }
  .k-app[data-rail="icons"] .k-account-actions { flex-direction: column; gap: 4px; }
  .k-app[data-rail="icons"] .k-account-actions .k-btn { width: 40px; min-width: 0; margin: 0; padding: 0; }
  .k-app[data-rail="icons"] .k-popover-panel { left: calc(100% + 8px); bottom: 0; }
  .k-app[data-rail="icons"] .k-scheme { display: none; }
  .k-app[data-rail="icons"] #theme-toggle:not([hidden]) { display: inline-grid; }
  .k-app[data-rail="icons"] :is(.k-rail-children, .k-item-caret) { display: none; }
  .k-app[data-rail="icons"] .k-item-small { width: 44px; min-height: 36px; }
}
.k-btn-label:empty { display: none; }

/* --- 4b. the places on top (brand.layout "top", BUNDLE_CONTRACT §20) -----------
 * No rail: the top bar is the header across the window (the face's mark and name, the switch between its sides, that side's places,
 * the person's chip and its menu); under 768 px it keeps the mark, the switch and the avatar, and the side's first five places sit in
 * a bar at the bottom. The header is on the product's surface, a hairline under it; the place one is at is marked in the accent, a
 * line under it (a top header) or its icon and word (the bottom bar). The switch between the sides is drawn the same way in the rail. */
.k-side { display: inline-flex; flex: none; max-width: 100%; border: 1px solid var(--k-line); border-radius: var(--k-radius); overflow: hidden; background: var(--k-surface); }
.k-side[hidden] { display: none; }
.k-side-opt {
  appearance: none;
  min-height: 32px;
  margin: 0;
  padding: 4px 12px;
  border: 0;
  background: transparent;
  color: var(--k-ink-2);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}
.k-side-opt + .k-side-opt { border-left: 1px solid var(--k-line); }
.k-side-opt:hover { color: var(--k-ink); }
.k-side-opt[aria-pressed="true"] { background: color-mix(in srgb, var(--k-accent) 13%, var(--k-surface)); color: var(--k-ink); font-weight: 650; }
.k-side-opt:focus-visible { outline: 2px solid var(--k-focus); outline-offset: -2px; }
.k-side-rail { align-self: flex-start; margin: 0 12px 12px 18px; border-color: var(--k-rail-line); background: transparent; }
.k-side-rail .k-side-opt { color: var(--k-rail-quiet); }
.k-side-rail .k-side-opt + .k-side-opt { border-left-color: var(--k-rail-line); }
.k-side-rail .k-side-opt[aria-pressed="true"] { background: var(--k-rail-active-bg); color: var(--k-rail-active-ink); }

.k-places, .k-bottombar, .k-chip-text, .k-chip-caret { display: none; }
.k-place-n { flex: none; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--k-accent); color: var(--k-on-accent); font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 18px; text-align: center; }
.k-place-n[hidden] { display: none; }

.k-app[data-layout="top"] { --k-rail-now: 0px; }
.k-app[data-layout="top"] :is(.k-rail, .k-rail-show, .k-backdrop, #drawer-btn) { display: none; }
.k-app[data-layout="top"]:not([data-public]) .k-topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  height: auto;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 20px 0;
  background: var(--k-surface);
  color: var(--k-ink);
  border-bottom: 1px solid var(--k-line);
  font-family: var(--k-font-ui);
  font-size: 0.875rem;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
.k-app[data-layout="top"] .k-topbar [hidden] { display: none; }
.k-app[data-layout="top"] .k-topbar-brand { flex: 0 1 auto; min-height: 44px; padding: 6px 4px; color: var(--k-ink); }
.k-app[data-layout="top"] .k-topbar-brand:hover { background: color-mix(in srgb, var(--k-ink) 6%, transparent); }
.k-app[data-layout="top"] .k-topbar .k-brand-name { color: var(--k-ink); overflow: visible; }
.k-app[data-layout="top"] .k-topbar .k-mark { width: 26px; height: 26px; color: var(--k-accent); }
.k-app[data-layout="top"] :is(#topbar-who, #topbar-login) { margin-left: auto; }
.k-app[data-layout="top"] #topbar-account:hover { background: color-mix(in srgb, var(--k-ink) 6%, transparent); color: var(--k-ink); }
.k-app[data-layout="top"] .k-topbar-who .k-badge-num { box-shadow: 0 0 0 2px var(--k-surface); }

.k-place {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 54px;
  margin: 0 0 -1px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--k-ink);
  font: inherit;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.k-place .k-item-ico, .k-place-menu .k-item-ico { width: 18px; height: 18px; color: var(--k-ink-2); }
.k-place:hover { color: var(--k-accent); }
.k-place.is-active { color: var(--k-accent); font-weight: 600; border-bottom-color: var(--k-accent); }
.k-place.is-active .k-item-ico { color: var(--k-accent); }
.k-place[hidden] { display: none; }

.k-bar-item {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 6px 2px 7px;
  border: 0;
  background: none;
  color: var(--k-ink-2);
  font: inherit;
  font-size: 0.6875rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.k-bar-item[hidden] { display: none; }
.k-bar-item .k-item-ico, .k-bar-item .k-item-ico svg { width: 22px; height: 22px; }
.k-bar-item-label { max-width: 100%; overflow-wrap: break-word; hyphens: auto; }
.k-bar-item.is-active { color: var(--k-accent); font-weight: 650; }
.k-bar-item .k-place-n { position: absolute; top: 3px; left: calc(50% + 6px); box-shadow: 0 0 0 2px var(--k-surface); }

/* the person's menu in the top layout: under the header wherever it ends; the face's groups, the System group */
.k-app[data-layout="top"] .k-account-panel { top: calc(var(--k-panel-top, 56px) + 6px); }
.k-app[data-layout="top"] #panel-logout { color: var(--k-danger); font-weight: 600; }
.k-panel-places, .k-panel-more, .k-panel-group { display: flex; flex-direction: column; gap: 1px; }
.k-panel-places[hidden], .k-panel-group[hidden] { display: none; }
.k-panel-places { margin: 0 0 4px; padding: 0 0 4px; border-bottom: 1px solid var(--k-line); }
.k-panel-more:empty { display: none; }
#panel-system { margin: 4px 0 0; padding: 4px 0 0; border-top: 1px solid var(--k-line); }
.k-panel-title { margin: 6px 10px 2px; color: var(--k-ink-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.k-place-menu { align-items: center; justify-content: flex-start; gap: 10px; }
.k-place-menu[hidden] { display: none; }
.k-place-menu .k-item-label, .k-place-menu .k-menu-item-label { flex: 1 1 auto; min-width: 0; overflow: visible; white-space: normal; text-overflow: clip; }
.k-place-menu .k-item-ico svg { width: 18px; height: 18px; }
.k-place-menu.is-active { color: var(--k-accent); font-weight: 600; }
.k-place-menu.is-active .k-item-ico { color: var(--k-accent); }

@media (min-width: 768px) {
  .k-app[data-layout="top"] .k-places:not([hidden]) { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-self: stretch; gap: 2px; min-width: 0; }
  .k-app[data-layout="top"] #topbar-account { width: auto; height: auto; min-height: 40px; gap: 8px; padding: 3px 10px 3px 4px; border: 1px solid var(--k-line); border-radius: 999px; color: var(--k-ink); }
  .k-app[data-layout="top"] #topbar-account[aria-expanded="true"] { border-color: var(--k-accent); }
  .k-app[data-layout="top"] .k-chip-text:not([hidden]) { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 0.8125rem; line-height: 1.2; text-align: left; }
  .k-app[data-layout="top"] .k-chip-caret:not([hidden]) { display: block; width: 14px; height: 14px; color: var(--k-ink-2); }
  .k-chip-name { font-weight: 600; white-space: nowrap; }
  .k-chip-role { color: var(--k-ink-2); font-size: 0.75rem; white-space: nowrap; }
  .k-app[data-layout="top"] .k-topbar-who .k-badges { left: 27px; top: -3px; }
  .k-app[data-layout="top"] .k-account-panel { right: 20px; width: 280px; }
  .k-account-panel .k-phone-only { display: none; }
}

/* --- 5. phones: a 56 px top bar and the rail as a drawer from the left -------*/

@media (max-width: 767.98px) {
  .k-topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 4px;
    height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 6px 0;
    background: var(--k-rail-bg);
    color: var(--k-rail-ink);
    border-bottom: 1px solid var(--k-rail-line);
    font-family: var(--k-font-ui);
    font-size: 0.9375rem;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
  }
  .k-topbar-brand { gap: 8px; min-height: 44px; padding: 6px 8px; }
  .k-topbar .k-mark { width: 26px; height: 26px; }
  .k-topbar .k-btn-primary { margin-right: 6px; }
  .k-topbar [hidden] { display: none; }
  .k-app { --k-rail-now: 0px; }

  .k-rail {
    z-index: 45;
    width: min(320px, 86vw);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.3, 0.7, 0.4, 1), visibility 0s linear 220ms;
  }
  .k-app.is-drawer-open .k-rail {
    visibility: visible;
    transform: none;
    box-shadow: var(--k-shadow);
    transition: transform 220ms cubic-bezier(0.3, 0.7, 0.4, 1);
  }
  .k-backdrop { position: fixed; inset: 0; z-index: 40; display: block; background: rgb(0 0 0 / 0.42); }
  .k-backdrop[hidden] { display: none; }
  #rail-toggle, .k-rail-grip, .k-rail-tab, .k-rail-show { display: none; }
  #drawer-close { display: grid; }
  .k-rail { font-size: 0.9375rem; }
  .k-rail-head { min-height: 56px; padding: 6px 6px 6px 10px; }
  .k-item, .k-account-who, .k-scheme-opt { min-height: 44px; }
  #who-badges .k-badge { min-width: 44px; min-height: 44px; } /* on the role's line in the drawer; the top bar's corner stays 24 px */
  .k-rail-children { --k-tree-pad: 12px; } /* a line 44 px tall, an entry 40 */
  .k-child-item { --k-tree-pad: 10px; }
  .k-scheme-compact .k-scheme-opt { min-height: 44px; }
  .k-iconbtn, .k-rail .k-btn { min-width: 44px; min-height: 44px; }
  .k-rail-more { min-height: 44px; padding-inline: 14px 16px; }
  .k-popover-panel { bottom: calc(100% + 6px); }

  /* the top layout on a phone (§20): the slim bar (the mark, the switch, the avatar) and the bottom bar */
  .k-app[data-layout="top"] .k-topbar { gap: 4px 8px; padding: env(safe-area-inset-top) 6px 0 8px; }
  .k-app[data-layout="top"] .k-topbar-brand { gap: 8px; padding: 6px 2px; }
  .k-app[data-layout="top"] .k-side-opt { min-height: 30px; padding: 3px 9px; font-size: 0.75rem; } /* the mark, the switch and the avatar on one line from 360 px */
  .k-app[data-layout="top"]:not([data-public]) .k-bottombar:not([hidden]) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 24;
    display: grid;
    grid-template-columns: repeat(var(--k-bar-n, 4), minmax(0, 1fr));
    padding: 0 2px env(safe-area-inset-bottom);
    background: var(--k-surface);
    border-top: 1px solid var(--k-line);
    font-family: var(--k-font-ui);
    -webkit-font-smoothing: antialiased;
  }
  /* --k-foot: what the bottom bar takes at the window's foot, for a bundle's own sticky foot (§20); the content ends above it */
  .k-app[data-layout="top"]:not([data-public]):has(.k-bottombar:not([hidden])) { --k-foot: calc(57px + env(safe-area-inset-bottom)); }
  .k-app[data-layout="top"]:not([data-public]):has(.k-bottombar:not([hidden])) .k-content { padding-bottom: var(--k-foot); }
}
/* a narrow phone: the switch takes its own line under the mark and the avatar */
@media (max-width: 359.98px) {
  .k-app[data-layout="top"] .k-topbar { padding-bottom: 8px; }
  .k-app[data-layout="top"] .k-topbar::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .k-app[data-layout="top"] #topbar-side { order: 3; }
}


@media (prefers-reduced-motion: reduce) {
  .k-side-opt, .k-place,
  .k-content, .k-rail, .k-caret, .k-item, .k-child, .k-tree-caret svg, .k-badge, .k-rail-fade, .k-rail-more, .k-rail-scroll[data-below] .k-rail-more { transition: none; }
  .k-badge-num[data-swap] { animation: none; } /* a changed figure shows at once */
}

/* --- 6. controls: buttons, icon buttons, fields ------------------------------*/

.k-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--k-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms, opacity 120ms;
}
.k-btn-primary { background: var(--k-accent); color: var(--k-on-accent); }
.k-btn-primary:hover { background: color-mix(in srgb, var(--k-accent) 88%, #000); }
.k-btn-quiet { border-color: var(--k-line); color: var(--k-ink); }
.k-btn-quiet:hover { background: var(--k-surface-2); }
.k-rail .k-btn-quiet { border-color: transparent; color: var(--k-rail-ink); font-weight: 500; padding: 0 10px; }
.k-rail .k-btn-quiet:hover { background: var(--k-rail-hover); color: var(--k-rail-active-ink); }
.k-btn-danger { background: var(--k-danger); color: #fff; }
.k-btn-danger:hover { background: color-mix(in srgb, var(--k-danger) 86%, #000); }
.k-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.k-btn-block { width: 100%; }
.k-btn-ico { display: none; }
.k-btn-quiet .k-btn-ico { display: grid; }
.k-btn-ico svg { width: 16px; height: 16px; }

.k-iconbtn {
  appearance: none;
  flex: none;
  display: inline-grid;
  grid-auto-flow: column;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--k-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}
.k-iconbtn[hidden] { display: none; }
.k-iconbtn:hover { background: var(--k-rail-hover); color: var(--k-rail-active-ink); }
.k-iconbtn .k-avatar { width: 30px; height: 30px; font-size: 0.75rem; }
/* the icon rail's theme button (the switch's stand-in at 64 px): the choice's icon, each press the next choice */
#theme-toggle, #theme-toggle svg { display: none; }
#theme-toggle[data-choice="light"] .k-ico-light, #theme-toggle[data-choice="dark"] .k-ico-dark, #theme-toggle[data-choice="system"] .k-ico-system { display: block; }

/* the phone's account menu, under the avatar in the top bar */
.k-account-panel {
  position: fixed;
  top: calc(56px + env(safe-area-inset-top) + 6px);
  right: 8px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(300px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  color: var(--k-ink);
  box-shadow: var(--k-shadow);
  font-family: var(--k-font-ui);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.k-account-panel[hidden] { display: none; }
.k-account-panel-who { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--k-line); }
.k-account-panel-email { font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }
.k-account-panel-role { color: var(--k-ink-2); font-size: 0.8125rem; }
.k-account-panel .k-scheme {
  --k-scheme-line: var(--k-line);
  --k-scheme-ink: var(--k-ink-2);
  --k-scheme-on-bg: color-mix(in srgb, var(--k-accent) 14%, var(--k-surface));
  --k-scheme-on-ink: var(--k-ink);
  margin: 2px 4px 6px;
}
.k-account-panel .k-scheme-opt { flex-direction: row; gap: 6px; min-height: 44px; padding: 0 6px; font-size: 0.8125rem; }

.k-link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--k-accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.k-mono { font-family: var(--k-font-mono); font-size: 0.9em; overflow-wrap: anywhere; }

.k-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.k-field-label { color: var(--k-ink); font-size: 0.8125rem; font-weight: 550; }
.k-field-msg { min-height: 1.3em; margin: 0; color: var(--k-danger); font-size: 0.8125rem; }
.k-input {
  appearance: none;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  color: var(--k-ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 120ms, box-shadow 120ms;
}
.k-input:hover { border-color: color-mix(in srgb, var(--k-ink) 28%, var(--k-line)); }
.k-input:focus { outline: none; border-color: var(--k-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-focus) 22%, transparent); }

:is(.k-btn, .k-iconbtn, .k-item, .k-account-who, .k-badge, .k-rail-brand, .k-topbar-brand, .k-link, .k-menu-item, .k-place, .k-bar-item, .k-rail-tab, .k-rail-show, .k-rail-grip, .k-rail-more, .k-pill):focus-visible {
  outline: 2px solid var(--k-focus);
  outline-offset: 1px;
}

/* --- 7. overlays: login, alert, confirmations, the link landing, the veil ----*/

.k-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: color-mix(in srgb, #0b0d10 45%, transparent);
  color: var(--k-ink);
  font-family: var(--k-font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.k-overlay[hidden] { display: none; }
.k-dialog {
  width: min(420px, 100%);
  margin: 0;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--k-line) 70%, transparent);
  border-radius: calc(var(--k-radius) * 1.5);
  background: var(--k-surface);
  box-shadow: var(--k-shadow);
  animation: k-dialog-in 160ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
@keyframes k-dialog-in { from { opacity: 0; transform: translateY(6px) scale(0.99); } }
.k-dialog-wide { width: min(600px, 100%); }
.k-dialog-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; }
.k-dialog-brand .k-mark { width: 32px; height: 32px; }
.k-dialog-brand-text { display: flex; flex-direction: column; min-width: 0; }
.k-dialog-brand-name { color: var(--k-ink); font-size: 1rem; }
.k-dialog-tagline { color: var(--k-ink-2); font-size: 0.8125rem; line-height: 1.35; }
.k-dialog-tagline:empty { display: none; }
.k-dialog-title { margin: 0 0 18px; color: var(--k-ink); font-size: 1.25rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.k-dialog-text { margin: 0 0 12px; color: var(--k-ink-2); }
.k-dialog-text:empty { display: none; }
.k-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.k-dialog-actions:empty { display: none; }

.k-notice {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--k-ink-2);
  border-radius: calc(var(--k-radius) * 0.5);
  background: var(--k-surface-2);
  color: var(--k-ink);
  font-size: 0.875rem;
}
.k-notice[hidden] { display: none; }
.k-notice.is-error { border-left-color: var(--k-danger); background: color-mix(in srgb, var(--k-danger) 8%, var(--k-surface)); }
.k-notice.is-ok { border-left-color: var(--k-ok); background: color-mix(in srgb, var(--k-ok) 8%, var(--k-surface)); }

.k-check { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--k-ink); font-size: 0.875rem; line-height: 1.35; cursor: pointer; }
.k-check-input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--k-accent); cursor: pointer; }
.k-login-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.k-login-actions .k-btn { min-height: 44px; font-size: 0.9375rem; }
.k-login-actions .k-btn-quiet { border-color: transparent; color: var(--k-ink-2); }
.k-login-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 18px 0 0; color: var(--k-ink-2); font-size: 0.75rem; }
.k-login-foot[hidden] { display: none; }

.k-alert-icon { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 0 16px; border-radius: 50%; }
.k-alert-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-alert.is-error .k-alert-icon { background: color-mix(in srgb, var(--k-danger) 12%, var(--k-surface)); color: var(--k-danger); }
.k-alert.is-ok .k-alert-icon { background: color-mix(in srgb, var(--k-ok) 12%, var(--k-surface)); color: var(--k-ok); }
.k-alert.is-info .k-alert-icon { background: var(--k-surface-2); color: var(--k-ink); }
.k-alert .k-dialog-title { margin-bottom: 8px; }
.k-alert-message { margin: 0; color: var(--k-ink-2); overflow-wrap: anywhere; }

.k-dialog-danger .k-dialog-title { color: var(--k-danger); }
.k-danger-body { margin: 0 0 12px; }
.k-danger-list { max-height: 9rem; margin: 0 0 10px; padding-left: 1.2rem; overflow-y: auto; color: var(--k-ink); }
.k-danger-totals { margin: 0; color: var(--k-ink); }
.k-danger-warn { margin: 0 0 16px; color: var(--k-danger); font-size: 0.875rem; font-weight: 600; }

/* How a person leaves (kyr_core 6.1): the two ways side by side, one column on a narrow screen; a way that is not allowed stays shown,
 * greyed, with who may. Words wrap, never cut. */
.k-dialog-remove { display: flex; flex-direction: column; width: min(880px, 100%); max-height: calc(100vh - 32px); padding-bottom: 20px; }
.k-dialog-remove > .k-dialog-title { flex: none; }
.k-remove-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-color: var(--k-line) transparent; }
.k-remove-foot { flex: none; padding-top: 14px; border-top: 1px solid var(--k-line); }
.k-remove-foot .k-field { margin-bottom: 12px; }
.k-remove-lead { margin: 0 0 16px; color: var(--k-ink-2); overflow-wrap: anywhere; }
.k-remove-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
@media (max-width: 720px) { .k-remove-ways { grid-template-columns: minmax(0, 1fr); } }
.k-way { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--k-line); border-radius: var(--k-radius);
  background: var(--k-surface); cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease; }
.k-way.is-chosen { border-color: var(--k-accent, var(--k-ink)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--k-accent, var(--k-ink)) 30%, transparent); }
.k-way.is-danger.is-chosen { border-color: var(--k-danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--k-danger) 28%, transparent); }
.k-way.is-off { cursor: not-allowed; opacity: 0.62; background: var(--k-surface-2); }
.k-way-head { display: flex; align-items: flex-start; gap: 10px; cursor: inherit; }
.k-way-head input { margin: 3px 0 0; flex: none; }
.k-way-title { color: var(--k-ink); font-weight: 650; overflow-wrap: anywhere; }
.k-way.is-danger .k-way-title { color: var(--k-danger); }
.k-way-what, .k-way-warn, .k-way-why { margin: 0; overflow-wrap: anywhere; }
.k-way-what { color: var(--k-ink); }
.k-way-warn { color: var(--k-danger); font-size: 0.875rem; font-weight: 600; }
.k-way-why { color: var(--k-ink-2); font-size: 0.875rem; font-style: italic; }
.k-way-lines { margin: 0; padding-left: 1.1rem; color: var(--k-ink); font-size: 0.875rem; }
.k-way-lines li { overflow-wrap: anywhere; }
.k-way-lines li.is-kept { color: var(--k-ink-2); }
.k-way-files { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 10px 0; border: 0; border-top: 1px solid var(--k-line);
  border-bottom: 1px solid var(--k-line); }
.k-way-files legend { padding: 0; margin: 0 0 4px; color: var(--k-ink); font-size: 0.8125rem; font-weight: 550; }
.k-way-files select { width: 100%; min-width: 0; font-size: 0.875rem; }
.k-way-heir { margin: 0; color: var(--k-ink-2); font-size: 0.8125rem; overflow-wrap: anywhere; }
.k-way-choice { display: flex; align-items: center; gap: 6px; color: var(--k-ink); font-size: 0.875rem; }
.k-way-files[disabled] { opacity: 0.55; }

.k-secret { margin: 16px 0 0; padding: 16px; border: 1px dashed var(--k-line); border-radius: var(--k-radius); background: var(--k-surface-2); text-align: center; }
.k-secret-value { color: var(--k-ink); font-family: var(--k-font-mono); font-size: clamp(1.25rem, 5vw, 1.75rem); letter-spacing: 0.08em; overflow-wrap: anywhere; user-select: all; }
.k-secret-note { margin: 16px 0 6px; font-size: 0.8125rem; }
.k-secret-link { margin: 0; padding: 8px 10px; border-radius: calc(var(--k-radius) * 0.5); background: var(--k-surface-2); color: var(--k-ink); font-size: 0.8125rem; user-select: all; }

.k-landing-preview { margin: 12px 0 0; text-align: center; }
.k-landing-preview[hidden] { display: none; }
.k-landing-media { display: block; max-width: 100%; max-height: 55vh; margin: 0 auto; border-radius: var(--k-radius); }
.k-landing-preview :is(iframe, audio).k-landing-media { width: 100%; }
.k-landing-preview iframe.k-landing-media { height: 55vh; border: 0; background: #fff; }

@media (max-width: 767.98px) {
  .k-overlay { place-items: end center; padding: 16px 0 0; }
  .k-dialog, .k-dialog-wide { width: 100%; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; animation-name: k-sheet-in; }
  .k-dialog-actions .k-btn { flex: 1 1 auto; min-height: 44px; }
  .k-check { min-height: 44px; margin-bottom: 6px; }
  @keyframes k-sheet-in { from { transform: translateY(24px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .k-dialog { animation: none; } }

/* --- 8. the toast, the cross-page pill, floating menus ------------------------*/

.k-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 16px;
  border-radius: var(--k-radius);
  background: var(--k-ink);
  color: var(--k-bg);
  box-shadow: var(--k-shadow);
  font-family: var(--k-font-ui);
  font-size: 0.875rem;
  line-height: 1.4;
  transform: translateX(-50%);
  -webkit-font-smoothing: antialiased;
}
.k-toast[hidden] { display: none; }
.k-toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--k-bg) 55%, var(--k-ink)); }
.k-toast.is-ok::before { background: var(--k-ok); }
.k-toast.is-error::before { background: var(--k-danger); }
.k-toast-text { min-width: 0; overflow-wrap: anywhere; }

.k-pill {
  appearance: none;
  position: fixed;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--k-line);
  border-radius: 999px;
  background: var(--k-surface);
  color: var(--k-ink);
  box-shadow: var(--k-shadow);
  font-family: var(--k-font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.k-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k-accent); }
.k-pill[hidden] { display: none; }

.k-menu {
  z-index: 65;
  min-width: 200px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  color: var(--k-ink);
  box-shadow: var(--k-shadow);
  font-family: var(--k-font-ui);
  font-size: 0.875rem;
  line-height: 1.35;
}
.k-menu[hidden] { display: none; }
.k-menu-floating { position: fixed; max-width: calc(100vw - 16px); }
.k-menu-item {
  appearance: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: calc(var(--k-radius) * 0.75);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.k-menu-item:hover { background: var(--k-surface-2); }
.k-menu-item[aria-checked="true"] { color: var(--k-accent); font-weight: 600; }
.k-menu-item.is-danger { color: var(--k-danger); }
.k-menu-hint { color: var(--k-ink-2); font-size: 0.75rem; white-space: nowrap; }
@media (max-width: 767.98px) {
  .k-menu-item { min-height: 44px; }
  .k-menu-floating .k-menu-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
  .k-menu-floating .k-menu-hint { white-space: normal; }
}

/* --- 9. kyr's own views (About, Account, Users, Machine) ----------------------
 * Their 1.4 rules, scoped under .k-views and on the --k-* tokens: kyr's look
 * without a face, the product's tokens under one. --kyr-mark is kyr's
 * structure colour (css/tokens/kyr.css), the accent under a face. */

.k-views { padding: 28px var(--page-pad-x) 64px; font-family: var(--k-font-ui); font-size: 1rem; line-height: 1.5; }
.k-views .page-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.k-views .page-title { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.015em; }
.k-views #view-me { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: start; max-width: 64rem; }
.k-views .pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0.45rem 0; color: var(--k-ink-2); font-size: 0.875rem; }
.k-views .pref select { margin: 0; min-width: 9rem; }
.k-views .pref[hidden] { display: none; }
.k-views .versions { margin: 0; padding: 0; list-style: none; font-family: var(--k-font-mono); font-size: 0.8125rem; }
.k-views .versions li { padding: 0.2rem 0; overflow-wrap: anywhere; }

.k-views .mono { font-family: var(--k-font-mono); font-size: 0.82em; word-break: break-all; }
.k-views .muted { color: var(--k-ink-2); }
.k-views .accent-btn, .k-views .ghost-btn { appearance: none; font: inherit; padding: 0.45rem 1.1rem; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base); }
.k-views .accent-btn { border: 1px solid var(--k-accent); background: var(--k-accent); color: var(--k-on-accent); font-weight: 600; }
.k-views .accent-btn:hover { background: color-mix(in srgb, var(--k-accent) 84%, var(--k-ink)); border-color: color-mix(in srgb, var(--k-accent) 84%, var(--k-ink)); }
.k-views .accent-btn:disabled, .k-views .ghost-btn:disabled { opacity: 0.45; cursor: wait; }
.k-views .ghost-btn { border: 1px solid var(--k-line); background: transparent; color: var(--k-ink); }
.k-views .ghost-btn:hover { border-color: var(--k-accent); color: var(--k-accent); }
.k-views .link-btn { appearance: none; border: none; background: none; color: var(--k-accent); font: inherit; font-size: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.k-views .link-btn:hover { color: color-mix(in srgb, var(--k-accent) 84%, var(--k-ink)); }
.k-views .view { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.k-views .view[hidden] { display: none; }
.k-views #view-users, .k-views #view-system { grid-template-columns: 1fr; }
.k-views .view > .card { min-width: 0; }
.k-views .card { background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); padding: var(--gap-md) var(--gap-lg); }
.k-views .card h2 { margin: 0 0 var(--gap-sm); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--k-ink-2); }
.k-views .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; }
.k-views .card-tools { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; }
.k-views .tool { color: var(--k-ink-2); font-size: 0.9rem; }
.k-views .kv { display: flex; gap: 0.9rem; margin: 0.45rem 0; align-items: baseline; }
.k-views .kv > span { min-width: 5.5rem; color: var(--k-ink-2); font-size: 0.85rem; }
.k-views .kv > b { font-weight: 600; }
.k-views .dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.45em; }
.k-views .dot-ok { background: var(--k-ok); }
.k-views .dot-err { background: var(--k-danger); }
.k-views .dot-wait { background: var(--k-warn); }
.k-views .field { display: block; margin: 0.7rem 0; color: var(--k-ink-2); font-size: 0.88rem; }
.k-views input, .k-views select { font: inherit; width: 100%; margin-top: 0.3rem; padding: 0.55rem 0.75rem; color: var(--k-ink); background: var(--k-surface-2); border: 1px solid var(--k-line); border-radius: var(--radius-sm); transition: border-color var(--transition-base); }
.k-views select { width: auto; padding: 0.3rem 0.5rem; }
.k-views input:hover, .k-views select:hover { border-color: var(--k-accent); }
.k-views .table-wrap { overflow-x: auto; max-width: 100%; }
.k-views .table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.k-views .table th, .k-views .table td { text-align: left; vertical-align: top; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--k-line); }
.k-views .table th { color: var(--k-ink-2); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.k-views .table td.mono { font-size: 0.78rem; }
.k-views .table tbody tr:hover { background: var(--k-surface-2); }
.k-views .cell-body { min-width: 0; }
.k-views .cell-main { font-weight: 600; overflow-wrap: anywhere; }
.k-views .cell-sub { color: var(--k-ink-2); font-size: 0.78rem; margin-top: 0.15rem; overflow-wrap: anywhere; }
.k-views .user-cell { min-width: 12rem; max-width: 24rem; }
.k-views .me-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.k-views .me-caps li { display: inline-flex; align-items: center; gap: 0.4rem; }
.k-views .badge-cell { white-space: nowrap; }
.k-views .badge-cell .badge { margin-right: 0.3rem; }
.k-views .badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; border: 1px solid var(--k-line); font-size: 0.75rem; }
.k-views .badge-OWNER { color: var(--k-warn); border-color: var(--k-warn); font-weight: 700; }
.k-views .badge-ADMIN { color: var(--kyr-mark, var(--k-accent)); border-color: var(--kyr-mark, var(--k-accent)); }
.k-views .badge-PUBLISHER { color: var(--k-accent); border-color: var(--k-accent); }
.k-views .badge-VIEWER { color: var(--k-ink-2); }
.k-views .badge-ACTIVE { color: var(--k-ok); border-color: var(--k-ok); }
.k-views .badge-INVITED { color: var(--k-warn); border-color: var(--k-warn); }
.k-views .badge-DISABLED, .k-views .badge-BANNED { color: var(--k-danger); border-color: var(--k-danger); }
.k-views .table-foot { display: flex; align-items: center; gap: var(--gap-md); padding-top: var(--gap-sm); }
.k-views .invite-row { display: flex; gap: var(--gap-sm); align-items: center; flex-wrap: wrap; }
.k-views .invite-row input[type="email"] { flex: 1 1 16rem; min-width: 12rem; }
.k-views .ghost-btn.is-danger { border-color: var(--k-danger); color: var(--k-danger); }
.k-views .ghost-btn.is-danger:hover { background: var(--k-danger); border-color: var(--k-danger); color: #fff; }
.k-views .th-sort { appearance: none; border: none; background: none; padding: 0; font: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.k-views .th-sort:hover { color: var(--k-ink); }
.k-views .th-sort:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--k-focus); border-radius: var(--radius-xs); }
.k-views .sort-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.35; transition: transform var(--transition-base), opacity var(--transition-base); }
.k-views .th-sort.is-asc  .sort-arrow { opacity: 1; color: var(--k-accent); transform: rotate(180deg); }
.k-views .th-sort.is-desc .sort-arrow { opacity: 1; color: var(--k-accent); }
.k-views .th-sort.is-asc, .k-views .th-sort.is-desc { color: var(--k-accent); }
.k-views .icon-btn { padding: 0.45rem 0.7rem; }
.k-views .popover { position: relative; }
.k-views .popover-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 12.5rem; padding: 0.6rem 0.75rem; background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--radius-sm); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); z-index: 20; }
.k-views .popover-title { margin: 0 0 0.4rem; color: var(--k-ink-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.k-views .popover-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.28rem 0; font-size: 0.88rem; cursor: pointer; }
.k-views .popover-item input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--k-accent); }
.k-views .storage-cell .cell-body { display: flex; align-items: center; gap: 0.35rem; }
.k-views .storage-view { display: flex; flex-direction: column; gap: 0.25rem; min-width: 8.5rem; }
.k-views .storage-text { white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-views .storage-meter { height: 4px; margin: 0; }
.k-views .quota-edit { appearance: none; border: 1px solid transparent; background: none; color: var(--k-ink-2); font-size: 0.85rem; line-height: 1; padding: 0.15rem 0.35rem; border-radius: var(--radius-xs); cursor: pointer; opacity: 0; transition: opacity var(--transition-base), color var(--transition-base); }
.k-views .table tbody tr:hover .quota-edit, .k-views .quota-edit:focus-visible { opacity: 1; }
.k-views .quota-edit:hover { color: var(--k-accent); }
.k-views .quota-edit:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--k-focus); }
.k-views .alloc-pair { display: inline-flex; align-items: center; gap: 0.3rem; }
.k-views .alloc-pair input[type="number"] { width: 5.5rem; margin-top: 0; padding: 0.3rem 0.5rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.k-views .alloc-pair select { margin-top: 0; font-size: 0.85rem; }
.k-views .invite-alloc { display: inline-flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; }
.k-views .invite-alloc[hidden] { display: none; }
.k-views .invite-pool-hint { font-size: 0.78rem; white-space: nowrap; }
.k-views .admin-capabilities { margin: 0 0 var(--gap-sm); max-width: 60rem; }
.k-views #users-search { width: 13rem; margin-top: 0; }
.k-views .meter { height: 8px; border-radius: 999px; background: var(--k-surface-2); overflow: hidden; margin: 0.5rem 0; }
.k-views .meter-fill { height: 100%; width: 0; background: var(--k-accent); transition: width var(--transition-base); }
.k-views .meter-fill.is-full { background: var(--k-danger); }
.k-views .me-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap-md); }
.k-views .me-field { display: flex; flex-direction: column; gap: 0.2rem; }
.k-views .me-wide { grid-column: 1 / -1; }
.k-views .me-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--k-ink-2); }
.k-views .me-value { font-weight: 600; overflow-wrap: anywhere; }
.k-views .user-row { cursor: default; user-select: none; }
.k-views .user-row:hover { background: var(--k-surface-2); }
.k-views .user-row.is-selected { background: color-mix(in srgb, var(--k-accent) 14%, transparent); box-shadow: inset 2px 0 0 var(--k-accent); }

/* the users page's List / Tree switch and the invite tree: a flat run of treeitems, indented by depth, the guides drawn in each
   node's left padding (one line per level, under the parent's twisty) so a run of nodes reads as one continuous tree */
.k-views .ut-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--k-line); border-radius: var(--radius-sm); background: var(--k-surface-2); }
.k-views .ut-switch[hidden], .k-views .ut-tools[hidden], .k-views .popover[hidden], .k-views .tool[hidden], .k-views .table-wrap[hidden] { display: none; }
.k-views .ut-switch-btn { appearance: none; display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.3rem 0.75rem; border: 0; border-radius: calc(var(--radius-sm) - 2px); background: transparent; color: var(--k-ink-2); font: inherit; font-size: 0.875rem; cursor: pointer; }
.k-views .ut-switch-btn svg, .k-views .ut-twisty svg, .k-views .ut-under svg, .k-views .ut-group-ico svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.k-views .ut-switch-btn svg { width: 16px; height: 16px; }
.k-views .ut-switch-btn:hover { color: var(--k-ink); }
.k-views .ut-switch-btn[aria-pressed="true"] { background: var(--k-surface); color: var(--k-ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.14); }
.k-views .ut-switch-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--k-focus); }
.k-views .ut-tools { display: inline-flex; gap: var(--gap-sm); }
.k-views .ut-hint { margin: 0.6rem 0 0; font-size: 0.8125rem; }
.k-views .ut-empty { margin: 0.75rem 0 0.25rem; }
.k-views .ut-hint[hidden], .k-views .ut-empty[hidden], .k-views .ut-tree[hidden] { display: none; }
.k-views .ut-tree { --ut-indent: 1.5rem; --ut-twisty: 1.25rem; --ut-pad: 0.5rem; margin-top: 0.6rem; }
.k-views .ut-node {
  position: relative;
  display: grid;
  grid-template-columns: var(--ut-twisty) minmax(0, 1fr) auto 14rem;
  align-items: center;
  column-gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.75rem 0.3rem calc(var(--ut-pad) + var(--ut-depth) * var(--ut-indent));
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}
.k-views .ut-node:hover { background: var(--k-surface-2); }
.k-views .ut-node.is-selected { background: color-mix(in srgb, var(--k-accent) 14%, transparent); box-shadow: inset 2px 0 0 var(--k-accent); }
.k-views .ut-node:focus { outline: none; }
.k-views .ut-node:focus-visible { box-shadow: inset 0 0 0 2px var(--k-focus); }
.k-views .ut-node.is-selected:focus-visible { box-shadow: inset 2px 0 0 var(--k-accent), inset 0 0 0 2px var(--k-focus); }
.k-views .ut-guides {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ut-pad);
  width: calc(var(--ut-depth) * var(--ut-indent));
  background: repeating-linear-gradient(to right, transparent 0 calc(var(--ut-twisty) / 2 - 0.5px), var(--k-line) calc(var(--ut-twisty) / 2 - 0.5px) calc(var(--ut-twisty) / 2 + 0.5px), transparent calc(var(--ut-twisty) / 2 + 0.5px) var(--ut-indent));
  pointer-events: none;
}
.k-views .ut-twisty { display: grid; place-items: center; width: var(--ut-twisty); height: var(--ut-twisty); border-radius: var(--radius-xs); color: var(--k-ink-2); }
.k-views .ut-twisty svg { width: 14px; height: 14px; stroke-width: 2; transition: transform var(--transition-base); }
.k-views .ut-twisty:hover { background: color-mix(in srgb, var(--k-ink) 8%, transparent); color: var(--k-ink); }
.k-views .ut-node[aria-expanded="true"] > .ut-twisty svg { transform: rotate(90deg); }
.k-views .ut-who { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.k-views .ut-email { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.k-views .ut-hit { border-radius: 2px; background: color-mix(in srgb, var(--k-accent) 26%, transparent); color: inherit; }
.k-views .ut-you { flex: none; color: var(--k-ink-2); font-size: 0.75rem; }
.k-views .ut-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem; }
.k-views .ut-tags .badge { white-space: nowrap; }
.k-views .ut-under { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--k-surface-2); color: var(--k-ink-2); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-views .ut-under svg { width: 13px; height: 13px; }
.k-views .ut-store { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; min-width: 0; font-size: 0.8125rem; }
.k-views .ut-store .storage-view { flex: 1 1 auto; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0.5rem; min-width: 0; }
.k-views .ut-store .storage-meter { flex: none; width: 3rem; }
.k-views .ut-store .storage-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.k-views .ut-node:hover .quota-edit, .k-views .ut-node.is-selected .quota-edit { opacity: 1; }
.k-views .ut-node.is-group .ut-email { color: var(--k-ink-2); font-weight: 500; font-style: italic; white-space: normal; }
.k-views .ut-group-ico { flex: none; align-self: center; color: var(--k-ink-2); }
.k-views .ut-group-ico svg { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .k-views .ut-tree { --ut-indent: 1rem; --ut-pad: 0.25rem; }
  /* the name on its own line; the chips under it and the storage beside them when it fits, at the right */
  .k-views .ut-node { display: flex; flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0.3rem; padding-block: 0.5rem; padding-right: 0.5rem; }
  .k-views .ut-who { flex: 1 1 calc(100% - var(--ut-twisty) - 0.5rem); }
  .k-views .ut-tags { margin-left: calc(var(--ut-twisty) + 0.5rem); justify-content: flex-start; }
  .k-views .ut-store { margin-left: auto; }
  .k-views .ut-store .storage-view { flex: 0 1 auto; }
  .k-views .ut-node .quota-edit { opacity: 1; }
  .k-views .ut-switch { flex: 1 1 100%; }
  .k-views .ut-switch-btn { flex: 1 1 0; justify-content: center; min-height: 40px; }
  .k-views .ut-tools { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .k-views .kv > span { min-width: 4rem; }
  .k-views .card { padding: var(--gap-md); }
  .k-views #users-table thead { display: none; }
  .k-views #users-table, .k-views #users-table tbody, .k-views #users-table tr, .k-views #users-table td { display: block; width: 100%; }
  .k-views #users-table tr { border: 1px solid var(--k-line); border-radius: var(--radius-sm); background: var(--k-surface-2); margin-bottom: var(--gap-sm); padding: 0.3rem 0; }
  .k-views #users-table td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-sm); border-bottom: none; padding: 0.3rem 0.8rem; }
  .k-views #users-table td::before { content: attr(data-label); flex: 0 0 5.5rem; color: var(--k-ink-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
  .k-views #users-table .cell-body { flex: 1; text-align: right; }
  .k-views .user-cell { max-width: none; min-width: 0; }
  .k-views .badge-cell { white-space: normal; }
  .k-views .quota-edit { opacity: 1; }
  .k-views .storage-cell .cell-body { justify-content: flex-end; }
  .k-views .invite-row input[type="email"] { flex-basis: 100%; }
  .k-views .table-foot { flex-wrap: wrap; }
  .k-views #users-search { flex: 1 1 100%; width: auto; }
}
.k-views .card { padding: 0.85rem 1rem; }
.k-views .card h2 { font-family: var(--k-font-mono); font-size: 0.8rem; letter-spacing: 0.1em; }
.k-views .view { gap: 1rem; }
.k-views .table th { font-family: var(--k-font-mono); letter-spacing: 0.08em; }
.k-views .badge { font-family: var(--k-font-mono); }
.k-views .accent-btn, .k-views .ghost-btn { padding: 0.35rem 0.9rem; }
.k-views input, .k-views select { padding: 0.4rem 0.6rem; }
.k-views .table th, .k-views .table td { padding: 0.4rem 0.65rem; }
.k-views .card { box-shadow: none; }
.k-views #view-home { align-items: start; max-width: 64rem; }
.k-views .view:not([hidden]) { animation: k-view-in 200ms ease-out; }
@keyframes k-view-in { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .k-views .view:not([hidden]) { animation: none; }
}

/* the account page always, and every kyr view under a face: the product's calm type, no console capitals */
.k-views #view-me .card h2, :root[data-face] .k-views .card h2 { margin-bottom: 14px; color: var(--k-ink); font-family: var(--k-font-ui); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none; }
.k-views #view-me .me-label, :root[data-face] .k-views :is(.me-label, .popover-title) { font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }
.k-views #view-me .me-value { font-weight: 550; }
:root[data-face] .k-views :is(.table th, .badge, .chip) { font-family: var(--k-font-ui); letter-spacing: 0; text-transform: none; }
.k-views #view-me .card, :root[data-face] .k-views .card { border-radius: calc(var(--k-radius) * 1.5); }
.k-views .unavailable { grid-column: 1 / -1; max-width: 34rem; margin: 12vh auto 0; }
.k-views .unavailable .page-title { margin-bottom: 10px; }
.k-views .unavailable-line { margin-top: 18px; font-size: 0.8125rem; color: var(--k-ink-2); }
.k-views .unavailable-reload { margin-top: 18px; }

/* --- 10. the Machine page: one console over the box ---------------------------
 * Under #view-system only, on the frame's tokens (a face's under a face, kyr's
 * without one; light and dark alike). Figures in ink, marks in the accent, a
 * level always a word beside its colour (ok, warn, crit, none), a 2px surface
 * gap between the parts of a bar. Nothing here animates: the page repaints only
 * what a snapshot changed. */

#view-system [hidden] { display: none !important; }
#view-system .mc { --mc-gap: 16px; display: flex; flex-direction: column; gap: var(--mc-gap); width: 100%; max-width: 1480px; min-width: 0; font-size: 0.875rem; }
#view-system .mc .card { margin: 0; padding: 16px 18px; border-radius: calc(var(--k-radius) * 1.5); box-shadow: var(--k-shadow-1); }
#view-system .mc h2 { margin: 0; color: var(--k-ink); font-family: var(--k-font-ui); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none; }
#view-system .mc-mono { font-family: var(--k-font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
#view-system .mc-note { margin: 0 0 12px; max-width: 120ch; color: var(--k-ink-2); font-size: 0.8125rem; line-height: 1.5; }
#view-system .mc-meta { color: var(--k-ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
#view-system .mc-empty { margin: 4px 0 0; color: var(--k-ink-2); font-size: 0.875rem; }
#view-system #mc-speed-empty { margin: 0 0 12px; color: var(--k-ink); }
#view-system .mc-foot { margin: 12px 0 0; color: var(--k-ink-2); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
#view-system .mc-foot:empty { display: none; }
#view-system .mc-quiet { color: var(--k-ink-2); }
#view-system .mc-select { width: auto; min-height: 32px; margin: 0; padding: 4px 8px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-ink); font: inherit; font-size: 0.8125rem; }
#view-system .mc-icon { width: 32px; min-height: 32px; padding: 0; border-color: var(--k-line); color: var(--k-ink-2); }
#view-system .mc-icon:hover { color: var(--k-ink); }
#view-system .mc-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#view-system .mc-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--k-ink-2); font-size: 0.8125rem; }

/* a level: its colour and its word together; the mark's shape differs too (dot, diamond, square) */
#view-system [data-level] { --mc-lvl: var(--k-ink-2); }
#view-system [data-level="ok"] { --mc-lvl: var(--k-ok); }
#view-system [data-level="warn"] { --mc-lvl: var(--k-warn); }
#view-system [data-level="crit"] { --mc-lvl: var(--k-danger); }
#view-system .mc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 7px; border: 1px solid color-mix(in srgb, var(--mc-lvl) 38%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--mc-lvl) 12%, var(--k-surface)); color: var(--k-ink); font-size: 0.75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
#view-system .mc-chip::before, #view-system .mc-state::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mc-lvl); }
#view-system :is(.mc-chip, .mc-state)[data-level="warn"]::before { border-radius: 1px; transform: rotate(45deg) scale(0.9); }
#view-system :is(.mc-chip, .mc-state)[data-level="crit"]::before { border-radius: 1px; }
#view-system .mc-state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* the band: which box, how it is */
#view-system .mc-band { display: flex; flex-direction: column; gap: 14px; padding: 2px 0 4px; border-bottom: 1px solid var(--k-line); padding-bottom: 16px; }
#view-system .mc-band-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
#view-system .mc-band-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#view-system .mc-band-title .page-title { margin: 0; }
#view-system .mc-band-title .mc-chip { padding: 3px 11px 3px 9px; font-size: 0.8125rem; }
#view-system .mc-band-tools { display: flex; align-items: center; gap: 8px; }
#view-system .mc-asof { margin-right: 4px; color: var(--k-ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
#view-system .mc-ident { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 0; }
#view-system .mc-ident-item { min-width: 0; }
#view-system .mc-ident dt { margin: 0 0 2px; color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .mc-ident dd { margin: 0; color: var(--k-ink); font-weight: 550; }
#view-system .mc-health-line { margin: 0; color: var(--k-ink-2); font-size: 0.875rem; }

/* the tiles: the figure big, its unit small, its level, five minutes of it */
#view-system .mc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mc-gap); }
#view-system .mc .mc-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px 12px; }
#view-system .mc-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
#view-system .mc .mc-kpi h2 { color: var(--k-ink-2); font-size: 0.8125rem; font-weight: 600; }
#view-system .mc-fig { display: flex; align-items: baseline; gap: 4px; margin: 4px 0 0; min-height: 2.5rem; }
#view-system .mc-fig-num { color: var(--k-ink); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
#view-system .mc-fig-num.is-word { color: var(--k-ink-2); font-size: 1.125rem; font-weight: 500; letter-spacing: 0; }
#view-system .mc-fig-unit { color: var(--k-ink-2); font-size: 0.875rem; font-weight: 500; }
#view-system .mc-kpi-sub { margin: 0 0 10px; min-height: 1.3em; color: var(--k-ink-2); font-size: 0.8125rem; }

/* a sparkline: a 2px line in the accent over a 10% wash, the newest point ringed in the surface; a hairline and a readout on hover or focus */
#view-system .mc-spark { position: relative; display: block; height: 40px; margin-top: auto; border-bottom: 1px solid var(--k-line); border-radius: 2px; outline: none; }
#view-system .mc-spark.is-cell { flex: 0 0 80px; height: 22px; margin: 0; }
#view-system .mc-spark:focus-visible { box-shadow: 0 0 0 2px var(--k-focus); }
#view-system .mc-spark-svg { display: block; width: 100%; height: 100%; overflow: visible; }
#view-system .mc-spark-line { fill: none; stroke: var(--k-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#view-system .mc-spark-area { fill: color-mix(in srgb, var(--k-accent) 10%, transparent); stroke: none; }
#view-system .mc-spark-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--k-accent); box-shadow: 0 0 0 2px var(--k-surface); transform: translate(-50%, -50%); pointer-events: none; }
#view-system .mc-spark.is-cell .mc-spark-dot { width: 6px; height: 6px; }
#view-system .mc-spark-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--k-ink) 45%, transparent); pointer-events: none; }
#view-system .mc-spark-tip { position: absolute; bottom: calc(100% + 6px); z-index: 4; padding: 3px 7px; border: 1px solid var(--k-line); border-radius: calc(var(--k-radius) * 0.75); background: var(--k-surface); box-shadow: var(--k-shadow-2); color: var(--k-ink); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
#view-system .mc-spark-tip[data-side="start"] { transform: translateX(-8px); }
#view-system .mc-spark-tip[data-side="end"] { transform: translateX(calc(-100% + 8px)); }

/* the panels */
#view-system .mc-grid { display: grid; gap: var(--mc-gap); min-width: 0; }
#view-system .mc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#view-system .mc-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
#view-system .mc-stack { display: flex; flex-direction: column; gap: var(--mc-gap); min-width: 0; }
#view-system .mc-panel { min-width: 0; }
#view-system .mc-panel-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-height: 32px; margin: 0 0 12px; }
#view-system .mc-panel-head > :is(.mc-tools, .mc-switch, .mc-icon) { margin-left: auto; }
#view-system .mc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* the processor: a meter per core (the track a light step of the fill), the load averages */
#view-system .mc-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 7px 20px; }
#view-system .mc-core { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.8125rem; }
#view-system .mc-core-id { flex: none; width: 3.4em; color: var(--k-ink-2); font-family: var(--k-font-mono); font-size: 0.75rem; }
#view-system .mc-core-val { flex: none; width: 3em; text-align: right; font-variant-numeric: tabular-nums; }
#view-system .mc-meter { position: relative; flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--k-accent) 12%, var(--k-surface)); }
#view-system .mc-meter-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--k-accent); }
#view-system .mc-meter-fill[data-level="warn"], #view-system .mc-meter-fill[data-level="crit"] { background: var(--mc-lvl); }
#view-system .mc-load { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--k-line); }
#view-system .mc-load dt { color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .mc-load dd { margin: 2px 0 0; font-size: 1.125rem; font-weight: 600; }

/* a whole split into its parts: one bar, a 2px surface gap between them, a legend with every figure */
#view-system .mc-bar { display: flex; gap: 2px; height: 14px; overflow: hidden; border-radius: 999px; }
#view-system .mc-bar-seg { flex: 0 1 0; min-width: 3px; }
#view-system [data-part="inuse"], #view-system [data-part="blob"] { background: var(--k-accent); }
#view-system [data-part="cache"], #view-system [data-part="db"] { background: color-mix(in srgb, var(--k-accent) 50%, var(--k-surface)); }
#view-system [data-part="other"] { background: color-mix(in srgb, var(--k-ink-2) 55%, var(--k-surface)); }
#view-system [data-part="free"], #view-system [data-part="headroom"] { background: var(--k-surface-2); box-shadow: inset 0 0 0 1px var(--k-line); }
#view-system [data-part="reserve"] { background: color-mix(in srgb, var(--k-ink-2) 22%, var(--k-surface)); }
#view-system .mc-legend { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
#view-system .mc-legend-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 3.4em; align-items: center; gap: 10px; font-size: 0.8125rem; }
#view-system .mc-swatch { width: 10px; height: 10px; border-radius: 3px; }
#view-system .mc-legend-name { min-width: 0; overflow: hidden; color: var(--k-ink); text-overflow: ellipsis; white-space: nowrap; }
#view-system .mc-legend-val { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
#view-system .mc-legend-share { color: var(--k-ink-2); font-variant-numeric: tabular-nums; text-align: right; }
#view-system .mc-legend-row.is-plain .mc-swatch, #view-system .mc-legend-row.is-sub .mc-swatch { visibility: hidden; }
#view-system .mc-legend-row.is-plain .mc-legend-name { color: var(--k-ink-2); }
#view-system .mc-legend-row.is-plain:not(.is-sub) { padding-top: 6px; border-top: 1px solid var(--k-line); }
#view-system .mc-legend-row.is-plain + .mc-legend-row.is-plain:not(.is-sub) { padding-top: 0; border-top: 0; }
#view-system .mc-legend-row.is-sub { font-size: 0.75rem; }
#view-system .mc-legend-row.is-sub .mc-legend-name { padding-left: 12px; color: var(--k-ink-2); font-family: var(--k-font-mono); }
#view-system .mc-legend-row.is-sub .mc-legend-val { color: var(--k-ink-2); font-weight: 500; }

/* the tables */
#view-system .mc-table { font-size: 0.8125rem; }
#view-system .mc-table th, #view-system .mc-table td { padding: 7px 10px; vertical-align: middle; }
#view-system .mc-table th { font-size: 0.75rem; }
#view-system .mc-table tr > :first-child { padding-left: 2px; }
#view-system .mc-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#view-system .mc-svc-name, #view-system .mc-if, #view-system .mc-proc-name { font-family: var(--k-font-mono); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
#view-system .mc-table td.mc-quiet { white-space: nowrap; }
#view-system .mc-tot-bytes { display: block; }
#view-system .mc-tot-pkts { display: block; color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .mc-aa { white-space: nowrap; }
#view-system .mc-aa-profile { margin-left: 8px; color: var(--k-ink-2); font-family: var(--k-font-mono); font-size: 0.75rem; }
#view-system .mc-since { color: var(--k-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#view-system .mc-rate { min-width: 6.5rem; white-space: nowrap; }
#view-system .mc-rate-val { display: block; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
#view-system .mc-rate-val.is-word { color: var(--k-ink-2); }
#view-system .mc-rate .mc-spark { display: block; width: 100%; max-width: 160px; }
#view-system .mc-switch { display: inline-flex; padding: 2px; border: 1px solid var(--k-line); border-radius: var(--k-radius); }
#view-system .mc-switch button { appearance: none; min-height: 26px; margin: 0; padding: 0 10px; border: 0; border-radius: calc(var(--k-radius) * 0.7); background: transparent; color: var(--k-ink-2); font: inherit; font-size: 0.75rem; cursor: pointer; }
#view-system .mc-switch button[aria-pressed="true"] { background: var(--k-surface-2); color: var(--k-ink); font-weight: 600; }
#view-system .mc-switch button:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 1px; }

/* the network test: the percentiles on one shared axis, the download beside them */
#view-system .mc-speed { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
#view-system .mc-boxplot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#view-system .mc-bp-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; }
#view-system .mc-bp-name { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; grid-row: span 2; }
#view-system .mc-bp-name b { font-weight: 600; }
#view-system .mc-bp-track { position: relative; height: 26px; background: linear-gradient(var(--k-line), var(--k-line)) center / 100% 1px no-repeat; }
#view-system .mc-bp-whisker { position: absolute; top: 50%; height: 2px; background: color-mix(in srgb, var(--k-ink-2) 70%, transparent); transform: translateY(-50%); }
#view-system .mc-bp-box { position: absolute; top: 5px; bottom: 5px; border-radius: 4px; background: color-mix(in srgb, var(--k-accent) 24%, var(--k-surface)); }
#view-system .mc-bp-mid { position: absolute; top: 2px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--k-accent); transform: translateX(-1px); }
#view-system .mc-bp-tick { position: absolute; top: 7px; bottom: 7px; width: 2px; border-radius: 1px; background: var(--k-ink-2); transform: translateX(-1px); }
#view-system .mc-bp-tick.is-p99 { top: 4px; bottom: 4px; background: var(--k-ink); }
#view-system .mc-bp-nums { grid-column: 2; margin: 0; color: var(--k-ink-2); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
#view-system .mc-bp-row.is-axis { row-gap: 0; }
#view-system .mc-bp-axis { position: relative; height: 18px; border-top: 1px solid var(--k-line); }
#view-system .mc-bp-axis-tick { position: absolute; top: 3px; color: var(--k-ink-2); font-size: 0.6875rem; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); }
#view-system .mc-bp-axis-tick:first-child { transform: none; }
#view-system .mc-bp-axis-tick:last-child { transform: translateX(-100%); }
#view-system .mc-dl { display: grid; grid-template-columns: 6.5rem auto minmax(0, 1fr); align-items: baseline; column-gap: 16px; padding-top: 12px; border-top: 1px solid var(--k-line); }
#view-system .mc-dl .mc-kpi-head { min-height: 0; }
#view-system .mc-dl .mc-fig { min-height: 0; margin: 0; }
#view-system .mc-dl .mc-fig-num { font-size: 1.5rem; }
#view-system .mc-dl .mc-kpi-sub { margin: 0; min-height: 0; }

/* the settings: a form in groups; the quiet line under each control; the Save bar only with something unsaved */
#view-system .settings-groups { display: flex; flex-direction: column; gap: 22px; }
#view-system .settings-group h3 { margin: 0; padding: 0 0 8px; border-bottom: 1px solid var(--k-line); color: var(--k-ink); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
#view-system .settings-pace { margin: 10px 0 2px; max-width: 120ch; color: var(--k-ink-2); font-size: 0.8125rem; line-height: 1.5; }
#view-system .settings-row { display: grid; grid-template-columns: minmax(13rem, 2fr) minmax(0, 3fr); align-items: start; gap: 6px 28px; padding: 12px 10px 12px 12px; border-bottom: 1px solid color-mix(in srgb, var(--k-line) 70%, transparent); }
#view-system .settings-row.is-changed { background: color-mix(in srgb, var(--k-accent) 5%, transparent); box-shadow: inset 2px 0 0 var(--k-accent); }
#view-system .settings-row.is-invalid { background: color-mix(in srgb, var(--k-danger) 5%, transparent); box-shadow: inset 2px 0 0 var(--k-danger); }
#view-system .settings-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; padding-top: 5px; }
#view-system .settings-label { color: var(--k-ink); font-size: 0.875rem; font-weight: 550; }
#view-system .settings-marks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
#view-system .settings-mark { padding: 0 7px; border: 1px solid var(--k-line); border-radius: 999px; color: var(--k-ink-2); font-size: 0.6875rem; font-weight: 600; line-height: 1.55; white-space: nowrap; }
#view-system .settings-mark.is-custom { border-color: color-mix(in srgb, var(--k-accent) 45%, transparent); background: color-mix(in srgb, var(--k-accent) 9%, var(--k-surface)); color: var(--k-ink); }
#view-system .settings-mark.is-pending { border-color: var(--k-accent); background: var(--k-accent); color: var(--k-on-accent); }
#view-system .settings-key { flex-basis: 100%; color: var(--k-ink-2); font-family: var(--k-font-mono); font-size: 0.6875rem; overflow-wrap: anywhere; }
#view-system .settings-ctl { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#view-system .settings-input { display: flex; align-items: center; gap: 8px; min-width: 0; }
#view-system .settings-input :is(input, select) { width: 100%; max-width: 12rem; min-width: 0; min-height: 32px; margin: 0; padding: 4px 9px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-ink); font: inherit; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
#view-system .settings-input :is(input, select):focus { outline: none; border-color: var(--k-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-focus) 22%, transparent); }
#view-system .settings-input :is(input, select):disabled { opacity: 0.6; cursor: not-allowed; }
#view-system .settings-input input[type="number"] { flex: 0 1 8rem; }
#view-system .settings-input .settings-per { flex: none; width: auto; max-width: none; }
#view-system .settings-row.is-invalid .settings-input :is(input, select) { border-color: var(--k-danger); }
#view-system .settings-unit { color: var(--k-ink-2); font-size: 0.8125rem; white-space: nowrap; }
#view-system .settings-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .settings-meta > :not(:first-child)::before { content: "·"; display: inline-block; margin: 0 7px; color: color-mix(in srgb, var(--k-ink-2) 60%, transparent); text-decoration: none; }
#view-system .settings-meta .settings-now { color: var(--k-ink); }
#view-system .settings-back { padding: 0; border: 0; background: none; color: var(--k-accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#view-system .settings-back:disabled { color: var(--k-ink-2); text-decoration: none; cursor: default; }
#view-system .settings-actions { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; padding: 10px 12px 10px 16px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow-2); }
#view-system .settings-count { font-weight: 600; }
#view-system .settings-effect { margin-right: auto; color: var(--k-ink-2); font-size: 0.8125rem; }
#view-system .settings-status { color: var(--k-ink); }

/* the server, apart: a danger outline, the confirm step in the page's own dialog */
#view-system .mc .mc-danger { border-color: color-mix(in srgb, var(--k-danger) 45%, var(--k-line)); }
#view-system .mc-danger-body { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
#view-system .mc-danger-text { min-width: 0; flex: 1 1 28rem; }
#view-system .mc-danger-text h2 { margin-bottom: 6px; }
#view-system .mc-danger-text .mc-note { margin: 0; }
#view-system .mc-danger-text .mc-note + .mc-note { margin-top: 6px; }
#view-system .mc-btn-danger { border-color: var(--k-danger); color: var(--k-danger); background: transparent; }
#view-system .mc-btn-danger:not(:disabled):hover { background: var(--k-danger); color: #fff; }
.k-dialog-facts { margin: 14px 0 0; padding: 8px 10px; border-radius: var(--k-radius); background: var(--k-surface-2); color: var(--k-ink-2); font-family: var(--k-font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
.k-dialog-facts:empty { display: none; }

@media (max-width: 1180px) {
  #view-system .mc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-system .mc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-system .mc-grid-3 > :last-child { grid-column: 1 / -1; }
  #view-system .mc-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  #view-system .mc { --mc-gap: 12px; }
  #view-system .mc-kpis, #view-system .mc-grid-3 { grid-template-columns: minmax(0, 1fr); }
  #view-system .mc-dl { grid-template-columns: auto minmax(0, 1fr); }
  #view-system .mc-dl .mc-kpi-sub { grid-column: 1 / -1; }
  #view-system .mc-bp-row { grid-template-columns: minmax(0, 1fr); }
  #view-system .mc-bp-name { grid-row: auto; flex-direction: row; align-items: center; }
  #view-system .mc-bp-nums { grid-column: 1; }
  #view-system .settings-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #view-system .settings-input :is(input, select) { max-width: none; }
  #view-system .settings-actions .k-btn { flex: 1 1 auto; }
  #view-system .mc-band-tools { width: 100%; }
  #view-system .mc-asof { margin-right: auto; }
}

/* the band's sections: a button each, they scroll to their card (the address bar stays clean) */
#view-system .mc-sections { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
#view-system .mc-sections button { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: 0; padding: 0 11px; border: 1px solid var(--k-line); border-radius: 999px; background: transparent; color: var(--k-ink-2); font: inherit; font-size: 0.8125rem; cursor: pointer; transition: background-color 150ms, color 150ms, border-color 150ms; }
#view-system .mc-sections button:hover { border-color: var(--k-accent); color: var(--k-ink); }
#view-system .mc-sections button:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 1px; }
#view-system .mc-sec-mark { width: 7px; height: 7px; border-radius: 1px; background: var(--mc-lvl); }
#view-system .mc-sec-mark[data-level="warn"] { transform: rotate(45deg) scale(0.9); }

/* the Backups section (kyr_backup's mock of 8 Nov): the levels add "info", the accent */
#view-system [data-level="info"] { --mc-lvl: var(--k-accent); }
#view-system .mc-bk { display: flex; flex-direction: column; gap: var(--mc-gap); min-width: 0; scroll-margin-top: 16px; color-scheme: light;
  scrollbar-color: color-mix(in srgb, var(--k-ink-2) 45%, transparent) transparent; }
/* the section's own scrollbars and native controls (the lanes' box, the points' list, the selects) in the page's scheme, never light in dark */
:root[data-theme="dark"] #view-system .mc-bk { color-scheme: dark; }
#view-system :is(#mc-kpis, #mc-disk, #admin-netstat-card, #admin-settings-card, #admin-restart-card, #bk-policy) { scroll-margin-top: 16px; }
#view-system .bk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 10px; border-top: 1px solid var(--k-line); }
#view-system .mc .bk-title { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
#view-system .bk-asof { margin-left: auto; color: var(--k-ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
#view-system .bk-line { margin: 0; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--mc-lvl) 40%, var(--k-line)); border-left: 4px solid var(--mc-lvl); border-radius: var(--k-radius); background: color-mix(in srgb, var(--mc-lvl) 6%, var(--k-surface)); color: var(--k-ink); font-size: 0.875rem; line-height: 1.5; }
#view-system .bk-body { display: flex; flex-direction: column; gap: var(--mc-gap); min-width: 0; }
#view-system .bk-none[data-level="warn"] { border-color: color-mix(in srgb, var(--k-warn) 45%, var(--k-line)); }
#view-system .bk-none h2 { margin-bottom: 8px; font-size: 1rem; }
#view-system .bk-none-steps { display: grid; gap: 10px; margin: 0 0 12px; padding-left: 22px; font-size: 0.875rem; }
#view-system .bk-none-steps li { display: list-item; }
#view-system .bk-none-steps li > span { display: block; margin: 0 0 5px; }
#view-system .bk-none-steps li > .bk-why { margin: 4px 0 0; max-width: none; } /* an ADMIN's line under a step: who holds it */
/* a command: wrapped at its spaces inside its box (a word longer than the box breaks), never cut, never a sideways scroll; its Copy beside */
#view-system .bk-cmd { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
#view-system .bk-code { display: block; flex: 1 1 auto; min-width: 0; padding: 6px 9px; border-radius: var(--k-radius); background: var(--k-surface-2); color: var(--k-ink); font-family: var(--k-font-mono); font-size: 0.75rem; line-height: 1.5; white-space: normal; }
#view-system .bk-code .bk-w { display: inline-block; max-width: 100%; overflow-wrap: anywhere; } /* a word breaks inside only when it alone is wider than the box */
#view-system .bk-copy { flex: none; min-height: 28px; padding: 0 10px; font-size: 0.75rem; }

/* the summary */
#view-system .bk-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; }
#view-system .bk-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 12px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow-1); }
#view-system .bk-fact dt { color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .bk-fact dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin: 0; }
#view-system .bk-fact .mc-chip { padding: 0 7px 0 6px; font-size: 0.6875rem; }
#view-system .bk-fact-val { color: var(--k-ink); font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
#view-system .bk-fact-sub { color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .bk-alerts { display: flex; flex-direction: column; gap: 10px; }
#view-system .bk-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--mc-lvl) 45%, var(--k-line)); border-left: 4px solid var(--mc-lvl); border-radius: var(--k-radius); background: color-mix(in srgb, var(--mc-lvl) 7%, var(--k-surface)); }
#view-system .bk-alert p { flex: 1 1 40rem; min-width: 0; margin: 0; color: var(--k-ink); font-size: 0.875rem; line-height: 1.5; }

/* acts: every one visible; greyed with who may, and when */
#view-system .bk-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
#view-system .bk-act { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#view-system .bk-act .k-btn { min-height: 32px; padding: 0 12px; font-size: 0.8125rem; }
#view-system .bk-why { max-width: 36ch; color: var(--k-ink-2); font-size: 0.6875rem; line-height: 1.3; }
#view-system .bk-why:empty { display: none; }

/* the copies over time: log time both ways from now */
#view-system .bk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 0; list-style: none; color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .bk-legend li { display: inline-flex; align-items: center; gap: 6px; }
#view-system .bk-legend svg { width: 22px; height: 14px; overflow: visible; }
#view-system .bk-tl-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
#view-system .bk-tl { min-width: 780px; }
#view-system .bk-tl svg { display: block; }
#view-system .bk-lane { padding: 10px 0 6px; border-top: 1px solid var(--k-line); }
#view-system .bk-lane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 4px; }
#view-system .bk-lane-name { font-family: var(--k-font-mono); font-size: 0.875rem; font-weight: 700; }
#view-system .bk-lane-what { color: var(--k-ink-2); font-size: 0.8125rem; }
#view-system .bk-lane-tools { margin-left: auto; }
#view-system .bk-lane-sub { margin: 0 0 2px; color: var(--k-ink-2); font-size: 0.8125rem; }
#view-system .bk-lane-sub b { color: var(--k-ink); font-weight: 600; }
#view-system .bk-lane-sub b.is-late { color: var(--k-danger); }
#view-system svg text { font-family: var(--k-font-ui); }
#view-system .t-axis { fill: var(--k-ink-2); font-size: 11px; }
#view-system .t-axis-strong { fill: var(--k-ink); font-size: 11px; font-weight: 600; }
#view-system .t-gutter { fill: var(--k-ink); font-size: 11px; }
#view-system .t-gutter-2 { fill: var(--k-ink-2); font-size: 11px; }
#view-system .g-line { stroke: var(--k-line); stroke-width: 1; fill: none; }
#view-system .g-future { stroke: var(--k-line); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
#view-system .g-now { stroke: var(--k-ink); stroke-width: 1.5; fill: none; opacity: 0.55; }
#view-system .g-quiet { fill: color-mix(in srgb, var(--k-ok) 9%, transparent); stroke: none; }
#view-system .g-edge { stroke: var(--k-ink-2); stroke-width: 1; fill: none; }
#view-system .m-dot { fill: var(--k-accent); stroke: var(--k-surface); stroke-width: 1; }
#view-system .m-ring { fill: var(--k-surface); stroke: var(--k-accent); stroke-width: 1.4; opacity: 0.75; }
#view-system .m-held { fill: var(--kyr-mark, var(--k-tone-4)); stroke: var(--k-surface); stroke-width: 1; }
#view-system .m-held-ring { fill: var(--k-surface); stroke: var(--kyr-mark, var(--k-tone-4)); stroke-width: 1.4; }
#view-system .m-arc { fill: none; stroke: var(--k-accent); stroke-width: 1.4; opacity: 0.55; }
#view-system .m-arc.hot { opacity: 1; stroke-width: 2; }
#view-system .m-sel { fill: none; stroke: var(--k-ink); stroke-width: 2; }
#view-system .m-window { fill: color-mix(in srgb, var(--k-accent) 9%, transparent); stroke: color-mix(in srgb, var(--k-accent) 40%, transparent); stroke-width: 1; }
#view-system .m-plan { fill: var(--kyr-mark, var(--k-tone-4)); stroke: none; }
#view-system .m-deadline { stroke: var(--k-danger); stroke-width: 2; fill: none; }
#view-system .m-latest { stroke: var(--k-ink-2); stroke-width: 1.5; stroke-dasharray: 2 2; fill: none; }
#view-system .m-ok { fill: var(--k-ok); stroke: var(--k-surface); stroke-width: 1; }
#view-system .m-fail { stroke: var(--k-danger); stroke-width: 2; fill: none; }
#view-system .m-gap { stroke: var(--k-danger); stroke-width: 3; fill: none; stroke-linecap: round; }
#view-system .m-next { fill: var(--k-ink); stroke: none; }
#view-system .m-full { stroke: var(--k-warn); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
#view-system .m-full-flag { fill: var(--k-warn); stroke: none; }
#view-system .m-clip { fill: var(--k-accent); stroke: none; opacity: 0.75; }
#view-system .hit { fill: transparent; stroke: none; cursor: crosshair; }
#view-system .hit.pick { cursor: pointer; }
#view-system .bk-tip { position: fixed; z-index: 30; max-width: 360px; padding: 7px 10px; border: 1px solid var(--k-line); border-radius: calc(var(--k-radius) * 0.75); background: var(--k-surface); box-shadow: var(--k-shadow-2); color: var(--k-ink); font-size: 0.75rem; line-height: 1.45; pointer-events: none; }
#view-system .bk-tip b { font-weight: 650; }
#view-system .bk-tip-mono { color: var(--k-ink-2); font-family: var(--k-font-mono); font-size: 0.6875rem; overflow-wrap: anywhere; }

/* is the box quiet, and tonight */
#view-system .bk-verdict { margin: 0 0 12px; max-width: 120ch; color: var(--k-ink); font-size: 0.8125rem; line-height: 1.5; }
#view-system .bk-after { margin: 10px 0 0; }
#view-system .bk-sig { display: grid; grid-template-columns: minmax(13rem, 1.3fr) 3.4rem minmax(8.5rem, 1.6fr) auto; align-items: center; gap: 6px 14px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--k-line) 70%, transparent); font-size: 0.8125rem; }
#view-system .bk-sig-label b { display: block; font-weight: 600; }
#view-system .bk-sig-label span { color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .bk-sig-val { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
#view-system .bk-sig-when { color: var(--k-ink-2); white-space: nowrap; }
#view-system .bk-meter { position: relative; height: 10px; border-radius: 999px; background: var(--k-surface-2); }
#view-system .bk-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--k-accent); }
#view-system .bk-fill:is([data-level="warn"], [data-level="crit"]) { background: var(--mc-lvl); }
#view-system .bk-fill[data-level="none"] { background: var(--k-line); }
#view-system :is(.bk-tq, .bk-tb) { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; }
#view-system .bk-tq { background: var(--k-ok); }
#view-system .bk-tb { background: var(--k-danger); }
#view-system .bk-chart svg { display: block; width: 100%; overflow: visible; }
#view-system .c-area { fill: color-mix(in srgb, var(--k-accent) 12%, transparent); stroke: none; }
#view-system .c-line { fill: none; stroke: var(--k-accent); stroke-width: 2; stroke-linejoin: round; }
#view-system .c-thr-q { stroke: var(--k-ok); stroke-width: 1; stroke-dasharray: 4 3; fill: none; }
#view-system .c-thr-b { stroke: var(--k-danger); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
#view-system .c-cross { stroke: var(--k-ink); stroke-width: 1; opacity: 0.45; fill: none; }
#view-system .c-grid { stroke: var(--k-line); stroke-width: 1; fill: none; }

/* space */
#view-system .bk-space { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#view-system .bk-pool { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--k-line); border-radius: var(--k-radius); }
#view-system .bk-pool-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#view-system .bk-pool-name { font-family: var(--k-font-mono); font-weight: 700; overflow-wrap: anywhere; }
#view-system .bk-pool-where { color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .bk-pool-fig { margin: 0; color: var(--k-ink); font-size: 1.375rem; font-weight: 650; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
#view-system .bk-pool-fig span { color: var(--k-ink-2); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; }
#view-system .bk-bar { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 999px; }
#view-system .bk-bar i { display: block; min-width: 3px; }
#view-system .bk-bar-u { background: var(--k-accent); }
#view-system .bk-bar-u:is([data-level="warn"], [data-level="crit"]) { background: var(--mc-lvl); }
#view-system .bk-bar-f { background: var(--k-surface-2); box-shadow: inset 0 0 0 1px var(--k-line); }
#view-system .bk-pool-proj { margin: 0; color: var(--k-ink); font-size: 0.8125rem; line-height: 1.45; }
#view-system .p-hist { fill: color-mix(in srgb, var(--k-accent) 14%, transparent); stroke: none; }
#view-system .p-line { fill: none; stroke: var(--k-accent); stroke-width: 1.6; }
#view-system .p-proj { fill: none; stroke: var(--k-ink-2); stroke-width: 1.6; stroke-dasharray: 4 3; }
#view-system .p-proj:is([data-level="warn"], [data-level="crit"]) { stroke: var(--mc-lvl); }
#view-system .p-cap { stroke: var(--k-ink); stroke-width: 1; stroke-dasharray: 1 2; fill: none; opacity: 0.6; }

/* the drill and the restore */
#view-system .bk-steps { display: grid; gap: 4px; margin: 10px 0 12px; padding: 0; list-style: none; font-size: 0.8125rem; }
#view-system .bk-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
#view-system .bk-steps li::before { content: "\2713"; color: var(--k-ok); font-weight: 700; }
#view-system .bk-steps li[data-ok="0"]::before { content: "\2717"; color: var(--k-danger); }
#view-system .bk-steps li[data-ok="0"] > span:first-of-type { color: var(--k-danger); font-weight: 600; }
#view-system .bk-step-time { color: var(--k-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#view-system .bk-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 12px; font-size: 0.8125rem; }
#view-system .bk-kv dt { color: var(--k-ink-2); }
#view-system .bk-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#view-system .bk-restore { position: relative; }
#view-system .bk-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; margin: 0 0 10px; }
#view-system .bk-picker label { display: flex; flex-direction: column; gap: 4px; color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .bk-picker .mc-select { width: 100%; }
#view-system .bk-points { position: relative; max-height: 232px; overflow-y: auto; margin: 0 0 12px; padding: 0; border: 1px solid var(--k-line); border-radius: var(--k-radius); list-style: none; }
#view-system .bk-points li.bk-day { position: sticky; top: 0; z-index: 1; padding: 4px 10px; background: var(--k-surface-2); color: var(--k-ink-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
#view-system .bk-points li.bk-points-none { padding: 10px; color: var(--k-ink-2); font-size: 0.8125rem; }
#view-system .bk-points label { display: grid; grid-template-columns: 16px 4.6rem minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 10px; border-top: 1px solid color-mix(in srgb, var(--k-line) 60%, transparent); font-size: 0.8125rem; cursor: pointer; }
#view-system .bk-points label:hover { background: color-mix(in srgb, var(--k-accent) 7%, transparent); }
#view-system .bk-points input { margin: 0; accent-color: var(--k-accent); }
#view-system .bk-pt-time { font-variant-numeric: tabular-nums; }
#view-system :is(.bk-pt-tier, .bk-pt-seq) { color: var(--k-ink-2); font-size: 0.75rem; white-space: nowrap; }
#view-system .bk-chosen { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--k-radius); background: var(--k-surface-2); color: var(--k-ink); font-size: 0.8125rem; line-height: 1.5; overflow-wrap: anywhere; }
#view-system .bk-chosen b { font-weight: 650; }
#view-system .bk-flash::after { content: ""; position: absolute; inset: -3px; border: 3px solid var(--k-accent); border-radius: inherit; pointer-events: none; opacity: 0; animation: bk-flash 300ms ease-out; }
@keyframes bk-flash { from { opacity: 1; } to { opacity: 0; } }

/* the schedule and retention: the settings' rows */
#view-system .bk-groups { display: flex; flex-direction: column; gap: 20px; }
#view-system .bk-group h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 0 8px; border-bottom: 1px solid var(--k-line); color: var(--k-ink); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
#view-system .bk-plain { background: transparent; }
#view-system .bk-row { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr); gap: 6px 28px; padding: 10px 10px 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--k-line) 70%, transparent); }
#view-system .bk-row.is-changed { background: color-mix(in srgb, var(--k-accent) 5%, transparent); box-shadow: inset 2px 0 0 var(--k-accent); }
#view-system .bk-row.is-invalid { background: color-mix(in srgb, var(--k-danger) 5%, transparent); box-shadow: inset 2px 0 0 var(--k-danger); }
#view-system .bk-row-lbl b { display: block; color: var(--k-ink); font-size: 0.875rem; font-weight: 550; }
#view-system .bk-row-lbl span { color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .bk-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; font-size: 0.8125rem; }
#view-system .bk-ctl .mc-select { min-height: 32px; }
#view-system .bk-num { width: 5.6rem; min-height: 32px; margin: 0; padding: 4px 8px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-ink); font: inherit; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
#view-system :is(.bk-num, .bk-ctl .mc-select):focus { outline: none; border-color: var(--k-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-focus) 22%, transparent); }
#view-system .bk-num.is-invalid { border-color: var(--k-danger); }
#view-system :is(.bk-num, .bk-ctl .mc-select, .bk-switch input):disabled { opacity: 0.6; cursor: not-allowed; }
#view-system .bk-unit { color: var(--k-ink-2); }
#view-system .bk-locked { display: inline-flex; align-items: center; gap: 6px; color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .bk-locked::before { content: ""; flex: none; width: 9px; height: 9px; border: 1.5px solid var(--k-ink-2); border-radius: 2px; }
#view-system .bk-switch { display: inline-flex; align-items: center; gap: 8px; color: var(--k-ink); cursor: pointer; }
#view-system .bk-switch input { position: relative; width: 34px; height: 20px; margin: 0; appearance: none; border-radius: 999px; background: var(--k-surface-2); box-shadow: inset 0 0 0 1px var(--k-line); cursor: pointer; transition: background-color 150ms; }
#view-system .bk-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--k-ink-2); transition: transform 150ms; }
#view-system .bk-switch input:checked { background: var(--k-accent); box-shadow: none; }
#view-system .bk-switch input:checked::after { transform: translateX(14px); background: var(--k-on-accent); }
#view-system .bk-switch input:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; }

/* on the box only */
#view-system .bk-boxonly { display: grid; margin: 0; padding: 0; list-style: none; }
#view-system .bk-boxonly li { display: grid; grid-template-columns: minmax(16rem, 1.3fr) minmax(0, 2fr) auto; gap: 6px 18px; align-items: center; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--k-line) 70%, transparent); }
#view-system .bk-bo-what b { display: block; color: var(--k-ink); font-size: 0.875rem; font-weight: 600; }
#view-system .bk-bo-what span { color: var(--k-ink-2); font-size: 0.75rem; }
#view-system .bk-bo-what .mc-chip { margin-left: 6px; }
#view-system .bk-boxonly .bk-why { max-width: none; white-space: nowrap; }

/* the restore's typed confirmation */
.bk-dialog .bk-dlg-point { margin: 0 0 4px; color: var(--k-ink); line-height: 1.5; }
.bk-dialog .bk-dlg-steps { margin: 10px 0 16px; padding-left: 20px; color: var(--k-ink); font-size: 0.8125rem; line-height: 1.55; }
.bk-dialog .mc-mono { font-family: var(--k-font-mono); }

@media (max-width: 1240px) {
  #view-system .bk-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #view-system .bk-space { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #view-system .bk-facts, #view-system .bk-space { grid-template-columns: minmax(0, 1fr); }
  #view-system .bk-row { grid-template-columns: minmax(0, 1fr); }
  #view-system .bk-boxonly li { grid-template-columns: minmax(0, 1fr); }
  #view-system .bk-sig { grid-template-columns: minmax(0, 1fr) auto; }
  #view-system .bk-sig .bk-meter, #view-system .bk-sig .bk-sig-when { grid-column: 1 / -1; }
  #view-system .bk-picker { grid-template-columns: minmax(0, 1fr); }
  #view-system .bk-asof { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #view-system .bk-flash::after { animation: none; }
  #view-system :is(.mc-sections button, .bk-switch input, .bk-switch input::after) { transition: none; }
}