/* ============================================================================
 * Kuickr deck-app shell — the `.kkapp` layer (spec 33 redesign)
 * ----------------------------------------------------------------------------
 * Mobile-first app shell + dashboard, built on the --kk-* tokens (tokens.css).
 * Opt-in: a view sets content_for(:kk_shell) and the layout adds `kkapp` to the
 * body + renders shared/_kk_sidebar. Scoped under `.kkapp` so it never touches
 * the warm-paper `.kapp` pages still on the old system.
 *
 * Layout strategy is MOBILE-FIRST: base rules target a phone (sidebar is an
 * off-canvas drawer behind a hamburger); the desktop sidebar is layered on at
 * the --bp-lg breakpoint. Dark mode rides the shared [data-theme="dark"] toggle.
 * ========================================================================== */

.kkapp {
  --kk-side-w: 264px;
  --kk-topbar-h: 56px;
  /* Workspace topbar: 32px controls + 10px of air above and below, so the row
     never sits flush against its own bottom rule. Popovers hang off it. */
  --kk-wtopbar-h: 52px;
  background: var(--kk-wash);
  color: var(--kk-text);
  font-family: var(--kk-font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.kkapp a { color: inherit; text-decoration: none; }
.kkapp *, .kkapp *::before, .kkapp *::after { box-sizing: border-box; }
.kkapp .hidden { display: none; }
.kkapp .is-collapsed .collapsible { display: none; }

/* ── shell scaffold (mobile-first) ───────────────────────────────────────── */
.kk-shell { min-height: 100vh; }

/* mobile topbar: brand + hamburger + New */
.kk-mtop {
  position: sticky; top: 0; z-index: 60;
  height: var(--kk-topbar-h);
  display: flex; align-items: center; gap: var(--kk-s-3);
  padding: 0 var(--kk-s-4);
  background: color-mix(in srgb, var(--kk-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kk-line);
}
.kk-mtop .kk-burger {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--kk-r-sm);
  color: var(--kk-text); cursor: pointer;
}
.kk-mtop .kk-burger:hover { background: var(--kk-fill); }
.kk-mtop .kk-brand { font-weight: 600; font-size: 18px; letter-spacing: -.02em; color: var(--kk-ink); }
.kk-mtop .kk-mtop-sp { flex: 1; }

/* sidebar — off-canvas drawer on mobile */
.kk-side {
  position: fixed; top: 0; left: 0; z-index: 80;
  width: var(--kk-side-w); height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--kk-paper);
  border-right: 1px solid var(--kk-line);
  transform: translateX(-100%);
  transition: transform var(--kk-t-base) var(--kk-ease-settle);
  overflow: hidden;
}
.kk-shell.is-open .kk-side { transform: translateX(0); }
.kk-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(20, 18, 14, .42);
  opacity: 0; pointer-events: none;
  transition: opacity var(--kk-t-base) var(--kk-ease-out);
}
/* #22: a second `.kk-scrim` rule (the deck modal, z-index 200) bled onto the drawer
   scrim, lifting it ABOVE the sidebar (z-index 80) — so taps hit the scrim and the
   nav was unclickable. Re-assert the drawer scrim below the sidebar (this selector
   is more specific than the modal's bare `.kk-scrim`). */
.kk-shell.is-open .kk-scrim { opacity: 1; pointer-events: auto; z-index: 70; }

/* main column */
.kk-main { min-width: 0; }
.kk-main-inner { max-width: 1040px; margin: 0 auto; padding: var(--kk-s-5) var(--kk-s-4) var(--kk-s-8); }

/* ── sidebar contents ────────────────────────────────────────────────────── */
.kk-side-head { display: flex; align-items: center; gap: var(--kk-s-3); padding: var(--kk-s-4) var(--kk-s-4) var(--kk-s-3); }
.kk-logo {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--kk-primary); color: var(--kk-on-primary);
  border-radius: var(--kk-r-sm); font-weight: 700; font-size: 15px;
}
.kk-wordmark { font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: var(--kk-ink); }

.kk-nav { display: flex; flex-direction: column; gap: 1px; padding: var(--kk-s-2) var(--kk-s-3); }
.kk-nav a {
  display: flex; align-items: center; gap: var(--kk-s-3);
  padding: 8px 10px; border-radius: var(--kk-r-sm);
  font-size: 13.5px; font-weight: 500; color: var(--kk-text-soft);
  transition: background var(--kk-t-fast) var(--kk-ease-out);
}
.kk-nav a:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-nav a.is-active { background: var(--kk-fill); color: var(--kk-ink); font-weight: 600; }
.kk-nav a .ic { width: 17px; height: 17px; flex-shrink: 0; color: var(--kk-text-soft); }
.kk-nav a.is-active .ic { color: var(--kk-orientation); }
.kk-nav a .lbl { flex: 1; min-width: 0; }
.kk-nav a .ct { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-faint); }

.kk-seclabel {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--kk-s-4) var(--kk-s-4) var(--kk-s-2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--kk-text-soft);
}
.kk-seclabel button { background: none; border: none; color: var(--kk-text-soft); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.kk-seclabel button:hover { color: var(--kk-ink); }

.menu-search-input {
  width: 100%; margin-bottom: var(--kk-s-2); padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--kk-border); border-radius: var(--kk-rs); background: var(--kk-paper);
}
.kk-filter { margin: 0 var(--kk-s-3) var(--kk-s-2); }
.kk-filter input {
  width: 100%; border: 1px solid var(--kk-border); background: var(--kk-bg);
  border-radius: var(--kk-r-sm); padding: 6px 10px;
  font-size: 12.5px; font-family: var(--kk-font-ui); color: var(--kk-text);
}
.kk-filter input::placeholder { color: var(--kk-text-soft); }

/* Scroll the spaces + saved-views block as one unit — no nested list scrollbar. */
.kk-side-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--kk-border) transparent;
}
.kk-side-scroll::-webkit-scrollbar { width: 6px; }
.kk-side-scroll::-webkit-scrollbar-thumb { background: var(--kk-border); border-radius: 99px; }
.kk-side-scroll::-webkit-scrollbar-track { background: transparent; }

.kk-spaces, .kk-views {
  display: flex; flex-direction: column; gap: 1px; padding: 0 var(--kk-s-3);
  max-height: none; overflow: visible;
}
.kk-space, .kk-view {
  display: flex; align-items: center; gap: var(--kk-s-3);
  padding: 7px 10px; border-radius: var(--kk-r-sm);
  font-size: 13px; font-weight: 500; color: var(--kk-text-soft);
}
.kk-space:hover, .kk-view:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-space.is-active { background: var(--kk-fill); color: var(--kk-ink); }
.kk-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--kk-muted); }
.kk-space .nm, .kk-view .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-space .ct, .kk-view .ct { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-faint); }
.kk-view .ic { width: 16px; height: 16px; color: var(--kk-text-soft); flex-shrink: 0; }
.kk-side-foot-note { padding: var(--kk-s-2) var(--kk-s-4) 0; font-size: 11px; color: var(--kk-text-soft); }

.kk-user {
  flex-shrink: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px 32px; align-items: center; gap: var(--kk-s-3);
  padding: var(--kk-s-3) var(--kk-s-4);
  border-top: 1px solid var(--kk-line);
}
.kk-avatar {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--kk-secondary-soft); color: var(--kk-ink);
  font-weight: 600; font-size: 13px;
}
.kk-user .who { flex: 1; min-width: 0; }
.kk-user .who .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--kk-ink); }
.kk-user .who .r { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--kk-text-soft); }
.kk-user .gear { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); }
.kk-user .gear:hover { background: var(--kk-fill); color: var(--kk-ink); }

/* ── topbar search + actions (desktop) ───────────────────────────────────── */
.kk-topbar {
  display: none;
  align-items: center; gap: var(--kk-s-3);
  height: var(--kk-topbar-h);
  padding: 0 var(--kk-s-5);
  border-bottom: 1px solid var(--kk-line);
  background: color-mix(in srgb, var(--kk-bg) 80%, transparent);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 40;
}
.kk-search {
  flex: 1; display: flex; align-items: center; gap: var(--kk-s-3);
  background: var(--kk-bg); border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-md); padding: 8px 14px;
  color: var(--kk-text-soft); cursor: text; font-size: 14px;
}
.kk-search:hover { border-color: var(--kk-secondary); }
.kk-search .ic { width: 17px; height: 17px; }
.kk-search span { flex: 1; text-align: left; }
.kk-search kbd {
  font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-text-soft);
  border: 1px solid var(--kk-border); border-radius: 5px; padding: 1px 6px; background: var(--kk-fill);
}
.kk-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 13.5px; font-weight: 600; font-family: var(--kk-font-ui);
  border: none; border-radius: var(--kk-r-md); padding: 9px 15px; cursor: pointer;
}
.kkapp .kk-btn-primary { background: var(--kk-primary); color: var(--kk-on-primary); }
.kkapp .kk-btn-primary:hover { filter: brightness(1.12); }
.kk-btn .ic { width: 16px; height: 16px; }
.kk-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; background: var(--kk-card); border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-md); color: var(--kk-text-soft); cursor: pointer;
}
.kk-iconbtn:hover { border-color: var(--kk-secondary); color: var(--kk-ink); }

/* manage menu (templates + spaces), anchored under the action bar */
.kkapp .kmenu { position: relative; }
.kkapp .kmenu > summary { list-style: none; }
.kkapp .kmenu > summary::-webkit-details-marker { display: none; }
.kkapp .kmenu-body {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 234px;
  background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: var(--kk-r-md);
  box-shadow: var(--kk-shadow-md); padding: 6px; display: flex; flex-direction: column;
}
.kk-workspace-topbar .kmenu-body {
  position: fixed;
  top: calc(var(--kk-wtopbar-h) + 4px);
  right: var(--kk-s-4);
  bottom: 12px;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.kkapp .kmenu .manage-link {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 10px; border-radius: var(--kk-r-sm); font-size: 13px; color: var(--kk-text);
}
.kkapp .kmenu .manage-link:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kkapp .kmenu-sep { height: 1px; background: var(--kk-line); margin: 6px 0; }
.kkapp .kmenu .seclabel { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--kk-text-soft); margin: 6px 8px 4px; }

/* ── dashboard content ───────────────────────────────────────────────────── */
/* Action bar (search + New). Dashboard and managed Space mount this into the
   shell-level workspace topbar; other utility surfaces may keep it inline. */
.kk-actionbar { display: flex; align-items: center; gap: var(--kk-s-3); margin-bottom: var(--kk-s-5); }
.kk-actionbar .kk-search { min-width: 0; }
.kk-workspace-topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  height: var(--kk-wtopbar-h);
  background: var(--kk-bg);
  border-bottom: 1px solid var(--kk-line);
}
.kk-workspace-topbar .kk-actionbar {
  width: 100%;
  height: var(--kk-wtopbar-h);
  margin: 0;
  gap: 6px;
  padding: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kk-workspace-topbar .kk-actionbar::-webkit-scrollbar { display: none; }
.kk-jump-trigger { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: 0 0 32px; padding: 0; border: 0; border-radius: 7px; background: var(--kk-fill); color: var(--kk-text); cursor: pointer; font: 600 9px var(--kk-font-mono); }
.kk-jump-trigger:hover { background: var(--kk-secondary-soft); color: var(--kk-ink); }
.kk-jump-trigger .ic { width: 12px; height: 12px; }
.kk-workspace-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.kk-workspace-menu { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--kk-text); cursor: pointer; }
.kk-workspace-menu:hover { background: var(--kk-fill); }
.kk-workspace-mark { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--kk-primary); color: var(--kk-on-primary); font-weight: 700; }
.kk-context-cluster { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; min-width: 0; }
.kk-workspace-context { max-width: 220px; min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; color: var(--kk-ink); font-size: 12.5px; font-weight: 600; }
.kk-workspace-context > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kk-context-state { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; color: var(--kk-text-soft); font-family: var(--kk-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.kk-workspace-topbar .kk-btn { min-height: 32px; height: 32px; padding: 0 9px; border-radius: 7px; font-size: 12px; }
.kk-workspace-topbar .kk-iconbtn { width: 32px; height: 32px; border: 0; border-radius: 7px; background: transparent; }
.kk-workspace-topbar .kk-notification-bell { width: 32px; height: 32px; }
.kk-context-info { position: relative; flex: 0 0 auto; }
.kk-context-info > summary { list-style: none; cursor: pointer; }
.kk-context-info > summary::-webkit-details-marker { display: none; }
.kk-context-info-panel {
  position: fixed; top: calc(var(--kk-wtopbar-h) + 4px); left: var(--kk-popover-left, 8px); z-index: 90;
  width: min(320px, calc(100vw - 16px)); padding: 12px 14px;
  border: 1px solid var(--kk-line); border-radius: var(--kk-r-md);
  background: var(--kk-card); box-shadow: var(--kk-shadow-2);
  color: var(--kk-text); font-size: 12.5px; line-height: 1.45;
}
.kk-context-action { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.kk-actionbar-spacer { min-width: 12px; flex: 1 1 auto; }
.kk-command-control {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px; border: 0; border-radius: 7px; background: var(--kk-fill); color: var(--kk-text);
}
.kk-command-control:hover { background: var(--kk-secondary-soft); color: var(--kk-ink); }
.kk-command-control .ic { width: 14px; height: 14px; }
/* One SHAPE for the whole right-hand cluster, but not one weight. The nodepad
   topbar reference (founder's chosen model) keeps tiers without colour noise:
   a raised chip is the current view, ONE control is the primary action, and
   utilities are bare icons that fill only on hover. Making them all identical
   fixed the earlier three-skins mess but flattened that hierarchy. */
.kk-workspace-topbar .kk-iconbtn,
.kk-workspace-topbar .kk-notification-bell {
  width: 32px; height: 32px; border: 0; border-radius: 7px;
  background: transparent; color: var(--kk-text-soft);
}
.kk-workspace-topbar .kk-command-control,
.kk-workspace-topbar .kk-jump-trigger { background: transparent; color: var(--kk-text-soft); }
.kk-workspace-topbar .kk-command-control.is-primary {
  background: var(--kk-primary); color: var(--kk-on-primary);
}
.kk-workspace-topbar .kk-command-control.is-primary:hover {
  background: var(--kk-primary); filter: brightness(1.15); color: var(--kk-on-primary);
}
.kk-workspace-topbar .kk-iconbtn:hover,
.kk-workspace-topbar .kk-notification-bell:hover { background: var(--kk-secondary-soft); color: var(--kk-ink); }
/* The context cluster sits left of the spacer and reads as text, not controls. */
.kk-workspace-topbar .kk-context-cluster .kk-iconbtn { background: transparent; }
.kk-workspace-topbar .kk-context-cluster .kk-iconbtn:hover { background: var(--kk-fill); }
.kk-space-members { min-width: 32px; height: 32px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--kk-text-soft); }
.kk-member-stack { display: inline-flex; padding-left: 5px; }
.kk-member-stack > span {
  width: 24px; height: 24px; margin-left: -5px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--kk-card); border-radius: 50%; background: var(--kk-primary); color: var(--kk-on-primary);
  font: 600 10px var(--kk-font-ui);
}
.kk-member-stack > span:nth-child(2) { background: var(--kk-decision); }
.kk-member-stack > span:nth-child(3) { background: var(--kk-idea); color: var(--kk-ink); }
.kk-member-count { font-size: 11.5px; white-space: nowrap; }
.kk-attention, .kk-nav-attention {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 99px; background: var(--kk-blocker);
  font: 700 9px var(--kk-font-mono);
}
/* The count sits ON the blocker red, so it takes white directly. It carried
   --kk-on-primary (which flips with the theme) and, in the sidebar, lost even
   that to `.kk-nav a .ct { color: var(--kk-faint) }` — a faint grey digit on
   red (founder, 2026-08-15). Specificity beats the nav rule deliberately. */
.kk-attention, .kk-nav a .kk-nav-attention, .kk-nav-attention { color: #ffffff; }
.kk-context-action .kk-attention { position: absolute; top: -3px; right: -3px; }
.kk-trash-notice { margin: 0 0 18px; padding: 10px 12px; border-left: 2px solid var(--kk-orientation); background: var(--kk-fill-soft); color: var(--kk-text-soft); font-size: 12.5px; max-width: 64ch; }
.kk-sv-tools { min-height: 40px; margin-bottom: var(--kk-s-3); }
.kk-workspace-topbar .kk-btn,
.kk-workspace-topbar .kk-iconbtn,
.kk-workspace-topbar .kk-notifications { flex-shrink: 0; }

/* Mobile shell controls keep the approved 32px painted squares inside real
   44px pointer/focus targets. The topbar keeps --kk-wtopbar-h and scrolls itself. */
@media (max-width: 899px) {
  .kk-workspace-topbar .kk-actionbar { padding: 4px; }
  .kk-jump-trigger {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    background: transparent;
    box-shadow: inset 0 0 0 6px var(--kk-fill);
  }
  .kk-jump-trigger:hover {
    background: transparent;
    box-shadow: inset 0 0 0 6px var(--kk-secondary-soft);
  }
  .kk-workspace-menu { width: 44px; height: 44px; }
  .kk-workspace-mark {
    width: 44px;
    height: 44px;
    background: transparent;
    box-shadow: inset 0 0 0 6px var(--kk-primary);
  }
  .kk-workspace-topbar .kk-btn {
    min-height: 44px;
    height: 44px;
    border: 6px solid transparent;
    background-clip: padding-box;
  }
  /* 44px tap target, 32px visual — same inset-ring trick as .kk-command-control
     so the whole cluster still reads as one set of buttons on a phone. */
  /* Menu rows and filter chips are tap targets too — both missed the 44px floor
     (measured at 375px, 2026-08-15). The explorer had its own rule; every other
     chip strip in the shell did not. */
  .kkapp .kmenu .manage-link { min-height: 44px; }
  .kkapp .kk-chip, .kkapp .kk-chip-filter { min-height: 44px; }
  /* The star was a 15px glyph — a real control at a quarter of the tap floor. */
  .kkapp .kk-row .star { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -14px -14px -14px -12px; }
  /* Utilities keep the 44px target without the painted ring — only the primary
     action carries weight on a phone too. */
  .kk-workspace-topbar .kk-iconbtn,
  .kk-workspace-topbar .kk-notification-bell {
    width: 44px; height: 44px; background: transparent; box-shadow: none;
  }
  .kk-workspace-topbar .kk-command-control.is-primary {
    background: transparent; box-shadow: inset 0 0 0 6px var(--kk-primary); color: var(--kk-on-primary);
  }
  .kk-workspace-topbar .kk-iconbtn:hover,
  .kk-workspace-topbar .kk-notification-bell:hover {
    background: transparent; box-shadow: inset 0 0 0 6px var(--kk-secondary-soft);
  }
  .kk-workspace-topbar .kk-context-cluster .kk-iconbtn,
  .kk-workspace-topbar .kk-context-cluster .kk-iconbtn:hover { box-shadow: none; }
  .kk-command-control {
    width: 44px; height: 44px; flex-basis: 44px; background: transparent;
    box-shadow: inset 0 0 0 6px var(--kk-fill);
  }
  .kk-command-control:hover { background: transparent; box-shadow: inset 0 0 0 6px var(--kk-secondary-soft); }
  .kk-space-members { min-width: 44px; height: 44px; }
  .kk-member-count { display: none; }
}

/* first-run dashboard onboarding. These partials used to be styled only under
   `.kapp`; the dashboard shell now runs under `.kkapp`, so fresh users need the
   same classes mapped to deck tokens. */
.kkapp .khero {
  margin: var(--kk-s-5) 0 var(--kk-s-4);
  padding: var(--kk-s-5) var(--kk-s-4);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-lg);
  background: var(--kk-card);
  text-align: center;
}
.kkapp .khero .wave {
  font-size: 30px;
  line-height: 1;
  margin-bottom: var(--kk-s-3);
}
.kkapp .khero h1 {
  max-width: 720px;
  margin: 0 auto var(--kk-s-2);
  color: var(--kk-ink);
  font-family: var(--kk-font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
}
.kkapp .khero h1 em { color: var(--kk-ink); font-style: italic; }
.kkapp .khero .sub {
  max-width: 560px;
  margin: 0 auto;
  color: var(--kk-text-soft);
  font-size: 14px;
  line-height: 1.55;
}
.kkapp .ktiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kk-s-3);
  margin: 0 0 var(--kk-s-5);
}
.kkapp .ktile {
  display: flex;
  flex-direction: column;
  gap: var(--kk-s-2);
  min-height: 160px;
  padding: var(--kk-s-4);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-md);
  background: var(--kk-card);
  color: var(--kk-text);
  transition: border-color var(--kk-t-fast), transform var(--kk-t-fast), background var(--kk-t-fast);
}
.kkapp .ktile:hover {
  border-color: var(--kk-secondary);
  background: var(--kk-fill-soft);
  transform: translateY(-1px);
}
.kkapp .ktile .ico {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--kk-r-sm);
  background: var(--kk-secondary-soft);
  color: var(--kk-orientation);
}
.kkapp .ktile .step {
  color: var(--kk-text-soft);
  font-family: var(--kk-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kkapp .ktile .tt { color: var(--kk-ink); font-size: 15px; font-weight: 700; }
.kkapp .ktile .td { color: var(--kk-text-soft); font-size: 13px; line-height: 1.5; }
.kkapp .seclabel {
  margin: 0 0 var(--kk-s-3);
  color: var(--kk-text-soft);
  font-family: var(--kk-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kkapp .ktmpls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kk-s-2);
  margin: 0 0 var(--kk-s-6);
}
.kkapp .ktmpl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-pill);
  background: var(--kk-card);
  color: var(--kk-text-soft);
  font-size: 13px;
  font-weight: 600;
}
.kkapp .ktmpl:hover { border-color: var(--kk-secondary); color: var(--kk-ink); }
@media (max-width: 760px) {
  .kkapp .khero h1 { font-size: 24px; }
  .kkapp .ktiles { grid-template-columns: 1fr; }
  .kkapp .ktile { min-height: 0; }
}

