/* Mock 15 Menu C — the job rail (founder 2026-10-20 "C is the default for everyone";
   2026-10-25 "structurally same design"). Born token-only (shell_css_literal_ratchet).
   Desktop: a 72px rail on the left; the old sidebar becomes the Spaces sheet beside it.
   Phones: the rail is a bottom tab bar, the Spaces sheet and More rise from the bottom. */

.kk-rail-wrap { display: contents; }
.kk-rail {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 85;
  width: var(--kk-s-8); display: flex; flex-direction: column; align-items: center; gap: var(--kk-s-1);
  padding: var(--kk-s-2) 0; border-right: 1px solid var(--kk-line); background: var(--kk-paper);
  overflow-y: auto; scrollbar-width: none;
}
.kk-rail::-webkit-scrollbar { display: none; }
.kk-rail-logo { display: grid; place-items: center; margin-bottom: var(--kk-s-2); }
.kk-rsep { width: var(--kk-s-6); height: 1px; margin: var(--kk-s-1) 0; background: var(--kk-line); flex: none; }
.kk-rgrow { flex: 1; }
.kk-ri {
  position: relative; flex: none; width: calc(var(--kk-s-8) - var(--kk-s-3)); min-height: calc(var(--kk-s-7) + var(--kk-s-1));
  display: grid; justify-items: center; align-content: center; gap: var(--kk-s-1);
  border: 0; border-radius: var(--kk-r-sm); background: none; color: var(--kk-text-soft);
  font: 600 var(--kk-fs-micro) / 1 var(--kk-font-ui); text-decoration: none; cursor: pointer;
}
.kk-ri:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-ri.is-on { background: var(--kk-fill); color: var(--kk-ink); }
.kk-ri:focus-visible { outline: 2px solid var(--kk-ink); outline-offset: -2px; }
.kk-ri-i { width: var(--kk-s-4); height: var(--kk-s-4); }
.kk-ri-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-ri-dot { position: absolute; top: var(--kk-s-2); right: var(--kk-s-3); width: var(--kk-s-2); height: var(--kk-s-2); border-radius: var(--kk-r-pill); background: var(--kk-blocker, var(--kk-danger)); }
.kk-ri-spq, .kk-ri-me {
  width: calc(var(--kk-s-5) + var(--kk-s-1) / 2); height: calc(var(--kk-s-5) + var(--kk-s-1) / 2); display: grid; place-items: center;
  border-radius: var(--kk-r-sm); font: 700 var(--kk-fs-micro) / 1 var(--kk-font-ui);
}
.kk-ri-spq { background: var(--kk-fill); color: var(--kk-ink); }
.kk-ri-me { border-radius: var(--kk-r-pill); background: var(--kk-ink); color: var(--kk-paper); }

/* More and You — quiet flyouts beside the rail (native popover, no JS).
   height: auto, not the UA's fit-content: Safari stretches fit-content on this
   bottom-pinned box from the window top to its inset, pulling every row tall. */
.kk-rail-fly {
  position: fixed; inset: auto auto var(--kk-s-3) calc(var(--kk-s-8) + var(--kk-s-2)); margin: 0;
  width: 14rem; height: auto; max-height: calc(100dvh - var(--kk-s-5)); overflow-y: auto; padding: var(--kk-s-1);
  border: 0; border-radius: var(--kk-r-md); background: var(--kk-card); color: var(--kk-text);
  box-shadow: 0 0 0 1px var(--kk-line), var(--kk-shadow-lg, var(--kk-shadow-sm));
}
.kk-rail-fly:popover-open { display: grid; gap: 1px; }
/* More's job list is its own element (a menu change swaps it in place) but lays out
   as part of the flyout's grid. */
