/* ============================================================================
 * 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;
  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: flex; 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 { font-size: 13px; font-weight: 600; color: var(--kk-ink); }
.kk-user .who .r { 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;
}
.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) — inline so it works at every width and keeps the
   command-palette Stimulus scope around both trigger and palette. */
.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; }
@media (max-width: 560px) { .kk-actionbar .kk-btn .lbl { 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(26px, 6vw, 38px); letter-spacing: -.01em; line-height: 1.1; 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: 10px; }
.kk-chip-save { border-style: dashed; color: var(--kk-ink); }
.kk-chip-save:hover { background: var(--kk-fill); }
.kk-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: -6px; margin-right: 2px;
  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-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-actionbar .kk-search.palette-trigger {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    padding: 0;
    justify-content: center;
    box-sizing: border-box;
  }
  .kk-actionbar .kk-search.palette-trigger span,
  .kk-actionbar .kk-search.palette-trigger kbd { display: none; }
  .kk-row .right .num { display: none; }
  .kk-row .type { min-width: 0; }
}

/* ── 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); }
}

/* ── 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; }
.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; }
.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; }
.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-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-folders { display: flex; flex-direction: column; gap: 1px; }
.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-folders { position: sticky; top: var(--kk-s-5); }
}

/* 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 { 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; }

/* 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-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; }
.kk-deck-topbar .kk-crumb { margin: 0; flex: 1; 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; }
.kk-deck-vtoggle { padding: 3px; }
.kk-deck-vtoggle a { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kk-text-soft); border-radius: var(--kk-r-sm); padding: 6px 12px; }
.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); }
.kk-deck-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--kk-text-soft); border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); padding: 7px 12px; }
.kk-deck-btn:hover { border-color: var(--kk-secondary); color: var(--kk-ink); }
.kk-deck-btn svg { width: 15px; height: 15px; }
.kk-deck-search { min-width: 44px; min-height: 44px; justify-content: center; }
.kk-reader-overflow { position: relative; }
.kk-reader-overflow > summary { list-style: none; min-width: 44px; min-height: 44px; 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); } }

/* ── 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); }
.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-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; gap: 16px; flex-wrap: wrap; margin: var(--kk-s-4) 0 var(--kk-s-5); }
.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-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; }
.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; }

/* ============================================================================
   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-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; }
  .kk-deck-topbar .kk-crumb { font-size: 11px; }
  .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; }
}