.kk-eyebrow { font-family: var(--kk-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--kk-text-soft); }
.kk-h1 { font-family: var(--kk-font-display); font-weight: 700; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.01em; line-height: 1.15; color: var(--kk-ink); margin: var(--kk-s-2) 0 0; }
.kk-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kk-s-4); margin-bottom: var(--kk-s-4); }
.kk-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--kk-s-4);
  margin-bottom: var(--kk-s-3); flex-wrap: wrap;
}
.kk-toolbar .kk-chips { flex: 1 1 auto; margin-bottom: 0; min-width: 0; }
.kk-toolbar .kk-vtoggle { flex: 0 0 auto; }

/* view toggle FEED / LIBRARY / COMPACT */
.kk-vtoggle { display: inline-flex; gap: 2px; background: var(--kk-fill); border-radius: var(--kk-r-md); padding: 3px; flex-shrink: 0; }
.kk-vtoggle button {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--kk-text-soft); background: none; border: none; border-radius: var(--kk-r-sm);
  padding: 6px 12px; cursor: pointer; font-family: var(--kk-font-ui);
}
.kk-vtoggle button:hover { color: var(--kk-ink); }
.kk-vtoggle button.is-active { background: var(--kk-card); color: var(--kk-ink); box-shadow: var(--kk-shadow-sm); }

/* filter chips */
.kk-chips { display: flex; flex-wrap: wrap; gap: var(--kk-s-2); margin-bottom: var(--kk-s-3); }
.kk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--kk-text-soft);
  background: var(--kk-card); border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-pill); padding: 5px 13px; cursor: pointer;
  font-family: var(--kk-font-ui); transition: border-color var(--kk-t-fast), color var(--kk-t-fast);
}
.kk-chip:hover { border-color: var(--kk-secondary); color: var(--kk-ink); }
.kk-chip.is-active { background: var(--kk-primary); border-color: var(--kk-primary); color: var(--kk-on-primary); }
.kk-chip .ct { font-family: var(--kk-font-mono); font-size: 11px; opacity: .7; }
.kk-saved-chips { display: contents; }
.kk-chip-wrap { display: inline-flex; align-items: center; position: relative; }
.kk-chip-saved { padding-right: 9px; }
.kk-chip-save { border-style: dashed; color: var(--kk-ink); }
.kk-chip-save:hover { background: var(--kk-fill); }
/* button_to wraps the remove control in a <form>, a block box that ignored the
   chip's inline-flex row — so the × floated free of the pill it belongs to. */
.kk-chip-wrap { gap: 2px; }
.kk-chip-wrap > form { display: inline-flex; align-items: center; margin: 0; }
.kk-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin: 0 0 0 -4px;
  border: none; background: transparent; color: var(--kk-text-soft); border-radius: var(--kk-r-pill);
  cursor: pointer; padding: 0;
}
.kk-chip-remove:hover { background: var(--kk-fill); color: var(--kk-ink); }

/* save-filter modal */
.kk-modal-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(21, 22, 26, .35); display: flex; align-items: center; justify-content: center; padding: var(--kk-s-4);
}
.kk-modal {
  width: min(420px, 100%); background: var(--kk-card); border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-lg); box-shadow: var(--kk-shadow-lg); padding: var(--kk-s-5);
}
.kk-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kk-s-3); margin-bottom: var(--kk-s-3); }
.kk-modal-title { font-family: var(--kk-font-display); font-size: 20px; margin: 0; color: var(--kk-ink); }
.kk-modal-lede { font-size: 13px; color: var(--kk-text-soft); margin: 0 0 var(--kk-s-4); line-height: 1.45; }
.kk-filter-preview {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--kk-s-4);
  padding: 10px 12px; border-radius: var(--kk-r-md); background: var(--kk-fill); border: 1px solid var(--kk-border);
}
.kk-filter-preview .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--kk-text-soft); }
.kk-filter-preview .val { font-size: 13px; font-weight: 600; color: var(--kk-ink); }
.kk-field { display: block; margin-bottom: var(--kk-s-4); }
.kk-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--kk-text-soft); margin-bottom: 6px; }
.kk-input {
  width: 100%; font-family: var(--kk-font-ui); font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); background: var(--kk-bg); color: var(--kk-ink);
}
.kk-input:focus { outline: 2px solid var(--kk-secondary); outline-offset: 1px; border-color: var(--kk-secondary); }
.kk-form-error { font-size: 12.5px; color: var(--kk-danger, #b42318); margin-bottom: var(--kk-s-3); }
.kk-modal-actions { display: flex; justify-content: flex-end; gap: var(--kk-s-2); margin-top: var(--kk-s-2); }

.kk-subline { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kk-s-3); margin-bottom: var(--kk-s-4); font-size: 12.5px; color: var(--kk-text-soft); flex-wrap: wrap; }

/* group header */
.kk-group { margin-bottom: var(--kk-s-6); }
.kk-group-head { display: flex; align-items: baseline; gap: var(--kk-s-3); margin: 0 2px var(--kk-s-3); }
.kk-group-head .g-name { font-family: var(--kk-font-display); font-size: 17px; color: var(--kk-ink); }
.kk-group-head .g-slug { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-text-soft); }
.kk-group-head .g-count { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-faint); margin-left: auto; }
.kk-gdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }

/* feed card + rows */
.kk-card { border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg); overflow: hidden; background: var(--kk-card); }
.kk-row {
  position: relative; display: flex; align-items: center; gap: var(--kk-s-3);
  padding: 12px 16px 12px 18px;
  transition: background var(--kk-t-fast) var(--kk-ease-out);
}
.kk-row + .kk-row { border-top: 1px solid var(--kk-line); }
.kk-row:hover { background: var(--kk-fill-soft); }
/* left type-accent bar */
.kk-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--row-accent, var(--kk-border));
}
.kk-row .star { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--kk-faint); padding: 0; flex-shrink: 0; }
.kk-row .star:hover { color: var(--kk-idea); }
.kk-row .star.is-on { color: var(--kk-idea); }
.kk-row .type {
  font-family: var(--kk-font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--kk-text-soft);
  background: var(--kk-fill); border-radius: var(--kk-r-xs);
  padding: 3px 6px; flex-shrink: 0; min-width: 42px; text-align: center;
}
.kk-row .body { flex: 1; min-width: 0; }
.kk-row .titleline { display: flex; align-items: center; gap: var(--kk-s-2); min-width: 0; }
.kk-row .title { font-size: 14px; font-weight: 600; color: var(--kk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-row .title:hover { color: var(--kk-ink); }
.kk-row .vis {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-family: var(--kk-font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--kk-text-soft);
}
.kk-row .vis .vdot { width: 7px; height: 7px; border-radius: 2px; }
.kk-row .vis.private .vdot { background: var(--kk-private); }
.kk-row .vis.link    .vdot { background: var(--kk-link); }
.kk-row .vis.public  .vdot { background: var(--kk-public); }
.kk-row .vis.link    { color: var(--kk-text-soft); }
.kk-row .vis.public  { color: var(--kk-public); }
.kk-row .badge {
  font-family: var(--kk-font-mono); font-size: 9px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--kk-r-pill); white-space: nowrap; flex-shrink: 0;
}
.kk-row .badge.gray   { background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-row .badge.blue   { background: color-mix(in srgb, var(--kk-decision) 15%, transparent); color: var(--kk-decision); }
.kk-row .badge.amber  { background: color-mix(in srgb, var(--kk-idea) 20%, transparent); color: var(--kk-idea); }
.kk-row .badge.purple { background: color-mix(in srgb, var(--kk-question) 16%, transparent); color: var(--kk-question); }
.kk-row .badge.green  { background: color-mix(in srgb, var(--kk-outcome) 16%, transparent); color: var(--kk-outcome); }
.kk-row .crumb { font-size: 12px; color: var(--kk-text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-row .crumb b { font-weight: 600; color: var(--kk-text-soft); }
.kk-row .right { display: flex; align-items: center; gap: var(--kk-s-4); flex-shrink: 0; }
.kk-row .right .num { font-family: var(--kk-font-mono); font-size: 11.5px; color: var(--kk-faint); }
.kk-row .right .ago { font-family: var(--kk-font-mono); font-size: 11.5px; color: var(--kk-text-soft); min-width: 30px; text-align: right; }

.kk-empty { padding: 22px 16px; text-align: center; color: var(--kk-text-soft); font-size: 13px; }
.kk-empty--inline { padding: 14px 16px; text-align: left; font-size: 12.5px; }
.kk-showmore { display: inline-block; margin: var(--kk-s-3) 2px 0; font-size: 12.5px; font-weight: 600; color: var(--kk-ink); }
.kk-group-more { margin-top: var(--kk-s-2); }
.kk-groups-sentinel { height: 1px; margin: var(--kk-s-4) 0; }
.kk-group-scroll-sentinel { height: 1px; }

/* on mobile, drop the densest meta so rows stay legible */
.kk-row .crumb .via { color: var(--kk-text-soft); }
@media (max-width: 560px) {
  .kk-row .right .num { display: none; }
  .kk-row .type { min-width: 0; }
  .kk-cinbox .kk-sv-head { margin-bottom: var(--kk-s-3); }
  .kk-cinbox .kk-arow { align-items: stretch; flex-direction: column; }
  .kk-cinbox .kk-arow .acts { justify-content: flex-start; }
  .kk-cinbox .kk-arow .acts .kk-btn { min-height: 44px; }
}

/* Share-invite notifications: a small needs-attention bell, not a second
   activity timeline. The menu is server-rendered in a lazy Turbo Frame. */
.kk-notifications { position: relative; flex: 0 0 auto; }
.kk-notification-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--kk-r-sm); background: transparent; color: var(--kk-text-soft); cursor: pointer; list-style: none; }
.kk-notification-bell::-webkit-details-marker { display: none; }
.kk-notification-bell:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-notification-bell svg { width: 16px; height: 16px; }
.kk-notification-count { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid var(--kk-bg); border-radius: 999px; background: var(--kk-danger); color: #fff; font: 700 9px/12px var(--kk-font-mono); text-align: center; }
.kk-notification-menu { position: absolute; left: 0; bottom: 38px; z-index: 90; width: min(340px, calc(100vw - 24px)); max-height: 360px; overflow: auto; border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); background: var(--kk-card); box-shadow: var(--kk-shadow-lg); }
.kk-workspace-topbar .kk-notification-menu { position: fixed; top: calc(var(--kk-wtopbar-h) + 4px); right: var(--kk-s-4); bottom: auto; left: auto; }
.kk-notification { display: flex; align-items: center; gap: 8px; padding: 11px 12px; color: var(--kk-text); }
.kk-notification + .kk-notification { border-top: 1px solid var(--kk-line); }
.kk-notification:hover { background: var(--kk-fill-soft); }
.kk-notification-link { min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.kk-notification b { display: block; color: var(--kk-ink); font-size: 12.5px; }
.kk-notification small { display: block; margin-top: 3px; color: var(--kk-text-soft); font-size: 11px; }
.kk-notification-ack { flex: 0 0 auto; border: 0; background: transparent; color: var(--kk-ink); font: 600 10px var(--kk-font-ui); cursor: pointer; }
.kk-notification-empty { padding: 14px; color: var(--kk-text-soft); font-size: 12px; }

/* ── desktop breakpoint: persistent sidebar + topbar ─────────────────────── */
@media (min-width: 900px) {
  .kk-mtop { display: none; }
  .kk-side { transform: none; position: fixed; }
  .kk-scrim { display: none; }
  .kk-topbar { display: flex; }
  .kk-main { margin-left: var(--kk-side-w); }
  .kk-main-inner { padding: var(--kk-s-6) var(--kk-s-6) var(--kk-s-8); }
  .kk-workspace-nav { display: none; }
  .kk-workspace-topbar .kmenu-body,
  .kk-workspace-topbar .kk-notification-menu { top: calc(var(--kk-wtopbar-h) + 4px); }
}

/* ── in-shell reader (signed-in members; spec 33) ────────────────────────── */
.kk-reader { max-width: var(--kk-read); }
.kk-main-inner.kk-reader { margin: 0 auto; }
.kk-crumb { display: flex; align-items: center; gap: var(--kk-s-2); flex-wrap: wrap; font-size: 12.5px; color: var(--kk-text-soft); margin-bottom: var(--kk-s-5); }
.kk-crumb a:hover { color: var(--kk-ink); }
.kk-crumb .sep { color: var(--kk-faint); }
.kk-crumb .cur { color: var(--kk-text); font-weight: 600; }

/* on-this-page TOC */
.kk-reader .toc { margin: 0 0 var(--kk-s-5); border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); background: var(--kk-paper); padding: 4px 16px; }
.kk-reader .toc summary { font-family: var(--kk-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--kk-text-soft); cursor: pointer; padding: 9px 0; list-style: none; }
.kk-reader .toc summary::-webkit-details-marker { display: none; }
.kk-reader .toc summary::before { content: "▾ "; }
.kk-reader .toc:not([open]) summary::before { content: "▸ "; }
.kk-reader .toc ul { list-style: none; padding: 0 0 10px; margin: 0; }
.kk-reader .toc li { font-size: 13px; padding: 2px 0; }
.kk-reader .toc li.lvl-3 { padding-left: 14px; }
.kk-reader .toc a { color: var(--kk-text-soft); } .kk-reader .toc a:hover { color: var(--kk-ink); }

/* article body */
.kk-reader .doc { color: var(--kk-text); font-size: 16px; line-height: 1.72; overflow-wrap: break-word; }
.kk-reader .doc h1, .kk-reader .doc h2, .kk-reader .doc h3, .kk-reader .doc h4 { font-family: var(--kk-font-display); color: var(--kk-ink); line-height: 1.2; letter-spacing: -.01em; margin: 1.8em 0 .6em; }
.kk-reader .doc h1 { font-size: 2em; margin-top: .2em; }
.kk-reader .doc h2 { font-size: 1.5em; padding-top: .5em; border-top: 2px solid var(--kk-line); }
.kk-reader .doc h3 { font-size: 1.2em; }
.kk-reader .doc h4 { font-size: 1.02em; }
.kk-reader .doc p, .kk-reader .doc ul, .kk-reader .doc ol, .kk-reader .doc blockquote, .kk-reader .doc table { margin: 0 0 1.1em; }
.kk-reader .doc ul, .kk-reader .doc ol { padding-left: 1.4em; }
/* Restore list markers Tailwind's preflight resets to none (rendered markdown). */
.kk-reader .doc ul { list-style: disc; }
.kk-reader .doc ol { list-style: decimal; }
.kk-reader .doc li { margin: 0.2em 0; }
.kk-reader .doc li { margin: .3em 0; }
.kk-reader .doc a { color: var(--kk-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.kk-reader .doc a:hover { color: var(--kk-ink); }
.kk-reader .doc strong { color: var(--kk-ink); font-weight: 700; }
/* Inline code must break long tokens so it never forces the page to scroll
   sideways (mobile principle 1). Block code (`pre code`) is unaffected — the
   `pre` keeps `white-space: pre` and scrolls within itself. */
.kk-reader .doc code { font-family: var(--kk-font-mono); font-size: .87em; background: var(--kk-fill); border: 1px solid var(--kk-line); border-radius: var(--kk-r-xs); padding: 1px 5px; overflow-wrap: anywhere; word-break: break-word; }
.kk-reader .doc pre { background: var(--kk-paper); border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); padding: 14px 16px; overflow: auto; margin: 0 0 1.2em; }
.kk-reader .doc pre code { background: none; border: none; padding: 0; font-size: 13px; line-height: 1.6; }
.kk-reader .doc blockquote { border-left: 3px solid var(--kk-secondary); padding: 2px 0 2px 16px; color: var(--kk-text-soft); font-style: italic; }
.kk-reader .doc hr { border: none; border-top: 1px solid var(--kk-line); margin: 2em 0; }
.kk-reader .doc img { max-width: 100%; border-radius: var(--kk-r-md); }
/* A wide user-authored markdown table scrolls WITHIN itself instead of pushing the
   whole page sideways (mobile principle 1 — no horizontal page scroll). */
.kk-reader .doc table { display: block; width: max-content; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; border-collapse: collapse; font-size: 14px; }
.kk-reader .doc th, .kk-reader .doc td { border: 1px solid var(--kk-border); padding: 7px 11px; text-align: left; }
.kk-reader .doc th { background: var(--kk-fill); font-weight: 600; color: var(--kk-ink); }

/* sandboxed HTML embed */
.kk-reader .html-embed { width: 100%; min-height: 78vh; border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); background: var(--kk-card); }

/* prev / next pager */
.kk-reader .pager { display: flex; justify-content: space-between; gap: var(--kk-s-4); margin: var(--kk-s-7) 0 0; padding-top: var(--kk-s-5); border-top: 1px solid var(--kk-line); font-size: 13.5px; }
.kk-reader .pager a { color: var(--kk-text-soft); font-weight: 600; } .kk-reader .pager a:hover { color: var(--kk-ink); }

/* comments */
.kk-reader .kcomments { margin-top: var(--kk-s-7); padding-top: var(--kk-s-5); border-top: 1px solid var(--kk-line); }
.kk-reader .kc-h { font-family: var(--kk-font-display); font-size: 20px; color: var(--kk-ink); margin: 0 0 var(--kk-s-4); }
.kk-reader .kc-list { list-style: none; padding: 0; margin: 0 0 var(--kk-s-5); display: flex; flex-direction: column; gap: var(--kk-s-3); }
.kk-reader .kc-item { border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); padding: 12px 14px; background: var(--kk-paper); }
.kk-reader .kc-meta { font-size: 12px; color: var(--kk-text-soft); margin-bottom: 4px; }
.kk-reader .kc-item-resolved { opacity: .6; }
.kk-reader .kcomments input[type=text], .kk-reader .kcomments textarea { width: 100%; border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-sm); padding: 9px 11px; font-size: 14px; font-family: var(--kk-font-ui); color: var(--kk-text); margin-bottom: var(--kk-s-2); }
.kk-reader .kcomments textarea { font-family: var(--kk-font-ui); resize: vertical; }
.kk-reader .kcomments button[type=submit] { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; border: none; border-radius: var(--kk-r-md); padding: 9px 15px; background: var(--kk-primary); color: var(--kk-on-primary); cursor: pointer; }

/* owner "private — share it" affordance in the reader */
.kkapp .viewing-as { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--kk-ink); background: var(--kk-secondary-soft); border-radius: var(--kk-r-sm); padding: 7px 12px; margin: 0 0 var(--kk-s-5); }
.kkapp .viewing-as .share { font-weight: 700; color: var(--kk-ink); }
.kkapp .viewing-as .share:hover { text-decoration: underline; }

/* ── reader two-column + right panel (spec 33) ───────────────────────────── */
/* mobile-first: single column; the right panel stacks below the article. */
.kk-readwrap { max-width: 760px; margin: 0 auto; padding: var(--kk-s-5) var(--kk-s-4) var(--kk-s-8); }
.kk-reader { max-width: none; }
.kk-reader-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kk-s-4); }
.kk-reader-top .kk-crumb { flex: 1; }
.kk-viewcycle { width: auto; gap: 6px; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: var(--kk-text-soft); flex-shrink: 0; }
.kk-viewcycle span { white-space: nowrap; }

.kk-rpanel { border-top: 1px solid var(--kk-line); margin-top: var(--kk-s-6); }
.kk-rp-rail { display: flex; align-items: center; gap: 2px; padding: var(--kk-s-3) 0; }
.kk-rp-tab { position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); cursor: pointer; }
.kk-rp-tab:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rp-tab.is-active { background: var(--kk-fill); color: var(--kk-orientation); }
.kk-rp-dot { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: var(--kk-primary); color: var(--kk-on-primary); font-family: var(--kk-font-mono); font-size: 9px; display: flex; align-items: center; justify-content: center; }
.kk-rp-collapse { margin-left: auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); cursor: pointer; }
.kk-rp-collapse:hover { color: var(--kk-ink); }
.kk-rpanel.is-collapsed .kk-rp-body { display: none; }
.kk-rp-body { padding-bottom: var(--kk-s-6); }
.kk-rp-panel { display: none; }
.kk-rp-panel.is-active { display: block; }
.kk-rp-h { font-family: var(--kk-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--kk-text-soft); margin: 0 0 var(--kk-s-3); }
.kk-rp-empty { font-size: 13px; color: var(--kk-text-soft); }
.kk-rp-toc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.kk-rp-toc li { font-size: 13px; }
.kk-rp-toc li.lvl-3 { padding-left: 14px; }
.kk-rp-toc a { display: block; padding: 4px 8px; border-radius: var(--kk-r-xs); color: var(--kk-text-soft); }
.kk-rp-toc a:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rp-info { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.kk-rp-info dt { color: var(--kk-text-soft); }
.kk-rp-info dd { margin: 0; color: var(--kk-text); text-align: right; }
.kk-rp-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--kk-s-4); font-size: 13px; font-weight: 600; color: var(--kk-on-primary); background: var(--kk-primary); border-radius: var(--kk-r-md); padding: 9px 14px; }
.kk-rp-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--kk-s-3); }
.kk-rp-stats li { border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); padding: 12px; text-align: center; }
.kk-rp-stats b { display: block; font-family: var(--kk-font-display); font-size: 22px; color: var(--kk-ink); }
.kk-rp-stats span { font-size: 11px; color: var(--kk-text-soft); text-transform: uppercase; letter-spacing: .04em; }

/* desktop ≥1100: right panel becomes a sticky side column */
@media (min-width: 1100px) {
  .kk-readwrap { max-width: 1160px; display: flex; gap: var(--kk-s-6); align-items: flex-start; padding: var(--kk-s-6) var(--kk-s-6) var(--kk-s-8); }
  .kk-readwrap .kk-reader { flex: 1; min-width: 0; max-width: 760px; }
  .kk-rpanel { position: sticky; top: var(--kk-s-5); flex-shrink: 0; width: 54px; border-top: none; margin-top: 0; display: flex; flex-direction: column; max-height: calc(100vh - 40px); transition: width var(--kk-t-base) var(--kk-ease-settle); }
  .kk-rpanel:not(.is-collapsed) { width: 320px; border-left: 1px solid var(--kk-line); padding-left: var(--kk-s-2); }
  .kk-rpanel .kk-rp-rail { flex-direction: column; padding: var(--kk-s-2); }
  .kk-rpanel:not(.is-collapsed) .kk-rp-rail { flex-direction: row; border-bottom: 1px solid var(--kk-line); }
  .kk-rpanel.is-collapsed .kk-rp-collapse { margin: var(--kk-s-1) auto 0; }
  .kk-rp-body { overflow-y: auto; padding: var(--kk-s-4) var(--kk-s-3); }
}