.kk-rail-fly-list { display: contents; }
.kk-fi {
  position: relative; width: 100%; min-height: calc(var(--kk-s-6) + var(--kk-s-1)); display: flex; align-items: center; gap: var(--kk-s-2);
  padding: 0 var(--kk-s-2); border: 0; border-radius: var(--kk-r-sm); background: none; color: var(--kk-text);
  font: 500 var(--kk-fs-body) / 1.2 var(--kk-font-ui); text-align: left; text-decoration: none; cursor: pointer;
}
.kk-fi:hover, .kk-fi.is-on { background: var(--kk-fill); color: var(--kk-ink); }
.kk-fi > span { flex: 1; }
.kk-fi small { color: var(--kk-text-soft); font-size: var(--kk-fs-micro); }
.kk-fi-i { width: var(--kk-s-4); height: var(--kk-s-4); flex: none; color: var(--kk-text-soft); }
.kk-fi.is-greyed { opacity: .6; }
.kk-fi-edit { margin-top: var(--kk-s-1); border-top: 1px solid var(--kk-line); border-radius: 0 0 var(--kk-r-sm) var(--kk-r-sm); color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
.kk-fi-phone { display: none; }
.kk-fi-who { display: grid; gap: 2px; margin: 0; padding: var(--kk-s-2); border-bottom: 1px solid var(--kk-line); }
.kk-fi-who b { color: var(--kk-ink); font: 600 var(--kk-fs-body) / 1.3 var(--kk-font-ui); overflow-wrap: anywhere; }
.kk-fi-who small { color: var(--kk-text-soft); font-size: var(--kk-fs-meta); overflow-wrap: anywhere; }

/* Sign out stands apart: below a divider, in the danger colour, never one more setting. */
.kk-fi-sep { height: 1px; margin: var(--kk-s-1) 0; background: var(--kk-line); }
/* Sign out is a button_to form; the form box must not change the layout. */
.kk-fi-form { display: contents; }
.kk-fi.is-out, .kk-fi.is-out .kk-fi-i { color: var(--kk-danger, var(--kk-blocker)); }
.kk-fi-pair { display: flex; align-items: center; }
.kk-fi-pair > .kk-fi { flex: 1; min-width: 0; }
.kk-fi-aside {
  flex: none; display: flex; align-items: center; gap: var(--kk-s-1); min-height: calc(var(--kk-s-6) + var(--kk-s-1)); padding: 0 var(--kk-s-2);
  border: 0; border-radius: var(--kk-r-sm); background: none; color: var(--kk-text-soft); font: 500 var(--kk-fs-micro) / 1 var(--kk-font-ui); cursor: pointer;
}
.kk-fi-aside:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-fi-aside .kk-fi-i { width: var(--kk-s-3); height: var(--kk-s-3); }
/* More's account row: phones only — on desktop the initials sit at the rail's foot. */
.kk-fi-acct { display: none; }
.kk-fi-acct p { flex: 1; min-width: 0; display: grid; gap: 2px; margin: 0; }
.kk-fi-acct b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kk-ink); font: 600 var(--kk-fs-body) / 1.3 var(--kk-font-ui); }
.kk-fi-acct small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
.kk-fi-acct .kk-ri-me { flex: none; width: var(--kk-s-6); height: var(--kk-s-6); }
.kk-fi-acct .kk-fi-out {
  flex: none; display: inline-flex; align-items: center; gap: var(--kk-s-1); min-height: var(--kk-s-6); padding: 0 var(--kk-s-3);
  border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); color: var(--kk-danger, var(--kk-blocker));
  background: none; font: 600 var(--kk-fs-meta) / 1 var(--kk-font-ui); text-decoration: none; cursor: pointer;
}
.kk-fi-acct .kk-fi-out:hover { background: var(--kk-fill); }
.kk-fi-acct .kk-fi-out .kk-fi-i { width: var(--kk-s-3); height: var(--kk-s-3); color: currentColor; }

/* The old sidebar is now the Spaces sheet: its nav, collapse and user rows live in the rail. */
.kk-shell.is-rail .kk-side .kk-side-head,
.kk-shell.is-rail .kk-side .kk-nav,
.kk-shell.is-rail .kk-side .kk-rail-pop,
.kk-shell.is-rail .kk-side .kk-user { display: none; }
.kk-shell.is-rail .kk-side .kk-side-scroll { padding-top: var(--kk-s-3); }
.kk-shell.is-rail .kk-scrim { display: block; }

@media (min-width: 900px) {
  .kk-shell.is-rail .kk-main { margin-left: var(--kk-s-8); }
  .kk-shell.is-rail .kk-side { left: var(--kk-s-8); width: var(--kk-side-w); transform: translateX(calc(-100% - var(--kk-s-8))); box-shadow: var(--kk-shadow-sm); }
  .kk-shell.is-rail.is-open .kk-side { transform: translateX(0); }
}

