/* ============================================================================
 * 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-muted); }
.kk-nav a.is-active .ic { color: var(--kk-secondary); }
.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-muted-soft);
}
.kk-seclabel button { background: none; border: none; color: var(--kk-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.kk-seclabel button:hover { color: var(--kk-secondary); }

.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-muted-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-muted); flex-shrink: 0; }
.kk-side-foot-note { padding: var(--kk-s-2) var(--kk-s-4) 0; font-size: 11px; color: var(--kk-muted-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-secondary);
  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-muted); }
.kk-user .gear { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--kk-r-sm); color: var(--kk-muted); }
.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-muted); 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-muted);
  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-secondary); }

/* 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-muted-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-secondary); font-style: italic; }
.kkapp .khero .sub {
  max-width: 560px;
  margin: 0 auto;
  color: var(--kk-muted);
  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-secondary);
}
.kkapp .ktile .step {
  color: var(--kk-muted-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-muted); font-size: 13px; line-height: 1.5; }
.kkapp .seclabel {
  margin: 0 0 var(--kk-s-3);
  color: var(--kk-muted-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-secondary); }
@media (max-width: 760px) {
  .kkapp .khero h1 { font-size: 24px; }
  .kkapp .ktiles { grid-template-columns: 1fr; }
  .kkapp .ktile { min-height: 0; }
}

/* command palette — scoped to the deck-app shell. The old .kapp palette styles
   live in kuickr.css; dashboard now renders in .kkapp, so it needs its own
   token-matched overlay here. */
.kkapp .kpalette {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh var(--kk-s-4) var(--kk-s-4);
  background: rgba(15, 14, 12, .42);
  backdrop-filter: blur(3px);
}
.kkapp .kpalette[hidden] { display: none; }
.kkapp .kpalette-box {
  width: min(620px, 100%);
  background: var(--kk-card);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-lg);
  box-shadow: var(--kk-shadow-lg);
  overflow: hidden;
}
.kkapp .kpalette-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--kk-line);
  padding: 16px 18px;
  font: 15.5px/1.4 var(--kk-font-ui);
  background: var(--kk-card);
  color: var(--kk-text);
  outline: none;
}
.kkapp .kpalette-input::placeholder { color: var(--kk-muted-soft); }
.kkapp .kpalette-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 54vh;
  overflow: auto;
}
.kkapp .kp-section {
  padding: 11px 12px 5px;
  font: 700 10.5px/1 var(--kk-font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--kk-muted);
}
.kkapp .kp-item[hidden] { display: none; }
.kkapp .kp-item a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--kk-r-sm);
  color: var(--kk-text);
  font-size: 14px;
}
.kkapp .kp-item a:hover,
.kkapp .kp-item a:focus {
  background: var(--kk-secondary-soft);
  color: var(--kk-secondary);
  outline: none;
}
.kkapp .kpalette-empty {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--kk-muted);
}

.kk-eyebrow { font-family: var(--kk-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--kk-muted); }
.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-muted); 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-secondary); }
.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-secondary); }
.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-muted); 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-muted); 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-muted); }
.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-muted); 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-muted-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-muted);
  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-secondary); }
.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-muted);
}
.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-link); }
.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-muted); }
.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-muted); 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-muted); min-width: 30px; text-align: right; }

.kk-empty { padding: 22px 16px; text-align: center; color: var(--kk-muted); 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-secondary); }
.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-muted-soft); }
@media (max-width: 560px) {
  .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-muted); margin-bottom: var(--kk-s-5); }
.kk-crumb a:hover { color: var(--kk-secondary); }
.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-muted); 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-muted); } .kk-reader .toc a:hover { color: var(--kk-secondary); }