/* ── Space / Inbox view (spec 33) ────────────────────────────────────────── */
/* centers itself so it works both in the shell main AND a bare main (anon). */
.kk-spaceview { max-width: 1000px; margin: 0 auto; padding: var(--kk-s-5) var(--kk-s-4) var(--kk-s-8); }
.kk-spaceview-managed { padding-top: var(--kk-s-2); }
.kk-sv-head { margin-bottom: var(--kk-s-6); }
.kk-sv-head .kk-eyebrow .vis { font-family: var(--kk-font-mono); font-size: 10px; }
.kk-sv-head .kk-h1 { margin-top: var(--kk-s-2); }
.kk-sv-lede { max-width: var(--kk-read); margin: var(--kk-s-3) 0 0; font-size: 14.5px; color: var(--kk-text-soft); line-height: 1.6; }
.kk-sv-lede b { color: var(--kk-text-soft); font-weight: 600; }
.kk-sv-lede .ln { color: var(--kk-ink); font-weight: 600; }
.kk-sv-share { display: flex; gap: var(--kk-s-5); align-items: center; flex-wrap: wrap; margin-top: var(--kk-s-4); padding: 16px 18px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg); background: var(--kk-paper); }
.kk-sv-share .sc-main { flex: 1; min-width: 240px; }
.kk-sv-share .sc-title { font-size: 13px; font-weight: 650; color: var(--kk-ink); margin-bottom: 8px; }
.kk-sv-share .sc-row { display: flex; align-items: center; gap: var(--kk-s-3); color: var(--kk-text-soft); }
.kk-sv-share .u { flex: 1; min-width: 0; font-family: var(--kk-font-mono); font-size: 13px; color: var(--kk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-sv-share .sc-hint { font-size: 12px; color: var(--kk-text-soft); margin-top: 8px; }
.kk-sv-share .sc-qr svg { display: block; border-radius: var(--kk-r-sm); }

/* folders column + feed — mobile-first: folders stack above the feed */
.kk-sv-body { display: grid; grid-template-columns: 1fr; gap: var(--kk-s-5); }
.kk-sv-feed { min-width: 0; width: 100%; }
.kk-sv-folder-disclosure > button {
  width: 100%; font-family: var(--kk-font-ui);
  min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-card);
  color: var(--kk-text); cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600;
}
.kk-sv-folder-disclosure > button > span:first-child { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-sv-folder-disclosure > button .ct { flex: 0 0 auto; color: var(--kk-faint); font: 10px var(--kk-font-mono); }
.kk-sv-folder-disclosure > button .chev { flex: 0 0 auto; transition: transform .15s ease; }
.kk-sv-folder-disclosure.is-open > button .chev { transform: rotate(180deg); }
.kk-sv-folders { display: flex; flex-direction: column; gap: 1px; }
.kk-sv-folder-disclosure .kk-sv-folders { display: none; }
.kk-sv-folder-disclosure.is-open .kk-sv-folders { display: flex; margin-top: 6px; max-height: min(52dvh, 420px); overflow-y: auto; }
.kk-sv-folders .kk-rp-h { margin-bottom: var(--kk-s-2); }
.kk-sv-folder { display: flex; align-items: center; gap: var(--kk-s-3); padding: 8px 10px; border-radius: var(--kk-r-sm); font-size: 13.5px; font-weight: 500; color: var(--kk-text-soft); }
.kk-sv-folder:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-sv-folder.is-active { background: var(--kk-fill); color: var(--kk-ink); }
.kk-sv-folder .ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--kk-orientation); }
.kk-sv-folder .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-sv-folder .ct { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-faint); }

@media (min-width: 800px) {
  .kk-sv-body { grid-template-columns: 220px 1fr; gap: var(--kk-s-6); align-items: start; }
  .kk-sv-folder-disclosure { position: sticky; top: calc(var(--kk-wtopbar-h) + var(--kk-s-2)); }
  .kk-sv-folder-disclosure > button { display: none; }
  .kk-sv-folder-disclosure .kk-sv-folders, .kk-sv-folder-disclosure.is-open .kk-sv-folders {
    display: flex;
    max-height: calc(100dvh - var(--kk-wtopbar-h) - var(--kk-s-4)); overflow-y: auto;
    margin-top: 0; padding-top: 1px; scrollbar-width: thin; overscroll-behavior: contain;
  }
}

.kk-space-page-controls {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--kk-s-4);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.kk-space-page-controls::-webkit-scrollbar { display: none; }
.kk-space-search {
  min-width: 200px; flex: 1 1 240px; height: 36px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-card); color: var(--kk-text-soft);
}
.kk-space-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--kk-text); font: 13px var(--kk-font-ui); }
.kk-space-view-tabs { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; border-radius: var(--kk-r-sm); background: var(--kk-fill); }
/* `position: relative` is load-bearing, not decoration: the mobile block hides
   each label with `position: absolute`, and the strip is a STATIC overflow-x
   scroller. Without a positioned tab the label's containing block is the PAGE —
   it escapes the scroller and widens the document (measured 405px at a 375px
   viewport, 2026-08-16). Pinned by mobile_tap_target_contract_test. */
.kk-space-view-tabs a { position: relative; min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 7px; border-radius: 6px; color: var(--kk-text-soft); font-size: 11.5px; }
.kk-space-view-tabs a.is-active { background: var(--kk-card); color: var(--kk-ink); box-shadow: var(--kk-shadow-sm); }
.kk-space-kind-tabs {
  width: max-content; display: flex; flex: 0 0 auto; gap: 0; margin: 0;
  white-space: nowrap;
  padding: 2px; border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-fill-soft);
}
.kk-space-kind-tabs::-webkit-scrollbar { display: none; }
.kk-space-kind-tabs a { flex: 0 0 auto; padding: 5px 9px; border-radius: 6px; color: var(--kk-text-soft); font: 600 10.5px var(--kk-font-mono); }
.kk-space-kind-tabs a:hover { color: var(--kk-ink); background: var(--kk-fill-soft); }
.kk-space-kind-tabs a.is-active { color: var(--kk-ink); background: var(--kk-card); box-shadow: var(--kk-shadow-sm); }
.kk-space-results.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; background: transparent; border: 0; box-shadow: none; }
.kk-space-results.is-grid .kk-prow {
  min-width: 0; display: grid;
  grid-template: "kind body" auto "footer footer" auto / 36px minmax(0, 1fr);
  align-items: start; gap: 9px 10px; padding: 12px 13px;
  border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-card);
}
.kk-space-results.is-grid .kk-prow + .kk-prow { border-top: 1px solid var(--kk-line); }
.kk-space-results.is-grid .kk-ptype { grid-area: kind; }
.kk-space-results.is-grid .kk-pbody { grid-area: body; min-width: 0; }
.kk-space-results.is-grid .kk-ptitle { font-size: 14.5px; line-height: 1.35; }
.kk-space-results.is-grid .kk-pmeta { margin-top: 6px; line-height: 1.45; }
.kk-pfooter { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; }
.kk-space-results.is-grid .kk-pfooter { grid-area: footer; width: 100%; padding-top: 1px; }
.kk-space-results.is-grid .kk-pfooter .kk-ptime { display: inline; }
@media (max-width: 560px) {
  .kk-space-page-controls { align-items: center; }
  .kk-space-search { height: 44px; }
  .kk-space-kind-tabs { min-height: 44px; align-items: center; }
  .kk-space-kind-tabs a { padding-top: 8px; padding-bottom: 8px; }
  .kk-space-view-tabs a { width: 44px; height: 44px; padding: 0; }
  .kk-space-view-tabs a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .kk-space-results.is-grid { grid-template-columns: 1fr; }
}

/* Space Pages quick access — pinned + recently modified above the feed */
.kk-sv-quick { display: flex; flex-direction: column; gap: var(--kk-s-4); margin-bottom: var(--kk-s-5); }
.kk-sv-quick-sec + .kk-sv-quick-sec { margin-top: 2px; }
.kk-sv-quick-h {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
  font-family: var(--kk-font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--kk-faint);
}
.kk-sv-quick-h .ic { width: 12px; height: 12px; flex-shrink: 0; }
.kk-sv-quick .kk-prow-quiet { padding: 10px 14px; }
.kk-sv-quick .kk-prow-quiet .kk-pbody { min-width: 0; }

/* ── reader topbar search ────────────────────────────────────────────────── */
.kk-reader-topbar { max-width: 760px; margin: 0 auto; padding: var(--kk-s-5) var(--kk-s-4) 0; }
.kk-reader-topbar .kk-search { width: 100%; }
@media (min-width: 1100px) { .kk-reader-topbar { max-width: 1160px; padding: var(--kk-s-5) var(--kk-s-6) 0; } }

/* ── desktop sidebar collapse → icon rail (spec 33, deck-app) ─────────────── */
.kk-side-collapse { display: none; margin-left: auto; width: 30px; height: 30px; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); cursor: pointer; }
.kk-side-collapse:hover { background: var(--kk-fill); color: var(--kk-ink); }
@media (min-width: 900px) {
  .kk-side-collapse { display: flex; }
  .kk-shell.is-side-collapsed .kk-side { width: 66px; }
  .kk-shell.is-side-collapsed .kk-main { margin-left: 66px; }
  /* collapsed rail: just centered icons — no collapse "«" (the logo toggles) */
  .kk-shell.is-side-collapsed .kk-side-head { justify-content: center; padding: var(--kk-s-4) 0 var(--kk-s-3); }
  .kk-shell.is-side-collapsed .kk-side-collapse,
  .kk-shell.is-side-collapsed .kk-wordmark,
  .kk-shell.is-side-collapsed .kk-nav a .lbl,
  .kk-shell.is-side-collapsed .kk-nav a .ct,
  .kk-shell.is-side-collapsed .kk-seclabel,
  .kk-shell.is-side-collapsed .kk-filter,
  .kk-shell.is-side-collapsed .kk-side-scroll,
  .kk-shell.is-side-collapsed .kk-user .who,
  .kk-shell.is-side-collapsed .kk-user .gear { display: none; }
  .kk-shell.is-side-collapsed .kk-nav a .kk-space-types { display: none; }
  .kk-shell.is-side-collapsed .kk-nav { padding: var(--kk-s-2); align-items: center; }
  .kk-shell.is-side-collapsed .kk-nav a { width: 40px; justify-content: center; padding: 9px 0; margin: 0 auto; }
  .kk-shell.is-side-collapsed .kk-user { grid-template-columns: 32px; justify-content: center; padding: var(--kk-s-3) 0; }
}

/* COMPACT view — dense table rows (deck-app) */
.kk-compact .kk-compact-grid { display: flex; flex-direction: column; }
.kk-compact .kk-crow {
  display: grid;
  grid-template-columns: 10px 44px minmax(160px, 1.5fr) minmax(130px, 1fr) 76px 44px 56px;
  align-items: center; gap: 10px 12px;
  padding: 7px 16px;
  border-top: 1px solid var(--kk-line);
  transition: background var(--kk-t-fast) var(--kk-ease-out);
}
.kk-compact .kk-crow:hover { background: var(--kk-fill-soft); }
.kk-compact .kk-crow-head {
  padding-top: 9px; padding-bottom: 8px;
  font-family: var(--kk-font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--kk-text-soft);
  background: var(--kk-fill); border-top: none;
}
.kk-compact .kk-cdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kk-compact .kk-ckind {
  font-family: var(--kk-font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--kk-text-soft);
}
.kk-compact .kk-cpage { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kk-compact .kk-ctitle {
  font-size: 13.5px; font-weight: 600; color: var(--kk-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kk-compact .kk-ctitle:hover { color: var(--kk-ink); }
.kk-cvis {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-family: var(--kk-font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--kk-r-pill); line-height: 1.2;
}
.kk-cvis--public { background: color-mix(in srgb, var(--kk-public) 14%, transparent); color: var(--kk-public); }
.kk-cvis--link { background: color-mix(in srgb, var(--kk-link) 16%, transparent); color: var(--kk-text-soft); }
.kk-cvis--private { background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-compact .kk-cplace { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 12px; }
.kk-compact .kk-cspace { font-weight: 600; flex-shrink: 0; }
.kk-compact .kk-cpath { color: var(--kk-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-compact .kk-csource, .kk-compact .kk-cwhen {
  font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-text-soft);
}
.kk-compact .kk-crow .star {
  justify-self: end; background: none; border: none; cursor: pointer;
  font-size: 14px; line-height: 1; color: var(--kk-faint); padding: 0;
}
.kk-compact .kk-crow .star.is-on { color: var(--kk-idea); }
.kk-compact .kk-crow .star.is-on svg { fill: currentColor; }

/* active-filter bar in the deck-app shell */
.kkapp .active-filters { display: flex; align-items: center; gap: var(--kk-s-2); margin-bottom: var(--kk-s-4); font-size: 12.5px; }
.kkapp .active-filters .af-label { color: var(--kk-text-soft); }
.kkapp .active-filters .af-chip { background: var(--kk-primary); color: var(--kk-on-primary); border-radius: var(--kk-r-pill); padding: 3px 11px; font-weight: 600; }
.kkapp .active-filters .af-clear { color: var(--kk-ink); font-weight: 600; }
.kkapp .active-filters .af-clear:hover { text-decoration: underline; }

/* ── new page compose (spec 22, deck-app) ─────────────────────────────────── */
.kk-compose { max-width: 720px; margin: 0 auto; }
.kk-compose-head { margin-bottom: var(--kk-s-5); }
.kk-compose-lead { margin: var(--kk-s-2) 0 0; font-size: 14.5px; line-height: 1.55; color: var(--kk-text-soft); max-width: 52ch; }
.kk-compose-templates { display: flex; flex-wrap: wrap; gap: var(--kk-s-2); margin-bottom: var(--kk-s-5); }
.kk-tpl {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-pill); background: var(--kk-card);
  font-size: 13px; font-weight: 600; color: var(--kk-text-soft); text-decoration: none;
}
.kk-tpl:hover { border-color: var(--kk-secondary); color: var(--kk-ink); }
.kk-tpl.is-active { border-color: var(--kk-ink); box-shadow: inset 0 0 0 1px var(--kk-ink); color: var(--kk-ink); }
.kk-tpl-kind { font-family: var(--kk-font-mono); font-size: 10px; font-weight: 700; color: var(--kk-text-soft); }
.kk-compose-editor {
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg); background: var(--kk-card);
  overflow: hidden; margin-bottom: var(--kk-s-5);
}
.kk-compose-title {
  width: 100%; border: none; border-bottom: 1px solid var(--kk-line);
  padding: var(--kk-s-5) var(--kk-s-5) var(--kk-s-3);
  font-family: var(--kk-font-display); font-size: 1.65rem; color: var(--kk-ink); background: transparent;
}
.kk-compose-title:focus { outline: none; }
.kk-compose-body {
  width: 100%; border: none; padding: var(--kk-s-4) var(--kk-s-5);
  font-family: var(--kk-font-ui); font-size: 14.5px; line-height: 1.6; color: var(--kk-text);
  background: transparent; resize: vertical; min-height: 220px;
}
.kk-compose-body:focus { outline: none; }
.kk-compose-meta {
  display: flex; justify-content: space-between; gap: var(--kk-s-3);
  padding: var(--kk-s-2) var(--kk-s-5) var(--kk-s-3);
  font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-text-soft);
  border-top: 1px solid var(--kk-line);
}
.kk-compose-section { margin-bottom: var(--kk-s-5); }
.kk-compose-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kk-s-3); margin-bottom: var(--kk-s-3); }
.kk-compose-h2 { font-family: var(--kk-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kk-text-soft); margin: 0; }
.kk-compose-badge { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-text-soft); }
.kk-compose-note { font-size: 13px; line-height: 1.5; color: var(--kk-text-soft); margin: 0 0 var(--kk-s-3); }
.kk-compose-note-muted { color: var(--kk-text-soft); font-size: 12.5px; }
.kk-dest-groups { display: flex; flex-direction: column; gap: var(--kk-s-4); }
.kk-dest-group-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--kk-text-soft); margin: 0 0 var(--kk-s-2);
}
.kk-dest-list { display: flex; flex-direction: column; gap: var(--kk-s-2); }
.kk-dest-card {
  display: flex; align-items: flex-start; gap: var(--kk-s-3);
  padding: 12px 14px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-md);
  background: var(--kk-card); cursor: pointer;
}
.kk-dest-card:has(input:checked) { border-color: var(--kk-ink); box-shadow: inset 0 0 0 1px var(--kk-ink); }
.kk-dest-card input { margin-top: 3px; accent-color: var(--kk-secondary); }
.kk-dest-label { display: block; font-weight: 600; font-size: 14px; color: var(--kk-ink); }
.kk-dest-hint { display: block; font-size: 12px; color: var(--kk-text-soft); margin-top: 2px; }
.kk-share-options { display: flex; flex-direction: column; gap: var(--kk-s-2); margin-bottom: var(--kk-s-3); }
.kk-radiocard {
  display: flex; align-items: flex-start; gap: var(--kk-s-3);
  padding: 12px 14px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-md);
  background: var(--kk-card); cursor: pointer;
}
.kk-radiocard:has(input:checked) { border-color: var(--kk-secondary); background: var(--kk-fill); }
.kk-radiocard input { margin-top: 3px; accent-color: var(--kk-secondary); flex-shrink: 0; }
.kk-radiocard-body { display: flex; align-items: flex-start; gap: var(--kk-s-3); }
.kk-radiocard-body .ic { color: var(--kk-orientation); margin-top: 2px; flex-shrink: 0; }
.kk-radiocard .t { display: block; font-weight: 600; font-size: 14px; }
.kk-radiocard .d { display: block; font-size: 12.5px; color: var(--kk-text-soft); margin-top: 2px; }
.kk-share-password { margin-bottom: var(--kk-s-3); }
.kk-input, .kk-select {
  width: 100%; margin-top: 6px; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); background: var(--kk-card);
}
.kk-label { font-size: 13px; font-weight: 600; }
.kk-disc { border: 1px solid var(--kk-border-light); border-radius: var(--kk-r-md); margin-bottom: var(--kk-s-3); }
.kk-disc summary { padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.kk-disc-body { padding: 0 14px 14px; }
.kk-compose-actions { display: flex; justify-content: flex-end; gap: var(--kk-s-3); padding-top: var(--kk-s-2); }
.kk-field-inset { display: block; padding: 0; }
.kk-field-inset .kk-field-label { display: block; padding: var(--kk-s-4) var(--kk-s-5) 0; font-size: 12px; font-weight: 600; color: var(--kk-text-soft); }
.kk-field-error { display: block; font-size: 12.5px; color: var(--kk-danger, #b42318); margin-top: 6px; }
.kk-slug-row { flex-direction: column; align-items: stretch; gap: 8px; }
.kk-slug-wrap {
  display: flex; align-items: center; gap: 0; margin-top: 6px;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); background: var(--kk-bg); padding: 0 12px;
}
.kk-slug-wrap.has-error { border-color: var(--kk-danger, #b42318); }
.kk-slug-host { font-family: var(--kk-font-mono); font-size: 13px; color: var(--kk-text-soft); white-space: nowrap; }
.kk-slug-input {
  flex: 1; border: none; background: transparent; padding: 10px 0; font-family: var(--kk-font-mono);
  font-size: 14px; color: var(--kk-ink);
}
.kk-slug-input:focus { outline: none; }
.kk-color-picker { display: flex; flex-wrap: wrap; gap: var(--kk-s-2); }
.kk-color-swatch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-pill);
  background: var(--kk-card); cursor: pointer; font-size: 12.5px; color: var(--kk-text-soft);
}
.kk-color-swatch:has(input:checked) { border-color: var(--kk-ink); box-shadow: inset 0 0 0 1px var(--kk-ink); color: var(--kk-ink); }
.kk-color-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.kk-color-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.kk-color-label { font-weight: 600; }
.kk-accent-picker { display: grid; gap: 12px; }
.kk-accent-quick { display: flex; flex-wrap: wrap; gap: var(--kk-s-2); }
.kk-color-dot-inherit { display: grid; place-items: center; background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-color-dot-inherit .ic { width: 10px; height: 10px; }
.kk-accent-more { border-top: 1px solid var(--kk-line); padding-top: 8px; }
.kk-accent-more > summary { width: max-content; cursor: pointer; color: var(--kk-accent-text); font: 600 12px var(--kk-font-ui); }
.kk-accent-more-body { display: grid; gap: 16px; padding-top: 12px; }
.kk-accent-subhead { font: 700 10px var(--kk-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kk-text-soft); }
.kk-accent-family { display: grid; grid-template-columns: 72px repeat(3, 54px); align-items: center; gap: 7px; margin-top: 8px; }
.kk-accent-family > span { font-size: 12px; color: var(--kk-text-soft); }
.kk-accent-family label { position: relative; display: grid; justify-items: center; gap: 3px; cursor: pointer; }
.kk-accent-family input { position: absolute; opacity: 0; }
.kk-accent-family label > span { width: 34px; height: 24px; border-radius: 6px; border: 2px solid transparent; }
.kk-accent-family label:has(input:checked) > span { border-color: var(--kk-ink); box-shadow: 0 0 0 2px var(--kk-card); }
.kk-accent-family small { color: var(--kk-faint); font: 9px var(--kk-font-mono); }
.kk-accent-custom-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.kk-accent-custom-row input[type="text"] { width: 132px; height: 38px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); background: var(--kk-card); color: var(--kk-ink); padding: 0 10px; font: 12px var(--kk-font-mono); }
.kk-accent-custom > small { display: block; margin-top: 5px; color: var(--kk-text-soft); }
.kk-accent-previews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.kk-accent-previews > div { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-card); color: var(--kk-text-soft); font-size: 10px; }
.kk-accent-previews span { width: 7px; height: 22px; border-radius: 3px; flex: none; background: var(--kk-current-accent, var(--kk-decision)); }
.kk-accent-picker.is-preview-invalid .kk-accent-previews { opacity: .45; }
@media (max-width: 560px) { .kk-accent-previews { grid-template-columns: 1fr 1fr; } .kk-accent-family { grid-template-columns: 60px repeat(3, 48px); } }

/* logo doubles as the collapse/expand toggle */
.kk-logo { border: none; cursor: pointer; font-family: inherit; }

/* collapsed-rail Spaces popover (deck-app) — only on the desktop icon rail */
.kk-rail-pop { display: none; }
.kk-rail-pop > summary { list-style: none; }
.kk-rail-pop > summary::-webkit-details-marker { display: none; }
@media (min-width: 900px) {
  .kk-shell.is-side-collapsed .kk-rail-pop { display: block; padding: 0 var(--kk-s-2); margin-top: 2px; }
}
.kk-rail-ico { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); cursor: pointer; }
.kk-rail-ico:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rail-pop[open] .kk-rail-ico { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rail-pop-body { position: fixed; left: 74px; top: 64px; z-index: 200; width: 300px; max-height: 72vh; overflow-y: auto; background: var(--kk-bg); border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg); box-shadow: var(--kk-shadow-lg); padding: var(--kk-s-3); }
.kk-rail-search { width: 100%; border: 1px solid var(--kk-border); background: var(--kk-fill-soft); border-radius: var(--kk-r-sm); padding: 9px 12px; font-size: 13px; font-family: var(--kk-font-ui); color: var(--kk-text); margin-bottom: var(--kk-s-2); }
.kk-rail-spaces { display: flex; flex-direction: column; gap: 1px; }
.kk-rail-spaces .kk-space { display: flex; align-items: center; gap: var(--kk-s-3); padding: 9px 10px; border-radius: var(--kk-r-sm); font-size: 13px; color: var(--kk-text-soft); }
.kk-rail-spaces .kk-space:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rail-spaces .kk-space .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-rail-spaces .kk-space .ct { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-faint); }