@media (max-width: 899px) {
  .kk-rail {
    top: auto; right: 0; width: auto; flex-direction: row; justify-content: space-around; align-items: stretch; gap: 0;
    padding: var(--kk-s-1) var(--kk-s-1) calc(var(--kk-s-1) + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--kk-line); overflow: visible;
  }
  .kk-rail-logo, .kk-rgrow, .kk-rsep, .kk-ri-foot, .kk-ri.is-space .kk-ri-l { display: none; }
  .kk-ri { width: auto; flex: 1 1 0; min-width: 0; }
  .kk-shell.is-rail .kk-main { padding-bottom: calc(var(--kk-s-7) + var(--kk-s-3) + env(safe-area-inset-bottom)); }
  .kk-rail-fly {
    inset: auto 0 0 0; width: auto; max-height: 82dvh; grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--kk-s-3) var(--kk-s-3) calc(var(--kk-s-4) + env(safe-area-inset-bottom)); border-radius: var(--kk-r-lg) var(--kk-r-lg) 0 0;
  }
  .kk-rail-fly:popover-open { gap: var(--kk-s-1); }
  .kk-rail-fly.is-you { grid-template-columns: minmax(0, 1fr); }
  .kk-rail-fly:not(.is-you) .kk-fi { min-height: calc(var(--kk-s-7) + var(--kk-s-4)); flex-direction: column; justify-content: center; gap: var(--kk-s-1); text-align: center; font-size: var(--kk-fs-meta); }
  .kk-rail-fly:not(.is-you) .kk-fi > span { flex: none; }
  .kk-fi-phone { display: flex; }
  .kk-fi-acct {
    grid-column: 1 / -1; display: flex; align-items: center; gap: var(--kk-s-3);
    padding: var(--kk-s-1) var(--kk-s-1) var(--kk-s-3); margin-bottom: var(--kk-s-1); border-bottom: 1px solid var(--kk-line);
  }
  .kk-rail-fly .kk-fi-edit { grid-column: 1 / -1; min-height: calc(var(--kk-s-6) + var(--kk-s-3)); flex-direction: row; border-radius: var(--kk-r-sm); }
  .kk-shell.is-rail .kk-side {
    inset: auto 0 0 0; z-index: 90; width: auto; height: 82dvh; border-right: 0; border-radius: var(--kk-r-lg) var(--kk-r-lg) 0 0;
    transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom);
  }
  .kk-shell.is-rail.is-open .kk-side { transform: translateY(0); }
  .kk-shell.is-rail.is-open .kk-scrim { z-index: 88; }
}

/* Alerts: the notifications frame sits in the rail's flow; its count is a small badge. */
.kk-rail-frame { display: contents; }
.kk-ri-count {
  position: absolute; top: var(--kk-s-1); right: var(--kk-s-2); min-width: var(--kk-s-4); height: var(--kk-s-4); padding: 0 var(--kk-s-1);
  display: grid; place-items: center; border-radius: var(--kk-r-pill); background: var(--kk-blocker, var(--kk-danger)); color: var(--kk-paper);
  font: 700 var(--kk-fs-micro) / 1 var(--kk-font-ui);
}
.kk-rail-fly.is-alerts { width: 20rem; inset-block: var(--kk-s-3) auto; }
@media (max-width: 899px) { .kk-rail-fly.is-alerts { width: auto; inset-block: auto 0; } }

/* Icons only (Your menu → Labels → Icons): the rail keeps its jobs, drops the words. */
.kk-rail.is-icons .kk-ri-l { display: none; }
.kk-rail.is-icons .kk-ri { min-height: calc(var(--kk-s-6) + var(--kk-s-3)); }