/* 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; }
.kk-reader .doc li { margin: .3em 0; }
.kk-reader .doc a { color: var(--kk-secondary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.kk-reader .doc a:hover { color: var(--kk-secondary-hover); }
.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); }
.kk-reader .doc table { width: 100%; 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-secondary); }

/* 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-muted); 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-link); 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-secondary-hover); }
.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-muted); 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-secondary); }
.kk-rp-dot { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: var(--kk-secondary); color: var(--kk-on-secondary); 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-muted); 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-muted); margin: 0 0 var(--kk-s-3); }
.kk-rp-empty { font-size: 13px; color: var(--kk-muted); }
.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-muted); }
.kk-rp-toc a:hover { background: var(--kk-fill); color: var(--kk-secondary); }
.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-muted); }
.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-muted); 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-muted); line-height: 1.6; }
.kk-sv-lede b { color: var(--kk-text-soft); font-weight: 600; }
.kk-sv-lede .ln { color: var(--kk-secondary); 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-muted); }
.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-muted-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-secondary); }
.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); }
}

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

/* ── command palette in the deck-app shell (.kkapp) — fixes dashboard + reader %*/
.kkapp .kpalette { position: fixed; inset: 0; z-index: 300; background: rgba(20,18,14,.42); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.kkapp .kpalette[hidden] { display: none; }
.kkapp .kpalette-box { width: 560px; max-width: calc(100% - 32px); background: var(--kk-bg); border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg); box-shadow: var(--kk-shadow-lg); overflow: hidden; }
.kkapp .kpalette-input { width: 100%; border: none; border-bottom: 1px solid var(--kk-line); padding: 15px 18px; font-size: 15.5px; font-family: var(--kk-font-ui); background: transparent; color: var(--kk-ink); outline: none; }
.kkapp .kpalette-list { list-style: none; margin: 0; padding: 6px; max-height: 54vh; overflow: auto; }
.kkapp .kp-section { font-family: var(--kk-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kk-muted-soft); padding: 10px 12px 4px; }
.kkapp .kp-item[hidden] { display: none; }
.kkapp .kp-item a { display: block; padding: 8px 12px; border-radius: var(--kk-r-sm); font-size: 14px; color: var(--kk-text); }
.kkapp .kp-item a:hover { background: var(--kk-fill); color: var(--kk-secondary); }
.kkapp .kpalette-empty { padding: 14px 18px; font-size: 13px; color: var(--kk-muted); }

/* 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 24px;
  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-muted-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-muted);
}
.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-secondary); }
.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-link); }
.kk-cvis--private { background: var(--kk-fill); color: var(--kk-muted); }
.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-muted); 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-muted);
}
.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-muted); }
.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-secondary); 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-muted); 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-muted); }
.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-muted);
  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-muted); margin: 0; }
.kk-compose-badge { font-family: var(--kk-font-mono); font-size: 11px; color: var(--kk-muted-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-muted); 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-muted); 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-ink); }
.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-muted); 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-secondary); 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-muted); 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-muted); }
.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-muted); 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-muted); 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-secondary); }
.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-muted); }
.kk-rnav-back:hover { color: var(--kk-secondary); }
.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-muted-soft); }
.kk-rnav-empty { padding: var(--kk-s-4); font-size: 13px; color: var(--kk-muted); }
.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-secondary); font-weight: 600; }
.kk-rnav .tree .dir { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--kk-r-sm); color: var(--kk-muted); 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-muted-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-secondary); 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-muted); }
.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-muted-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-secondary); 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-muted-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-muted); margin-top: 1px; }
.kk-rp-link { display: inline-block; margin-top: var(--kk-s-4); font-size: 12.5px; font-weight: 600; color: var(--kk-secondary); }

/* ── 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-muted); 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-secondary); }
.kk-deck-btn svg { width: 15px; height: 15px; }
.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-muted-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-muted-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-muted); 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-rnav .tree a .num { font-family: var(--kk-font-mono); font-size: 10px; color: var(--kk-muted-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-secondary-hover); }
.kk-rnav .tree a.active .num { color: var(--kk-secondary); }

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

.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-muted); 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 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-muted); }
.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-muted); }
.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-muted); 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-muted); 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-muted); }
.kk-share-note { font-size: 12px; color: var(--kk-muted-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-muted-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-secondary); 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-muted); 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-muted); 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-muted-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-secondary); }
@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-mode-full .kk-reader .html-embed { border: none; border-radius: 0; min-height: 100vh; }
/* 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; }
.kk-fullbar-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--kk-bg);
  padding: 7px 12px; border-radius: var(--kk-r-pill); font-size: 12.5px; text-decoration: none; opacity: .82; }
.kk-fullbar-btn:hover { opacity: 1; background: rgba(255,255,255,.12); }
.kk-fullbar-toggle { display: inline-flex; background: rgba(255,255,255,.1); border-radius: var(--kk-r-pill); padding: 2px; }
.kk-fullbar-toggle a { color: var(--kk-bg); padding: 6px 12px; border-radius: var(--kk-r-pill); font-size: 12px; text-decoration: none; opacity: .72; }
.kk-fullbar-toggle a:hover { opacity: 1; }
.kk-fullbar-toggle a.is-active { background: var(--kk-bg); color: var(--kk-ink); opacity: 1; }

/* ── 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; }
.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); }
/* 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) {
  .kk-fullbar { max-width: calc(100vw - 12px); gap: 2px; padding: 5px;
    flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  .kk-fullbar:not(.is-docked) .kk-fb-title { display: none; }
  .kk-fb-pos { min-width: 40px; padding: 0 3px; }
  .kk-fb-nav { width: 24px; height: 24px; }
  .kk-fb-btn { padding: 7px 7px; }
}
.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-muted-soft); }
.kk-sv-fact:hover { background: var(--kk-bg); color: var(--kk-secondary); }
.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 for warm-paper styling, but those --k-* tokens
   auto-dark on prefers-color-scheme while the deck shell (.kkapp) only darkens on
   an explicit toggle — so the modal went dark while the app stayed light. Pin the
   modal to the light --k-* palette unless the app is explicitly data-theme=dark.
   Scoped to .kkapp so standalone warm-paper pages keep their own theming. */