/* ── reader-deck folder-tree sidebar (.kk-rnav) — distinct from the app sidebar %*/
.kk-rnav { position: fixed; top: 0; left: 0; z-index: 80; width: var(--kk-side-w); height: 100dvh; display: flex; flex-direction: column; background: var(--kk-paper); border-right: 1px solid var(--kk-line); transform: translateX(-100%); transition: transform var(--kk-t-base) var(--kk-ease-settle); overflow-y: auto; }
.kk-shell.is-open .kk-rnav { transform: translateX(0); }
@media (min-width: 900px) { .kk-rnav { transform: none; } }
.kk-rnav-head { padding: var(--kk-s-4) var(--kk-s-4) var(--kk-s-3); border-bottom: 1px solid var(--kk-line); }
.kk-rnav-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--kk-text-soft); }
.kk-rnav-back:hover { color: var(--kk-ink); }
.kk-rnav-folder { margin-top: var(--kk-s-3); font-family: var(--kk-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--kk-text-soft); }
.kk-rnav-folder .kk-folder-icon { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: var(--kk-current-accent, var(--kk-orientation)); }
.kk-rnav-empty { padding: var(--kk-s-4); font-size: 13px; color: var(--kk-text-soft); }
.kk-rnav-tree { padding: var(--kk-s-2) 0 var(--kk-s-5); }

/* the shared docs/_tree, restyled deck-app inside the reader nav */
.kk-rnav .tree { list-style: none; padding: 0 var(--kk-s-3); margin: 0; font-size: 13px; }
.kk-rnav .tree li { margin: 1px 0; }
.kk-rnav .tree a { display: block; padding: 5px 10px; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-rnav .tree a:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rnav .tree a.active { background: var(--kk-fill); color: var(--kk-ink); font-weight: 600; border-left: 2px solid var(--kk-orientation); }
.kk-rnav .tree .dir { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
.kk-rnav .tree .dir:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rnav .tree .dir .chev { width: 14px; height: 14px; color: var(--kk-text-soft); transition: transform .15s ease; flex-shrink: 0; }
.kk-rnav .tree details[open] > summary.dir .chev { transform: rotate(90deg); }
.kk-rnav .tree .dir .fic { width: 15px; height: 15px; color: var(--kk-orientation); flex-shrink: 0; }
.kk-rnav .tree .dir .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-rnav .tree details summary::-webkit-details-marker { display: none; }
.kk-rnav .tree details > .tree { margin-left: 14px; padding-left: 6px; border-left: 1px solid var(--kk-line); }

/* ── reader right panel: INFO / VERSIONS contents ────────────────────────── */
.kk-rp-card { border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); padding: 14px; margin-bottom: var(--kk-s-4); }
.kk-rp-spark { display: flex; align-items: flex-end; gap: 3px; height: 58px; margin: var(--kk-s-2) 0; }
.kk-rp-bar { flex: 1; min-width: 2px; background: var(--kk-secondary); border-radius: 2px 2px 0 0; opacity: .82; }
.kk-rp-sparkfoot { display: flex; align-items: baseline; justify-content: space-between; font-size: 11.5px; color: var(--kk-text-soft); }
.kk-rp-sparkfoot b { font-family: var(--kk-font-display); font-size: 15px; color: var(--kk-ink); }
.kk-rp-sparkfoot span { font-family: var(--kk-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--kk-text-soft); }
.kk-rp-revs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kk-s-4); }
.kk-rp-revs li { position: relative; padding-left: 16px; }
.kk-rp-revs li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--kk-border); }
.kk-rp-revs li:first-child::before { background: var(--kk-secondary); }
.kk-rp-revs .rv-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.kk-rp-revs .rv-top b { font-family: var(--kk-font-mono); color: var(--kk-ink); }
.kk-rp-revs .rv-cur { font-family: var(--kk-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--kk-ink); background: var(--kk-secondary-soft); border-radius: var(--kk-r-pill); padding: 1px 7px; }
.kk-rp-revs .rv-ago { margin-left: auto; font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-text-soft); }
.kk-rp-revs .rv-title { font-size: 13px; color: var(--kk-text); margin-top: 2px; }
.kk-rp-revs .rv-via { font-family: var(--kk-font-mono); font-size: 10.5px; color: var(--kk-text-soft); margin-top: 1px; }
.kk-rp-revs .rv-link { display: block; color: inherit; text-decoration: none; margin: -4px -6px; padding: 4px 6px; border-radius: var(--kk-r-sm); transition: background-color .12s ease; }
.kk-rp-revs .rv-link:hover, .kk-rp-revs .rv-link:focus-visible { background: var(--kk-wash); }
.kk-rp-revs .rv-link:focus-visible { outline: 2px solid var(--kk-secondary); outline-offset: 1px; }
.kk-rp-link { display: inline-block; margin-top: var(--kk-s-4); font-size: 12.5px; font-weight: 600; color: var(--kk-ink); }

/* ── reader-deck top bar: breadcrumb + VIEW/PREVIEW/FULL + Export + Share ──── */
.kk-deck-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--kk-s-4); height: var(--kk-topbar-h); padding: 0 var(--kk-s-5); border-bottom: 1px solid var(--kk-line); background: color-mix(in srgb, var(--kk-bg) 82%, transparent); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 40; }
/* The breadcrumb lives in a fixed-height bar — it must stay on ONE line and
   truncate, never wrap the items onto new rows (base .kk-crumb is flex-wrap:wrap;
   without this override a long page title pushed the mobile header to 3 rows). */
.kk-deck-topbar .kk-crumb { margin: 0; flex: 1; min-width: 0; flex-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-deck-topbar .kk-crumb .cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-deck-actions { display: flex; align-items: center; gap: var(--kk-s-3); flex-shrink: 0; }
/* Matches .kk-explorer-views — the dashboard's segmented control. */
.kk-deck-vtoggle { padding: 2px; border: 1px solid var(--kk-line); background: var(--kk-fill-soft); border-radius: var(--kk-r-sm); }
.kk-deck-vtoggle a { height: 28px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kk-text-soft); border-radius: 5px; padding: 0 10px; }
.kk-deck-vtoggle a:hover { color: var(--kk-ink); }
.kk-deck-vtoggle a.is-active { background: var(--kk-card); color: var(--kk-ink); box-shadow: var(--kk-shadow-sm); }
/* Same skin as the workspace topbar: filled, borderless, 32px. The reader wore
   the older bordered-card button, so the two chromes read as different products
   (founder, 2026-08-15). */
.kk-deck-btn {
  height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 10px; border: 0; border-radius: 7px;
  background: var(--kk-fill); color: var(--kk-text);
  font: 600 11px var(--kk-font-ui); letter-spacing: .02em;
}
.kk-deck-btn:hover { background: var(--kk-secondary-soft); color: var(--kk-ink); }
.kk-deck-btn svg { width: 14px; height: 14px; }
.kk-deck-search { min-width: 32px; justify-content: center; }
.kk-reader-overflow { position: relative; }
.kk-reader-overflow > summary { list-style: none; min-width: 32px; justify-content: center; cursor: pointer; }
.kk-reader-overflow > summary::-webkit-details-marker { display: none; }
.kk-reader-overflow .kk-pmenu-list { right: 0; left: auto; }
.kk-deck-share { background: var(--kk-primary); color: var(--kk-on-primary); border-color: var(--kk-primary); }
.kk-deck-share:hover { color: var(--kk-on-primary); filter: brightness(1.12); border-color: var(--kk-primary); }
@media (max-width: 720px) {
  .kk-deck-btn span { display: none; }
  .kk-deck-topbar { padding: 0 var(--kk-s-4); }
  /* 44px tap target, 32px painted — the topbar's inset-ring trick. */
  .kk-deck-btn { width: 44px; height: 44px; padding: 0; background: transparent; box-shadow: inset 0 0 0 6px var(--kk-fill); }
  .kk-deck-btn:hover { background: transparent; box-shadow: inset 0 0 0 6px var(--kk-secondary-soft); }
  .kk-deck-search, .kk-reader-overflow > summary { min-width: 44px; min-height: 44px; }

  /* The view toggle was the one control still wearing a word. In the founder's
     375px screenshot it rendered as a white "VIEW" slab beside three icons, and
     it is what pushed the page title down to "RapidRailsUI — Feature ...".
     Its label lives in a nested span like every other deck button, so hiding it
     here matches them; the accessible name is on the link itself.
     Also 38px -> 44px: it was under the founder's minimum and was missed by the
     tap-target pass because that pass only walked .kkapp, and the reader chrome
     is not inside it. */
  .kk-deck-vtoggle a {
    min-height: 44px; min-width: 44px; height: auto; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .kk-deck-vtoggle a span:not(.ic):not([class*="icon"]) { display: none; }
}

/* ── The annotation toolbar must not sit on top of what you are reading ──────
   The purple circle in the founder's screenshot is rails-markup's `.rm-fab`
   (z-index 9980), the tool the /admin/users annotation was filed with. It is
   `position: fixed`, injected by the gem's JavaScript at runtime, so it lands
   LATER in the cascade than this file — hence the specificity bump. Overriding
   a third-party runtime style is the one case where that is the honest tool
   rather than laziness.

   The FAB is not the bug; a FAB overlays by design. The bug is that the page
   ENDS underneath it, so the last comment on a thread can never be scrolled
   clear. Reserving its height at the bottom of the scroll area fixes that
   without moving a control the founder actively uses from their phone. --------- */
@media (max-width: 640px) {
  html body .rm-fab,
  html body .rm-panel-toggle {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  /* Room for the FAB plus the browser's own bottom bar, so content can always
     be scrolled out from under both. */
  .kkapp .kk-main,
  .kk-cinbox { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ── reader nav: search + type filters + numbered tree (#3, #16) ──────────── */
.kk-rnav-search { display: flex; align-items: center; gap: 8px; margin: var(--kk-s-3) var(--kk-s-3) var(--kk-s-2); padding: 7px 10px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); background: var(--kk-bg); }
.kk-rnav-search .ic { width: 15px; height: 15px; color: var(--kk-text-soft); flex-shrink: 0; }
.kk-rnav-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 13px; font-family: var(--kk-font-ui); color: var(--kk-text); }
.kk-rnav-search input::placeholder { color: var(--kk-text-soft); }
.kk-rnav-types { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 var(--kk-s-3) var(--kk-s-3); }
.kk-tf { font-size: 11px; font-weight: 600; color: var(--kk-text-soft); background: var(--kk-fill); border: none; border-radius: var(--kk-r-pill); padding: 4px 10px; cursor: pointer; font-family: var(--kk-font-ui); }
.kk-tf:hover { color: var(--kk-ink); }
.kk-tf.is-active { background: var(--kk-primary); color: var(--kk-on-primary); }
.kk-rnav .tree a { display: flex; align-items: center; gap: 8px; }
.kk-root-pin-menu { position: relative; margin: -2px 6px 4px 28px; }
.kk-root-pin-menu > summary { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; list-style: none; color: var(--kk-text-soft); border-radius: var(--kk-r-sm); cursor: pointer; }
.kk-root-pin-menu > summary::-webkit-details-marker { display: none; }
.kk-root-pin-menu > summary:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-root-pin-menu .kk-pmenu-list { left: 0; right: auto; }
.kk-rnav .tree a .num { font-family: var(--kk-font-mono); font-size: 10px; color: var(--kk-text-soft); flex-shrink: 0; }
.kk-rnav .tree a .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-rnav .tree a.active { background: var(--kk-secondary-soft); color: var(--kk-ink); }
.kk-rnav .tree a.active .num { color: var(--kk-ink); }

/* ── semantic callouts (#17): `> [!DECISION]` → typed callout ─────────────── */
.kk-reader .kk-callout { border-left: 3px solid var(--cl, var(--kk-border)); background: var(--kk-paper); border-radius: 0 var(--kk-r-md) var(--kk-r-md) 0; padding: 12px 16px; margin: 0 0 1.2em; }
.kk-reader .kk-callout > :last-child { margin-bottom: 0; }
.kk-reader .kk-callout-label { font-family: var(--kk-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; color: var(--cl, var(--kk-muted)); }
.kk-reader .kk-callout-decision { --cl: var(--kk-decision); }
.kk-reader .kk-callout-blocker  { --cl: var(--kk-blocker); }
.kk-reader .kk-callout-question { --cl: var(--kk-question); }
.kk-reader .kk-callout-idea     { --cl: var(--kk-idea); }
.kk-reader .kk-callout-outcome  { --cl: var(--kk-outcome); }
.kk-reader .kk-callout-parked   { --cl: var(--kk-parked); }
.kk-reader .kk-callout-note     { --cl: var(--kk-decision); }
.kk-reader .kk-callout-warning  { --cl: var(--kk-blocker); }
.kk-reader .kk-callout-tip      { --cl: var(--kk-outcome); }

/* ── tabbed Space view (#19) ─────────────────────────────────────────────── */
.kk-sv-sq { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.kk-sv-badge { font-family: var(--kk-font-mono); font-size: 10px; letter-spacing: .03em; color: var(--kk-text-soft); background: var(--kk-fill); border-radius: var(--kk-r-pill); padding: 2px 8px; }
.kk-sv-badge.on { color: var(--kk-public); background: color-mix(in srgb, var(--kk-public) 14%, transparent); }
.kk-sv-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kk-s-4); flex-wrap: wrap; }
.kk-sv-right { display: flex; align-items: center; gap: var(--kk-s-3); }
.kk-sv-avatars { display: flex; }
.kk-sv-avatars .av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 2px solid var(--kk-bg); margin-left: -8px; }
.kk-sv-avatars .av:first-child { margin-left: 0; }
.kk-sv-mcount { font-size: 12.5px; color: var(--kk-text-soft); }

.kk-tabs { display: flex; gap: var(--kk-s-5); border-bottom: 1px solid var(--kk-line); margin: var(--kk-s-5) 0; }
.kk-tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--kk-text-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.kk-tab:hover { color: var(--kk-ink); }
.kk-tab.is-active { color: var(--kk-ink); border-bottom-color: var(--kk-ink); }
.kk-tab .ct { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-faint); }
.kk-tabpanel .kk-card { padding: 0; }
.kk-tabpanel .kk-sv-share { margin-bottom: var(--kk-s-5); }

.kk-member-invite { display: flex; gap: 8px; padding: 14px 16px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--kk-line); }
.kk-member-invite .kmember-typeahead { position: relative; flex: 1; min-width: 220px; }
.kk-member-invite .kmember-typeahead > input { width: 100%; }
.kk-member-invite .kmember-typeahead turbo-frame { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; background: var(--kk-paper); border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); box-shadow: var(--kk-shadow-md); overflow: hidden; }
.kk-member-invite .kmember-candidate { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--kk-line); background: transparent; text-align: left; cursor: pointer; color: var(--kk-ink); font-family: var(--kk-font-ui); }
.kk-member-invite .kmember-candidate:last-child { border-bottom: 0; }
.kk-member-invite .kmember-candidate:hover { background: var(--kk-fill); }
.kk-member-invite .kmember-candidate span:first-child,
.kk-member-invite .kmember-candidate small { display: block; }
.kk-member-invite .kmember-candidate small { color: var(--kk-text-soft); }
.kk-member-invite input[type=email] { flex: 1; min-width: 220px; border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-sm); padding: 8px 11px; font-size: 13.5px; font-family: var(--kk-font-ui); color: var(--kk-text); }

/* Member typeahead is a self-contained component — style the results dropdown by its
   OWN class so it also works inside the Share modal (which is neither .kapp nor
   .kk-member-invite). Without this the frame rendered inline + transparent and bled
   over the text below it. Hidden while empty; a solid, floating, z-indexed panel once
   it has results. */
.kmember-typeahead { position: relative; }
.kmember-typeahead > input { width: 100%; }
.kmember-typeahead turbo-frame:empty { display: none; }
.kmember-typeahead turbo-frame:not(:empty) {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--kk-paper, #fff); border: 1px solid var(--kk-line, #e6ecef);
  border-radius: var(--kk-r-md, 10px); box-shadow: var(--kk-shadow-md, 0 12px 40px rgba(18,24,31,.16));
  overflow: hidden;
}
.kmember-typeahead .kmember-candidate { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--kk-line, #e6ecef); background: transparent; text-align: left; cursor: pointer; color: var(--kk-ink, #12181f); font-family: var(--kk-font-ui, inherit); }
.kmember-typeahead .kmember-candidate:last-child { border-bottom: 0; }
.kmember-typeahead .kmember-candidate:hover { background: var(--kk-fill, #eef2f5); }
.kmember-typeahead .kmember-candidate span:first-child,
.kmember-typeahead .kmember-candidate small { display: block; }
.kmember-typeahead .kmember-candidate small { color: var(--kk-text-soft, #7c8791); }
.kmember-typeahead turbo-frame > .ksettings-muted { padding: 10px 12px; margin: 0; }
.kk-member-role { border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-sm); padding: 7px 9px; font-size: 12.5px; color: var(--kk-text); font-family: var(--kk-font-ui); }
.kk-member { display: flex; align-items: center; gap: var(--kk-s-3); padding: 12px 16px; }
.kk-member + .kk-member { border-top: 1px solid var(--kk-line); }
.kk-member-av { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.kk-member .who { flex: 1; min-width: 0; }
.kk-member .who .n { font-size: 13.5px; font-weight: 600; color: var(--kk-ink); }
.kk-member .who .e { font-size: 12px; color: var(--kk-text-soft); }
.kk-role-badge { font-family: var(--kk-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--kk-r-pill); background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-role-badge.owner { background: var(--kk-primary); color: var(--kk-on-primary); }
.kk-role-form { display: inline-flex; align-items: center; }
.kk-member-remove { background: none; border: none; font-size: 12px; color: var(--kk-text-soft); cursor: pointer; }
.kk-member-remove:hover { color: var(--kk-blocker); }

.kk-share-card { padding: 18px 20px; }
.kk-share-h { font-size: 15px; font-weight: 700; color: var(--kk-ink); }
.kk-share-sub { font-size: 13px; color: var(--kk-text-soft); margin: 4px 0 16px; }
.kk-share-form { display: block; }
.kk-share-opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-md); padding: 14px 16px; margin-bottom: 8px; cursor: pointer; font-family: var(--kk-font-ui); }
.kk-share-opt:hover { border-color: var(--kk-secondary); }
.kk-share-opt.is-on { border-color: var(--kk-ink); box-shadow: inset 0 0 0 1px var(--kk-ink); }
.kk-share-opt .ro { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--kk-border); flex-shrink: 0; margin-top: 1px; }
.kk-share-opt.is-on .ro { border-color: var(--kk-ink); background: radial-gradient(circle, var(--kk-ink) 0 4px, transparent 5px); }
.kk-share-opt .tx { display: flex; flex-direction: column; gap: 2px; }
.kk-share-opt .tx b { font-size: 14px; color: var(--kk-ink); }
.kk-share-opt .tx span { font-size: 12.5px; color: var(--kk-text-soft); }
.kk-share-note { font-size: 12px; color: var(--kk-text-soft); margin: 10px 0 0; }

.kk-activity { list-style: none; margin: 0; padding: 4px 0; }
.kk-activity li { display: flex; gap: 12px; padding: 12px 16px; }
.kk-activity .ev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kk-secondary); margin-top: 6px; flex-shrink: 0; }
.kk-activity .ev-text { font-size: 13.5px; color: var(--kk-text); }
.kk-activity .ev-meta { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-text-soft); margin-top: 2px; }
@media (max-width: 640px) { .kk-tabs { gap: var(--kk-s-4); overflow-x: auto; } }

/* ── Space view: StockLive fidelity (#21–#28) ────────────────────────────── */
.kk-cap { font-family: var(--kk-font-mono); font-size: 10px; letter-spacing: .04em; color: var(--kk-ink); background: color-mix(in srgb, var(--kk-secondary) 13%, transparent); border-radius: var(--kk-r-pill); padding: 2px 9px; }
.kk-sv-avatars .av.more { background: var(--kk-fill); color: var(--kk-text-soft); font-size: 11px; font-weight: 600; }

.kk-newfolder { margin-top: 8px; }
.kk-newfolder-btn { display: block; text-align: center; border: 1px dashed var(--kk-border); border-radius: var(--kk-r-sm); padding: 9px; font-size: 12.5px; color: var(--kk-text-soft); cursor: pointer; list-style: none; }
.kk-newfolder-btn::-webkit-details-marker, .kk-newfolder-btn::marker { display: none; content: ""; }
.kk-newfolder-btn:hover { border-color: var(--kk-secondary); color: var(--kk-ink); }
.kk-newfolder[open] .kk-newfolder-btn { display: none; }
.kk-newfolder-form { display: flex; gap: 6px; }
.kk-newfolder-form input { flex: 1; min-width: 0; border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-sm); padding: 7px 9px; font-size: 12.5px; font-family: var(--kk-font-ui); color: var(--kk-text); }
.kk-btn-sm { padding: 6px 11px; font-size: 12px; }