/* Your menu — a sheet beside the rail on desktop, rising from the bottom on phones. */
.kk-rail-menu {
  position: fixed; inset: var(--kk-s-3) auto var(--kk-s-3) calc(var(--kk-s-8) + var(--kk-s-2)); margin: 0;
  width: 22rem; max-height: calc(100dvh - var(--kk-s-5)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--kk-s-4); border: 0; border-radius: var(--kk-r-md); background: var(--kk-card); color: var(--kk-text);
  box-shadow: 0 0 0 1px var(--kk-line), var(--kk-shadow-lg, var(--kk-shadow-sm));
}
.kk-rail-menu:popover-open { display: grid; gap: var(--kk-s-3); align-content: start; }
.kk-rail-menu-h { display: flex; align-items: center; }
.kk-rail-menu-h h2 { margin: 0; color: var(--kk-ink); font: 700 var(--kk-fs-heading) / 1.2 var(--kk-font-display); letter-spacing: -.02em; }
.kk-rail-menu-x {
  width: var(--kk-s-6); height: var(--kk-s-6); display: grid; place-items: center; border: 0; border-radius: var(--kk-r-sm);
  background: none; color: var(--kk-text-soft); cursor: pointer;
}
.kk-rail-menu-x:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rail-menu-form { display: grid; gap: var(--kk-s-4); }
.kk-rail-menu fieldset { display: grid; gap: var(--kk-s-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.kk-rail-menu legend {
  margin-bottom: var(--kk-s-2); padding: 0; color: var(--kk-text-soft);
  font: 600 var(--kk-fs-micro) / 1.3 var(--kk-font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.kk-rail-menu legend small { margin-left: var(--kk-s-1); letter-spacing: 0; text-transform: none; font-family: var(--kk-font-ui); }
.kk-rail-menu-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kk-s-3); align-items: start;
  padding: var(--kk-s-2); border-radius: var(--kk-r-sm); cursor: pointer;
}
.kk-rail-menu-opt:has(input:checked) { background: var(--kk-fill); }
.kk-rail-menu-opt.is-greyed { opacity: .6; cursor: default; }
.kk-rail-menu-opt input { margin-top: var(--kk-s-1); accent-color: var(--kk-ink); }
.kk-rail-menu-opt span { display: block; }
.kk-rail-menu-opt b { color: var(--kk-ink); font: 600 var(--kk-fs-body) / 1.3 var(--kk-font-ui); }
.kk-rail-menu-sub { display: block; margin-top: 2px; color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
.kk-rail-menu-tag {
  display: inline-block; margin-left: var(--kk-s-1); padding: 0 var(--kk-s-1); border-radius: var(--kk-r-xs); vertical-align: 1px;
  background: var(--kk-highlight); color: var(--kk-blk-ink); font: 600 var(--kk-fs-micro) / 1.6 var(--kk-font-mono); text-transform: uppercase;
}
.kk-rail-menu-tag.is-soon { background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-rail-menu-seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kk-s-1); }
.kk-rail-menu-seg label { position: relative; }
.kk-rail-menu-seg input { position: absolute; opacity: 0; }
.kk-rail-menu-seg span {
  min-height: calc(var(--kk-s-6) + var(--kk-s-1)); display: grid; place-items: center; border-radius: var(--kk-r-sm);
  background: var(--kk-fill); color: var(--kk-ink); font: 600 var(--kk-fs-body) / 1 var(--kk-font-ui); cursor: pointer;
}
.kk-rail-menu-seg input:checked + span { background: var(--kk-primary); color: var(--kk-on-primary); }
.kk-rail-menu-seg input:focus-visible + span { outline: 2px solid var(--kk-ink); outline-offset: 2px; }
.kk-rail-menu-pin {
  display: flex; align-items: center; gap: var(--kk-s-3); min-height: calc(var(--kk-s-6) + var(--kk-s-2));
  color: var(--kk-ink); font: 500 var(--kk-fs-body) / 1 var(--kk-font-ui); cursor: pointer;
}
.kk-rail-menu-pin input { width: var(--kk-s-4); height: var(--kk-s-4); accent-color: var(--kk-ink); }
.kk-rail-menu-pin svg { color: var(--kk-text-soft); }
/* Six pinned: the rest wait greyed, and one line says how to make room. */
.kk-rail-menu-pin:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.kk-rail-menu-pins-full { margin: 0 0 var(--kk-s-1); color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
/* Saves as you go: a quiet note says so, and Reset is a small text action at the foot. */
.kk-rail-menu-status { margin-left: auto; margin-right: var(--kk-s-2); color: var(--kk-text-soft); font: 500 var(--kk-fs-meta) / 1 var(--kk-font-ui); }
.kk-rail-menu-select {
  width: 100%; min-height: calc(var(--kk-s-6) + var(--kk-s-1)); padding: 0 var(--kk-s-2); border: 0; border-radius: var(--kk-r-sm);
  background: var(--kk-fill); color: var(--kk-ink); font: 500 var(--kk-fs-body) / 1 var(--kk-font-ui);
}
.kk-rail-menu-reset-f { margin: var(--kk-s-2) 0 0; padding-top: var(--kk-s-3); border-top: 1px solid var(--kk-line); }
.kk-rail-menu-reset {
  padding: 0; border: 0; background: none; color: var(--kk-text-soft); cursor: pointer;
  font: 500 var(--kk-fs-meta) / 1.6 var(--kk-font-ui); text-decoration: underline; text-underline-offset: 3px;
}
.kk-rail-menu-reset:hover { color: var(--kk-ink); }
.kk-ri.is-greyed { opacity: .55; }
@media (max-width: 899px) {
  .kk-rail-menu {
    inset: auto 0 0 0; width: auto; max-height: 86dvh; border-radius: var(--kk-r-lg) var(--kk-r-lg) 0 0;
    padding-bottom: calc(var(--kk-s-5) + env(safe-area-inset-bottom));
  }
}

/* Utility pages (lite) sit beside the rail like every other page. */
@media (min-width: 900px) { .kk-shell.is-rail > .kk-lite { margin-left: var(--kk-s-8); } }
@media (max-width: 899px) { .kk-shell.is-rail > .kk-lite { padding-bottom: calc(var(--kk-s-7) + var(--kk-s-3) + env(safe-area-inset-bottom)); } }

/* The Spaces sheet (the former sidebar): Space → folder tree and type badges, moved
   here from an inline <style> in shared/_kk_sidebar so every page shares one stylesheet. */

/* Spec 46 §5 — type badges in the type-agnostic Spaces tree: a Space surfaces
   the node types it holds (game/form/book), so games + forms appear here
   instead of a separate Intake section. */
.kk-space-types{display:inline-flex;align-items:center;gap:3px;margin-left:6px}
/* "Shared with you" marker on a Space owned by someone else (spec 22/29). */
.kk-space-shared{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:5px;color:var(--kk-orientation)}
.kk-space-shared svg{width:12px;height:12px}
.kk-tb{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  color:var(--kk-text-soft)}
.kk-tb svg{width:12px;height:12px}

/* §5 unified Space → folder → page tree */
.kk-space-grp{margin-bottom:1px}
.kk-space-hd{display:flex;align-items:center;gap:2px}
.kk-space-hd .kk-space-lnk{flex:1;min-width:0}
.kk-space-chev{flex:none;border:0;background:none;cursor:pointer;color:var(--kk-faint);
  padding:0;display:inline-flex;align-items:center;justify-content:center}
.kk-space-chev-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--kk-fs-micro);border-radius:6px;transition:transform .18s,background .18s}
.kk-space-chev:hover .kk-space-chev-icon{background:var(--kk-fill)}
.kk-space-grp:not(.is-collapsed) .kk-space-chev-icon{transform:rotate(90deg)}
.kk-space-folders{display:flex;flex-direction:column;gap:1px;margin:1px 0 3px 16px;
  padding-left:9px;border-left:1.5px solid var(--kk-line)}
.kk-space-grp.is-collapsed .kk-space-folders{display:none}
.kk-folder{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;font-size:var(--kk-fs-meta);
  color:var(--kk-text-soft);text-decoration:none}
.kk-folder:hover{background:var(--kk-fill);color:var(--kk-ink)}
.kk-folder .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kk-folder .ct{font-family:var(--kk-font-mono);font-size:var(--kk-fs-micro);opacity:.65}
.kk-ficon{width:14px;height:14px;flex:none;color:var(--kk-faint)}

/* The job's chips in the top bar (mock 15 .chip): quiet words, the one on filled. */
.kk-topbar-chips { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 2px; min-width: max-content; }
.kk-topbar-chip {
  min-height: var(--kk-s-6); display: inline-flex; align-items: center; padding: 0 var(--kk-s-3); border-radius: var(--kk-r-sm);
  color: var(--kk-text-soft); font: 500 var(--kk-fs-body) / 1 var(--kk-font-ui); text-decoration: none; white-space: nowrap;
}
.kk-topbar-chip:hover { background: var(--kk-fill-soft, var(--kk-fill)); color: var(--kk-ink); }
.kk-topbar-chip.is-on { background: var(--kk-fill); color: var(--kk-ink); font-weight: 600; }
@media (max-width: 899px) { .kk-topbar-chips { justify-content: flex-start; } }
.kk-space-manage { flex: none; width: var(--kk-s-5); height: var(--kk-s-5); display: grid; place-items: center; border-radius: var(--kk-r-sm); color: var(--kk-faint); }
.kk-space-manage:hover { background: var(--kk-fill); color: var(--kk-ink); }

/* Below 560px the collapsed info panel floats in the bottom-right corner. With
   the rail as the bottom tab bar it would sit on the last tab, so it rides one
   row above the bar instead. */
@media (max-width: 560px) {
  .kk-shell.is-rail .kk-context-panel.is-collapsed {
    bottom: calc(var(--kk-s-7) + var(--kk-s-3) + var(--kk-s-4) + env(safe-area-inset-bottom));
  }
}