html:not([data-theme="dark"]) .kkapp #modal .kapp,
html:not([data-theme="dark"]) .kkapp .kapp.kk-embed {
  --k-bg:#FAF9F6; --k-warm:#F3F1EC; --k-card:#FFFFFF; --k-elevated:#FFFFFF;
  --k-ink:#1A1917; --k-muted:#6E6B63; --k-light:#A19D94; --k-faint:#C5C2BA;
  --k-accent:#C2402A; --k-accent-soft:#F4E4DF; --k-accent-hover:#A8351F; --k-accent-dark:#8F2C1A;
  --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:#E3E0D8; --k-border-light:#EDEBE5; --k-border-focus:#C2402A;
  --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-muted-soft); }
.kk-prow:hover .kk-pshare { display: inline-flex; }
.kk-pshare:hover { background: var(--kk-fill); color: var(--kk-secondary); }
.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-muted); user-select: none; }
.kk-spacelink > summary::-webkit-details-marker { display: none; }
.kk-spacelink > summary .ic { width: 14px; height: 14px; color: var(--kk-secondary); 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-muted-soft); }
.kk-spacelink-body .qr { flex-shrink: 0; }

/* per-page action links (Open · Share · History) — revealed on row hover */
.kk-pact { display: none; font-size: 11.5px; color: var(--kk-muted); text-decoration: none; padding: 2px 5px; border-radius: var(--kk-r-sm); }
.kk-prow:hover .kk-pact { display: inline-block; }
.kk-pact:hover { color: var(--kk-secondary); background: var(--kk-fill); }

/* ── 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-muted); 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-muted); }
.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-muted); }
.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-muted-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-muted-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-secondary); }
.kk-ulink { color: var(--kk-ink); text-decoration: none; }
.kk-ulink:hover { color: var(--kk-secondary); 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-muted); }
.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-muted); }
.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-muted); 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-muted); 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-muted); 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-secondary); 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-secondary); }
.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-muted); margin-top: 1px; }
.kk-crow-body { flex: 1; min-width: 0; }
.kk-crow-body .q { display: block; font-size: 12.5px; color: var(--kk-secondary); 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-link, #8a6a1f); 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-muted); }
.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-muted); 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-muted); 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-muted-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-muted); 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-secondary); text-decoration: none; }
.kk-an-crumbs .sep { color: var(--kk-muted-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-muted); 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-muted); 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-muted); margin-bottom: 10px; }
.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-muted-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-muted); }
.kk-an-table a { color: var(--kk-ink); text-decoration: none; font-weight: 500; }
.kk-an-table a:hover { color: var(--kk-secondary); }
.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-muted); 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-muted); }
@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-muted); text-decoration: none; font-size: 12px; font-weight: 600; }
.kk-an-csv:hover { color: var(--kk-ink); border-color: var(--kk-secondary); }