.kk-feedhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.kk-feedhead b { font-size: 16px; font-weight: 700; color: var(--kk-ink); }
.kk-feedhead span { font-family: var(--kk-font-mono); font-size: 11.5px; color: var(--kk-faint); }

.kk-prow { display: flex; align-items: center; gap: 14px; padding: 13px 16px; }
.kk-prow + .kk-prow { border-top: 1px solid var(--kk-line); }
.kk-ptype { flex-shrink: 0; width: 34px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: var(--kk-r-sm); font-family: var(--kk-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .03em; }
.kk-ptype.md { background: var(--kk-ink); color: var(--kk-bg); }
.kk-ptype.html { background: color-mix(in srgb, var(--kk-decision) 16%, transparent); color: var(--kk-decision); }
.kk-pbody { flex: 1; min-width: 0; }
.kk-pl1 { display: flex; align-items: center; gap: 8px; }
.kk-ptitle { font-size: 14px; font-weight: 600; color: var(--kk-ink); text-decoration: none; }
.kk-ptitle:hover { color: var(--kk-primary); }
.kk-pmeta { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-text-soft); margin-top: 3px; }
.kk-ptime { font-family: var(--kk-font-mono); font-size: 11.5px; color: var(--kk-faint); flex-shrink: 0; }
.kk-pstar { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--kk-border); flex-shrink: 0; padding: 2px; }
.kk-pstar.is-on { color: var(--kk-idea); }
.kk-pstar:hover { color: var(--kk-ink); }
@media (max-width: 640px) { .kk-prow { gap: 10px; padding: 11px 12px; } .kk-ptime { display: none; } }

/* ── reader-deck view modes (#1 unify · #18 full bar) ────────────────────── */
/* clean preview (?view=reader): drop owner-only annotations, keep the read chrome */
.kk-mode-clean .viewing-as,
.kk-mode-clean .kk-deck-share { display: none; }

/* full deck (?view=full): hide nav + right panel + top bars; content centered */
.kk-mode-full .kk-rnav,
.kk-mode-full .kk-rpanel,
.kk-mode-full .kk-deck-topbar,
.kk-mode-full .kk-mtop,
.kk-mode-full .viewing-as { display: none; }
.kk-mode-full .kk-main { margin-left: 0; }
/* Full view = the page itself, edge to edge — strip our card/box entirely so an
   HTML page renders as itself (its own layout), with only the floating bar. */
.kk-mode-full .kk-readwrap { max-width: none; padding: 0; }
.kk-mode-full .kk-readwrap .kk-reader { max-width: none; }
/* --kk-fb-inset is 0 unless the fullbar is Docked, when the controller sets it to
   the bar's height so the page ends ABOVE the bar (no overlap) instead of under it. */
.kk-mode-full .kk-reader .html-embed { border: none; border-radius: 0; min-height: calc(100vh - var(--kk-fb-inset, 0px)); }
/* Markdown stays readable: a centered column, no card. */
.kk-mode-full .kk-reader .doc { max-width: 820px; margin: 0 auto; padding: var(--kk-s-6) var(--kk-s-5) calc(var(--kk-s-8) + 56px); }

/* floating control bar — pill, bottom-center (task #18) */
.kk-fullbar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; background: var(--kk-ink); color: var(--kk-bg);
  border-radius: var(--kk-r-pill); padding: 6px; box-shadow: 0 10px 34px rgba(0,0,0,.28); z-index: 60; }

/* ── reader sidebar resize (#30) + clean hides sidebar (#31) ──────────────── */
.kk-rnav-resize { display: none; }
.kk-mode-clean .kk-rnav { display: none; }
.kk-mode-clean .kk-main { margin-left: 0; }
@media (min-width: 900px) {
  .kk-mode-managed .kk-rnav { width: var(--kk-rnav-w, var(--kk-side-w)); }
  .kk-mode-managed .kk-main { margin-left: var(--kk-rnav-w, var(--kk-side-w)); }
  .kk-mode-managed .kk-rnav-resize { display: block; position: fixed; top: 0; left: var(--kk-rnav-w, var(--kk-side-w)); width: 9px; height: 100dvh; margin-left: -4px; cursor: col-resize; z-index: 81; }
  .kk-rnav-resize::after { content: ""; position: absolute; left: 4px; top: 0; width: 1px; height: 100%; background: transparent; transition: background var(--kk-t-base) ease; }
  .kk-rnav-resize:hover::after { background: var(--kk-secondary); }
}

/* ── full-view floating bar redesign (#32): title · pager · dock · comments ── */
/* Fixed-width title slot (not max-width): the bar is centered + auto-width, so a
   variable title made the whole bar resize/shift on every paginate. A constant
   width keeps it rock-steady regardless of the next page's title length. */
.kk-fb-title { font-size: 12.5px; font-weight: 600; color: var(--kk-bg); width: min(220px, 34vw); flex: 0 0 auto; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px 0 6px; }
.kk-fb-pager { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.1); border-radius: var(--kk-r-pill); padding: 2px; }
.kk-fb-nav { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--kk-r-pill); color: var(--kk-bg); text-decoration: none; font-size: 16px; opacity: .85; }
.kk-fb-nav:hover { background: rgba(255,255,255,.14); opacity: 1; }
.kk-fb-nav.is-off { opacity: .3; pointer-events: none; }
.kk-fb-pos { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-bg); opacity: .8; padding: 0 6px; min-width: 62px; text-align: center; box-sizing: border-box; }
.kk-fb-div { width: 1px; height: 20px; background: rgba(255,255,255,.18); margin: 0 2px; }
.kk-fb-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; color: var(--kk-bg); background: none; border: none; cursor: pointer; padding: 7px 9px; border-radius: var(--kk-r-pill); opacity: .85; text-decoration: none; }
.kk-fb-btn:hover { opacity: 1; background: rgba(255,255,255,.12); }
.kk-fb-btn.is-soon { opacity: .4; cursor: not-allowed; }
.kk-fb-c { font-family: var(--kk-font-mono); font-size: 10px; }
/* Progressive disclosure: secondary controls are inline on desktop; on mobile
   they collapse into a compact action rail behind the ⋯ "more" button. */
.kk-fb-overflow { display: contents; }
.kk-fb-more { display: none; }
.kk-fullbar.is-docked { left: 0; right: 0; bottom: 0; transform: none; width: 100%; border-radius: 0; justify-content: center; gap: 8px; }
.kk-fullbar .kk-fb-dock svg { transition: transform var(--kk-t-base) ease; }
.kk-fullbar.is-docked .kk-fb-dock svg { transform: rotate(180deg); }

/* ── fullbar states: Peek (folded FAB) · Float (pill, default) · Dock (full-width) ──
  Parent-owned, spec 23. Desktop cycles Float → Dock → Peek; mobile stays docked.
   The controller persists the choice per reader and, in Dock, sets --kk-fb-inset so
   the hosted iframe reserves the bar's height (fixes the bottom-content overlap). */
.kk-fb-fab, .kk-fb-menu { display: none; }
/* Peek: collapse the whole bar to a single 46px K-circle, bottom-right. */
.kk-fullbar.is-peek { left: auto; right: 16px; bottom: 16px; transform: none; width: auto;
  background: none; box-shadow: none; padding: 0; gap: 0; flex-wrap: nowrap; }
.kk-fullbar.is-peek > :not(.kk-fb-fab) { display: none !important; }
.kk-fullbar.is-peek .kk-fb-fab { display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--kk-ink); color: var(--kk-bg); border: none; cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.34); font-family: var(--kk-font-display); font-weight: 700; font-size: 17px; }
/* Owner folder settings. Runtime placement is handled by the K-FAB + chevron. */
.kk-fb-menu { position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 224px; background: var(--kk-bg);
  color: var(--kk-text); border: 1px solid var(--kk-line); border-radius: var(--kk-r-md);
  box-shadow: var(--kk-shadow-lg); padding: 12px; z-index: 62; }
.kk-fullbar.show-menu .kk-fb-menu { display: block; }
.kk-fb-menu h4 { margin: 0 0 8px; font-family: var(--kk-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--kk-text-soft); }
.kk-fb-field { display: grid; gap: 5px; font: 600 11px var(--kk-font-ui); color: var(--kk-text-soft); }
.kk-fb-field span { font: 700 10px var(--kk-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kk-text-soft); }
.kk-fb-select { width: 100%; border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); background: var(--kk-bg);
  color: var(--kk-text); font: 600 12px var(--kk-font-ui); padding: 8px 9px; }
/* hide-controls checkboxes */
.kk-fb-hide { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 10px; }
.kk-fb-hh { width: 100%; font: 700 10px var(--kk-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kk-text-soft); }
.kk-fb-hide label { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--kk-text); cursor: pointer; text-transform: capitalize; }
.kk-fb-hide input { accent-color: var(--kk-secondary); margin: 0; }
.kk-fb-save { margin-top: 11px; width: 100%; font: 600 12px var(--kk-font-ui); background: var(--kk-ink); color: var(--kk-bg); border: 0; border-radius: var(--kk-r-sm); padding: 8px; cursor: pointer; }
.kk-fb-save:hover { background: var(--kk-primary); }

/* ── shared order row (spec 52 §3b) — one presenter for /orders + /intake ───── */
.kk-ko-item.ko-declined { opacity: .6; }
.kk-ko-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.kk-ko-name { font-weight: 600; color: var(--kk-ink); font-size: 13.5px; }
.kk-ko-body { font-size: 14px; color: var(--kk-text); line-height: 1.6; margin-bottom: 10px; }
.kk-ko-body p { margin: 0 0 6px; }
.kk-ko-acts { display: flex; align-items: center; gap: 8px; }
.kk-ko-lines { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kk-ko-lines li { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; }
.kk-ko-lines .q { font-family: var(--kk-font-mono); color: var(--kk-ink); font-weight: 600; min-width: 28px; }
.kk-ko-lines .n { flex: 1; color: var(--kk-ink); }
.kk-ko-lines .s { font-family: var(--kk-font-mono); color: var(--kk-text-soft); }
.kk-ko-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--kk-line); padding-top: 7px; margin-bottom: 9px; }
.kk-ko-total span { font-family: var(--kk-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--kk-text-soft); }
.kk-ko-total b { font-family: var(--kk-font-display); font-size: 18px; color: var(--kk-ink); }
.kk-ko-note { font-size: 13px; color: var(--kk-text-soft); font-style: italic; border-left: 2px solid var(--kk-line); padding-left: 10px; }
/* Mobile (spec 37 / #20): the full-view bar overflowed — cap it to the viewport,
   drop the title (the page is right there), and tighten the pager/buttons so the
   K-logo · ⌘K · pager · comments · like all fit. */
@media (max-width: 600px) {
  /* One clean full-width strip — never wrap into a crammed multi-row block
     (house Mobile rule #6). Mobile is always docked; no placement cycling. */
  .kk-fullbar:not(.is-peek) { left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: none;
    border-radius: 0; flex-wrap: nowrap; justify-content: space-around; gap: 0; padding: 5px 2px;
    box-shadow: 0 -6px 20px rgba(0,0,0,.16); }
  .kk-fullbar .kk-fb-title, .kk-fullbar .kk-fb-div { display: none; }  /* free the width */
  .kk-fb-pos { min-width: 34px; padding: 0 2px; }
  .kk-fb-nav { width: 32px; height: 32px; }
  .kk-fb-btn { padding: 8px 6px; }
  /* Progressive disclosure: primary row is K · pager · ⋯ · (gear) · ✕; the rest
     live in a compact action rail above the bar, opened by ⋯. */
  .kk-fb-more { display: inline-flex; }
  .kk-fb-dock { display: none; }
  .kk-fullbar .kk-fb-overflow { display: none; }
  .kk-fullbar.is-expanded .kk-fb-overflow { display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
    background: var(--kk-ink); border-radius: var(--kk-r-pill); padding: 6px;
    box-shadow: 0 -10px 26px rgba(0,0,0,.34); z-index: 62; min-width: 0; }
  .kk-fullbar.is-expanded .kk-fb-overflow .kk-fb-btn { width: 44px; height: 44px; padding: 0;
    justify-content: center; border-radius: 50%; background: rgba(255,255,255,.08); opacity: 1; }
  .kk-fullbar.is-expanded .kk-fb-overflow .kk-fb-btn:hover { background: rgba(255,255,255,.16); }
  .kk-fullbar.is-expanded .kk-fb-overflow .kk-fb-c { position: absolute; top: 3px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-flex;
    align-items: center; justify-content: center; background: var(--kk-primary); color: var(--kk-on-primary);
    font-size: 9px; line-height: 1; box-sizing: border-box; }
  .kk-fullbar.is-expanded .kk-fb-more { background: rgba(255,255,255,.14); color: #fff; border-radius: var(--kk-r-pill); }
}
.kk-mode-full.show-comments .kk-rpanel { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; height: 100dvh; width: 340px; max-width: 92vw; background: var(--kk-bg); border-left: 1px solid var(--kk-line); z-index: 56; overflow-y: auto; box-shadow: var(--kk-shadow-lg); padding: var(--kk-s-3); }

/* ── Space folder rows: per-folder Share + Settings (#37) ─────────────────── */
.kk-sv-folder-main { display: flex; align-items: center; gap: var(--kk-s-3); flex: 1; min-width: 0; color: inherit; }
.kk-sv-folder-main .ic { color: var(--kk-current-accent, var(--kk-orientation)); }
.kk-space-folders .kk-folder .kk-ficon { color: var(--kk-current-accent, var(--kk-orientation)); }
.kk-sv-folder-acts { display: none; align-items: center; gap: 1px; flex-shrink: 0; }
.kk-sv-folder:hover .kk-sv-folder-acts { display: inline-flex; }
.kk-sv-folder:hover .ct { display: none; }
.kk-sv-fact { display: inline-flex; padding: 3px; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); }
.kk-sv-fact:hover { background: var(--kk-bg); color: var(--kk-ink); }
.kk-sv-fact svg { width: 15px; height: 15px; }

/* ── share/settings modal: match the deck's theme, not the system ────────────
   The modal is wrapped in .kapp, so bridge its legacy names to the same Winter
   roles as the deck shell. Scoped to .kkapp so authored Page bodies stay isolated. */
html:not([data-theme="dark"]) .kkapp #modal .kapp,
html:not([data-theme="dark"]) .kkapp .kapp.kk-embed {
  --k-bg:var(--kk-bg); --k-warm:var(--kk-wash); --k-card:var(--kk-card); --k-elevated:var(--kk-card);
  --k-ink:var(--kk-ink); --k-muted:var(--kk-text-soft); --k-light:var(--kk-text-soft); --k-faint:var(--kk-muted);
  --k-accent:var(--kk-primary); --k-accent-soft:var(--kk-fill); --k-accent-hover:var(--kk-ink); --k-accent-dark:var(--kk-primary);
  --k-green:#1B7D3F; --k-green-soft:#DCF0E3; --k-blue:#1D5BD6; --k-blue-soft:#E0EAFC;
  --k-amber:#C47F17; --k-amber-soft:#FDF2D0; --k-purple:#6B4FCF; --k-purple-soft:#ECE6FB;
  --k-border:var(--kk-border); --k-border-light:var(--kk-line); --k-border-focus:var(--kk-secondary);
  --k-sh:0 1px 2px rgba(0,0,0,.04); --k-shm:0 8px 30px rgba(0,0,0,.14); --k-shl:0 16px 50px rgba(0,0,0,.20);
}
/* Make every text node in the modal follow --k-ink (so it reads in light or dark). */
.kkapp #modal .kapp, .kkapp #modal .kmodal { color: var(--k-ink); }

/* ── per-page Share control in the Space feed (hover) ────────────────────── */
.kk-pacts { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.kk-pshare { display: none; align-items: center; padding: 3px; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); }
.kk-prow:hover .kk-pshare { display: inline-flex; }
.kk-pshare:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-pshare svg { width: 15px; height: 15px; }

/* ── compact "Share this space" disclosure (was a big card) ──────────────── */
.kk-spacelink { border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); margin-bottom: var(--kk-s-5); background: var(--kk-bg); }
.kk-spacelink > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 13px; font-size: 12.5px; color: var(--kk-text-soft); user-select: none; }
.kk-spacelink > summary::-webkit-details-marker { display: none; }
.kk-spacelink > summary .ic { width: 14px; height: 14px; color: var(--kk-orientation); flex-shrink: 0; }
.kk-spacelink > summary .host { font-family: var(--kk-font-mono); color: var(--kk-ink); }
.kk-spacelink > summary .chev { margin-left: auto; transition: transform .15s ease; color: var(--kk-faint); }
.kk-spacelink[open] > summary .chev { transform: rotate(180deg); }
.kk-spacelink-body { display: flex; align-items: center; gap: var(--kk-s-4); padding: 0 13px 13px; }
.kk-spacelink-body .l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kk-spacelink-body code { font-family: var(--kk-font-mono); font-size: 11.5px; color: var(--kk-ink); background: var(--kk-fill); border-radius: var(--kk-r-sm); padding: 6px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-spacelink-body .hint { font-size: 11.5px; color: var(--kk-text-soft); }
.kk-spacelink-body .qr { flex-shrink: 0; }

/* per-page actions — icon buttons that are ALWAYS tappable (were hover-only text,
   so unreachable on touch); Open + ★ stay out, Edit/Settings/History fold into ⋯. */
.kk-iact { width: 32px; height: 32px; display: inline-grid; place-items: center; flex-shrink: 0;
  border: 0; background: none; color: var(--kk-text-soft); border-radius: var(--kk-r-sm); cursor: pointer; text-decoration: none; }
.kk-iact svg { width: 16px; height: 16px; }
.kk-iact:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-iact:focus-visible { outline: 2px solid var(--kk-secondary); outline-offset: 1px; }
.kk-pmenu { position: relative; display: inline-flex; }
.kk-pmenu > summary { list-style: none; }
.kk-pmenu > summary::-webkit-details-marker { display: none; }
.kk-pmenu[open] > summary { background: var(--kk-fill); color: var(--kk-ink); }
.kk-pmenu-list { position: absolute; right: 0; top: 36px; z-index: 30; min-width: 168px;
  background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: var(--kk-r-md);
  box-shadow: var(--kk-shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.kk-pmenu-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--kk-r-sm);
  font-size: 13px; color: var(--kk-text); text-decoration: none; white-space: nowrap; }
.kk-pmenu-item svg { width: 15px; height: 15px; color: var(--kk-text-soft); flex-shrink: 0; }
.kk-pmenu-item:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-pstar svg { width: 16px; height: 16px; }
/* the feed card clips (overflow:hidden for its radius) — let the ⋯ menu escape it */
.kk-sv-feed .kk-card { overflow: visible; }
/* deck feed row (_row): the ⋯ menu sits at the right, vertically centered */
.kk-row .kk-rowmenu { align-self: center; margin-left: auto; flex: none; }
/* compact table row: star + ⋯ share the trailing cell; let the card's dropdown escape */
.kk-card.kk-compact { overflow: visible; }
.kk-compact .kk-cacts { display: inline-flex; align-items: center; gap: 1px; justify-self: end; }
.kk-compact .kk-cacts .kk-iact { width: 26px; height: 26px; }
.kk-compact .kk-cacts .kk-iact svg { width: 15px; height: 15px; }

/* ── admin area in deck chrome (#44) ─────────────────────────────────────── */
.kk-admin { max-width: 820px; }
.kk-admin .kk-card { padding: 0; }
.kk-admin .kk-feedhead { margin-top: var(--kk-s-5); }
.kk-arow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; }
.kk-arow + .kk-arow { border-top: 1px solid var(--kk-line); }
.kk-arow .who { min-width: 0; }
.kk-arow .who .t { font-size: 14px; font-weight: 600; color: var(--kk-ink); }
.kk-arow .who .m { font-size: 12px; color: var(--kk-text-soft); margin-top: 2px; }
.kk-arow .acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.kk-astatus { font-family: var(--kk-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--kk-r-pill); background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-astatus.ok { background: color-mix(in srgb, var(--kk-outcome) 16%, transparent); color: var(--kk-outcome); }
.kk-aform-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--kk-line); }
.kk-aform-row input { border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-sm); padding: 8px 11px; font-size: 13.5px; font-family: var(--kk-font-ui); color: var(--kk-text); }
.kk-aform-row input[type=text], .kk-aform-row input[type=email] { flex: 1; min-width: 180px; }
.kk-empty2 { padding: 16px; font-size: 13px; color: var(--kk-text-soft); }
.kk-aform-col { display: flex; flex-direction: column; gap: 5px; }
.kk-aform-col .lbl { font-size: 12.5px; font-weight: 600; color: var(--kk-ink); }
.kk-ainput { border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-sm); padding: 8px 11px; font-size: 13.5px; font-family: var(--kk-font-ui); color: var(--kk-text); width: 100%; max-width: 340px; }

/* ── /new destination picker search (#33) ────────────────────────────────── */
.kk-dest-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-md); padding: 8px 12px; margin: 0 0 12px; }
.kk-dest-search .ic { width: 16px; height: 16px; color: var(--kk-text-soft); flex-shrink: 0; }
.kk-dest-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 14px; font-family: var(--kk-font-ui); color: var(--kk-text); }

/* ── filter chips: one row, scrolls horizontally when it overflows (#8) ────── */
/* Keeps the toolbar to a single line at every width — including mobile, where
   the row becomes a horizontal swipe-strip — instead of wrapping to 2–3 rows. */
.kk-toolbar .kk-chips { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.kk-chips::-webkit-scrollbar { display: none; }
.kk-chip, .kk-chip-wrap, .kk-saved-chips { flex: 0 0 auto; }
.kk-saved-chips { display: inline-flex; gap: var(--kk-s-2); }

/* ── FEED day-section headers (#11) ──────────────────────────────────────── */
.kk-day-head { font-family: var(--kk-font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--kk-text-soft); padding: 16px 16px 7px; border-top: 1px solid var(--kk-line); }
.kk-day-head:first-child { padding-top: 10px; border-top: none; }

/* ── reader topbar button colors + full-view chrome ──────────────────────── */
/* Share button text was invisible: `.kkapp a { color: inherit }` (0,1,1) beats
   `.kk-deck-share` (0,1,0), so the <a> inherited --kk-text (dark ink) onto its
   dark --kk-primary fill. Re-assert the deck button colors at (0,2,0). */
.kkapp .kk-deck-btn { color: var(--kk-text-soft); }
.kkapp .kk-deck-share, .kkapp .kk-deck-share:hover { color: var(--kk-on-primary); }

/* Full view shows the page + floating bar ONLY — hide the in-content prev/next
   pager (the floating bar already paginates the folder). */
.kk-mode-full .kk-reader .pager { display: none; }

/* ── admin usage panel (spec 34 / KUX-802-803) ───────────────────────────── */
.kk-btn-ghost { background: var(--kk-card); color: var(--kk-ink); border: 1px solid var(--kk-border); }
.kk-btn-ghost:hover { border-color: var(--kk-secondary); color: var(--kk-ink); }
.kk-ulink { color: var(--kk-ink); text-decoration: none; }
.kk-ulink:hover { color: var(--kk-ink); text-decoration: underline; }
.kk-arow-form { display: flex; align-items: center; gap: 8px; }
.kk-usage-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: var(--kk-s-2); font-family: var(--kk-font-mono); font-size: 12px; color: var(--kk-text-soft); }
.kk-ustatus { font-family: var(--kk-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--kk-border); color: var(--kk-text-soft); }
.kk-ustatus.active { color: var(--kk-public, #3a5a3f); background: #f0f6f1; border-color: #cfe0d4; }
.kk-ustatus.suspended { color: var(--kk-danger, #9b2c2c); background: #fbf0ef; border-color: #eccfcb; }
.kk-ustatus.admin { color: var(--kk-on-primary); background: var(--kk-primary); border-color: var(--kk-primary); }
.kk-usage-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--kk-text-soft); text-decoration: none; margin-bottom: var(--kk-s-4); }
.kk-usage-back:hover { color: var(--kk-ink); }
.kk-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: var(--kk-s-5); }
@media (max-width: 720px) { .kk-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.kk-stat { border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); padding: 13px 15px; background: var(--kk-card); }
.kk-stat .k { font-family: var(--kk-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--kk-faint); }
.kk-stat .v { font-family: var(--kk-font-display); font-size: 26px; font-weight: 700; color: var(--kk-ink); line-height: 1.1; margin-top: 4px; }
.kk-stat .m { font-size: 11px; color: var(--kk-text-soft); margin-top: 3px; }
.kk-usage-card { padding: 6px 16px !important; }
.kk-bd { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.kk-bd + .kk-bd { border-top: 1px solid var(--kk-line); }
.kk-bd .l { flex: 0 0 200px; font-size: 13.5px; color: var(--kk-ink); }
.kk-bd .bar { flex: 1; height: 8px; background: var(--kk-fill, #f1f0ec); border-radius: 5px; overflow: hidden; }
.kk-bd .bar span { display: block; height: 100%; background: var(--kk-primary); border-radius: 5px; }
.kk-bd .c { flex: 0 0 auto; font-family: var(--kk-font-mono); font-size: 12px; font-weight: 600; color: var(--kk-text-soft); min-width: 28px; text-align: right; }
.kk-bd-empty { padding: 14px 0; font-size: 13px; color: var(--kk-faint); }
.kk-space-tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 0; }
.kk-space-tag { font-family: var(--kk-font-mono); font-size: 12px; color: var(--kk-ink); background: var(--kk-fill, #f1f0ec); border-radius: 6px; padding: 4px 9px; }
.kk-usage-note { display: flex; align-items: center; gap: 7px; margin-top: var(--kk-s-5); font-size: 12px; color: var(--kk-faint); }

/* ── Comments inbox (spec 42) ─────────────────────────────────────────────── */
.kk-cinbox { max-width: 860px; }
.kk-cfilters { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin: var(--kk-s-3) 0 var(--kk-s-5); }
.kk-cfilter-group { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.kk-cfilter-group + .kk-cfilter-group { padding-left: 22px; border-left: 1px solid var(--kk-line); }
.kk-cfilter-label { color: var(--kk-faint); font: 9px var(--kk-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.kk-cfilter-group .kk-chips { margin-bottom: 0; }
@media (max-width: 600px) {
  .kk-cfilter-group + .kk-cfilter-group { padding-left: 0; border-left: 0; }
}
/* Inbox search — find a thread by what was said or which page it is on. */
.kk-csearch {
  display: flex; align-items: center; gap: var(--kk-s-2);
  min-height: 42px; padding: 0 var(--kk-s-3); margin: var(--kk-s-4) 0 var(--kk-s-3);
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-md);
  background: var(--kk-card); color: var(--kk-text-soft);
}
.kk-csearch:focus-within { border-color: var(--kk-secondary); }
.kk-csearch input[type="search"] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--kk-text); font: 16px var(--kk-font-ui);
}
.kk-csearch-clear { flex: 0 0 auto; font: 12px var(--kk-font-ui); color: var(--kk-text-soft); }

/* Reply where you are — the thread's own answer box, no page round trip. */
.kk-creply {
  display: flex; align-items: center; gap: var(--kk-s-2);
  margin: -2px 0 var(--kk-s-3) 34px; padding: 0;
}
.kk-creply input[type="text"] {
  flex: 1; min-width: 0; min-height: 38px; padding: 0 var(--kk-s-3);
  border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm);
  background: var(--kk-fill-soft); color: var(--kk-text); font: 16px var(--kk-font-ui);
}
.kk-creply input[type="text"]:focus { outline: 0; border-color: var(--kk-secondary); background: var(--kk-card); }
.kk-creply-send {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: var(--kk-r-sm); background: var(--kk-fill);
  color: var(--kk-text-soft); cursor: pointer;
}
.kk-creply-send:hover { background: var(--kk-secondary-soft); color: var(--kk-ink); }
@media (max-width: 600px) {
  .kk-creply { margin-left: 0; }
  .kk-creply input[type="text"], .kk-creply-send { min-height: 44px; height: 44px; }
  .kk-creply-send { width: 44px; }
  .kk-csearch { min-height: 44px; }
}

.kk-cgroup { margin-bottom: var(--kk-s-5); }
.kk-cgroup-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.kk-cgroup-head .t { font-family: var(--kk-font-display); font-size: 16px; font-weight: 700; color: var(--kk-ink); text-decoration: none; }
.kk-cgroup-head .t:hover { color: var(--kk-ink); }
.kk-cgroup-head .m { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-faint); }
.kk-crow { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); background: var(--kk-card); margin-bottom: 8px; }
.kk-crow:hover { border-color: var(--kk-secondary); }
.kk-crow-link { display: flex; gap: 11px; align-items: flex-start; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.kk-crow-btn { cursor: pointer; border: none; }
.kk-crow-btn:hover { filter: brightness(.96); }
.kk-crow-ic { flex: 0 0 auto; color: var(--kk-text-soft); margin-top: 1px; }
.kk-crow-body { flex: 1; min-width: 0; }
.kk-crow-body .q { display: block; font-size: 12.5px; color: var(--kk-ink); border-left: 2px solid var(--kk-secondary-soft); padding-left: 8px; margin-bottom: 4px; }
.kk-crow-body .b { display: block; font-size: 14px; color: var(--kk-text); }
.kk-crow-body .meta { display: block; font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-faint); margin-top: 4px; }
.kk-crow-state { flex: 0 0 auto; }
.kc-badge { font-family: var(--kk-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.kc-badge.open { color: var(--kk-ink, #12181f); background: var(--kk-secondary-soft); }
.kc-badge.resolved { color: #3a5a3f; background: #f0f6f1; }

/* ── page history + diff (deck, spec 24-C re-skin) ───────────────────────── */
.kk-hist-sub { font-family: var(--kk-font-mono); font-size: 11.5px; color: var(--kk-faint); margin-top: 4px; }
.kk-hist-sub .mono { color: var(--kk-text-soft); }
.kk-hrow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.kk-hrow + .kk-hrow { border-top: 1px solid var(--kk-line); }
.kk-hrow .sha { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-faint); min-width: 56px; padding-top: 2px; }
.kk-hrow .main { flex: 1; min-width: 0; }
.kk-hrow .main .t { font-size: 14px; color: var(--kk-ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kk-hrow .main .m { font-size: 12px; color: var(--kk-text-soft); margin-top: 2px; }
.kk-hrow .acts { display: flex; gap: 6px; flex-shrink: 0; }
.kk-diff-card { padding: 0; overflow: hidden; }
.kk-diff { width: 100%; border-collapse: collapse; font-family: var(--kk-font-mono); font-size: 12.5px; }
.kk-diff td { padding: 1px 8px; white-space: pre-wrap; word-break: break-word; vertical-align: top; }
.kk-diff td.ln { width: 38px; text-align: right; color: var(--kk-faint); user-select: none; }
.kk-diff td.mk { width: 14px; text-align: center; color: var(--kk-text-soft); user-select: none; }
.kk-diff td.tx { width: 100%; color: var(--kk-text); }
.kk-diff tr.dl-add { background: #f0f6f1; } .kk-diff tr.dl-add td.mk { color: #3a5a3f; }
.kk-diff tr.dl-del { background: #fbf0ef; } .kk-diff tr.dl-del td.mk { color: var(--kk-accent, #9b2c2c); }

/* Dashboard mobile (#21). Desktop keeps the segmented buttons; mobile swaps to a
   simple <select>, and the Compact table scrolls left-right instead of squishing. */
.kk-vselect { display: none; }
@media (max-width: 600px) {
  .kk-vtoggle button { display: none; }
  .kk-vselect { display: block; padding: 7px 10px; border: 1px solid var(--kk-border);
    border-radius: var(--kk-r-md); background: var(--kk-card); color: var(--kk-ink);
    font: inherit; font-size: 13px; }
  .kk-compact .kk-compact-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kk-compact .kk-crow { min-width: 560px; }
}

/* Analytics — Insights hub master-detail explorer (spec 45). */
.kk-analytics { display: grid; grid-template-columns: 230px 1fr; gap: var(--kk-s-4); align-items: start; }
.kk-an-tree { background: var(--kk-card); border: 1px solid var(--kk-line); border-radius: var(--kk-r-lg); padding: var(--kk-s-3); position: sticky; top: var(--kk-s-4); }
.kk-an-tree-head { font-family: var(--kk-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kk-text-soft); padding: 4px 8px 8px; }
.kk-an-node { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: var(--kk-r-md); color: var(--kk-ink); text-decoration: none; font-size: 13px; }
.kk-an-node:hover { background: var(--kk-fill-soft); }
.kk-an-node.is-active { background: var(--kk-fill); font-weight: 600; }
.kk-an-org { margin-top: 6px; font-weight: 600; }
.kk-an-folder { padding-left: 22px; color: var(--kk-text-soft); font-size: 12.5px; }
.kk-an-folder svg { color: var(--kk-current-accent, var(--kk-orientation)); }
.kk-an-detail { min-width: 0; }
.kk-an-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--kk-s-4); }
.kk-an-crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; }
.kk-an-crumbs a { color: var(--kk-ink); text-decoration: none; }
.kk-an-crumbs .sep { color: var(--kk-text-soft); }
.kk-an-crumbs .cur { font-weight: 600; color: var(--kk-ink); }
.kk-an-range { display: inline-flex; gap: 2px; background: var(--kk-fill); border-radius: var(--kk-r-md); padding: 3px; }
.kk-an-range a { padding: 5px 11px; border-radius: var(--kk-r-sm); font-size: 12px; color: var(--kk-text-soft); text-decoration: none; }
.kk-an-range a.is-active { background: var(--kk-card); color: var(--kk-ink); font-weight: 600; box-shadow: var(--kk-shadow-sm); }
.kk-an-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--kk-s-3); margin-bottom: var(--kk-s-4); }
.kk-an-kpi { background: var(--kk-card); border: 1px solid var(--kk-line); border-radius: var(--kk-r-lg); padding: 13px 14px; }
.kk-an-kpi .v { font-family: var(--kk-font-serif, Georgia, serif); font-size: 24px; line-height: 1; color: var(--kk-ink); }
.kk-an-kpi .l { font-size: 11.5px; color: var(--kk-text-soft); margin-top: 5px; }
.kk-an-kpi.is-live .v { color: var(--kk-public); }
.kk-an-card { padding: var(--kk-s-4); margin-bottom: var(--kk-s-4); }
.kk-an-card-head { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--kk-text-soft); margin-bottom: 10px; }
.kk-an-trend { color: var(--kk-orientation); }
.kk-an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kk-s-4); }
.kk-an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kk-an-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--kk-text-soft); padding: 4px 6px; }
.kk-an-table td { padding: 7px 6px; border-top: 1px solid var(--kk-line); }
.kk-an-table td.num { text-align: right; font-family: var(--kk-font-mono); color: var(--kk-text-soft); }
.kk-an-table a { color: var(--kk-ink); text-decoration: none; font-weight: 500; }
.kk-an-table a:hover { color: var(--kk-ink); }
.kk-an-funnel-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.kk-an-funnel-row .lbl { width: 74px; color: var(--kk-text-soft); flex: none; }
.kk-an-funnel-row .bar { flex: 1; height: 12px; background: var(--kk-fill); border-radius: 99px; overflow: hidden; }
.kk-an-funnel-row .bar span { display: block; height: 100%; background: var(--kk-secondary); border-radius: 99px; }
.kk-an-funnel-row .num { width: 44px; text-align: right; font-family: var(--kk-font-mono); color: var(--kk-ink); flex: none; }
.kk-an-src { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--kk-line); text-transform: capitalize; }
.kk-an-src .num { font-family: var(--kk-font-mono); color: var(--kk-text-soft); }
@media (max-width: 800px) {
  .kk-analytics { grid-template-columns: 1fr; }
  .kk-an-tree { position: static; }
  .kk-an-kpis { grid-template-columns: repeat(3, 1fr); }
  .kk-an-grid { grid-template-columns: 1fr; }
}

.kk-an-bar-right { display: inline-flex; align-items: center; gap: 10px; }
.kk-an-csv { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); color: var(--kk-text-soft); text-decoration: none; font-size: 12px; font-weight: 600; }
.kk-an-csv:hover { color: var(--kk-ink); border-color: var(--kk-secondary); }

/* ============================================================================
   Lite deck chrome (spec 33 finish) — deck --kk-* utility pages WITHOUT the
   browsing sidebar: settings / profile / publish / orders / exports. Retires
   the warm-paper .kapp shell for these. Rendered inside body.kkapp (deck tokens).
   ============================================================================ */
.kk-lite { min-height: 100dvh; display: flex; flex-direction: column; background: var(--kk-wash); }
.kk-lite-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--kk-line); background: var(--kk-card); position: sticky; top: 0; z-index: 5; }
.kk-lite-brand { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--kk-font-ui); color: var(--kk-ink); }
.kk-lite-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--kk-ink); color: var(--kk-bg);
  display: grid; place-items: center; font: 700 12px var(--kk-font-display); }
.kk-lite-actions { display: flex; align-items: center; gap: 6px; }
.kk-lite-ibtn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--kk-r-sm);
  border: 1px solid transparent; background: transparent; color: var(--kk-text-soft); cursor: pointer; }
.kk-lite-ibtn:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-lite-back { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--kk-font-ui);
  color: var(--kk-text-soft); padding: 6px 10px; border-radius: var(--kk-r-sm); }
.kk-lite-back:hover { color: var(--kk-ink); background: var(--kk-fill); }
.kk-lite-main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 26px 20px 72px;
  display: flex; flex-direction: column; gap: 16px; }

/* headline + subline */
.kk-lite-head h1, .kk-lp-head h1 { font: 400 27px/1.15 var(--kk-font-display); color: var(--kk-ink); margin: 0; text-wrap: balance; }
.kk-lite-head .sub, .kk-lp-head .sub { color: var(--kk-text-soft); font-size: 13.5px; margin-top: 3px; }

/* cards + rows */
.kk-lp-card { background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: var(--kk-r-md);
  padding: 16px 18px; box-shadow: var(--kk-shadow-sm); }
.kk-lp-card > h2, .kk-lp-card > h3 { margin: 0 0 3px; font: 600 14px var(--kk-font-ui); color: var(--kk-ink); letter-spacing: .01em; }
.kk-lp-card > .psub { margin: 0 0 12px; color: var(--kk-text-soft); font-size: 12.5px; }
.kk-lp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--kk-line); }
.kk-lp-row:first-of-type { border-top: 0; }
.kk-lp-row .l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kk-lp-row .title { font-weight: 500; color: var(--kk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-lp-mini { font-size: 11.5px; color: var(--kk-faint); }

/* badges */
.kk-lp-badge { font: 600 10.5px var(--kk-font-mono); letter-spacing: .04em; border-radius: var(--kk-r-pill); padding: 2px 8px; }
.kk-lp-badge.green { color: var(--kk-outcome); background: var(--kk-green-soft, rgba(47,179,107,.12)); }
.kk-lp-badge.gray  { color: var(--kk-text-soft); background: var(--kk-fill); }
.kk-lp-badge.gold  { color: var(--kk-ink); background: var(--kk-secondary-soft); }

/* buttons */
.kk-lp-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--kk-font-ui);
  border-radius: var(--kk-r-sm); padding: 8px 14px; cursor: pointer; border: 1px solid var(--kk-border);
  background: var(--kk-card); color: var(--kk-text); text-decoration: none; }
.kk-lp-btn:hover { border-color: var(--kk-secondary); }
.kk-lp-btn.gold { background: var(--kk-primary); border-color: var(--kk-primary); color: var(--kk-on-primary); }
.kk-lp-btn.gold:hover { background: var(--kk-ink); }
.kk-lp-btn.sm { font-size: 12px; padding: 6px 11px; }
.kk-lp-btn.ghost { background: transparent; }

/* token / key readout */
.kk-lp-tok { font: 12.5px var(--kk-font-mono); background: var(--kk-fill); border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-sm); padding: 10px 12px; color: var(--kk-text-soft); word-break: break-all; }
/* A card's last child used to sit flush against whatever preceded it: button_to
   emits a bare <form> with no margin, so the token box and its button touched. */
.kk-lp-tok + form, .kk-lp-tok + .kk-lp-btn { margin-top: 12px; }
.kk-lp-card > form { margin: 0; }
.kk-lp-card > * + form, .kk-lp-card > * + .kk-lp-btn { margin-top: 12px; }
.kk-lp-card code { font: 12px var(--kk-font-mono); background: var(--kk-fill); border-radius: 4px; padding: 1px 5px; color: var(--kk-ink); }

/* form field, segmented control, switch, avatar */
.kk-lp-field { display: flex; flex-direction: column; gap: 5px; }
.kk-lp-field label { font: 600 11.5px var(--kk-font-ui); color: var(--kk-text-soft); }
.kk-lp-input { border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); padding: 9px 11px;
  font: 14px var(--kk-font-ui); color: var(--kk-text); background: var(--kk-card); }
.kk-lp-input:focus-visible { outline: 2px solid var(--kk-secondary); outline-offset: 1px; }
.kk-lp-seg { display: inline-flex; border: 1px solid var(--kk-border); border-radius: var(--kk-r-pill); padding: 2px; background: var(--kk-card); }
.kk-lp-seg span { font: 600 11.5px var(--kk-font-ui); padding: 5px 12px; border-radius: var(--kk-r-pill); color: var(--kk-text-soft); }
.kk-lp-seg span.on { background: var(--kk-primary); color: var(--kk-on-primary); }
.kk-lp-switch { width: 38px; height: 22px; border-radius: var(--kk-r-pill); background: var(--kk-secondary); position: relative; flex: none; border: 0; cursor: pointer; }
.kk-lp-switch::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; right: 3px; }
.kk-lp-switch.off { background: var(--kk-fill); border: 1px solid var(--kk-border); }
.kk-lp-switch.off::after { right: auto; left: 3px; background: var(--kk-muted); }
.kk-lp-av { width: 40px; height: 40px; border-radius: 50%; background: var(--kk-primary); color: var(--kk-on-primary);
  display: grid; place-items: center; font: 700 15px var(--kk-font-display); flex: none; }

/* disclosure (details) inside a lite card */
.kk-lp-disc { margin-top: 12px; }
.kk-lp-card > details.kk-lp-disc { margin-top: 0; }
.kk-lp-disc > summary { cursor: pointer; list-style: none; font: 600 12.5px var(--kk-font-ui); color: var(--kk-ink); padding-top: 12px; border-top: 1px solid var(--kk-line); }
.kk-lp-card.kk-lp-disc > summary { border-top: 0; color: var(--kk-ink); }
.kk-lp-disc > summary::-webkit-details-marker { display: none; }
.kk-lp-disc-body { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }

/* Settings control centre (spec 88): phone-first swipeable tabs, then a left
   rail beside one shared content container on desktop. */
.kk-main-inner:has(> .kk-settings-shell) { max-width: none; padding: 0; }
.kk-settings-shell { min-width: 0; }
.kk-settings-tabs {
  display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-inline: contain;
  scrollbar-width: none; padding: 4px 6px; background: transparent;
  border-bottom: 1px solid var(--kk-line);
}
.kk-settings-tabs::-webkit-scrollbar { display: none; }
.kk-settings-tab {
  min-height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center;
  padding: 0 12px; border-radius: var(--kk-r-sm); color: var(--kk-text-soft);
  font: 600 12px var(--kk-font-ui);
}
.kk-settings-tab:hover { background: var(--kk-fill-soft); color: var(--kk-ink); }
.kk-settings-tab.is-active { background: var(--kk-fill); color: var(--kk-ink); }
.kk-settings-content { width: 100%; max-width: 760px; margin: 0 auto; padding: 12px 10px 72px; }
.kk-settings-panel { display: grid; gap: 10px; }
.kk-settings-intro { margin: 0 0 2px; color: var(--kk-text-soft); font-size: 12.5px; line-height: 1.45; }
.kk-settings-panel > .kk-lp-card { padding: 12px 14px; box-shadow: none; }
.kk-settings-panel .kk-stat-grid { gap: 8px; margin-bottom: 12px; }
.kk-settings-panel .kk-stat { padding: 10px 12px; }
.kk-settings-panel .kk-stat .v { font-size: 22px; }
.kk-settings-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kk-settings-form .kk-lp-input { flex: 1 1 220px; min-width: 0; font-size: 16px; }
.kk-settings-error, .kk-settings-notice { padding: 12px 14px; border: 1px solid var(--kk-blocker); border-radius: var(--kk-r-sm); background: var(--kk-card); color: var(--kk-text); }
.kk-settings-notice { border-color: var(--kk-outcome); }
.kk-theme-choices { display: inline-flex; gap: 4px; }
.kk-theme-choices .is-active { background: var(--kk-primary); color: var(--kk-on-primary); border-color: var(--kk-primary); }
.kk-discover-suite { padding: 0; }
.kk-discover-suite > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; cursor: pointer; list-style: none; }
.kk-discover-suite > summary::-webkit-details-marker { display: none; }
.kk-discover-suite > .psub, .kk-discover-suite > ul { margin: 0; padding: 0 16px 14px; }
.kk-discover-suite li { margin: 6px 0; color: var(--kk-text-soft); font-size: 13px; }

@media (min-width: 900px) {
  .kk-settings-shell { display: grid; grid-template-columns: 140px minmax(0, 760px); justify-content: center; gap: 12px; padding: 16px 20px 72px; }
  .kk-settings-tabs { position: sticky; top: 64px; align-self: start; flex-direction: column; overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .kk-settings-tab { min-height: 38px; padding: 0 10px; }
  .kk-settings-content { max-width: none; margin: 0; padding: 0; }
}

/* ============================================================================
   Mobile fixes (spec 33 finish · house-style Mobile principles). Phones ≤560px:
   bars wrap instead of overflowing, touch targets ≥44px, wide tables scroll.
   ============================================================================ */

/* Global command palette · Kuickr v2 / Winter (spec 30). */
.kkapp .kpalette {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh var(--kk-s-4) var(--kk-s-4);
  background: color-mix(in srgb, var(--kk-ink) 38%, transparent);
  backdrop-filter: blur(6px);
}
.kkapp .kpalette[hidden] { display: none; }
.kkapp .kpalette-box {
  width: min(720px, 100%);
  max-height: min(76vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--kk-card);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-lg);
  box-shadow: var(--kk-shadow-lg);
}
.kkapp .kpalette-query {
  display: flex;
  align-items: center;
  gap: var(--kk-s-3);
  padding: 0 var(--kk-s-4);
  background: var(--kk-card);
  border-bottom: 1px solid var(--kk-line);
}
.kkapp .kpalette-query > svg { color: var(--kk-text-soft); flex: none; }
.kkapp .kpalette-query kbd {
  padding: 3px 7px;
  color: var(--kk-text-soft);
  background: var(--kk-fill);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-sm);
  font: 600 10px var(--kk-font-mono);
}
.kkapp .kpalette-close { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: none; border: 0; border-radius: 7px; background: transparent; color: var(--kk-text-soft); cursor: pointer; }
.kkapp .kpalette-close:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kkapp .kpalette-input {
  width: 100%;
  min-height: 58px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--kk-ink);
  font: 500 16px/1.4 var(--kk-font-ui);
}
.kkapp .kpalette-input::placeholder { color: var(--kk-text-soft); }
.kkapp .kpalette-status {
  min-height: 0;
  padding: 0 var(--kk-s-4);
  color: var(--kk-text-soft);
  font: 500 11px var(--kk-font-ui);
}
.kkapp .kpalette-status:not(:empty) { padding-block: 6px; border-bottom: 1px solid var(--kk-line); }
.kkapp .kpalette.is-loading .kpalette-status { color: var(--kk-text); }
.kkapp [data-command-palette-target="results"] { min-height: 0; overflow: hidden; }
.kkapp .kpalette-list {
  list-style: none;
  margin: 0;
  padding: var(--kk-s-2);
  max-height: calc(min(76vh, 760px) - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.kkapp .kp-section {
  padding: 12px 10px 5px;
  color: var(--kk-text-soft);
  font: 700 10px/1 var(--kk-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kkapp .kp-item { margin: 2px 0; }
.kkapp .kp-item > a,
.kkapp .kp-item > button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kk-s-3);
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: var(--kk-r-md);
  background: transparent;
  color: var(--kk-text);
  text-align: left;
  cursor: pointer;
}
.kkapp .kp-item:is(:hover, :focus-within, .is-active) > :is(a, button) {
  background: var(--kk-fill);
  border-color: var(--kk-secondary);
  outline: none;
}
.kkapp .kp-item.is-context > :is(a, button) { box-shadow: inset 3px 0 0 var(--kk-secondary); }
.kkapp .kp-kind {
  justify-self: start;
  padding: 3px 7px;
  color: var(--kk-text-soft);
  background: var(--kk-fill-soft);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-pill);
  font: 700 9px var(--kk-font-mono);
  text-transform: uppercase;
}
.kkapp .kp-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.kkapp .kp-label { overflow: hidden; color: var(--kk-ink); font: 600 14px var(--kk-font-ui); text-overflow: ellipsis; white-space: nowrap; }
.kkapp .kp-breadcrumb,
.kkapp .kp-description,
.kkapp .kp-snippet,
.kkapp .kp-metadata { overflow: hidden; color: var(--kk-text-soft); font: 11.5px/1.35 var(--kk-font-ui); text-overflow: ellipsis; white-space: nowrap; }
.kkapp .kp-snippet { color: var(--kk-text); }
.kkapp .kp-action { color: var(--kk-text-soft); font: 600 11px var(--kk-font-ui); white-space: nowrap; }
.kkapp .kp-mark { padding: 0 1px; background: var(--kk-secondary-soft); color: var(--kk-ink); border-radius: 2px; }
.kkapp .kpalette-empty { padding: 28px 18px; color: var(--kk-text-soft); font-size: 13px; text-align: center; }

@media (max-width: 560px) {
  .kkapp .kpalette { padding: 0; align-items: stretch; }
  .kkapp .kpalette-box { width: 100%; max-height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; }
  .kkapp .kpalette-query { position: sticky; top: 0; z-index: 1; min-height: 64px; }
  .kkapp .kpalette-list { max-height: calc(100dvh - 64px); padding: var(--kk-s-2); }
  .kkapp .kp-item > a,
  .kkapp .kp-item > button { min-height: 64px; grid-template-columns: 48px minmax(0, 1fr); }
  .kkapp .kp-action { display: none; }
  /* One calm reader row: short breadcrumb + active view + theme/search/overflow. */
  .kk-deck-topbar { height: 56px; min-height: 56px; flex-wrap: nowrap; gap: 6px; padding: 6px 8px; }
  /* Calm one-line header: collapse the breadcrumb to just the current page,
     truncated. Ancestors stay reachable via the drawer nav + back-to-dashboard. */
  .kk-deck-topbar .kk-crumb { font-size: 14px; }
  .kk-deck-topbar .kk-crumb > a,
  .kk-deck-topbar .kk-crumb > .sp,
  .kk-deck-topbar .kk-crumb > .sep { display: none; }
  .kk-deck-topbar .kk-crumb > .cur { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--kk-ink); }
  .kk-deck-actions { flex-wrap: nowrap; gap: 4px; }
  .kk-deck-vtoggle { padding: 0; background: transparent; }
  .kk-deck-vtoggle a:not(.is-active) { display: none; }
  .kk-deck-vtoggle a.is-active { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 7px; }
  .kk-deck-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .kk-reader-overflow > summary { width: 44px; height: 44px; }
  /* #7 ≥44px touch targets on the primary mobile controls */
  .kk-mtop .kk-burger { width: 44px; height: 44px; }
  .kk-deck-vtoggle a { min-height: 44px; display: inline-flex; align-items: center; }
  .kk-deck-btn { min-height: 44px; }
  .kk-rp-tab, .kk-rp-collapse { min-width: 44px; min-height: 44px; }
  .kk-readwrap { padding-bottom: 96px; }
  .kk-rpanel {
    position: fixed;
    inset: auto 0 0;
    z-index: 210;
    width: 100%;
    max-height: min(78dvh, 680px);
    margin: 0;
    padding: 0 12px env(safe-area-inset-bottom);
    overflow: hidden;
    background: var(--kk-bg);
    border: 1px solid var(--kk-border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, .2);
  }
  .kk-rpanel .kk-rp-rail { min-height: 56px; padding: 6px 0; }
  .kk-rpanel:not(.is-collapsed) .kk-rp-rail { border-bottom: 1px solid var(--kk-line); }
  .kk-rpanel:not(.is-collapsed) { animation: kk-pin-sheet-in 180ms var(--kk-ease-settle); }
  .kk-rpanel:not(.is-collapsed) .kk-rp-body { display: block; max-height: calc(min(78dvh, 680px) - 56px); overflow-y: auto; padding: 14px 2px 22px; }
  /* fullbar buttons → 44px TALL tap targets; width stays content-sized so ~7
     controls fit one full-width row instead of wrapping (forcing 44px WIDE
     overflowed the strip into two rows). space-around gives the tap spacing. */
  .kk-fb-btn, .kk-fb-nav { min-height: 44px; justify-content: center; }
  /* reader-nav search: 16px input so iOS doesn't zoom the page on focus */
  .kk-rnav-search input { font-size: 16px; }
  /* #5/#6 analytics: 2-up KPI tiles + a data table that scrolls within itself */
  .kk-an-kpis { grid-template-columns: repeat(2, 1fr); }
  .kk-an-table { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@keyframes kk-pin-sheet-in {
  from { opacity: .7; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .kk-rpanel:not(.is-collapsed) { animation: none; }
}

/* spec 67 — tracked-link owner workspace, scoped to existing kk-shell chrome. */
.kkapp .tracked-links-toolbar,
.kkapp .tracked-links-filters,
.kkapp .tracked-link-heading,
.kkapp .tracked-link-url,
.kkapp .tracked-link-form-actions {
  display: flex;
  align-items: center;
  gap: var(--kk-s-3);
}
.kkapp .tracked-links-toolbar { justify-content: space-between; margin-bottom: var(--kk-s-4); }
.kkapp .tracked-links-filters { flex: 1; flex-wrap: wrap; }
.kkapp .tracked-links-filters label { flex: 1 1 240px; }
.kkapp .tracked-links-filters input,
.kkapp .tracked-links-filters select,
.kkapp .tracked-link-form input,
.kkapp .tracked-link-form select,
.kkapp .tracked-link-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--kk-ink);
  background: var(--kk-card);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-sm);
  font: 13px var(--kk-font-ui);
}
.kkapp .tracked-links-filters select {
  width: auto;
  min-width: 138px;
  padding-right: 30px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.kkapp .tracked-links-filters input:focus,
.kkapp .tracked-links-filters select:focus { outline: none; border-color: var(--kk-accent); box-shadow: 0 0 0 3px var(--kk-accent-fill); }

/* Compact safety note (spec 67) — replaces the old paragraph wall. */
.kkapp .tracked-links-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--kk-s-4);
  padding: 10px 13px;
  color: var(--kk-text-soft);
  background: var(--kk-fill);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-md);
  font-size: 12.5px;
  line-height: 1.45;
}
.kkapp .tracked-links-note .ic { flex-shrink: 0; width: 15px; height: 15px; color: var(--kk-outcome); }
.kkapp .tracked-links-note span { flex: 1; min-width: 0; }
.kkapp .tracked-links-note-more { flex-shrink: 0; }
.kkapp .tracked-links-note-more summary { cursor: pointer; color: var(--kk-accent); font: 600 11px var(--kk-font-mono); list-style: none; }
.kkapp .tracked-links-note-more summary::-webkit-details-marker { display: none; }
.kkapp .tracked-links-note-more[open] { flex-basis: 100%; margin-top: 4px; }
.kkapp .tracked-links-note-more p { margin: 6px 0 0; font-size: 12px; color: var(--kk-text-soft); }
.kkapp .tracked-links-list { display: grid; gap: var(--kk-s-3); }
.kkapp .tracked-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--kk-s-5);
  padding: var(--kk-s-4);
}
.kkapp .tracked-link-heading { justify-content: space-between; align-items: flex-start; }
.kkapp .tracked-link-heading h2 { margin: 0; color: var(--kk-ink); font: 650 16px var(--kk-font-ui); }
.kkapp .tracked-link-management {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  color: var(--kk-text-soft);
  font: 11px var(--kk-font-mono);
}
.kkapp .tracked-link-management > span:not(:last-child)::after { margin-left: 6px; content: "·"; }
.kkapp .tracked-link-status { font-weight: 700; }
.kkapp .tracked-link-status.is-active { color: var(--kk-outcome); }
.kkapp .tracked-link-status.is-expired,
.kkapp .tracked-link-status.is-archived { color: var(--kk-text-soft); }
.kkapp .tracked-link-url { min-width: 0; margin-top: var(--kk-s-3); }
.kkapp .tracked-link-url code {
  min-width: 0;
  overflow: hidden;
  color: var(--kk-accent);
  font: 12px var(--kk-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kkapp .tracked-link-destination {
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--kk-text-soft);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kkapp .tracked-link-metrics {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  gap: 2px 8px;
  min-width: 150px;
  padding-left: var(--kk-s-4);
  border-left: 1px solid var(--kk-line);
  color: var(--kk-text-soft);
  font-size: 11px;
}
.kkapp .tracked-link-metrics strong { color: var(--kk-ink); font: 700 15px var(--kk-font-mono); }
.kkapp .tracked-link-metrics .kk-btn { grid-column: 1 / -1; margin-top: 7px; }
.kkapp .tracked-links-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 40px 28px;
  text-align: center;
}
.kkapp .tracked-links-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  color: var(--kk-text-soft);
  background: var(--kk-fill);
  border-radius: var(--kk-r-md);
}
.kkapp .tracked-links-empty-title { margin: 0; color: var(--kk-ink); font: 650 15px var(--kk-font-ui); }
.kkapp .tracked-links-empty-sub { margin: 0; max-width: 42ch; color: var(--kk-text-soft); font-size: 13px; line-height: 1.5; }
.kkapp .tracked-links-empty .kk-btn { margin-top: 12px; }
.kkapp .tracked-link-editor { max-width: 920px; }
.kkapp .tracked-link-form { padding: var(--kk-s-5); }
.kkapp .tracked-link-form-grid,
.kkapp .tracked-link-campaign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kk-s-4);
}
.kkapp .tracked-link-form .kk-field { display: grid; align-content: start; gap: 6px; }
.kkapp .tracked-link-form .kk-field-label {
  color: var(--kk-text-soft);
  font: 700 11px var(--kk-font-mono);
  text-transform: uppercase;
}
.kkapp .tracked-link-form .tracked-link-wide { grid-column: 1 / -1; }
.kkapp .tracked-link-prefix-row { display: grid; grid-template-columns: auto minmax(120px, 1fr); align-items: center; }
.kkapp .tracked-link-prefix-row code {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 0 0 10px;
  color: var(--kk-text-soft);
  background: var(--kk-fill);
  border: 1px solid var(--kk-border);
  border-right: 0;
  border-radius: var(--kk-r-sm) 0 0 var(--kk-r-sm);
  font: 12px var(--kk-font-mono);
}
.kkapp .tracked-link-prefix-row input { border-radius: 0 var(--kk-r-sm) var(--kk-r-sm) 0; }
.kkapp .tracked-link-message-fields[hidden] { display: none; }
.kkapp .tracked-link-check { display: flex; align-items: center; gap: 8px; margin-top: var(--kk-s-3); color: var(--kk-text); font-size: 13px; }
.kkapp .tracked-link-check input { width: auto; min-height: auto; }
.kkapp .tracked-link-advanced { margin-top: var(--kk-s-5); padding-top: var(--kk-s-4); border-top: 1px solid var(--kk-line); }
.kkapp .tracked-link-advanced summary { margin-bottom: var(--kk-s-3); color: var(--kk-ink); cursor: pointer; font-weight: 650; }
.kkapp .tracked-link-campaign-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kkapp .tracked-link-form-actions { justify-content: flex-end; margin-top: var(--kk-s-5); }
.kkapp .tracked-link-archive { width: 100%; border: 0; text-align: left; cursor: pointer; }

@media (max-width: 720px) {
  .kkapp .tracked-links-toolbar { align-items: stretch; flex-direction: column; }
  .kkapp .tracked-links-filters { align-items: stretch; flex-direction: column; }
  .kkapp .tracked-links-filters label,
  .kkapp .tracked-links-filters select { width: 100%; flex-basis: auto; }
  .kkapp .tracked-link-row { grid-template-columns: 1fr; }
  .kkapp .tracked-link-metrics {
    grid-template-columns: auto 1fr auto 1fr;
    padding: var(--kk-s-3) 0 0;
    border-top: 1px solid var(--kk-line);
    border-left: 0;
  }
  .kkapp .tracked-link-metrics .kk-btn { grid-column: 1 / -1; }
  .kkapp .tracked-link-form-grid,
  .kkapp .tracked-link-campaign-grid { grid-template-columns: 1fr; }
  .kkapp .tracked-link-form .tracked-link-wide { grid-column: auto; }
  .kkapp .tracked-link-prefix-row { grid-template-columns: 1fr; }
  .kkapp .tracked-link-prefix-row code {
    min-height: 36px;
    border-right: 1px solid var(--kk-border);
    border-bottom: 0;
    border-radius: var(--kk-r-sm) var(--kk-r-sm) 0 0;
  }
  .kkapp .tracked-link-prefix-row input { border-radius: 0 0 var(--kk-r-sm) var(--kk-r-sm); }
}

/* ── Board Addon (slot 71) ──────────────────────────────────────────────────
   The canvas itself is Svelte Flow (app/javascript/board), which brings its own
   stylesheet and owns pan/zoom/selection. What stays here is only the chrome
   AROUND it — the toolbar row and the empty states — plus the height the canvas
   mounts into. Mobile-first: the canvas contains its own overflow so the PAGE
   never scrolls sideways, and the toolbar sits above it, never over it. */
.kkapp .kk-board-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kk-s-3); margin-bottom: var(--kk-s-3); }
.kkapp .kk-board-pick { display: flex; align-items: center; gap: var(--kk-s-2); }
.kkapp .kk-board-pick-l { font-size: 12px; color: var(--kk-text-soft); }
.kkapp .kk-board-count { font-size: 12px; color: var(--kk-text-soft); margin-left: auto; }
.kkapp .kk-board {
  height: min(70vh, 560px);
  max-width: 100%;
  overflow: hidden;
  background: var(--kk-surface);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-md, 10px);
}
/* Wraps, and its selects may shrink. The link form is two selects plus an arrow
   plus a button: on one line that is 599px, which at a 375px viewport scrolled
   the PAGE sideways — the one thing the mobile rule forbids outright. */
.kkapp .kk-board-add { display: flex; align-items: center; gap: var(--kk-s-2); flex-wrap: wrap; max-width: 100%; }
.kkapp .kk-board-add select { min-width: 0; max-width: 100%; flex: 1 1 8rem; }
.kkapp .kk-board-add select,
.kkapp .kk-board-add button,
.kkapp .kk-board-frame-input { min-height: 44px; font-size: 16px; }
.kkapp .kk-board-frame-input { padding: 0 10px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm, 8px); background: var(--kk-bg); color: var(--kk-text); }
/* Slot 71 — the tools float OVER the canvas, in one positioned stage.
   Previously four form rows stacked above it, which pushed the canvas below the
   fold on a phone and read as a form rather than a surface. */
/* Sidebar Board switch — sits beside "+ New folder" so it is reachable without
   scrolling past the file list (founder, 2026-08-17). Matches the newfolder
   button's language rather than inventing a third. */
.kkapp .kk-boardswitch-form { margin-top: 4px; }
.kkapp .kk-boardswitch {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 0 10px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--kk-r-sm, 8px);
  background: transparent; color: var(--kk-text-soft);
  font-size: 13px; font-weight: 600; text-align: left;
}
.kkapp .kk-boardswitch:hover { background: var(--kk-line); color: var(--kk-text); }
.kkapp .kk-boardswitch.is-on { color: var(--kk-text); }
/* A dot, not a word: "on" is state, and state reads faster as a mark. */
.kkapp .kk-boardswitch.is-on::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--kk-outcome, #1f7a68);
}
.kkapp .kk-board-stage { position: relative; }
/* Expand — fills the window BELOW the topbar (founder ask, 2026-08-16). Not the
   Fullscreen API: that hides the topbar and account chrome, turning a tab into a
   mode people get lost in. This is a layout change, and Escape leaves it. */
.kkapp .kk-board-stage.is-expanded {
  position: fixed; inset: var(--kk-topbar-h) 0 0 var(--kk-board-left, 0px); z-index: 60;
  background: var(--kk-bg); padding: 0;
}
.kkapp .kk-board-stage.is-expanded .kk-board { height: 100%; border-radius: 0; border-left: 0; border-right: 0; }
body.kk-board-locked { overflow: hidden; }
.kkapp .kk-board-expand {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  min-height: 44px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--kk-border); border-radius: 999px;
  background: var(--kk-bg); color: var(--kk-text); font-size: 14px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.kkapp .kk-board-stage.is-expanded .kk-board-expand { position: fixed; top: calc(var(--kk-topbar-h) + 10px); right: 10px; }
/* z-index 60 sits BELOW the rail (80) on purpose — expanding must never cover
   the way out of the board. */

.kkapp .kk-board-tools {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 4; display: flex; gap: var(--kk-s-2); max-width: calc(100% - 20px);
  padding: 6px; border: 1px solid var(--kk-border); border-radius: 999px;
  background: var(--kk-bg); box-shadow: 0 8px 30px rgba(0,0,0,.16);
}
.kkapp .kk-tool { position: relative; }
.kkapp .kk-tool > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--kk-text); white-space: nowrap;
}
.kkapp .kk-tool > summary::-webkit-details-marker { display: none; }
.kkapp .kk-tool[open] > summary { background: var(--kk-text); color: var(--kk-bg); }
/* The body opens UPWARD: the bar sits at the bottom of the canvas, so a
   downward panel would fall off it. */
.kkapp .kk-tool-body {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: min(92vw, 420px);
  padding: 12px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-md, 12px);
  background: var(--kk-bg); box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
@media (max-width: 640px) {
  /* The minimap is a desktop affordance: on a phone it covers the very cards it
     is meant to help you find — and a card carrying an intake form is tall
     enough that the overlap is guaranteed. */
  .kkapp .kk-board .svelte-flow__minimap { display: none; }

  /* On a phone the pill would exceed the viewport, so it becomes a full-width
     bar and its panels stop trying to centre on a 44px summary. */
  .kkapp .kk-board-tools { left: 10px; right: 10px; transform: none; max-width: none; justify-content: space-between; }
  .kkapp .kk-tool > summary { padding: 0 12px; }
  .kkapp .kk-tool-body { left: 0; right: 0; transform: none; width: auto; max-width: none; }
}
.kkapp .kk-board-start { margin-top: var(--kk-s-4); }
.kkapp .kk-board-empty { padding: var(--kk-s-5); }
.kkapp .kk-board-empty-h { margin: 0 0 var(--kk-s-2); font-size: 16px; font-weight: 600; }
.kkapp .kk-board-empty p { margin: 0; color: var(--kk-text-soft); max-width: 60ch; }
@media (max-width: 640px) {
  .kkapp .kk-board { height: 60vh; }
  .kkapp .kk-board-count { margin-left: 0; width: 100%; }
}

/* The board's wall (spec 87 — "a wall to talk on the board"). Sits BESIDE the
   canvas, never over it: a floating chat panel is the game floating-bar defect
   with a different name. */
.kkapp .kk-board-wall { margin-top: var(--kk-s-4); padding: 16px 18px; }
.kkapp .kk-board-wall-h { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.kkapp .kk-board-wall-note { margin: 0 0 12px; font-size: 12px; color: var(--kk-text-soft); }
.kkapp .kk-board-wall-log {
  max-height: 200px;
  margin: 0 0 12px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.kkapp .kk-board-wall-log li { padding: 4px 0; font-size: 14px; }
.kkapp .kk-board-wall-log b { margin-right: 8px; color: var(--kk-text-soft); font-weight: 600; }
.kkapp .kk-board-wall-form { display: flex; gap: var(--kk-s-2); }
.kkapp .kk-board-wall-form input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  font-size: 16px;
  color: var(--kk-text);
  background: var(--kk-bg);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-sm, 8px);
}
.kkapp .kk-board-wall-form button { min-height: 44px; }

/* Regions: the label and its erase control. The frame body stays pointer-
   transparent so a region can never swallow a drag on the cards inside it —
   only the label strip is interactive. */
.kkapp .kk-board-frame { pointer-events: none; }
.kkapp .kk-board-frame-l,
.kkapp .kk-board-frame-xf { pointer-events: auto; }
.kkapp .kk-board-frame-xf { position: absolute; top: -12px; right: 8px; margin: 0; }
.kkapp .kk-board-frame-x {
  min-height: 44px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--kk-text-soft);
  background: var(--kk-surface);
  border: 0;
  cursor: pointer;
  opacity: .6;
}
.kkapp .kk-board-frame-x:hover,
.kkapp .kk-board-frame-x:focus-visible { opacity: 1; }
.kkapp .kk-board-frame-input { min-height: 44px; font-size: 16px; padding: 0 10px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm, 8px); background: var(--kk-bg); color: var(--kk-text); }

/* "An agent wrote this" — one mark across dashboard rows/cards, Space pages and
   the Inbox. Previously only the legacy feed row carried an Agent Edited badge,
   so every other listing looked hand-written. */
.kk-agent-mark { display: inline-flex; align-items: center; margin-right: 5px; color: var(--kk-accent-text); vertical-align: -2px; }
.kk-agent-mark svg { width: 13px; height: 13px; }

/* Requests KPI — the per-kind split under the headline number, so "12 requests"
   says which intakes they came through instead of hiding forms behind orders. */
.kk-an-kpi-sub { margin-top: 3px; font: 10px var(--kk-font-mono); color: var(--kk-text-soft); letter-spacing: .02em; }

/* "Things you haven't tried" — account-derived suggestions on the dashboard.
   Each card retires itself once the thing is done, so this empties out. */
.kk-nextsteps { margin: 0 0 var(--kk-s-4); }
.kk-nextsteps-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kk-s-3); margin-bottom: var(--kk-s-2); }
.kk-nextsteps-title { display: inline-flex; align-items: center; gap: 6px; color: var(--kk-text-soft); font: 600 12px var(--kk-font-ui); }
.kk-nextsteps-toggle { border: 0; background: transparent; color: var(--kk-text-soft); font: 11px var(--kk-font-ui); cursor: pointer; padding: 6px; }
.kk-nextsteps-toggle:hover { color: var(--kk-ink); }
.kk-nextsteps.is-collapsed .kk-nextsteps-grid { display: none; }
.kk-nextsteps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--kk-s-2); }
.kk-nextstep {
  display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: 2px var(--kk-s-2);
  padding: var(--kk-s-3); border: 1px solid var(--kk-border); border-radius: var(--kk-r-md);
  background: var(--kk-card); color: var(--kk-text-soft); text-decoration: none;
}
.kk-nextstep:hover { border-color: var(--kk-secondary); }
.kk-nextstep .ic { grid-row: span 2; display: grid; place-items: start center; padding-top: 2px; color: var(--kk-accent-text); }
.kk-nextstep .tt { color: var(--kk-ink); font: 600 13.5px var(--kk-font-ui); }
.kk-nextstep .td { font-size: 12.5px; line-height: 1.5; }
@media (max-width: 600px) {
  .kk-nextsteps-grid { grid-template-columns: 1fr; }
  .kk-nextsteps-toggle { min-height: 44px; }
}

/* Discover — the product menu as a launcher. Every capability opens; the state
   ("in use" / "try it") comes from a real query against the account's own data.
   Motion is one staggered settle on arrival, and only if motion is welcome. */
.kk-discover-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kk-s-4); flex-wrap: wrap; }
.kk-discover-score { margin: 2px 0 0; font: 12px var(--kk-font-mono); color: var(--kk-text-soft); }
.kk-discover-score strong { color: var(--kk-ink); font-size: 15px; }
.kk-discover-meter {
  flex: 0 0 auto; width: 148px; height: 6px; border-radius: var(--kk-r-pill);
  background: var(--kk-fill); overflow: hidden;
}
.kk-discover-meter span { display: block; height: 100%; width: var(--pct, 0%); border-radius: inherit; background: var(--kk-secondary); }

.kk-discover-suite-card {
  margin-top: var(--kk-s-4); padding: var(--kk-s-4);
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg); background: var(--kk-card);
}
.kk-discover-suite-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kk-s-3); }
.kk-discover-suite-head h3 { margin: 0; font: 400 19px var(--kk-font-display); color: var(--kk-ink); }
.kk-discover-count { font: 11px var(--kk-font-mono); color: var(--kk-text-soft); }
.kk-discover-promise { margin: 4px 0 var(--kk-s-3); color: var(--kk-text-soft); font-size: 13.5px; }
.kk-discover-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--kk-s-2); }

.kk-discover-cap {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: start; gap: var(--kk-s-2);
  padding: var(--kk-s-3); border: 1px solid var(--kk-line); border-radius: var(--kk-r-md);
  background: var(--kk-fill-soft); color: var(--kk-text-soft); text-decoration: none;
  transition: border-color var(--kk-t-fast) var(--kk-ease-out), transform var(--kk-t-fast) var(--kk-ease-out);
}
.kk-discover-cap:hover { border-color: var(--kk-secondary); transform: translateY(-1px); }
.kk-discover-cap .mark {
  width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--kk-r-pill);
  background: var(--kk-fill); color: var(--kk-text-soft);
}
.kk-discover-cap.is-used .mark { background: var(--kk-secondary-soft); color: var(--kk-accent-text); }
.kk-discover-cap .lbl { display: block; color: var(--kk-ink); font: 600 13.5px var(--kk-font-ui); }
.kk-discover-cap .blurb { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; }
.kk-discover-cap .tag {
  font: 9px var(--kk-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--kk-text-soft); white-space: nowrap; padding-top: 3px;
}
.kk-discover-cap.is-new { background: var(--kk-card); }
.kk-discover-cap.is-new .tag { color: var(--kk-accent-text); }
/* Nothing to measure (search, export, activity) — neutral, so an always-available
   capability is never mislabelled as one you have not tried. */
.kk-discover-cap.is-open .mark { color: var(--kk-text-soft); }
.kk-discover-cap.is-open .tag { color: var(--kk-text-soft); }

@media (prefers-reduced-motion: no-preference) {
  .kk-discover-suite-card { animation: kk-discover-rise var(--kk-t-slow) var(--kk-ease-settle) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .kk-discover-cap { animation: kk-discover-rise var(--kk-t-base) var(--kk-ease-settle) both; animation-delay: calc(120ms + var(--i, 0) * 70ms + var(--j, 0) * 28ms); }
  .kk-discover-meter span { animation: kk-discover-fill var(--kk-t-slow) var(--kk-ease-settle) both; animation-delay: 120ms; }
}
@keyframes kk-discover-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kk-discover-fill { from { width: 0; } to { width: var(--pct, 0%); } }

@media (max-width: 600px) {
  .kk-discover-caps { grid-template-columns: 1fr; }
  .kk-discover-cap { min-height: 44px; }
  .kk-discover-meter { width: 100%; }
}

/* Shared — both directions on one page. */
.kk-shared { max-width: 860px; }
.kk-shared-sec { margin-top: var(--kk-s-5); }
.kk-shared-list { padding: 0; overflow: hidden; }
.kk-shared-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: var(--kk-s-3);
  padding: var(--kk-s-3) var(--kk-s-4); color: var(--kk-text-soft); text-decoration: none;
}
.kk-shared-row + .kk-shared-row { border-top: 1px solid var(--kk-line); }
.kk-shared-row:hover { background: var(--kk-fill-soft); }
.kk-shared-ic { color: var(--kk-accent-text); display: grid; place-items: center; }
.kk-shared-main { min-width: 0; }
.kk-shared-main .t { display: block; color: var(--kk-ink); font: 600 14px var(--kk-font-ui); }
.kk-shared-main .m { display: block; margin-top: 2px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-shared-role {
  font: 9px var(--kk-font-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--kk-r-xs); background: var(--kk-fill); color: var(--kk-text-soft);
}
.kk-shared-count { font: 10px var(--kk-font-mono); color: var(--kk-faint); white-space: nowrap; }
@media (max-width: 600px) {
  .kk-shared-row { grid-template-columns: 24px minmax(0, 1fr) auto; min-height: 56px; }
  .kk-shared-count { display: none; }
}

/* Type-to-narrow inside a popover whose list grows with the account. */
.kk-menu-filter {
  width: calc(100% - 12px); margin: 2px 6px 6px; min-height: 34px; padding: 0 10px;
  border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm);
  background: var(--kk-fill-soft); color: var(--kk-text); font: 13px var(--kk-font-ui);
}
.kk-menu-filter:focus { outline: 0; border-color: var(--kk-secondary); background: var(--kk-card); }
@media (max-width: 600px) { .kk-menu-filter { min-height: 44px; font-size: 16px; } }

/* Admin roster — searchable, with numbers that describe real use. */
.kk-admin-search {
  display: flex; align-items: center; gap: var(--kk-s-2); min-height: 42px;
  padding: 0 var(--kk-s-3); margin: 0 0 var(--kk-s-3);
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-md);
  background: var(--kk-card); color: var(--kk-text-soft);
}
.kk-admin-search:focus-within { border-color: var(--kk-secondary); }
.kk-admin-search input[type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--kk-text); font: 16px var(--kk-font-ui); }
.kk-admin-clear { font: 12px var(--kk-font-ui); color: var(--kk-text-soft); }
.kk-ustats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; font: 10px var(--kk-font-mono); color: var(--kk-text-soft); }
.kk-ustats b { color: var(--kk-text); font-weight: 600; font-size: 11px; }
.kk-ustats .is-live b { color: var(--kk-outcome); }
.kk-udot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.kk-udot.is-live { background: var(--kk-outcome); }
.kk-udot.is-idle { background: var(--kk-faint); }
.kk-feedhead-note { margin-left: 8px; color: var(--kk-text-soft); font: 10px var(--kk-font-mono); letter-spacing: .04em; }

/* Page settings holds page-scope and folder-scope controls in one sheet, and
   two "floating bar" rows one above the other read as the same control. The
   scope tag says which is which (founder, 2026-08-15). */
.ksettings-scope-tag {
  display: inline-block; white-space: nowrap; /* "this page" must not break in two */
  margin-left: 6px; padding: 2px 6px; border-radius: var(--kk-r-xs);
  background: var(--kk-fill); color: var(--kk-text-soft);
  font: 9px var(--kk-font-mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}
/* Tailwind's preflight makes every svg display:block, which dropped the folder
   icon onto its own line above the crumb it belongs to. */
.kk-rnav-folder .kk-folder-icon { display: inline-block; }
.ksettings-warn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 9px; border-radius: var(--kk-r-sm); background: color-mix(in srgb, var(--kk-idea) 14%, transparent); color: var(--kk-ink); font-size: 12px; }

/* ── Intake — one card per type ───────────────────────────────────────────────
   Was an inline <style> block of hard-coded light hex, which broke the page in
   dark mode and grew six type sizes. Tokens only, one scale, one button style.
   Each card answers the same three questions in the same order: what it is,
   what it gets you, what to do next. */
.kk-intake { display: grid; grid-template-columns: 1fr 264px; gap: var(--kk-s-5); align-items: start; }
.kk-intake-chips { margin-top: var(--kk-s-4); }
.kk-sub { margin-top: 4px; color: var(--kk-text-soft); font-size: 14px; }

.kk-itype {
  margin-top: var(--kk-s-3); overflow: hidden;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg); background: var(--kk-card);
}
.kk-itype-h {
  display: flex; align-items: center; gap: var(--kk-s-3);
  padding: var(--kk-s-3) var(--kk-s-4); border-bottom: 1px solid var(--kk-line);
}
.kk-itype-glyph { flex: 0 0 auto; width: 34px; height: 34px; color: var(--kk-text-soft); }
.kk-itype-glyph svg { width: 100%; height: 100%; }
.kk-itype-glyph .accent { color: var(--kk-accent-text); }
.kk-itype-h .ti { font: 400 18px var(--kk-font-display); color: var(--kk-ink); }
.kk-itype-h .meta { margin-left: auto; font: 11px var(--kk-font-mono); color: var(--kk-text-soft); }
.kk-itype .fam {
  padding: 2px 8px; border-radius: var(--kk-r-pill);
  font: 9px var(--kk-font-mono); letter-spacing: .05em; text-transform: uppercase;
}
.kk-itype .fam.sub { background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-itype .fam.rt { background: var(--kk-secondary-soft); color: var(--kk-accent-text); }

.kk-itype-body { padding: var(--kk-s-4); }
.kk-itype-promise { margin: 0; color: var(--kk-text); font-size: 14.5px; line-height: 1.55; }
.kk-itype-example { margin: 6px 0 0; color: var(--kk-text-soft); font-size: 13px; line-height: 1.55; }
.kk-itype-rows { margin-top: var(--kk-s-3); border-top: 1px solid var(--kk-line); }
.kk-itype-do { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kk-s-3); margin-top: var(--kk-s-3); }
.kk-itype-note { color: var(--kk-text-soft); font-size: 12.5px; }

.kk-igame { display: flex; align-items: center; gap: var(--kk-s-3); padding: 11px 0; border-bottom: 1px solid var(--kk-line); }
.kk-igame:last-child { border-bottom: 0; }
.kk-igame .gi { flex: 1; min-width: 0; }
.kk-igame .gn { font: 400 15px var(--kk-font-display); color: var(--kk-ink); }
.kk-igame .gm { font: 11px var(--kk-font-mono); color: var(--kk-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kk-intake-rail { position: sticky; top: var(--kk-s-3); overflow: hidden; border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg); background: var(--kk-paper); }
.kk-rail-toggle {
  width: 100%; display: flex; align-items: center; gap: var(--kk-s-2); padding: var(--kk-s-3) var(--kk-s-4);
  border: 0; background: none; cursor: pointer;
  font: 10px var(--kk-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kk-text-soft);
}
.kk-rail-toggle .rt-x { margin-left: auto; }
.kk-rail-list { display: flex; flex-direction: column; gap: var(--kk-s-2); padding: 0 var(--kk-s-3) var(--kk-s-3); }
.kk-intake-rail.is-closed .kk-rail-list { display: none; }
.kk-pub { padding: 10px 11px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); background: var(--kk-card); }
.kk-pub .pt { font: 400 14px var(--kk-font-display); color: var(--kk-ink); }
.kk-pub .pm { margin: 2px 0 8px; font: 10px var(--kk-font-mono); color: var(--kk-text-soft); }
.kk-rail-empty { margin: 0 2px; padding: 4px 2px; color: var(--kk-text-soft); font-size: 12.5px; }
.kk-rail-all { display: block; margin-top: 4px; font: 10px var(--kk-font-mono); color: var(--kk-accent-text); }

/* Tailwind's preflight makes every svg display:block, which pushed the label of
   an icon+text button onto its own line. */
.kk-itype .kk-btn svg, .kk-pub .kk-btn svg, .kk-igame .kk-btn svg { display: inline-block; width: 14px; height: 14px; }

@media (max-width: 860px) { .kk-intake { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .kk-itype-h { flex-wrap: wrap; }
  .kk-itype-h .meta { margin-left: 0; width: 100%; }
  .kk-igame { flex-wrap: wrap; }
  .kk-igame .gi { flex: 1 0 100%; }
  .kk-itype .kk-btn, .kk-pub .kk-btn, .kk-igame .kk-btn { min-height: 44px; }
}

/* A closed comment box states who closed it and what opens it, rather than
   leaving a bare "Sign in" with no reason (design-auditor lane, item 6). */
.kc-gate {
  margin: var(--kk-s-3) 0 0; padding: var(--kk-s-3) var(--kk-s-4);
  border: 1px solid var(--kk-line); border-left: 3px solid var(--kk-orientation);
  border-radius: var(--kk-r-sm); background: var(--kk-fill-soft);
  color: var(--kk-text-soft); font-size: 13.5px; line-height: 1.55;
}
.kc-gate b { color: var(--kk-ink); font-weight: 600; }
.kc-gate a { color: var(--kk-accent-text); font-weight: 600; }

/* A sticky note's page (spec 60 / slot 71 option B) — a captured thought, shown
   as one, rather than dressed up as a document. */
.kkapp .kk-note { max-width: 62ch; margin: 0 auto; padding: var(--kk-s-6) 0; }
.kkapp .kk-note-eyebrow { margin: 0 0 var(--kk-s-2); color: var(--kk-text-soft); font: 600 10px/1.6 var(--kk-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.kkapp .kk-note-body { padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--kk-idea) 45%, transparent); border-radius: var(--kk-r-md, 10px); background: color-mix(in srgb, var(--kk-idea) 14%, var(--kk-card)); color: var(--kk-ink); font-size: 16px; line-height: 1.5; }
.kkapp .kk-note-where { margin: var(--kk-s-3) 0 0; color: var(--kk-text-soft); font-size: 13px; }

/* ── MOBILE TAP TARGETS ──────────────────────────────────────────────────────
   The founder's 2026-08-09 ruling in enforceable form: phones are the default
   viewport, so anything a finger lands on is >= 44px there.

   DESKTOP DENSITY IS DELIBERATELY UNTOUCHED. A mouse does not need 44px, and
   forcing it globally wrecks the single-row workspace topbar the compaction
   pass built. So the rule lives here, at the phone breakpoint, and nowhere else.

   Everything listed was MEASURED under 44px at 375x812 on 2026-08-16 —
   .kk-btn-sm at 30px, the popover rows at ~32px — not assumed. Adding a control
   to the shell means adding it here; mobile_tap_target_contract_test reads this
   block by its marker comment and fails when a listed control goes missing.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .kkapp .kk-btn-sm,
  .kkapp .kk-pmenu-item,
  .kkapp .kk-view,
  .kkapp .kk-iact,
  .kkapp .crumb-up,
  .kkapp .kk-nav a,
  .kkapp .kk-space-lnk,
  .kkapp .kk-space-chev,
  .kkapp .kk-folder,
  .kkapp .kk-user .gear,
  .kkapp .kk-space-kind-tabs a { min-height: 44px; }

  /* The drawer IS the primary navigation on a phone — these were the worst
     misses on the surface people reach most (nav 36px, Space rows 34px, and
     the expand chevron a 17px sliver). */
  .kkapp .kk-nav a,
  .kkapp .kk-space-lnk { display: flex; align-items: center; }
  .kkapp .kk-space-chev { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }

  /* Menu rows are text, so they need the height as padding rather than a bare
     min-height — otherwise the label floats at the top of a 44px box. */
  .kkapp .kk-pmenu-item,
  .kkapp .kk-view { display: flex; align-items: center; }

  /* Square icon controls need the width too, or they stay a thin column. */
  .kkapp .kk-iact,
  .kkapp .crumb-up { min-width: 44px; justify-content: center; }
}

/* ── MOBILE TOPBAR: ICONS, AND SAY THAT IT SCROLLS ───────────────────────────
   Founder, 2026-08-16, with two phone screenshots: "i would take icons on small
   screen and scrollable on left and right".

   The row ALREADY scrolls (flex-wrap:nowrap + overflow-x:auto above). Two things
   were actually wrong at 375px:

   1. Labelled buttons ate the row. "VIEW", "Search", "New" are each ~70px of a
      375px viewport, so the page title truncated to "RapidRailsUI — Feature ..."
      and the controls queued off-screen with nothing indicating more existed.
      On a phone the icon IS the label — every one keeps its aria-label, so this
      costs nothing to a screen reader.

   2. Nothing said the row scrolls. A cut-off control looks broken; a control
      fading under an edge looks like it continues. The mask is the whole
      affordance — no arrows, no extra chrome.

   Tap targets stay 44px from the block above; this only removes text. --------- */
@media (max-width: 640px) {
  /* Icon-only. `gap: 0` so the flex gap doesn't leave a phantom space where the
     label was, which reads as a mis-centred icon. */
  .kk-workspace-topbar .kk-btn > span:not(.ic):not([class*="icon"]),
  .kk-workspace-topbar .kk-deck-btn > span:not(.ic):not([class*="icon"]) { display: none; }
  .kk-workspace-topbar .kk-btn,
  .kk-workspace-topbar .kk-deck-btn { gap: 0; padding: 0; min-width: 44px; justify-content: center; }

  /* The page title gets whatever is left rather than a fixed 220px, so a short
     title stops stealing room from the controls. */
  .kk-workspace-topbar .kk-workspace-context { max-width: 42vw; }

  /* The scroll affordance. Fades the trailing edge only while there is more to
     reach — `mask` on the scroller, so it costs no element and no JS. */
  .kk-workspace-topbar .kk-actionbar {
    padding-inline: 8px;
    scroll-padding-inline: 8px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
}