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

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

/* @tokens-only:start shell */
/* ── 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: var(--kk-fs-heading); 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); }
/* The brand-kit mark carries its own dark tile — no painted box behind it. */
.kk-logo {
  width: 30px; height: 30px; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border-radius: var(--kk-r-sm); overflow: hidden;
}
.kk-logo img, .kk-workspace-mark img, .kk-fb-fab img { display: block; width: 100%; height: 100%; }
.kk-wordmark { font-weight: 600; font-size: var(--kk-fs-title); 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: var(--kk-s-2) 10px; border-radius: var(--kk-r-sm);
  font-size: var(--kk-fs-body); font-weight: 500; color: var(--kk-text-soft);
  transition: background var(--kk-t-fast) var(--kk-ease-out);
}
.kk-nav a:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-nav a.is-active { background: var(--kk-fill); color: var(--kk-ink); font-weight: 600; }
.kk-nav a .ic { width: 17px; height: 17px; flex-shrink: 0; color: var(--kk-text-soft); }
.kk-nav a.is-active .ic { color: var(--kk-orientation); }
.kk-nav a .lbl { flex: 1; min-width: 0; }
.kk-nav a .ct { font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); color: var(--kk-faint); }

.kk-dashboard-heading { display: flex; align-items: center; min-width: 0; }
.kk-dashboard-heading > a { flex: 1; min-width: 0; }
.kk-dashboard-toggle { flex: 0 0 26px; width: 26px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--kk-text-soft); cursor: pointer; }
.kk-dashboard-toggle-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; }
.kk-dashboard-toggle:hover .kk-dashboard-toggle-icon { background: var(--kk-fill); }
.kk-dashboard-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
#dashboard-nav-links.is-collapsed { display: none; }
@media (min-width: 900px) {
  .kk-shell.is-side-collapsed .kk-dashboard-heading { flex-direction: column; }
  /* The icon rail has no room for a collapsible group: every nav icon shows,
     and the group chevron (a stray ">" under Dashboard) does not. */
  .kk-shell.is-side-collapsed .kk-dashboard-toggle { display: none; }
  .kk-shell.is-side-collapsed .kk-side-expand { display: flex; }
  .kk-shell.is-side-collapsed #dashboard-nav-links.is-collapsed { display: block; }
}

.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: var(--kk-fs-micro); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--kk-text-soft);
}
.kk-seclabel button { background: none; border: none; color: var(--kk-text-soft); cursor: pointer; font-size: var(--kk-fs-title); line-height: 1; padding: 0; }
.kk-seclabel button:hover { color: var(--kk-ink); }
.kk-space-heading-actions { display: inline-flex; align-items: center; gap: var(--kk-s-1); }
.kk-space-heading-actions a,
.kk-space-heading-actions button { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.kk-space-favorite:hover svg { color: var(--kk-orientation); }
.kk-space-favorite[aria-pressed="true"] svg { fill: currentColor; }
.kk-space-favorite { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--kk-faint); cursor: pointer; opacity: 0; display: inline-flex; align-items: center; justify-content: center; }
.kk-space-hd:hover .kk-space-favorite,
.kk-space-favorite:focus-visible,
.kk-space-favorite[aria-pressed="true"] { opacity: 1; }
.kk-space-favorite:hover { background: var(--kk-fill); }
.kk-space-filter-empty { padding: var(--kk-s-2) var(--kk-s-4); font-size: var(--kk-fs-meta); color: var(--kk-text-soft); }
.kk-space-grp[hidden], .kk-space-filter-empty[hidden] { display: none; }
@media (hover: none) { .kk-space-favorite { opacity: .6; } }

.menu-search-input {
  width: 100%; margin-bottom: var(--kk-s-2); padding: 7px 10px; font-size: var(--kk-fs-body);
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); background: var(--kk-paper);
}
/* Q-88-23 — one Space search with an in-field filter (architecture:
   contextual-navigation/02). Popover on desktop, bottom sheet on phones. */
.kk-sfilter { position: relative; margin: 0 var(--kk-s-3) var(--kk-s-2); }
.kk-sfilter-field {
  display: flex; align-items: center; gap: var(--kk-s-1); min-height: 34px;
  padding: 2px 2px 2px var(--kk-s-2); border: 1px solid var(--kk-border); background: var(--kk-bg);
  border-radius: var(--kk-r-sm); transition: border-color .15s, box-shadow .15s;
}
.kk-sfilter-field:focus-within { border-color: var(--kk-orientation); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kk-orientation) 18%, transparent); }
.kk-sfilter-glass { width: 13px; height: 13px; flex: none; color: var(--kk-faint); }
/* Tokens and the input share one wrapping line box: the field GROWS a row
   rather than hiding tokens or squeezing the input. Glass + tune stay pinned
   to the first row. */
.kk-sfilter-entry { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px var(--kk-s-1); padding: 1px 0; }
.kk-sfilter-toks { display: contents; }
.kk-sfilter-field input {
  flex: 1 0 80px; min-width: 80px; height: 26px; border: 0; outline: 0; background: transparent; padding: var(--kk-s-1) 2px;
  font-size: var(--kk-fs-meta); font-family: var(--kk-font-ui); color: var(--kk-text);
}
.kk-sfilter-field input::placeholder { color: var(--kk-text-soft); }
/* The field's :focus-within ring is the focus indicator; the global form
   outline (kk_forms.css) would draw a second border inside it. */
.kk-sfilter-field input:focus-visible { outline: 0; }
.kk-sfilter-tok {
  flex: none; display: inline-flex; align-items: center; gap: var(--kk-s-1); height: 22px; padding: 0 6px 0 7px; border: 0; border-radius: 5px;
  background: var(--kk-secondary-soft); color: var(--kk-accent-text); font: 500 var(--kk-fs-micro)/1 var(--kk-font-ui);
  white-space: nowrap; max-width: 140px; cursor: pointer;
}
.kk-sfilter-tok .lbl { overflow: hidden; text-overflow: ellipsis; }
.kk-sfilter-tok .x { font-size: var(--kk-fs-body); opacity: .7; }
.kk-sfilter-tok:hover .x { opacity: 1; }
.kk-sfilter-tune {
  position: relative; flex: none; margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; background: none; color: var(--kk-text-soft); cursor: pointer;
}
.kk-sfilter-tune:hover, .kk-sfilter-tune[aria-expanded="true"] { background: var(--kk-fill); color: var(--kk-ink); }
.kk-sfilter-count {
  position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
  background: var(--kk-accent-fill); color: var(--kk-on-accent); font: 600 var(--kk-fs-micro)/1 var(--kk-font-ui); line-height: 14px; text-align: center;
}
.kk-sfilter-suggest {
  position: absolute; z-index: 41; left: 0; right: 0; top: calc(100% + 4px); padding: var(--kk-s-1);
  background: var(--kk-card); border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); box-shadow: var(--kk-shadow-md);
  max-height: 220px; overflow-y: auto;
}
.kk-sfilter-sug {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 28px; padding: 3px 6px; border: 0; border-radius: 5px;
  background: none; cursor: pointer; text-align: left; font: var(--kk-fs-meta) var(--kk-font-ui); color: var(--kk-text);
}
.kk-sfilter-sug:hover, .kk-sfilter-sug[aria-selected="true"] { background: var(--kk-fill); color: var(--kk-ink); }
.kk-sfilter-sug-kind { flex: none; min-width: 18px; font: var(--kk-fs-micro) var(--kk-font-mono); color: var(--kk-faint); }
.kk-sfilter-people { max-height: 196px; overflow-y: auto; overscroll-behavior: contain; }
/* Q-88-25 — the same component as the dashboard's query field. */
.kk-explorer-query { padding: 0 6px var(--kk-s-1); }
.kk-sfilter.is-explorer { margin: 0; }
.kk-sfilter.is-explorer .kk-sfilter-pop { right: auto; width: min(380px, 100%); max-height: min(72vh, 560px); }
.kk-sfilter-chips { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 var(--kk-s-1); }
.kk-sfilter-chip {
  display: inline-flex; align-items: center; gap: var(--kk-s-1); height: 24px; padding: 0 var(--kk-s-2); border: 0; border-radius: 5px;
  background: none; cursor: pointer; font: 500 var(--kk-fs-meta) var(--kk-font-ui); color: var(--kk-text-soft);
}
.kk-sfilter-chip:hover { color: var(--kk-ink); background: var(--kk-fill-soft); }
.kk-sfilter-chip .ct { font-size: var(--kk-fs-micro); color: var(--kk-faint); }
.kk-sfilter-chip[aria-pressed="true"], .kk-sfilter-row[aria-pressed="true"] { background: var(--kk-fill); color: var(--kk-ink); font-weight: 600; }
.kk-sfilter-row[aria-pressed="true"]::after { content: "✓"; margin-left: auto; font-size: var(--kk-fs-micro); color: var(--kk-text-soft); }
.kk-sfilter-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
a.kk-sfilter-tok { text-decoration: none; }
.kk-sfilter-row[hidden] { display: none; }
.kk-sfilter-suggest[hidden],
.kk-sfilter-count[hidden], .kk-sfilter-pop[hidden], .kk-sfilter-scrim[hidden], .kk-sfilter-person[hidden] { display: none; }
.kk-sfilter-scrim { display: none; }
.kk-sfilter-pop {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); padding: 6px;
  background: var(--kk-card); border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); box-shadow: var(--kk-shadow-md);
  max-height: min(70vh, 460px); overflow-y: auto;
}
.kk-sfilter-grp + .kk-sfilter-grp { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--kk-line); }
.kk-sfilter-lbl {
  display: flex; justify-content: space-between; align-items: center; margin: 2px 6px var(--kk-s-1);
  font-size: var(--kk-fs-micro); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--kk-text-soft);
}
.kk-sfilter-reset { border: 0; background: none; padding: 0; cursor: pointer; font: 500 var(--kk-fs-micro) var(--kk-font-ui); color: var(--kk-accent-text); text-transform: none; letter-spacing: 0; }
/* No track — plain text options, the chosen one gets a quiet fill. */
.kk-sfilter-seg { display: flex; gap: 2px; padding: 0 2px; }
.kk-sfilter-seg button { flex: 1; height: 24px; padding: 0 6px; border: 0; border-radius: 5px; background: none; cursor: pointer; font: 500 var(--kk-fs-meta) var(--kk-font-ui); color: var(--kk-text-soft); }
.kk-sfilter-seg button:hover { color: var(--kk-ink); }
.kk-sfilter-seg button[aria-checked="true"] { background: var(--kk-fill); color: var(--kk-ink); font-weight: 600; }
.kk-sfilter-row {
  display: flex; align-items: center; gap: var(--kk-s-2); width: 100%; min-height: 26px; padding: 3px 6px; border: 0; border-radius: 5px;
  background: none; cursor: pointer; text-align: left; font: var(--kk-fs-meta) var(--kk-font-ui); color: var(--kk-text);
}
.kk-sfilter-row:hover { background: var(--kk-fill-soft); }
.kk-sfilter-row > svg { color: var(--kk-text-soft); flex: none; }
.kk-sfilter-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-sfilter-row .ct { font-size: var(--kk-fs-micro); color: var(--kk-faint); }
.kk-sfilter-sw { position: relative; flex: none; width: 26px; height: 15px; border-radius: var(--kk-r-sm); background: var(--kk-border); transition: background .15s; }
.kk-sfilter-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--kk-on-accent); box-shadow: var(--kk-shadow-sm); transition: transform .15s; }
.kk-sfilter-row[aria-checked="true"] .kk-sfilter-sw { background: var(--kk-accent-fill); }
.kk-sfilter-row[aria-checked="true"] .kk-sfilter-sw::after { transform: translateX(11px); }
.kk-sfilter-chk {
  flex: none; width: 14px; height: 14px; border: 1.5px solid var(--kk-border); border-radius: var(--kk-r-xs);
  display: inline-flex; align-items: center; justify-content: center; color: transparent;
}
.kk-sfilter-row[aria-checked="true"] .kk-sfilter-chk { background: var(--kk-accent-fill); border-color: var(--kk-accent-fill); color: var(--kk-on-accent); }
.kk-sfilter-av {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--kk-secondary-soft); color: var(--kk-accent-text); font: 600 var(--kk-fs-micro) var(--kk-font-ui);
}
.kk-sfilter-pq {
  width: 100%; margin-bottom: var(--kk-s-1); padding: 5px var(--kk-s-2); border: 1px solid var(--kk-line); border-radius: 6px;
  background: var(--kk-paper); font: var(--kk-fs-meta) var(--kk-font-ui); color: var(--kk-text);
}
.kk-sfilter-hint { margin: 6px 6px 2px; font-size: var(--kk-fs-micro); color: var(--kk-faint); }
.kk-sfilter-hint code { padding: 0 3px; border-radius: 3px; background: var(--kk-fill); font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); color: var(--kk-text-soft); }
.kk-sfilter-done { display: none; }

/* 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: var(--kk-fs-body); 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: var(--kk-fs-micro); color: var(--kk-faint); }
.kk-view .ic { width: 16px; height: 16px; color: var(--kk-text-soft); flex-shrink: 0; }
.kk-side-foot-note { padding: var(--kk-s-2) var(--kk-s-4) 0; font-size: var(--kk-fs-micro); color: var(--kk-text-soft); }

.kk-user {
  flex-shrink: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px 32px; align-items: center; gap: var(--kk-s-3);
  padding: var(--kk-s-3) var(--kk-s-4);
  border-top: 1px solid var(--kk-line);
}
.kk-avatar {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--kk-secondary-soft); color: var(--kk-ink);
  font-weight: 600; font-size: var(--kk-fs-body);
}
.kk-user .who { flex: 1; min-width: 0; }
/* Avatar + name are one link to the profile; it spans the first two columns so
   the theme and settings controls keep their places beside it. */
.kk-user-profile {
  grid-column: span 2; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--kk-s-3);
  min-width: 0; margin: -4px; padding: var(--kk-s-1); border-radius: var(--kk-r-sm); color: inherit; text-decoration: none;
}
.kk-user-profile:hover { background: var(--kk-fill); }
.kk-user .who .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--kk-fs-body); font-weight: 600; color: var(--kk-ink); }
.kk-user .who .r { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--kk-fs-micro); color: var(--kk-text-soft); }
.kk-user .gear { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); }
.kk-user .gear:hover { background: var(--kk-fill); color: var(--kk-ink); }

/* ── topbar search + actions (desktop) ───────────────────────────────────── */
.kk-topbar {
  display: none;
  align-items: center; gap: var(--kk-s-3);
  height: var(--kk-topbar-h);
  padding: 0 var(--kk-s-5);
  border-bottom: 1px solid var(--kk-line);
  background: color-mix(in srgb, var(--kk-bg) 80%, transparent);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 40;
}
.kk-search {
  flex: 1; display: flex; align-items: center; gap: var(--kk-s-3);
  background: var(--kk-bg); border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-md); padding: var(--kk-s-2) 14px;
  color: var(--kk-text-soft); cursor: text; font-size: var(--kk-fs-body);
}
.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: var(--kk-fs-micro); color: var(--kk-text-soft);
  border: 1px solid var(--kk-border); border-radius: 5px; padding: 1px 6px; background: var(--kk-fill);
}




.kk-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; background: var(--kk-card); border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-md); color: var(--kk-text-soft); cursor: pointer;
}
.kk-iconbtn:hover { border-color: var(--kk-secondary); color: var(--kk-ink); }

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

/* @tokens-only:end shell */
/* @tokens-only:start dashboard */
/* ── dashboard content ───────────────────────────────────────────────────── */
/* Action bar (search + New). Dashboard and managed Space mount this into the
   shell-level workspace topbar; other utility surfaces may keep it inline. */
.kk-actionbar { display: flex; align-items: center; gap: var(--kk-s-3); margin-bottom: var(--kk-s-5); }
.kk-actionbar .kk-search { min-width: 0; }
.kk-workspace-topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  height: var(--kk-wtopbar-h);
  background: var(--kk-bg);
  border-bottom: 1px solid var(--kk-line);
}
.kk-workspace-topbar .kk-actionbar {
  width: 100%;
  height: var(--kk-wtopbar-h);
  margin: 0;
  gap: 6px;
  padding: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kk-workspace-topbar .kk-actionbar::-webkit-scrollbar { display: none; }
.kk-jump-trigger { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: 0 0 32px; padding: 0; border: 0; border-radius: 7px; background: var(--kk-fill); color: var(--kk-text); cursor: pointer; font: 600 var(--kk-fs-micro) var(--kk-font-mono); }
.kk-jump-trigger:hover { background: var(--kk-secondary-soft); color: var(--kk-ink); }
.kk-jump-trigger .ic { width: 12px; height: 12px; }
.kk-workspace-nav { display: flex; align-items: center; gap: var(--kk-s-1); flex-shrink: 0; }
.kk-workspace-menu { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--kk-text); cursor: pointer; }
.kk-workspace-menu:hover { background: var(--kk-fill); }
.kk-workspace-mark { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; overflow: hidden; }
.kk-context-cluster { display: inline-flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; }
.kk-workspace-context { max-width: 220px; min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; color: var(--kk-ink); font-size: var(--kk-fs-meta); font-weight: 600; }
.kk-workspace-context > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kk-context-state { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; color: var(--kk-text-soft); font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
/* A phone keeps the state icon (it carries the aria-label) and drops the word, so
   the Space name gives way before the top-bar actions run off screen. */
@media (max-width: 479px) {
  .kk-context-state > span { display: none; }
}

.kk-workspace-topbar .kk-iconbtn { width: 32px; height: 32px; border: 0; border-radius: 7px; background: transparent; }
.kk-workspace-topbar .kk-notification-bell { width: 32px; height: 32px; }
.kk-context-info { position: relative; flex: 0 0 auto; }
.kk-context-info > summary { list-style: none; cursor: pointer; }
.kk-context-info > summary::-webkit-details-marker { display: none; }
.kk-context-info-panel {
  position: fixed; top: calc(var(--kk-wtopbar-h) + 4px); left: var(--kk-popover-left, 8px); z-index: 90;
  width: min(320px, calc(100vw - 16px)); padding: var(--kk-s-3) 14px;
  border: 1px solid var(--kk-line); border-radius: var(--kk-r-md);
  background: var(--kk-card); box-shadow: var(--kk-shadow-md);
  color: var(--kk-text); font-size: var(--kk-fs-meta); line-height: 1.45;
}
.kk-context-action { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.kk-actionbar-spacer { min-width: 12px; flex: 1 1 auto; }
.kk-command-control {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px; border: 0; border-radius: 7px; background: var(--kk-fill); color: var(--kk-text);
}
.kk-command-control:hover { background: var(--kk-secondary-soft); color: var(--kk-ink); }
.kk-command-control .ic { width: 14px; height: 14px; }
/* One SHAPE for the whole right-hand cluster, but not one weight. The nodepad
   topbar reference (founder's chosen model) keeps tiers without colour noise:
   a raised chip is the current view, ONE control is the primary action, and
   utilities are bare icons that fill only on hover. Making them all identical
   fixed the earlier three-skins mess but flattened that hierarchy. */
.kk-workspace-topbar .kk-iconbtn,
.kk-workspace-topbar .kk-notification-bell {
  width: 32px; height: 32px; border: 0; border-radius: 7px;
  background: transparent; color: var(--kk-text-soft);
}
.kk-workspace-topbar .kk-command-control,
.kk-workspace-topbar .kk-jump-trigger { background: transparent; color: var(--kk-text-soft); }
.kk-workspace-topbar .kk-command-control.is-primary {
  background: var(--kk-primary); color: var(--kk-on-primary);
}
.kk-workspace-topbar .kk-command-control.is-primary:hover {
  background: var(--kk-primary); filter: brightness(1.15); color: var(--kk-on-primary);
}
.kk-workspace-topbar .kk-iconbtn:hover,
.kk-workspace-topbar .kk-notification-bell:hover { background: var(--kk-secondary-soft); color: var(--kk-ink); }
/* The context cluster sits left of the spacer and reads as text, not controls. */
.kk-workspace-topbar .kk-context-cluster .kk-iconbtn { background: transparent; }
.kk-workspace-topbar .kk-context-cluster .kk-iconbtn:hover { background: var(--kk-fill); }
.kk-space-members { min-width: 32px; height: 32px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--kk-text-soft); }
.kk-member-stack { display: inline-flex; padding-left: 5px; }
.kk-member-stack > span {
  width: 24px; height: 24px; margin-left: -5px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--kk-card); border-radius: 50%; background: var(--kk-primary); color: var(--kk-on-primary);
  font: 600 var(--kk-fs-micro) var(--kk-font-ui);
}
.kk-member-stack > span:nth-child(2) { background: var(--kk-decision); }
.kk-member-stack > span:nth-child(3) { background: var(--kk-idea); color: var(--kk-ink); }
.kk-member-count { font-size: var(--kk-fs-micro); white-space: nowrap; }
.kk-attention, .kk-nav-attention {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  padding: 0 var(--kk-s-1); border-radius: 99px; background: var(--kk-blocker);
  font: 700 var(--kk-fs-micro) var(--kk-font-mono);
}
/* The count sits ON the blocker red, so it takes the look's --kk-on-blocker. It carried
   --kk-on-primary (which flips with the theme) and, in the sidebar, lost even
   that to `.kk-nav a .ct { color: var(--kk-faint) }` — a faint grey digit on
   red (founder, 2026-08-15). Specificity beats the nav rule deliberately. */
.kk-attention, .kk-nav a .kk-nav-attention, .kk-nav-attention { color: var(--kk-on-blocker); }
.kk-context-action .kk-attention { position: absolute; top: -3px; right: -3px; }
/* Trash search — phone first: the input takes the row, buttons wrap under it. */
.kk-trash-search { display: flex; flex-wrap: wrap; gap: var(--kk-s-2); margin: 0 0 14px; }
.kk-trash-search input[type=search] {
  flex: 1 1 220px; min-width: 0; padding: 0 14px; font-size: var(--kk-fs-body);
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); background: var(--kk-card); color: var(--kk-text);
}
.kk-trash-search input[type=search]:focus { outline: 2px solid var(--kk-primary); outline-offset: 1px; }
.kk-trash-search .kk-btn { display: inline-flex; align-items: center; }
.kk-trash-count { margin: 0 0 var(--kk-s-3); font-size: var(--kk-fs-body); color: var(--kk-text-soft); }
.kk-trash-notice { margin: 0 0 18px; padding: 10px var(--kk-s-3); border-left: 2px solid var(--kk-orientation); background: var(--kk-fill-soft); color: var(--kk-text-soft); font-size: var(--kk-fs-meta); max-width: 64ch; }
.kk-sv-tools { min-height: 40px; margin-bottom: var(--kk-s-3); }
.kk-workspace-topbar .kk-btn,
.kk-workspace-topbar .kk-iconbtn,
.kk-workspace-topbar .kk-notifications { flex-shrink: 0; }

/* Mobile shell controls keep the approved 32px painted squares inside real
   44px pointer/focus targets. The topbar keeps --kk-wtopbar-h and scrolls itself. */
@media (max-width: 899px) {
  .kk-workspace-topbar .kk-actionbar { padding: var(--kk-s-1); }
  .kk-jump-trigger {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border: 6px solid transparent;
    background: var(--kk-fill);
    background-clip: padding-box;
    box-shadow: none;
  }
  .kk-jump-trigger:hover {
    background: var(--kk-secondary-soft);
    background-clip: padding-box;
    box-shadow: none;
  }
  .kk-workspace-menu { width: 44px; height: 44px; }
  .kk-workspace-mark {
    width: 44px;
    height: 44px;
    /* 44px tap target, 32px painted. NOT an inset box-shadow: `inset 0 0 0 6px`
       paints a 6px RING inward and leaves the centre empty, which rendered the
       mark as a heavy dark outline (founder, 2026-08-18). A transparent border
       with background-clip is the technique `.kk-btn` below already uses. */
    border: 6px solid transparent;
    border-radius: 13px;
  }
  .kk-workspace-topbar .kk-btn {
    border: 6px solid transparent;
    background-clip: padding-box;
  }
  /* 44px tap target, 32px visual — same inset-ring trick as .kk-command-control
     so the whole cluster still reads as one set of buttons on a phone. */
  /* Menu rows and filter chips are tap targets too — both missed the 44px floor
     (measured at 375px, 2026-08-15). The explorer had its own rule; every other
     chip strip in the shell did not. */
  .kkapp .kmenu .manage-link { min-height: 44px; }
  /* The 44px floor is a TAP target, not a paint height. Applying it to the
     filter strip made a chip row look like a toolbar (founder, 2026-08-18).
     Same trick: 44px of hit area, ~32px of chip. */
  .kkapp .kk-chip, .kkapp .kk-chip-filter {
    min-height: 44px; border-width: 6px; border-style: solid;
    border-color: transparent; background-clip: padding-box;
  }
  /* The star was a 15px glyph — a real control at a quarter of the tap floor. */
  .kkapp .kk-row .star { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -14px -14px -14px -12px; }
  /* Utilities keep the 44px target without the painted ring — only the primary
     action carries weight on a phone too. */
  .kk-workspace-topbar .kk-iconbtn,
  .kk-workspace-topbar .kk-notification-bell {
    width: 44px; height: 44px; background: transparent; box-shadow: none;
  }
  .kk-workspace-topbar .kk-command-control.is-primary {
    border: 6px solid transparent; background: var(--kk-primary);
    background-clip: padding-box; box-shadow: none; color: var(--kk-on-primary);
  }
  .kk-workspace-topbar .kk-iconbtn:hover,
  .kk-workspace-topbar .kk-notification-bell:hover {
    border: 6px solid transparent; background: var(--kk-secondary-soft);
    background-clip: padding-box; box-shadow: none;
  }
  .kk-workspace-topbar .kk-context-cluster .kk-iconbtn,
  .kk-workspace-topbar .kk-context-cluster .kk-iconbtn:hover { box-shadow: none; }
  .kk-command-control {
    width: 44px; height: 44px; flex-basis: 44px;
    border: 6px solid transparent; background: var(--kk-fill);
    background-clip: padding-box; box-shadow: none;
  }
  .kk-command-control:hover {
    background: var(--kk-secondary-soft); background-clip: padding-box; box-shadow: none;
  }
  .kk-space-members { min-width: 44px; height: 44px; }
  .kk-member-count { display: none; }
}

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

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

/* view toggle FEED / LIBRARY / COMPACT */
.kk-vtoggle { display: inline-flex; gap: 2px; background: var(--kk-fill); border-radius: var(--kk-r-md); padding: 3px; flex-shrink: 0; }
.kk-vtoggle button {
  font-size: var(--kk-fs-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--kk-text-soft); background: none; border: none; border-radius: var(--kk-r-sm);
  padding: 6px var(--kk-s-3); 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: var(--kk-fs-meta); font-weight: 500; color: var(--kk-text-soft);
  background: var(--kk-card); border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-pill); padding: 5px 13px; cursor: pointer;
  font-family: var(--kk-font-ui); transition: border-color var(--kk-t-fast), color var(--kk-t-fast);
}
.kk-chip:hover { border-color: var(--kk-secondary); color: var(--kk-ink); }
.kk-chip.is-active { background: var(--kk-primary); border-color: var(--kk-primary); color: var(--kk-on-primary); }
.kk-chip .ct { font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); opacity: .7; }
.kk-saved-chips { display: contents; }
.kk-chip-wrap { display: inline-flex; align-items: center; position: relative; }
.kk-chip-saved { padding-right: 9px; }
.kk-chip-save { border-style: dashed; color: var(--kk-ink); }
.kk-chip-save:hover { background: var(--kk-fill); }
/* button_to wraps the remove control in a <form>, a block box that ignored the
   chip's inline-flex row — so the × floated free of the pill it belongs to. */
.kk-chip-wrap { gap: 2px; }
.kk-chip-wrap > form { display: inline-flex; align-items: center; margin: 0; }
.kk-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin: 0 0 0 -4px;
  border: none; background: transparent; color: var(--kk-text-soft); border-radius: var(--kk-r-pill);
  cursor: pointer; padding: 0;
}
.kk-chip-remove:hover { background: var(--kk-fill); color: var(--kk-ink); }

/* save-filter modal */
.kk-modal-scrim {
  position: fixed; inset: 0; z-index: 220;
  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: var(--kk-fs-heading); margin: 0; color: var(--kk-ink); }
.kk-modal-lede { font-size: var(--kk-fs-body); color: var(--kk-text-soft); margin: 0 0 var(--kk-s-4); line-height: 1.45; }
.kk-filter-preview {
  display: flex; flex-direction: column; gap: var(--kk-s-1); margin-bottom: var(--kk-s-4);
  padding: 10px var(--kk-s-3); border-radius: var(--kk-r-md); background: var(--kk-fill); border: 1px solid var(--kk-border);
}
.kk-filter-preview .lbl { font-size: var(--kk-fs-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--kk-text-soft); }
.kk-filter-preview .val { font-size: var(--kk-fs-body); font-weight: 600; color: var(--kk-ink); }
.kk-field { display: block; margin-bottom: var(--kk-s-4); }
.kk-field-label { display: block; font-size: var(--kk-fs-meta); font-weight: 600; color: var(--kk-text-soft); margin-bottom: 6px; }
.kk-input {
  width: 100%; font-family: var(--kk-font-ui); font-size: var(--kk-fs-body); padding: 10px var(--kk-s-3);
  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: var(--kk-fs-meta); color: var(--kk-danger); 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: var(--kk-fs-meta); color: var(--kk-text-soft); flex-wrap: wrap; }

/* group header */
.kk-group { margin-bottom: var(--kk-s-6); }
.kk-group-head { display: flex; align-items: baseline; gap: var(--kk-s-3); margin: 0 2px var(--kk-s-3); }
.kk-group-head .g-name { font-family: var(--kk-font-display); font-size: var(--kk-fs-title); color: var(--kk-ink); }
.kk-group-head .g-slug { font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); color: var(--kk-text-soft); }
.kk-group-head .g-count { font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); 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: var(--kk-s-3) var(--kk-s-4) var(--kk-s-3) 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: var(--kk-fs-title); 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); }
/* Save (spec 31 D-31-6): the bookmark fills when the Page is saved. */
.star.is-on svg, [data-controller="save"].is-on svg { fill: currentColor; }
/* Fork credit (spec 31 D-31-6): the original's title reads as a link. */
[data-fork-credit] a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.kk-row .type {
  font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--kk-text-soft);
  background: var(--kk-fill); border-radius: var(--kk-r-xs);
  padding: 3px 6px; flex-shrink: 0; min-width: 42px; text-align: center;
}
.kk-row .body { flex: 1; min-width: 0; }
.kk-row .titleline { display: flex; align-items: center; gap: var(--kk-s-2); min-width: 0; }
.kk-row .title { font-size: var(--kk-fs-body); font-weight: 600; color: var(--kk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-row .title:hover { color: var(--kk-ink); }
.kk-row .vis {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--kk-text-soft);
}
.kk-row .vis .vdot { width: 7px; height: 7px; border-radius: 2px; }
.kk-row .vis.private .vdot { background: var(--kk-private); }
.kk-row .vis.link    .vdot { background: var(--kk-link); }
.kk-row .vis.public  .vdot { background: var(--kk-public); }
.kk-row .vis.link    { color: var(--kk-text-soft); }
.kk-row .vis.public  { color: var(--kk-public); }
.kk-row .badge {
  font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--kk-r-pill); white-space: nowrap; flex-shrink: 0;
}
.kk-row .badge.gray   { background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-row .badge.blue   { background: color-mix(in srgb, var(--kk-decision) 15%, transparent); color: var(--kk-decision); }
.kk-row .badge.amber  { background: color-mix(in srgb, var(--kk-idea) 20%, transparent); color: var(--kk-idea); }
.kk-row .badge.purple { background: color-mix(in srgb, var(--kk-question) 16%, transparent); color: var(--kk-question); }
.kk-row .badge.green  { background: color-mix(in srgb, var(--kk-outcome) 16%, transparent); color: var(--kk-outcome); }
.kk-row .crumb { font-size: var(--kk-fs-meta); color: var(--kk-text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-row .crumb b { font-weight: 600; color: var(--kk-text-soft); }
.kk-row .right { display: flex; align-items: center; gap: var(--kk-s-4); flex-shrink: 0; }
.kk-row .right .num { font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); color: var(--kk-faint); }
.kk-row .right .ago { font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); color: var(--kk-text-soft); min-width: 30px; text-align: right; }

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

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

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

/* Q-88-27 — an empty filtered result: names the filters, one honest action,
   drop one filter at a time with the count it brings back. */
.kk-filter-empty { padding: var(--kk-s-5) var(--kk-s-4); text-align: center; }
.kk-filter-empty-art { display: block; width: 120px; height: 64px; margin: 0 auto var(--kk-s-2); }
.kk-filter-empty-art rect { stroke: var(--kk-border); }
.kk-filter-empty-art rect.front { fill: var(--kk-card); }
.kk-filter-empty-art .dot { fill: var(--kk-text-soft); }
.kk-filter-empty-art .dot:nth-of-type(1) { fill: var(--kk-highlight); }
.kk-filter-empty-art .dot:nth-of-type(2) { fill: var(--kk-accent-fill); }
.kk-filter-empty h3 { margin: 0 0 var(--kk-s-1); color: var(--kk-ink); font: 600 var(--kk-fs-title) var(--kk-font-ui); }
.kk-filter-empty p { margin: 0 0 var(--kk-s-3); color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
.kk-filter-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.kk-filter-empty-btn { display: inline-flex; align-items: center; gap: var(--kk-s-1); padding: 6px 11px; border: 1px solid var(--kk-line); border-radius: 7px; background: var(--kk-card); color: var(--kk-text); font-size: var(--kk-fs-meta); }
.kk-filter-empty-btn:hover { border-color: var(--kk-border); color: var(--kk-ink); }
.kk-filter-empty-btn.is-primary { background: var(--kk-primary); border-color: var(--kk-primary); color: var(--kk-on-primary); }
.kk-filter-empty-btn .x { color: var(--kk-text-soft); }
@media (prefers-reduced-motion: no-preference) {
  .kk-filter-empty-art .dot { animation: kk-filter-float 3s ease-in-out infinite; }
  .kk-filter-empty-art .dot:nth-of-type(2) { animation-delay: .4s; }
  .kk-filter-empty-art .dot:nth-of-type(3) { animation-delay: .8s; }
}
@keyframes kk-filter-float { 50% { transform: translateY(-4px); } }

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

/* @tokens-only:start reader-head */
/* ── 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: var(--kk-fs-meta); color: var(--kk-text-soft); margin-bottom: var(--kk-s-5); }
.kk-crumb a:hover { color: var(--kk-ink); }
.kk-crumb .sep { color: var(--kk-faint); }
.kk-crumb .cur { color: var(--kk-text); font-weight: 600; }

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

/* @tokens-only:end reader-head */
/* article body. This is Page CONTENT: its type belongs to the Page's own design
   system (kuickr-v2 for Kuickr Pages), not the App look, so it stays outside
   the @tokens-only slices on purpose (D-35-1: the App look never resizes a
   published Page). It moves when the Page profile gains type steps. */
.kk-reader .doc { color: var(--kk-text); font-size: 16px; line-height: 1.72; overflow-wrap: break-word; }
.kk-reader .doc h1, .kk-reader .doc h2, .kk-reader .doc h3, .kk-reader .doc h4 { font-family: var(--kk-font-display); color: var(--kk-ink); line-height: 1.2; letter-spacing: -.01em; margin: 1.8em 0 .6em; }
.kk-reader .doc h1 { font-size: 2em; margin-top: .2em; }
.kk-reader .doc h2 { font-size: 1.5em; padding-top: .5em; border-top: 2px solid var(--kk-line); }
.kk-reader .doc h3 { font-size: 1.2em; }
.kk-reader .doc h4 { font-size: 1.02em; }
.kk-reader .doc p, .kk-reader .doc ul, .kk-reader .doc ol, .kk-reader .doc blockquote, .kk-reader .doc table { margin: 0 0 1.1em; }
.kk-reader .doc ul, .kk-reader .doc ol { padding-left: 1.4em; }
/* Restore list markers Tailwind's preflight resets to none (rendered markdown). */
.kk-reader .doc ul { list-style: disc; }
.kk-reader .doc ol { list-style: decimal; }
.kk-reader .doc li { margin: 0.2em 0; }
.kk-reader .doc li { margin: .3em 0; }
.kk-reader .doc a { color: var(--kk-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.kk-reader .doc a:hover { color: var(--kk-ink); }
.kk-reader .doc strong { color: var(--kk-ink); font-weight: 700; }
/* Inline code must break long tokens so it never forces the page to scroll
   sideways (mobile principle 1). Block code (`pre code`) is unaffected — the
   `pre` keeps `white-space: pre` and scrolls within itself. */
.kk-reader .doc code { font-family: var(--kk-font-mono); font-size: .87em; background: var(--kk-fill); border: 1px solid var(--kk-line); border-radius: var(--kk-r-xs); padding: 1px 5px; overflow-wrap: anywhere; word-break: break-word; }
.kk-reader .doc pre { background: var(--kk-paper); border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); padding: 14px var(--kk-s-4); 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 var(--kk-s-4); color: var(--kk-text-soft); font-style: italic; }
.kk-reader .doc hr { border: none; border-top: 1px solid var(--kk-line); margin: 2em 0; }
.kk-reader .doc img { max-width: 100%; border-radius: var(--kk-r-md); }
/* A wide user-authored markdown table scrolls WITHIN itself instead of pushing the
   whole page sideways (mobile principle 1 — no horizontal page scroll). */
.kk-reader .doc table { display: block; width: max-content; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; border-collapse: collapse; font-size: 14px; }
.kk-reader .doc th, .kk-reader .doc td { border: 1px solid var(--kk-border); padding: 7px 11px; text-align: left; }
.kk-reader .doc th { background: var(--kk-fill); font-weight: 600; color: var(--kk-ink); }

/* @tokens-only:start reader-panel */
/* 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: var(--kk-fs-body); }
.kk-reader .pager a { color: var(--kk-text-soft); font-weight: 600; } .kk-reader .pager a:hover { color: var(--kk-ink); }

/* comments */
.kk-reader .kcomments { margin-top: var(--kk-s-7); padding-top: var(--kk-s-5); border-top: 1px solid var(--kk-line); }
.kk-reader .kc-h { font-family: var(--kk-font-display); font-size: var(--kk-fs-heading); 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: var(--kk-s-3) 14px; background: var(--kk-paper); }
.kk-reader .kc-meta { font-size: var(--kk-fs-meta); color: var(--kk-text-soft); margin-bottom: var(--kk-s-1); }
.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: var(--kk-fs-body); 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: var(--kk-fs-body); 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: var(--kk-fs-meta); color: var(--kk-ink); background: var(--kk-secondary-soft); border-radius: var(--kk-r-sm); padding: 7px var(--kk-s-3); margin: 0 0 var(--kk-s-5); }
.kkapp .viewing-as .share { font-weight: 700; color: var(--kk-ink); }
.kkapp .viewing-as .share:hover { text-decoration: underline; }

/* ── reader two-column + right panel (spec 33) ───────────────────────────── */
/* mobile-first: single column; the right panel stacks below the article. */
.kk-readwrap { max-width: 760px; margin: 0 auto; padding: var(--kk-s-5) var(--kk-s-4) var(--kk-s-8); }
.kk-reader { max-width: none; }
.kk-reader-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kk-s-4); }
.kk-reader-top .kk-crumb { flex: 1; }
.kk-viewcycle { width: auto; gap: 6px; padding: 0 var(--kk-s-3); font-size: var(--kk-fs-meta); 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: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); cursor: pointer; }
.kk-rp-tab:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rp-tab.is-active { background: var(--kk-fill); color: var(--kk-orientation); }
.kk-rp-dot { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: var(--kk-r-pill); background: var(--kk-primary); color: var(--kk-on-primary); font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); display: flex; align-items: center; justify-content: center; }
.kk-rp-collapse { margin-left: auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); cursor: pointer; }
.kk-rp-collapse:hover { color: var(--kk-ink); }
.kk-deck-protected { display: none; position: relative; }
.kk-deck-count { position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: var(--kk-r-pill); background: var(--kk-primary); color: var(--kk-on-primary); font: var(--kk-fs-micro)/1 var(--kk-font-mono); line-height: 14px; text-align: center; }
.kprotected-mobile-head { display: none; }
.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: var(--kk-fs-micro); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--kk-text-soft); margin: 0 0 var(--kk-s-3); }
.kk-rp-empty { font-size: var(--kk-fs-body); color: var(--kk-text-soft); }
.kk-rp-toc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.kk-rp-toc li { font-size: var(--kk-fs-body); }
.kk-rp-toc li.lvl-3 { padding-left: 14px; }
.kk-rp-toc a { display: block; padding: var(--kk-s-1) var(--kk-s-2); border-radius: var(--kk-r-xs); color: var(--kk-text-soft); }
.kk-rp-toc a:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rp-info { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--kk-s-2) 14px; font-size: var(--kk-fs-body); }
.kk-rp-info dt { color: var(--kk-text-soft); }
.kk-rp-info dd { margin: 0; color: var(--kk-text); text-align: right; overflow-wrap: anywhere; }
.kk-rp-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--kk-s-4); font-size: var(--kk-fs-body); 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: var(--kk-s-3); text-align: center; }
.kk-rp-stats b { display: block; font-family: var(--kk-font-display); font-size: var(--kk-fs-heading); color: var(--kk-ink); }
.kk-rp-stats span { font-size: var(--kk-fs-micro); color: var(--kk-text-soft); text-transform: uppercase; letter-spacing: .04em; }

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

/* ── shared contextual information rail (spec 88 / contextual-navigation) ── */
.kk-main-inner:has(> .kk-context-layout) { max-width: 1440px; }
.kk-context-layout, .kk-context-content { min-width: 0; }
.kk-context-panel-title { color: var(--kk-ink); font-size: var(--kk-fs-body); font-weight: 650; margin: 0 0 var(--kk-s-4); }
.kk-context-panel-heading { display: flex; align-items: center; gap: var(--kk-s-2); margin-bottom: var(--kk-s-4); }
.kk-context-panel-heading .kk-context-panel-title { margin: 0; }
.kk-page-context-star { margin-left: auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--kk-r-sm); background: transparent; color: var(--kk-faint); cursor: pointer; }
.kk-page-context-star:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-page-context-star.is-on { color: var(--kk-idea); }
.kk-page-context-star.is-on svg { fill: currentColor; }
.kk-context-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kk-context-chips span { padding: var(--kk-s-1) 7px; border-radius: var(--kk-r-xs); background: var(--kk-secondary-soft); color: var(--kk-text); font: var(--kk-fs-micro)/1.3 var(--kk-font-mono); }
.kk-context-knowledge-group + .kk-context-knowledge-group { margin-top: var(--kk-s-4); padding-top: var(--kk-s-4); border-top: 1px solid var(--kk-line); }
.kk-context-knowledge ul { margin: 0; padding-left: 17px; color: var(--kk-text); font-size: var(--kk-fs-meta); line-height: 1.5; }
.kk-context-knowledge li + li { margin-top: 5px; }
.kk-context-empty p { margin: 0; color: var(--kk-text-soft); font-size: var(--kk-fs-meta); line-height: 1.5; }

@media (min-width: 1100px) {
  .kk-context-layout { display: flex; align-items: flex-start; gap: var(--kk-s-5); }
  .kk-context-content { flex: 1 1 auto; }
  .kk-context-layout > .kk-context-panel { top: calc(var(--kk-topbar-h) + var(--kk-s-4)); }
}

@media (max-width: 560px) {
  .kk-context-panel.is-collapsed { inset: auto 12px 12px auto; width: 56px; padding: 0 5px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg); }
  .kk-context-panel.is-collapsed .kk-rp-rail { min-height: 54px; }
}

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

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

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

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

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

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

/* ── desktop sidebar collapse → icon rail (spec 33, deck-app) ─────────────── */
.kk-side-collapse { display: none; margin-left: auto; width: 30px; height: 30px; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); cursor: pointer; }
.kk-side-collapse:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-side-expand { display: none; width: 30px; height: 26px; align-items: center; justify-content: center; margin: 0; background: none; border: none; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); cursor: pointer; }
.kk-side-expand: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 { flex-direction: column; align-items: center; justify-content: center; gap: var(--kk-s-1); 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-side .kk-sfilter,
  .kk-shell.is-side-collapsed .kk-side-scroll,
  .kk-shell.is-side-collapsed .kk-user .who,
  .kk-shell.is-side-collapsed .kk-user .gear { display: none; }
  .kk-shell.is-side-collapsed .kk-nav a .kk-space-types { display: none; }
  .kk-shell.is-side-collapsed .kk-nav { padding: var(--kk-s-2); align-items: center; }
  .kk-shell.is-side-collapsed .kk-nav a { width: 40px; justify-content: center; padding: 9px 0; margin: 0 auto; }
  .kk-shell.is-side-collapsed .kk-user { grid-template-columns: 32px; justify-content: center; padding: var(--kk-s-3) 0; }
  .kk-shell.is-side-collapsed .kk-user-profile { grid-column: auto; grid-template-columns: 32px; }
}

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

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

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

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

/* collapsed-rail Spaces popover (deck-app) — only on the desktop icon rail */
.kk-rail-pop { display: none; }
.kk-rail-pop > summary { list-style: none; }
.kk-rail-pop > summary::-webkit-details-marker { display: none; }
@media (min-width: 900px) {
  .kk-shell.is-side-collapsed .kk-rail-pop { display: block; padding: 0 var(--kk-s-2); margin: 2px 0 var(--kk-s-3); }
}
.kk-rail-ico { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--kk-r-sm); color: var(--kk-text-soft); cursor: pointer; }
.kk-rail-ico:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rail-pop[open] .kk-rail-ico { background: var(--kk-fill); color: var(--kk-ink); }
.kk-rail-pop-body { position: fixed; left: 74px; top: 64px; z-index: 200; width: 300px; max-height: 72vh; overflow-y: auto; background: var(--kk-bg); border: 1px solid var(--kk-border); border-radius: var(--kk-r-lg); box-shadow: var(--kk-shadow-lg); padding: var(--kk-s-3); }
.kk-rail-search { width: 100%; border: 1px solid var(--kk-border); background: var(--kk-fill-soft); border-radius: var(--kk-r-sm); padding: 9px var(--kk-s-3); 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: var(--kk-fs-micro); color: var(--kk-faint); }

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

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

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

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

  /* Reader actions use real icons with explicit accessible names and titles. */
  .kk-deck-vtoggle a {
    min-height: 44px; min-width: 44px; height: auto; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

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

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

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

/* ── semantic callouts (#17): `> [!DECISION]` → typed callout ─────────────── */
.kk-reader .kk-callout { border-left: 3px solid var(--cl, var(--kk-border)); background: var(--kk-paper); border-radius: 0 var(--kk-r-md) var(--kk-r-md) 0; padding: var(--kk-s-3) var(--kk-s-4); 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: var(--kk-s-1); }
.kk-sv-badge { font-family: var(--kk-font-mono); font-size: 10px; letter-spacing: .03em; color: var(--kk-text-soft); background: var(--kk-fill); border-radius: var(--kk-r-pill); padding: 2px var(--kk-s-2); }
.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: var(--kk-fs-meta); font-weight: 600; border: 2px solid var(--kk-bg); margin-left: -8px; }
.kk-sv-avatars .av:first-child { margin-left: 0; }
.kk-sv-mcount { font-size: 12.5px; color: var(--kk-text-soft); }

.kk-tabs { display: flex; gap: var(--kk-s-5); border-bottom: 1px solid var(--kk-line); margin: var(--kk-s-5) 0; }
.kk-tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--kk-text-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.kk-tab:hover { color: var(--kk-ink); }
.kk-tab.is-active { color: var(--kk-ink); border-bottom-color: var(--kk-ink); }
.kk-tab .ct { font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); 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: var(--kk-s-2); padding: 14px var(--kk-s-4); align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--kk-line); }
.kk-member-invite .kmember-typeahead { position: relative; flex: 1; min-width: 220px; }
.kk-member-invite .kmember-typeahead > input { width: 100%; }
.kk-member-invite .kmember-typeahead turbo-frame { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; background: var(--kk-paper); border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); box-shadow: var(--kk-shadow-md); overflow: hidden; }
.kk-member-invite .kmember-candidate { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--kk-s-3); padding: 10px var(--kk-s-3); border: 0; border-bottom: 1px solid var(--kk-line); background: transparent; text-align: left; cursor: pointer; color: var(--kk-ink); font-family: var(--kk-font-ui); }
.kk-member-invite .kmember-candidate:last-child { border-bottom: 0; }
.kk-member-invite .kmember-candidate:hover { background: var(--kk-fill); }
.kk-member-invite .kmember-candidate span:first-child,
.kk-member-invite .kmember-candidate small { display: block; }
.kk-member-invite .kmember-candidate small { color: var(--kk-text-soft); }
.kk-member-invite input[type=email] { flex: 1; min-width: 220px; border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-sm); padding: var(--kk-s-2) 11px; font-size: 13.5px; font-family: var(--kk-font-ui); color: var(--kk-text); }

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

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

.kk-activity { list-style: none; margin: 0; padding: var(--kk-s-1) 0; }
.kk-activity li { display: flex; gap: var(--kk-s-3); padding: var(--kk-s-3) var(--kk-s-4); }
.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: var(--kk-fs-micro); color: var(--kk-text-soft); margin-top: 2px; }
@media (max-width: 640px) { .kk-tabs { gap: var(--kk-s-4); overflow-x: auto; } }

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

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


.kk-feedhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--kk-s-3); }
.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 var(--kk-s-4); }
.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: var(--kk-s-2); }
.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: var(--kk-fs-micro); color: var(--kk-text-soft); margin-top: 3px; }
.kk-ptime { font-family: var(--kk-font-mono); font-size: 11.5px; color: var(--kk-faint); flex-shrink: 0; }
.kk-pstar { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--kk-border); flex-shrink: 0; padding: 2px; }
.kk-pstar.is-on { color: var(--kk-idea); }
.kk-pstar:hover { color: var(--kk-ink); }
@media (max-width: 640px) { .kk-prow { gap: 10px; padding: 11px var(--kk-s-3); } .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-deck-topbar,
.kk-mode-full .kk-mtop,
.kk-mode-full .viewing-as { display: none; }
.kk-mode-full .kk-main { margin-left: 0; }
/* Full view = the page itself, edge to edge — strip our card/box entirely so an
   HTML page renders as itself (its own layout), with only the floating bar. */
.kk-mode-full .kk-readwrap { max-width: none; padding: 0; }
.kk-mode-full .kk-readwrap .kk-reader { max-width: none; }
/* --kk-fb-inset is 0 unless the fullbar is Docked, when the controller sets it to
   the bar's height so the page ends ABOVE the bar (no overlap) instead of under it. */
.kk-mode-full .kk-reader .html-embed { border: none; border-radius: 0; min-height: calc(100vh - var(--kk-fb-inset, 0px)); }
/* Markdown stays readable: a centered column, no card. */
.kk-mode-full .kk-reader .doc { max-width: 820px; margin: 0 auto; padding: var(--kk-s-6) var(--kk-s-5) calc(var(--kk-s-8) + 56px); }
.kk-mode-full .kk-rpanel { display: contents; }
.kk-mode-full .kk-rpanel > .kk-rp-rail,
.kk-mode-full .kk-rpanel > .kk-rp-body { display: none; }
.kk-mode-full.show-reader-panel .kk-rpanel { display: flex; }
.kk-mode-full.show-reader-panel .kk-rpanel > .kk-rp-rail { display: flex; }
.kk-mode-full.show-reader-panel .kk-rpanel:not(.is-collapsed) > .kk-rp-body { display: block; }
@media (min-width: 601px) {
  .kk-mode-full.show-reader-panel .kk-rpanel { 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); }
}

/* 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: var(--kk-s-1); background: var(--kk-ink); color: var(--kk-bg);
  border-radius: var(--kk-r-pill); padding: 6px; box-shadow: 0 10px 34px rgba(0,0,0,.28); z-index: 60; }

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

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

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

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

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

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

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

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

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

/* ── admin area in deck chrome (#44) ─────────────────────────────────────── */
.kk-admin { max-width: 820px; }
.kk-admin .kk-card { padding: 0; }
.kk-admin .kk-feedhead { margin-top: var(--kk-s-5); }
.kk-arow { display: flex; align-items: center; justify-content: space-between; gap: var(--kk-s-3); padding: 13px var(--kk-s-4); }
.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: var(--kk-fs-meta); color: var(--kk-text-soft); margin-top: 2px; }
.kk-arow .acts { display: flex; align-items: center; gap: var(--kk-s-2); flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.kk-astatus { font-family: var(--kk-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--kk-r-pill); background: var(--kk-fill); color: var(--kk-text-soft); }
.kk-astatus.ok { background: color-mix(in srgb, var(--kk-outcome) 16%, transparent); color: var(--kk-outcome); }
.kk-aform-row { display: flex; align-items: center; gap: var(--kk-s-2); flex-wrap: wrap; padding: 14px var(--kk-s-4); 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: var(--kk-s-2) 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: var(--kk-s-4); font-size: 13px; color: var(--kk-text-soft); }
.kk-aform-col { display: flex; flex-direction: column; gap: 5px; }
.kk-aform-col .lbl { font-size: 12.5px; font-weight: 600; color: var(--kk-ink); }
.kk-ainput { border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-sm); padding: var(--kk-s-2) 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: var(--kk-s-2); border: 1px solid var(--kk-border); background: var(--kk-bg); border-radius: var(--kk-r-md); padding: var(--kk-s-2) var(--kk-s-3); margin: 0 0 var(--kk-s-3); }
.kk-dest-search .ic { width: 16px; height: 16px; color: var(--kk-text-soft); flex-shrink: 0; }
.kk-dest-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 14px; font-family: var(--kk-font-ui); color: var(--kk-text); }

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

/* ── FEED day-section headers (#11) ──────────────────────────────────────── */
/* A section label in the feed (Saved) reads like the day headings beside it:
   one type rule for both, so they cannot drift apart. */
.kk-day-head,
.kk-group-head.is-label .g-name,
.kk-group-head.is-label .g-count { font-family: var(--kk-font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--kk-text-soft); }
.kk-day-head { padding: var(--kk-s-4) var(--kk-s-4) 7px; border-top: 1px solid var(--kk-line); }
.kk-group-head.is-label { align-items: center; margin-bottom: var(--kk-s-2); }
.kk-group-head.is-label .g-name { padding: 0; border: 0; background: none; cursor: pointer; }

.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-ulink { color: var(--kk-ink); text-decoration: none; }
.kk-ulink:hover { color: var(--kk-ink); text-decoration: underline; }
.kk-arow-form { display: flex; align-items: center; gap: var(--kk-s-2); }
.kk-usage-sub { display: flex; align-items: center; gap: var(--kk-s-2); flex-wrap: wrap; margin-top: var(--kk-s-2); font-family: var(--kk-font-mono); font-size: var(--kk-fs-meta); color: var(--kk-text-soft); }
.kk-ustatus { font-family: var(--kk-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px var(--kk-s-2); border-radius: 6px; border: 1px solid var(--kk-border); color: var(--kk-text-soft); }
.kk-ustatus.active { color: var(--kk-public, #3a5a3f); background: #f0f6f1; border-color: #cfe0d4; }
.kk-ustatus.suspended { color: var(--kk-danger, #9b2c2c); background: #fbf0ef; border-color: #eccfcb; }
.kk-ustatus.admin { color: var(--kk-on-primary); background: var(--kk-primary); border-color: var(--kk-primary); }
.kk-usage-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--kk-text-soft); text-decoration: none; margin-bottom: var(--kk-s-4); }
.kk-usage-back:hover { color: var(--kk-ink); }
.kk-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kk-s-3); 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: var(--kk-s-1); }
.kk-stat .m { font-size: var(--kk-fs-micro); color: var(--kk-text-soft); margin-top: 3px; }
.kk-usage-card { padding: 6px var(--kk-s-4) !important; }
.kk-bd { display: flex; align-items: center; gap: var(--kk-s-3); 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: var(--kk-fs-meta); font-weight: 600; color: var(--kk-text-soft); min-width: 28px; text-align: right; }
.kk-bd-empty { padding: 14px 0; font-size: 13px; color: var(--kk-faint); }
.kk-space-tags { display: flex; flex-wrap: wrap; gap: 7px; padding: var(--kk-s-3) 0; }
.kk-space-tag { font-family: var(--kk-font-mono); font-size: var(--kk-fs-meta); color: var(--kk-ink); background: var(--kk-fill, #f1f0ec); border-radius: 6px; padding: var(--kk-s-1) 9px; }
.kk-usage-note { display: flex; align-items: center; gap: 7px; margin-top: var(--kk-s-5); font-size: var(--kk-fs-meta); color: var(--kk-faint); }

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

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

.kk-cgroup { margin-bottom: var(--kk-s-5); }
.kk-cgroup-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--kk-s-2); flex-wrap: wrap; }
.kk-cgroup-head .t { font-family: var(--kk-font-display); font-size: 16px; font-weight: 700; color: var(--kk-ink); text-decoration: none; }
.kk-cgroup-head .t:hover { color: var(--kk-ink); }
.kk-cgroup-head .m { font-family: var(--kk-font-mono); font-size: var(--kk-fs-micro); color: var(--kk-faint); }
.kk-crow { display: flex; gap: 11px; align-items: flex-start; padding: var(--kk-s-3) 14px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); background: var(--kk-card); margin-bottom: var(--kk-s-2); }
.kk-crow:hover { border-color: var(--kk-secondary); }
.kk-crow-link { display: flex; gap: 11px; align-items: flex-start; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.kk-crow-btn { cursor: pointer; border: none; }
.kk-crow-btn:hover { filter: brightness(.96); }
.kk-crow-ic { flex: 0 0 auto; color: var(--kk-text-soft); margin-top: 1px; }
.kk-crow-body { flex: 1; min-width: 0; }
.kk-crow-body .q { display: block; font-size: 12.5px; color: var(--kk-ink); border-left: 2px solid var(--kk-secondary-soft); padding-left: var(--kk-s-2); margin-bottom: var(--kk-s-1); }
.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: var(--kk-fs-micro); color: var(--kk-faint); margin-top: var(--kk-s-1); }
.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 var(--kk-s-2); border-radius: 5px; white-space: nowrap; }
.kc-badge.open { color: var(--kk-ink, #12181f); background: var(--kk-secondary-soft); }
.kc-badge.resolved { color: #3a5a3f; background: #f0f6f1; }

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

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

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

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

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

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

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

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

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

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

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

/* disclosure (details) inside a lite card */
.kk-lp-disc { margin-top: var(--kk-s-3); }
.kk-lp-card > details.kk-lp-disc { margin-top: 0; }
.kk-lp-disc > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--kk-s-2); cursor: pointer; list-style: none; font: 600 12.5px var(--kk-font-ui); color: var(--kk-ink); padding-top: var(--kk-s-3); border-top: 1px solid var(--kk-line); }
/* The open/close marker: without it a disclosure reads as a heading. */
.kk-lp-disc > summary::after { content: "+"; color: var(--kk-text-soft); font-weight: 400; }
.kk-lp-disc[open] > summary::after { content: "\2212"; }
.kk-lp-card.kk-lp-disc > summary { border-top: 0; padding-top: 0; color: var(--kk-ink); }
.kk-lp-disc > summary::-webkit-details-marker { display: none; }
.kk-lp-disc-body { display: flex; gap: var(--kk-s-2); flex-wrap: wrap; padding-top: var(--kk-s-3); }

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

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

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

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

@media (max-width: 560px) {
  .kkapp .kpalette { padding: 0; align-items: stretch; }
  .kkapp .kpalette-box { width: 100%; max-height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; }
  .kkapp .kpalette-query { position: sticky; top: 0; z-index: 1; min-height: 64px; }
  .kkapp .kpalette-list { max-height: calc(100dvh - 64px); padding: var(--kk-s-2); }
  .kkapp .kp-item > a,
  .kkapp .kp-item > button { min-height: 64px; grid-template-columns: 48px minmax(0, 1fr); }
  .kkapp .kp-action { display: none; }
  /* One reader row: menu + current Page + swipeable icon actions + overflow. */
  .kk-deck-topbar { height: 56px; min-height: 56px; flex-wrap: nowrap; gap: 6px; padding: 6px var(--kk-s-2); }
  /* Calm one-line header: collapse the breadcrumb to just the current page,
     truncated. Ancestors stay reachable via the drawer nav + back-to-dashboard. */
  .kk-deck-topbar .kk-crumb { flex: 0 1 38vw; max-width: 38vw; font-size: 14px; }
  .kk-deck-topbar .kk-crumb > a,
  .kk-deck-topbar .kk-crumb > .sp,
  .kk-deck-topbar .kk-crumb > .sep { display: none; }
  .kk-deck-topbar .kk-crumb > .cur { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--kk-ink); }
  .kk-deck-actions { min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; gap: var(--kk-s-1); }
  .kk-deck-actionrail {
    min-width: 0; flex: 1 1 auto; gap: var(--kk-s-1);
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
  }
  .kk-deck-actionrail::-webkit-scrollbar { display: none; }
  .kk-deck-actionrail > * { flex: 0 0 auto; }
  .kk-deck-vtoggle { padding: 0; background: transparent; }
  .kk-deck-vtoggle a { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .kk-deck-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .kk-deck-protected { display: inline-flex; }
  .kk-reader-overflow > summary { width: 44px; height: 44px; }
  /* #7 ≥44px touch targets on the primary mobile controls */
  .kk-mtop .kk-burger { width: 44px; height: 44px; }
  .kk-deck-vtoggle a { min-height: 44px; display: inline-flex; align-items: center; }
  .kk-deck-btn { min-height: 44px; }
  .kk-rp-tab, .kk-rp-collapse { min-width: 44px; min-height: 44px; }
  .kk-readwrap { padding-bottom: 96px; }
  .kk-rpanel {
    position: fixed;
    inset: auto 0 0;
    z-index: 210;
    width: 100%;
    max-height: min(92dvh, 760px);
    margin: 0;
    padding: 0 var(--kk-s-3) env(safe-area-inset-bottom);
    overflow: hidden;
    background: var(--kk-bg);
    border: 1px solid var(--kk-border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, .2);
  }
  .kk-rpanel .kk-rp-rail { min-height: 56px; padding: 6px 0; }
  .kk-rpanel:not(.is-collapsed) .kk-rp-rail { border-bottom: 1px solid var(--kk-line); }
  .kk-rpanel:not(.is-collapsed) { animation: kk-pin-sheet-in 180ms var(--kk-ease-settle); }
  .kk-rpanel:not(.is-collapsed) .kk-rp-body { display: block; max-height: calc(min(92dvh, 760px) - 56px); overflow-y: auto; padding: 14px 2px calc(22px + env(safe-area-inset-bottom)); }
  .kk-rpanel[data-active-tab="protected-sections"]:not(.is-collapsed) .kk-rp-rail { display: none; }
  .kk-rpanel[data-active-tab="protected-sections"]:not(.is-collapsed) .kk-rp-body { max-height: min(78dvh, 680px); padding-top: 0; }
  .kk-rpanel[data-active-tab="protected-sections"] .kprotected-mobile-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin: 0 0 14px; background: var(--kk-bg); border-bottom: 1px solid var(--kk-line); }
  .kk-rpanel[data-active-tab="protected-sections"] [data-protected-sections-sheet] { min-height: min(86dvh, 700px); }
  .kk-rpanel[data-active-tab="protected-sections"] .kprotected-desktop-head { display: none; }
  [data-protected-sections-close] { min-width: 44px; min-height: 44px; }
  .kprotected-mobile-head h2 { margin: 0; font: 650 16px/1.2 var(--kk-font-ui); }
  /* fullbar buttons → 44px TALL tap targets; width stays content-sized so ~7
     controls fit one full-width row instead of wrapping (forcing 44px WIDE
     overflowed the strip into two rows). space-around gives the tap spacing. */
  .kk-fb-btn, .kk-fb-nav { min-height: 44px; justify-content: center; }
  /* #5/#6 analytics: 2-up KPI tiles + a data table that scrolls within itself */
  .kk-an-kpis { grid-template-columns: repeat(2, 1fr); }
  .kk-an-table { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

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

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

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

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

@media (max-width: 720px) {
  .kkapp .tracked-links-toolbar { align-items: stretch; flex-direction: column; }
  .kkapp .tracked-links-filters { align-items: stretch; flex-direction: column; }
  .kkapp .tracked-links-filters label,
  .kkapp .tracked-links-filters select { width: 100%; flex-basis: auto; }
  /* minmax(0, …), not 1fr: a bare 1fr track has an `auto` minimum, and the row
     grew to its nowrap public URL + destination — the Links index laid out at
     855px on a 375px phone (PR #84, 2026-10-10). */
  .kkapp .tracked-link-row { grid-template-columns: minmax(0, 1fr); }
  .kkapp .tracked-link-metrics {
    grid-template-columns: auto 1fr auto 1fr;
    padding: var(--kk-s-3) 0 0;
    border-top: 1px solid var(--kk-line);
    border-left: 0;
  }
  .kkapp .tracked-link-metrics .kk-btn { grid-column: 1 / -1; }
  .kkapp .tracked-link-form-grid,
  .kkapp .tracked-link-campaign-grid { grid-template-columns: 1fr; }
  .kkapp .tracked-link-form .tracked-link-wide { grid-column: auto; }
  .kkapp .tracked-link-prefix-row { grid-template-columns: 1fr; }
  .kkapp .tracked-link-prefix-row code {
    min-height: 36px;
    border-right: 1px solid var(--kk-border);
    border-bottom: 0;
    border-radius: var(--kk-r-sm) var(--kk-r-sm) 0 0;
  }
  .kkapp .tracked-link-prefix-row input { border-radius: 0 0 var(--kk-r-sm) var(--kk-r-sm); }
}

/* ── Board Addon (slot 71) ──────────────────────────────────────────────────
   The canvas itself is Svelte Flow (app/javascript/board), which brings its own
   stylesheet and owns pan/zoom/selection. What stays here is only the chrome
   AROUND it — the toolbar row and the empty states — plus the height the canvas
   mounts into. Mobile-first: the canvas contains its own overflow so the PAGE
   never scrolls sideways. The tool palette floats over the canvas's bottom edge
   (.kk-board-tools), so canvas content must not rely on that strip. */
.kkapp .kk-board-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kk-s-3); margin-bottom: var(--kk-s-3); }
.kkapp .kk-board-pick { display: flex; align-items: center; gap: var(--kk-s-2); }
.kkapp .kk-board-pick-l { font-size: var(--kk-fs-meta); color: var(--kk-text-soft); }
.kkapp .kk-board-count { font-size: var(--kk-fs-meta); color: var(--kk-text-soft); }
.kkapp .kk-board-new { position: relative; }
.kkapp .kk-board-new-trigger { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); color: var(--kk-text); background: var(--kk-card); cursor: pointer; list-style: none; }
.kkapp .kk-board-new-trigger::-webkit-details-marker { display: none; }
.kkapp .kk-board-new[open] .kk-board-new-trigger { color: var(--kk-primary); border-color: var(--kk-primary); }
.kkapp .kk-board-new-popover { position: absolute; z-index: 40; top: calc(100% + var(--kk-s-2)); left: 0; display: flex; align-items: end; gap: var(--kk-s-2); min-width: 290px; padding: var(--kk-s-3); border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); background: var(--kk-card); box-shadow: var(--kk-shadow-lg); }
.kkapp .kk-board-new-popover label { display: grid; flex: 1; gap: var(--kk-s-1); font-size: var(--kk-fs-micro); color: var(--kk-text-soft); }
.kkapp .kk-board-new-popover input { width: 100%; min-width: 180px; height: 32px; padding: 0 var(--kk-s-2); border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); color: var(--kk-text); background: var(--kk-card); }
.kkapp .kk-board-options-popover { display: grid; min-width: 310px; }
.kkapp .kk-board-options-popover form { display: flex; align-items: end; gap: var(--kk-s-2); }
.kkapp .kk-board-options-popover form:first-child label { display: grid; flex: 1; gap: var(--kk-s-1); font-size: var(--kk-fs-micro); color: var(--kk-text-soft); }
.kkapp .kk-board-chrome-actions { display:flex;align-items:center;gap:var(--kk-s-1);margin-left:auto; }
.kkapp .kk-board-chrome-action,.kkapp .kk-board-chrome-menu>summary { display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;box-sizing:border-box;padding:0 10px;border:1px solid var(--kk-border);border-radius:var(--kk-r-sm);background:var(--kk-bg);color:var(--kk-text);font-size:var(--kk-fs-meta);font-weight:650;text-decoration:none;cursor:pointer; }
.kkapp .kk-board-chrome-menu { position:relative; }
.kkapp .kk-board-chrome-menu>summary { list-style:none; }.kkapp .kk-board-chrome-menu>summary::-webkit-details-marker{display:none}
.kkapp .kk-board-chrome-menu[open]>summary,.kkapp .kk-board-chrome-action:hover{background:var(--kk-fill-soft)}
.kkapp .kk-board-chrome-menu-body { position:absolute;top:calc(100% + 6px);right:0;z-index:12;display:grid;min-width:190px;padding:6px;border:1px solid var(--kk-border);border-radius:9px;background:var(--kk-bg);box-shadow:var(--kk-shadow-md); }
.kkapp .kk-board-chrome-menu-body a,.kkapp .kk-board-chrome-menu-body button { min-height:34px;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--kk-text);font:600 var(--kk-fs-meta) var(--kk-font-ui);text-align:left;text-decoration:none; }
.kkapp .kk-board-chrome-menu-body a:hover{background:var(--kk-fill-soft)}.kkapp .kk-board-chrome-menu-body button:disabled{color:var(--kk-text-soft);cursor:not-allowed}
.kkapp .kk-board-chrome-overflow>summary{width:34px;padding:0}
.kkapp .kk-board {
  height: min(70vh, 560px);
  max-width: 100%;
  overflow: hidden;
  background: var(--kk-card);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-r-md, 10px);
}
/* Wraps, and its selects may shrink. The link form is two selects plus an arrow
   plus a button: on one line that is 599px, which at a 375px viewport scrolled
   the PAGE sideways — the one thing the mobile rule forbids outright. */
.kkapp .kk-board-add { display: flex; align-items: center; gap: var(--kk-s-2); flex-wrap: wrap; max-width: 100%; }
.kkapp .kk-board-add select { min-width: 0; max-width: 100%; flex: 1 1 8rem; }
.kkapp .kk-board-add select,
.kkapp .kk-board-add button,
.kkapp .kk-board-page-list { display: grid; gap: var(--kk-s-1); min-width: min(280px, 72vw); max-height: 220px; overflow: auto; }
/* Slot 71 — the tools float OVER the canvas, in one positioned stage.
   Previously four form rows stacked above it, which pushed the canvas below the
   fold on a phone and read as a form rather than a surface. */
/* Sidebar Board switch — sits beside "+ New folder" so it is reachable without
   scrolling past the file list (founder, 2026-08-17). Matches the newfolder
   button's language rather than inventing a third. */
.kkapp .kk-boardswitch-form { margin-top: var(--kk-s-1); }
.kkapp .kk-boardswitch {
  display: flex; align-items: center; gap: var(--kk-s-2); width: 100%;
  min-height: 44px; padding: 0 10px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--kk-r-sm, 8px);
  background: transparent; color: var(--kk-text-soft);
  font-size: 13px; font-weight: 600; text-align: left;
}
.kkapp .kk-boardswitch:hover { background: var(--kk-line); color: var(--kk-text); }
.kkapp .kk-boardswitch.is-on { color: var(--kk-text); }
/* A dot, not a word: "on" is state, and state reads faster as a mark. */
.kkapp .kk-boardswitch.is-on::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--kk-outcome, #1f7a68);
}
/* Hint shown over an empty canvas when the folder has nothing placeable. Sits
   above the tray so it reads as an explanation, not a card. */
.kkapp .kk-board-hint {
  position: absolute; z-index: 3; left: 50%; top: 42%; transform: translate(-50%, -50%);
  margin: 0; max-width: 34ch; text-align: center;
  color: var(--kk-text-soft); font-size: 13.5px; line-height: 1.5;
  pointer-events: none;
}
.kkapp .kk-board-stage { position: relative; }
/* Expand — fills the window BELOW the topbar (founder ask, 2026-08-16). Not the
   Fullscreen API: that hides the topbar and account chrome, turning a tab into a
   mode people get lost in. This is a layout change, and Escape leaves it. */
.kkapp .kk-canvas-workspace.is-expanded {
  position: fixed; inset: var(--kk-topbar-h) 0 0 var(--kk-board-left, 0px); z-index: 60;
  background: var(--kk-bg); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) 0; gap: 0;
}
.kkapp .kk-canvas-workspace.is-expanded .kk-board-stage { min-height: 0; }
.kkapp .kk-canvas-workspace.is-expanded .kk-board { height: 100%; border-radius: 0; border-left: 0; border-right: 0; }
body.kk-board-locked { overflow: hidden; }
.kkapp .kk-board-expand {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-pill);
  background: var(--kk-bg); color: var(--kk-text);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.kkapp .kk-board-expand-close { display: none; }
.kkapp .kk-board-expand[aria-pressed="true"] .kk-board-expand-open { display: none; }
.kkapp .kk-board-expand[aria-pressed="true"] .kk-board-expand-close { display: inline-flex; }
.kkapp .kk-canvas-workspace.is-expanded .kk-board-expand { top: 10px; right: calc(10px + env(safe-area-inset-right, 0px)); }
/* z-index 60 sits BELOW the rail (80) on purpose — expanding must never cover
   the way out of the board. */

.kkapp .kk-board-tools {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 4; display: flex; align-items: center; gap: 2px; max-width: calc(100% - 20px);
  padding: 5px; border: 1px solid color-mix(in srgb,#fff 10%,transparent); border-radius: 11px;
  background: #111; box-shadow: 0 8px 24px rgba(0,0,0,.24);
  overflow: visible; scrollbar-width: none;
}
.kkapp .kk-board-tools::-webkit-scrollbar { display: none; }
.kkapp .kk-tool { position: relative; }
.kkapp .kk-tool-action {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 5px; background: transparent; color: #fff;
  cursor: pointer; box-shadow: none;
}
.kkapp .kk-tool-action:hover, .kkapp .kk-tool-action:focus-visible { background: #292929; color: #fff; }
.kkapp .kk-tool-action:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.kkapp .kk-tool-action.is-active { background: #4b4744; color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb,#fff 8%,transparent); }
.kkapp .kk-tool-separator { width: 1px; height: 24px; margin: 0 5px; background: color-mix(in srgb,#fff 18%,transparent); }
.kkapp .kk-tool-action[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 11px); transform: translateX(-50%) translateY(3px); z-index: 8; padding: 5px var(--kk-s-2); border-radius: 5px; background: #111; color: #fff; font: 600 10px/1.2 var(--kk-font-mono); letter-spacing: .02em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms ease,transform 120ms ease; }
.kkapp .kk-tool-action[data-tooltip]:hover::after,.kkapp .kk-tool-action[data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.kkapp .kk-tool > summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: #fff; white-space: nowrap; box-shadow: none;
}
.kkapp .kk-tool-icon { width: 17px; height: 17px; flex: 0 0 auto; stroke-width: 1.8; }
.kkapp .kk-tool-label { display: none; }
.kkapp .kk-tool > summary::before { display: none; }
.kkapp .kk-tool > summary::-webkit-details-marker { display: none; }
.kkapp .kk-tool[open] > summary,.kkapp .kk-tool > summary:hover { background: #4b4744; color: #fff; }
.kkapp .kk-tool > summary::before { display: none; }
/* The body opens UPWARD: the bar sits at the bottom of the canvas, so a
   downward panel would fall off it. */
.kkapp .kk-tool-body {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: min(92vw, 420px);
  padding: var(--kk-s-3); border: 1px solid var(--kk-border); border-radius: var(--kk-r-md, 12px);
  max-height: min(60vh, 420px); overflow: auto;
  background: var(--kk-bg); box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.kkapp .kk-tool-region .kk-tool-body { padding: var(--kk-s-2); border-radius: var(--kk-r-md); }
.kkapp .kk-tool-region .kk-board-add { flex-wrap: nowrap; gap: var(--kk-s-2); }
.kkapp .kk-tool-region .kk-board-frame-input,
.kkapp .kk-tool-region .kk-board-add button { min-height: 36px; height: 36px; font-size: 13px; }
.kkapp .kk-tool-region .kk-board-frame-input { width: 220px; padding: 0 10px; }
.kkapp .kk-tool-region .kk-board-add button { padding: 0 13px; white-space: nowrap; }
.kkapp .kk-tool-help {
  max-width: 34ch; margin: 0 0 10px; color: var(--kk-text-soft);
  font-size: var(--kk-fs-micro); line-height: 1.45;
}
.kkapp .kk-tool-empty {
  max-width: 30ch; margin: 0; color: var(--kk-text-soft);
  font-size: var(--kk-fs-meta); line-height: 1.45;
}
@media (max-width: 640px) {
  /* The minimap is a desktop affordance: on a phone it covers the very cards it
     is meant to help you find — and a card carrying an intake form is tall
     enough that the overlap is guaranteed. */
  .kkapp .kk-board .svelte-flow__minimap { display: none; }
  /* The zoom controls would stack under the floating tool palette here, so they
     move to the canvas's free top-left corner (Expand holds the top-right). */
  .kkapp .kk-board .svelte-flow__controls { top: 10px; bottom: auto; }

  /* On a phone the pill would exceed the viewport, so it becomes a full-width
     bar and its panels stop trying to centre on a 44px summary. */
  .kkapp .kk-board-tools { left: 10px; right: 10px; bottom: 92px; transform: none; max-width: none; justify-content: flex-start; overflow-x: auto; }
  .kkapp .kk-canvas-workspace.is-rail-collapsed .kk-board-tools { right: 66px; }
  .kkapp .kk-tool-action,.kkapp .kk-tool > summary { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .kkapp .kk-tool-body {
    position: fixed; left: 10px; right: 10px; bottom: 210px; transform: none;
    width: auto; max-width: none;
  }
  .kkapp .kk-canvas-workspace.is-rail-collapsed .kk-tool-body { right: 66px; }
}

/* The Canvas and its context are one workspace. The rail is outside Svelte
   Flow, so pan and zoom can never enlarge it or leave an editor stranded. */
.kkapp .kk-canvas-workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--kk-s-3);
  align-items: stretch; position: relative;
}
.kkapp .kk-canvas-workspace.is-rail-collapsed { grid-template-columns: minmax(0, 1fr) 48px; }
.kkapp .kk-canvas-workspace .kk-board-stage { min-width: 0; }
.kkapp .kk-canvas-rail {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-lg, 12px); background: var(--kk-bg);
  transition: width 160ms ease, transform 160ms ease;
}
.kkapp .kk-canvas-rail-toggle {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--kk-text-soft); cursor: pointer;
}
.kkapp .kk-canvas-rail-toggle:hover,.kkapp .kk-canvas-rail-toggle:focus-visible { color: var(--kk-text); background: var(--kk-fill); }
.kkapp .kk-canvas-rail-toggle:focus-visible { outline: 2px solid var(--kk-accent-fill); outline-offset: -2px; }
.kkapp .kk-canvas-rail-toggle-open { display: none; }
.kkapp .kk-canvas-rail-tabs {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px 42px 5px 5px;
  border-bottom: 1px solid var(--kk-line); background: var(--kk-fill-soft);
}
.kkapp .kk-canvas-rail-tabs.has-history { grid-template-columns: repeat(5, 1fr); }
.kkapp .kk-canvas-rail-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; min-height: 34px; padding: 0 7px; border: 0; border-radius: 6px;
  background: transparent; color: var(--kk-text-soft); font-size: var(--kk-fs-micro); cursor: pointer;
}
.kkapp .kk-canvas-rail-tab:hover { color: var(--kk-text); background: var(--kk-fill); }
.kkapp .kk-canvas-rail-tab.is-active { color: var(--kk-ink); background: var(--kk-bg); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.kkapp .kk-canvas-rail-panel { min-height: 0; overflow-y: auto; padding: 18px var(--kk-s-4); }
.kkapp .kk-canvas-rail-panel[hidden] { display: none; }
.kkapp .kk-canvas-rail-kicker { color: var(--kk-text-soft); font: 600 9px var(--kk-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.kkapp .kk-canvas-rail-panel h2 { margin: 5px 0 var(--kk-s-2); color: var(--kk-ink); font-size: 15px; }
.kkapp .kk-canvas-rail-panel p { margin: 0 0 14px; color: var(--kk-text-soft); font-size: var(--kk-fs-meta); line-height: 1.5; }
.kkapp .kk-canvas-rail-panel small { display: block; margin-top: var(--kk-s-2); color: var(--kk-text-soft); font-size: 10px; line-height: 1.4; }
.kkapp .kk-canvas-rail-composer { position: relative; display: block; }
.kkapp .kk-canvas-rail-composer textarea { width: 100%; min-height: 92px; resize: vertical; padding: 10px 38px 10px 10px; border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-fill-soft); color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
.kkapp .kk-canvas-rail-composer button { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: var(--kk-ink); color: var(--kk-bg); opacity: .45; }
.kkapp .kk-canvas-rail-composer button:not(:disabled) { opacity: 1; cursor: pointer; }
.kkapp .kk-canvas-ask-answer { display: grid; gap: var(--kk-s-2); margin-bottom: var(--kk-s-3); padding: 11px; border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-fill-soft); }
.kkapp .kk-canvas-ask-copy p { margin: 0 0 var(--kk-s-2); color: var(--kk-text); }
.kkapp .kk-canvas-ask-copy p:last-child { margin-bottom: 0; }
.kkapp .kk-canvas-ask-answer footer { display: flex; align-items: center; gap: 5px; padding-top: var(--kk-s-2); border-top: 1px solid var(--kk-line); color: var(--kk-text-soft); font-size: 10px; }
.kkapp .kk-canvas-ask-error { padding: var(--kk-s-2); border-radius: 7px; background: color-mix(in srgb,var(--kk-blocker) 9%,var(--kk-paper)); color: var(--kk-blocker); }
.kkapp .kk-canvas-rail-empty { display: flex; align-items: center; gap: var(--kk-s-2); padding: var(--kk-s-3); border: 1px dashed var(--kk-line); border-radius: var(--kk-r-sm); color: var(--kk-text-soft); font-size: var(--kk-fs-micro); }
.kkapp .kk-board-history { display: grid; gap: 0; }
.kkapp .kk-board-history-entry { position: relative; display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: var(--kk-s-2); padding: 10px 0; border-bottom: 1px solid var(--kk-line); }
.kkapp .kk-board-history-marker { width: 7px; height: 7px; margin-top: 5px; border: 2px solid var(--kk-bg); border-radius: 50%; background: var(--kk-secondary); box-shadow: 0 0 0 1px var(--kk-line); }
.kkapp .kk-board-history-copy { min-width: 0; }
.kkapp .kk-board-history-title { display: flex; align-items: center; gap: 6px; color: var(--kk-text); font-size: var(--kk-fs-meta); }
.kkapp .kk-board-history-title .pill { padding: 2px 5px; font-size: 8px; }
.kkapp .kk-board-history-entry small { margin-top: 3px; }
.kkapp .kk-board-history-entry form { align-self: center; }
.kkapp .kk-board-history-note { margin-top: var(--kk-s-3) !important; padding: 9px; border-radius: 7px; background: var(--kk-fill-soft); }
.kkapp .kk-canvas-comments-frame { display: grid; gap: var(--kk-s-3); max-height: min(620px,70vh); overflow-y: auto; }
.kkapp .kk-canvas-comments-empty { display: grid; justify-items: center; gap: var(--kk-s-2); padding: var(--kk-s-5) var(--kk-s-3); border: 1px dashed var(--kk-line); border-radius: var(--kk-r-sm); color: var(--kk-text-soft); text-align: center; }
.kkapp .kk-canvas-comments-empty p,.kkapp .kk-canvas-comments-read-only { margin: 0; }
.kkapp .kk-canvas-comments-head h3 { margin: var(--kk-s-1) 0 0; font-size: 14px; }
.kkapp .kk-canvas-comment-threads { display: grid; gap: 10px; }
.kkapp .kk-canvas-comment { padding: 10px; border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-bg); }
.kkapp .kk-canvas-comment header { display: flex; align-items: center; gap: 6px; color: var(--kk-text-soft); font-size: 10px; }
.kkapp .kk-canvas-comment header strong,.kkapp .kk-canvas-comment-reply strong { color: var(--kk-text); }
.kkapp .kk-canvas-comment-body p,.kkapp .kk-canvas-comment-reply p { margin: 6px 0; color: var(--kk-text); }
.kkapp .kc-markdown > :first-child { margin-top: 0; }
.kkapp .kc-markdown > :last-child { margin-bottom: 0; }
.kkapp .kc-markdown p { margin: 0 0 0.55em; }
.kkapp .kc-markdown ul,.kkapp .kc-markdown ol { margin: 0.45em 0; padding-left: 1.5em; }
.kkapp .kc-markdown ul { list-style: disc; }
.kkapp .kc-markdown ol { list-style: decimal; }
.kkapp .kc-markdown blockquote { margin: 0.55em 0; padding-left: 0.8em; border-left: 2px solid var(--kk-line); color: var(--kk-text-soft); }
.kkapp .kc-markdown code { padding: 0.08em 0.3em; border-radius: var(--kk-r-xs); background: var(--kk-fill-soft); font: 0.9em/1.4 var(--kk-font-mono); }
.kkapp .kc-markdown pre { max-width: 100%; overflow-x: auto; padding: 0.65em; border-radius: 7px; background: var(--kk-fill-soft); }
.kkapp .kc-markdown pre code { padding: 0; background: transparent; }
.kkapp .kc-markdown a { color: var(--kk-primary); text-decoration: underline; text-underline-offset: 2px; }
.kkapp .kk-canvas-comment-reply { margin-top: var(--kk-s-2); padding: var(--kk-s-2); border-left: 2px solid var(--kk-line); font-size: var(--kk-fs-micro); }
.kkapp .kk-canvas-comment-composer,.kkapp .kk-canvas-comment-reply-form { display: flex; align-items: end; gap: 6px; }
.kkapp .kk-canvas-comment-composer textarea,.kkapp .kk-canvas-comment-reply-form input { box-sizing: border-box; min-width: 0; flex: 1; padding: var(--kk-s-2); border: 1px solid var(--kk-line); border-radius: 7px; background: var(--kk-fill-soft); color: var(--kk-text); font: var(--kk-fs-meta)/1.45 var(--kk-font-ui); }
.kkapp .kk-canvas-comment-composer textarea { resize: vertical; }
.kkapp .kk-canvas-comment-actions { display: flex; gap: 6px; margin-top: var(--kk-s-2); }
.kkapp .kk-canvas-comments-error { padding: var(--kk-s-2); border-radius: 7px; background: color-mix(in srgb,var(--kk-blocker) 9%,var(--kk-paper)); color: var(--kk-blocker); }
.kkapp .kk-canvas-selection-summary { padding: var(--kk-s-3); border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-fill-soft); }
.kkapp .kk-canvas-selection-summary[hidden] { display: none; }
.kkapp .kk-canvas-selection-summary h3 { margin: 5px 0 var(--kk-s-1); color: var(--kk-text); font-size: 14px; }
.kkapp .kk-canvas-selection-summary p { margin: 0; font: 500 10px var(--kk-font-mono); overflow-wrap: anywhere; }
.kkapp .kk-canvas-inspector { display: grid; gap: 10px; margin-top: var(--kk-s-3); }
.kkapp .kk-canvas-inspector[hidden],.kkapp .kk-canvas-inspector [hidden] { display: none; }
.kkapp .kk-canvas-inspector label { display: grid; gap: 5px; color: var(--kk-text-soft); font-size: 10px; font-weight: 650; }
.kkapp .kk-canvas-inspector input[type="text"],.kkapp .kk-canvas-inspector textarea,.kkapp .kk-canvas-inspector select { box-sizing: border-box; width: 100%; border: 1px solid var(--kk-line); border-radius: 7px; background: var(--kk-bg); color: var(--kk-ink); font: var(--kk-fs-meta)/1.45 var(--kk-font-ui); padding: 7px var(--kk-s-2); }
.kkapp .kk-canvas-inspector textarea { resize: vertical; }
.kkapp .kk-canvas-inspector-check { display: flex; grid-template-columns: none; align-items: center; gap: 7px; }
.kkapp .kk-canvas-inspector-error { margin: 0; padding: var(--kk-s-2); border: 1px solid color-mix(in srgb,var(--kk-blocker) 35%,transparent); border-radius: 7px; background: color-mix(in srgb,var(--kk-blocker) 9%,var(--kk-paper)); color: var(--kk-blocker); font-size: var(--kk-fs-micro); }
.kkapp .kk-canvas-workspace.is-rail-collapsed .kk-canvas-rail-toggle-close { display: none; }
.kkapp .kk-canvas-workspace.is-rail-collapsed .kk-canvas-rail-toggle-open { display: inline-flex; }
.kkapp .kk-canvas-workspace.is-rail-collapsed .kk-canvas-rail-toggle { right: 8px; }
.kkapp .kk-canvas-workspace.is-rail-collapsed .kk-canvas-rail-tabs { grid-template-columns: 1fr; gap: 2px; padding: 42px 5px 5px; border-bottom: 0; }
.kkapp .kk-canvas-workspace.is-rail-collapsed .kk-canvas-rail-tab span { display: none; }
.kkapp .kk-canvas-workspace.is-rail-collapsed .kk-canvas-rail-panel { display: none; }
@media (max-width: 900px) {
  .kkapp .kk-canvas-workspace,.kkapp .kk-canvas-workspace.is-rail-collapsed { grid-template-columns: 1fr; }
  .kkapp .kk-canvas-rail { position: absolute; z-index: 7; top: 8px; right: 8px; bottom: 8px; width: min(320px, calc(100% - 16px)); box-shadow: var(--kk-shadow-lg); }
  .kkapp .kk-canvas-workspace.is-rail-collapsed .kk-canvas-rail { width: 48px; box-shadow: var(--kk-shadow-sm); }
  /* The collapsed rail overlays the canvas's right edge here (8px + 48px), so
     Expand sits clear of it instead of underneath — otherwise the way into the
     larger canvas is unreachable on a phone. */
  .kkapp .kk-board-expand,
  .kkapp .kk-canvas-workspace.is-expanded .kk-board-expand { right: calc(64px + env(safe-area-inset-right, 0px)); }
}
@media (max-width: 1100px) {
  .kkapp .kk-canvas-rail-tab span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}
@media (prefers-reduced-motion: reduce) { .kkapp .kk-canvas-rail { transition: none; } }
/* Touch-first pointers (phones, tablets): every Board control reaches the 44px
   tap minimum. Desktop keeps the compact sizes. The object menus and region
   buttons are Svelte-scoped (0,3,1), so these selectors sit four classes deep. */
@media (pointer: coarse) {
  .kkapp .kk-canvas-rail-toggle,
  .kkapp .kk-board-new-trigger { width: 44px; height: 44px; }
  .kkapp .kk-canvas-rail-tab { min-height: 44px; min-width: 44px; }
  .kkapp .kk-canvas-rail-composer button { width: 44px; }
  .kkapp .kk-canvas-workspace .kk-board .svelte-flow__controls-button { width: 44px; height: 44px; }
  
}
.kkapp .kk-board-empty { padding: var(--kk-s-5); }
.kkapp .kk-board-empty-h { margin: 0 0 var(--kk-s-2); font-size: 16px; font-weight: 600; }
.kkapp .kk-board-empty p { margin: 0; color: var(--kk-text-soft); max-width: 60ch; }
.kkapp .kk-canvas-onboarding { margin-top: var(--kk-s-5); }
.kkapp .kk-canvas-onboarding-head { display: flex; align-items: end; justify-content: space-between; gap: var(--kk-s-4); margin-bottom: var(--kk-s-3); }
.kkapp .kk-canvas-onboarding-head h3 { margin: var(--kk-s-1) 0 0; font-size: 18px; }
.kkapp .kk-canvas-recipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: var(--kk-s-3); }
.kkapp .kk-canvas-recipe { display: flex; flex-direction: column; gap: 7px; padding: var(--kk-s-4); text-align: left; border: 1px solid var(--kk-line); }
.kkapp .kk-canvas-recipe:hover { border-color: var(--kk-secondary); box-shadow: var(--kk-shadow-sm); }
.kkapp .kk-canvas-recipe h3 { margin: 0; font-size: 16px; }
.kkapp .kk-canvas-recipe p { margin: 0; color: var(--kk-text-soft); font-size: 12.5px; }
.kkapp .kk-canvas-recipe-kicker { color: var(--kk-ink); font: 600 10px var(--kk-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.kkapp .kk-canvas-recipe-outcome { padding-top: 5px; border-top: 1px solid var(--kk-line); }
.kkapp .kk-canvas-recipe ol { margin: 2px 0 6px; padding-left: 18px; color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
.kkapp .kk-canvas-recipe button { align-self: flex-start; margin-top: auto; }
.kkapp .kk-recipe-sheet { width: min(760px, 100%); max-height: min(82vh, 760px); overflow: auto; }
.kkapp .kk-recipe-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kkapp .kk-recipe-impact { display: grid; grid-template-columns: 2fr repeat(4, minmax(70px, 1fr)); gap: var(--kk-s-2); margin: 0 0 var(--kk-s-4); }
.kkapp .kk-recipe-impact > div { display: grid; gap: 3px; min-width: 0; padding: 11px var(--kk-s-3); border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); background: var(--kk-fill-soft); }
.kkapp .kk-recipe-impact span { color: var(--kk-text-soft); font: 600 10px var(--kk-font-mono); letter-spacing: .04em; text-transform: uppercase; }
.kkapp .kk-recipe-impact strong { overflow-wrap: anywhere; color: var(--kk-ink); font-size: 13px; }
@media (max-width: 640px) {
  .kkapp .kk-canvas-onboarding-head { align-items: flex-start; flex-direction: column; }
  .kkapp .kk-recipe-gallery,.kkapp .kk-recipe-impact { grid-template-columns: 1fr; }
  .kkapp .kk-recipe-sheet { max-height: calc(100vh - 24px); padding: var(--kk-s-4); }
}
@media (max-width: 640px) {
  .kkapp .kk-board { height: 60vh; }
  .kkapp .kk-board-count { margin-left: 0; width: 100%; }
  .kkapp .kk-board-chrome-actions { margin-left:0;width:100%; }
  .kkapp .kk-board-chrome-action,.kkapp .kk-board-chrome-menu>summary { min-height:44px; }
}

/* The Board wall lives in the context rail beside the Canvas, never below or
   over it. It is a rail panel, not a second full-width card. */
.kkapp .kk-board-wall { margin: 0; padding: 0; }
.kkapp .kk-board-wall-clear { min-height: 44px; margin: 0 0 var(--kk-s-2); }
.kkapp .kk-board-wall-h { margin: 0 0 var(--kk-s-1); font-size: 15px; font-weight: 600; }
.kkapp .kk-board-wall-note { margin: 0 0 var(--kk-s-3); font-size: var(--kk-fs-meta); color: var(--kk-text-soft); }
.kkapp .kk-board-wall-log {
  max-height: 200px;
  margin: 0 0 var(--kk-s-3);
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.kkapp .kk-board-wall-log li { padding: var(--kk-s-1) 0; font-size: 14px; }
.kkapp .kk-board-wall-log b { margin-right: var(--kk-s-2); color: var(--kk-text-soft); font-weight: 600; }
.kkapp .kk-board-wall-form { display: flex; gap: var(--kk-s-2); }
.kkapp .kk-board-wall-form input {
  flex: 1;
  min-width: 0;
  padding: 0 var(--kk-s-3);
  font-size: var(--kk-fs-body);
  color: var(--kk-text);
  background: var(--kk-bg);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-r-sm, 8px);
}

.kkapp .kk-board-frame-input { min-height: 44px; font-size: var(--kk-fs-body); padding: 0 10px; border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm, 8px); background: var(--kk-bg); color: var(--kk-text); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

   Everything listed was MEASURED under 44px at 375x812 on 2026-08-16 —
   .kk-btn-sm at 30px, the popover rows at ~32px — not assumed. Adding a control
   to the shell means adding it here; mobile_tap_target_contract_test reads this
   block by its marker comment and fails when a listed control goes missing.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .kkapp .kk-btn-sm,
  .kkapp .kk-pmenu-item,
  .kkapp .kk-view,
  .kkapp .kk-iact,
  .kkapp .crumb-up,
  .kkapp .kk-nav a,
  .kkapp .kk-dashboard-toggle,
  .kkapp .kk-space-lnk,
  .kkapp .kk-space-chev,
  .kkapp .kk-space-favorite,
  .kkapp .kk-space-heading-actions a,
  .kkapp .kk-sfilter-tune,
  .kkapp .kk-sfilter-seg button,
  .kkapp .kk-sfilter-row,
  .kkapp .kk-sfilter-chip,
  .kkapp .kk-filter-empty-btn,
  .kkapp .kk-sfilter-sug,
  .kkapp .kk-folder,
  .kkapp .kk-user .gear,
  /* 44px of HIT area, ~32px of painted pill. The floor is a tap target, not a
     paint height — applying it literally made the filter strip read as a
     toolbar (founder, 2026-08-18: "why did the height increase?"). The active
     pill clips to its padding box so only the middle paints. */
  .kkapp .kk-space-kind-tabs a,
  /* Space filter chips — the full chain outranks the lean desktop rule in
     page_explorer.css, which otherwise holds them at 26px on a phone. */
  .kkapp .kk-explorer-menu-chips .kk-explorer-chipwrap .kk-chip {
    min-height: 44px; display: inline-flex; align-items: center;
    border: 6px solid transparent; background-clip: padding-box;
  }
  /* Hover/active recolour the border on desktop; on a phone the ring stays
     transparent so only the ~32px middle paints. */
  .kkapp .kk-explorer-menu-chips .kk-explorer-chipwrap .kk-chip:hover,
  .kkapp .kk-explorer-menu-chips .kk-explorer-chipwrap .kk-chip.is-active { border-color: transparent; background-clip: padding-box; }

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

  /* Q-88-23 — the Space filter on a phone: 16px input (no iOS zoom), 44px
     hit areas with ~30px painted tokens, and the popover becomes a bottom
     sheet over a scrim, clear of the home indicator. */
  .kkapp .kk-sfilter-field input { height: 28px; }
  /* 44px hit areas without a 44px-tall field: the extra reach overlaps the
     field's padding instead of growing it (founder: "slim and lean"). */
  .kkapp .kk-sfilter-tune { margin-block: -6px; }
  .kkapp .kk-sfilter-tok { margin-block: -7px; }
  .kkapp .kk-sfilter-sug { display: flex; }
  /* 44px of hit, ~28px painted — the sheet stays lean, not a toolbar. */
  .kkapp .kk-sfilter-seg button { justify-content: center; height: auto; border-width: 8px 0; }
  .kkapp .kk-sfilter-row { display: flex; }
  .kkapp .kk-sfilter-tok { min-height: 44px; border-width: 7px 1px; border-style: solid; border-color: transparent; background-clip: padding-box; max-width: 160px; }
  .kkapp .kk-sfilter-pop {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; max-height: 80vh; z-index: 90;
    border-radius: 14px 14px 0 0; padding: 6px 10px calc(10px + env(safe-area-inset-bottom));
  }
  .kkapp .kk-sfilter-pop::before { content: ""; display: block; width: 32px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: var(--kk-border); }
  .kkapp .kk-sfilter.is-explorer .kk-sfilter-pop { width: auto; max-height: 80vh; }
  .kkapp .kk-sfilter-scrim { display: block; position: fixed; inset: 0; z-index: 89; background: rgba(18, 24, 31, .28); }
  .kkapp .kk-sfilter-pq { font-size: var(--kk-fs-input); min-height: 44px; }
  .kkapp .kk-sfilter-done {
    display: block; width: 100%; min-height: 44px; margin-top: 6px; border: 0; border-radius: var(--kk-r-sm);
    background: var(--kk-primary); color: var(--kk-on-primary); font: 500 14px var(--kk-font-ui); cursor: pointer;
  }
  .kkapp .kk-space-favorite { opacity: .6; }

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

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

  /* The avatar + name link keeps its grid; it only needs the height. */
  .kkapp .kk-user-profile { min-height: 44px; }

  /* Space management (PR #84: Space root, Members & Sharing, tracked links),
     measured at 375px on 2026-10-10. Fields rendered 12-13.5px, which makes
     iOS zoom the page on focus; controls rendered 15-40px tall.
     space_management_mobile_contract_test reads these lists.
     Founder 2026-10-24/25 (workbench 12/20): fields keep their design size and get
     16px only from design_systems/input_floor.css on touch devices; controls keep
     their painted size and get a 44px TAP area — a transparent ::after that grows
     into the gap — never a 44px painted control. */
  .kkapp .kk-member-remove,
  .kkapp .kk-member-invite .kk-btn,
  .kkapp .kk-compose-actions .kk-btn,
  .kkapp .kk-color-swatch,
  .kkapp .kk-accent-family label,
  .kkapp .tracked-links-toolbar .kk-btn,
  .kkapp .tracked-links-filters .kk-btn,
  .kkapp .tracked-link-row .kmenu > summary,
  .kkapp .tracked-link-form-actions .kk-btn { position: relative; }
  .kkapp .kk-member-remove::after,
  .kkapp .kk-member-invite .kk-btn::after,
  .kkapp .kk-compose-actions .kk-btn::after,
  .kkapp .kk-color-swatch::after,
  .kkapp .kk-accent-family label::after,
  .kkapp .tracked-links-toolbar .kk-btn::after,
  .kkapp .tracked-links-filters .kk-btn::after,
  .kkapp .tracked-link-row .kmenu > summary::after,
  .kkapp .tracked-link-form-actions .kk-btn::after {
    content: ""; position: absolute; inset: min(0px, calc((100% - 44px) / 2)) 0;
  }
  .kkapp .tracked-link-row .kmenu > summary,
  .kkapp .tracked-links-note-more summary,
  .kkapp .kk-tab { min-width: 44px; justify-content: center; }
  /* Single-line tabs measured 33px tall and "Links" 36px wide. Half of each
     gap moves into the tabs as padding, so the strip keeps its width. */
  .kkapp .kk-tab { min-height: 44px; padding-inline: var(--kk-s-1); }
  .kkapp .kk-tabs { gap: var(--kk-s-2); }
  .kkapp .kk-member-remove { padding: 0 6px; }
  /* Text disclosures keep their marker (display stays list-item); line-height
     centres the single line in the 44px box. */
  .kkapp .kk-accent-more > summary,
  .kkapp .tracked-link-advanced summary { min-height: 44px; line-height: 44px; }
  .kkapp .tracked-link-advanced summary { margin-bottom: 0; }
  /* "Terms" sits in a compact note strip: 44px of hit, the strip's own height. */
  .kkapp .tracked-links-note-more summary { display: flex; align-items: center; min-height: 44px; margin-block: -12px; }
}

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

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

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

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

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

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

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

/* ── Pages pager + long-filename containment ────────────────────────────────
   Founder, 2026-08-17: a 4,513-page Space stopped dead at 60 with no way on, and
   agent-written filenames like
   `failures_test_should_update_Booking_with_a_staff_member_and_redirect_to_show_page.png`
   are single unbroken tokens that push the row wider than the viewport — the row
   controls then sit off-screen. `min-width:0` is the load-bearing part: a flex
   child will not shrink below its content without it, so ellipsis never engages. */
.kk-space-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--kk-s-3);
  padding: var(--kk-s-4) 0 0; flex-wrap: wrap;
}
.kk-space-pager .kk-pager-at {
  font: 600 var(--kk-fs-meta) var(--kk-font-mono); color: var(--kk-text-soft); white-space: nowrap;
}
.kk-space-results .kk-prow-title,
.kk-space-results .kk-prow .nm {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  overflow-wrap: anywhere;
}

/* Issue #48 — what the reader tree is not showing. Quiet by design: it is a
   footnote, not a warning. */
.kk-rnav-hidden {
  margin: var(--kk-s-3) 0 0; padding: 0 var(--kk-s-3);
  font: 500 var(--kk-fs-micro) var(--kk-font-mono); color: var(--kk-text-soft);
}

/* ── Issue #46: the deck shell paints its own canvas ─────────────────────────
   Hosted pages rendered TRANSPARENT. `body.kapp` — the old warm-paper shell in
   kuickr.css — has always painted `var(--k-bg)`; `body.kkapp`, which every hosted
   page moved to with the deck-shell migration, never got the equivalent rule. So
   the canvas was unpainted and whatever sat behind it showed through.

   A surface that content sits on must paint itself rather than inherit from
   whatever happens to be underneath. `color` is set here too: a background with no
   paired foreground is how a white-on-white page happens the next time a token
   layer changes. */
body.kkapp {
  background: var(--kk-bg);
  color: var(--kk-text);
}

/* Dictation: the mic lives in the field, not on a line of its own.
 * Its explanation is the button's tooltip on pointer devices; the status line
 * is hidden until the controller gives it words, so no composer carries a
 * sentence nobody needs to read twice. 44px stays the tap target. */
.kk-dictate { position: relative; }
.kk-dictate textarea,
.kk-dictate input[type="text"] { padding-right: 44px; }
.kk-dictate-btn {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px;
  display: inline-grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: var(--kk-r-sm, 6px);
  background: transparent; color: var(--kk-text-soft); cursor: pointer;
  transition: color var(--kk-t-fast, 120ms) ease, background var(--kk-t-fast, 120ms) ease;
}
/* The 32px box is the ink; the tap target is 44px and invisible. */
.kk-dictate-btn::after { content: ""; position: absolute; inset: -6px; }
.kk-dictate-btn:hover:not(:disabled) { color: var(--kk-ink); background: var(--kk-fill); }
.kk-dictate-btn:focus-visible { outline: 2px solid var(--kk-primary, currentColor); outline-offset: 1px; }
.kk-dictate-btn:disabled { opacity: .45; cursor: default; }
.kk-dictate-btn[aria-pressed="true"] { color: var(--kk-danger, #d74b4b); background: var(--kk-fill); }
.kk-dictate-btn[aria-pressed="true"]::before {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 2px solid currentColor; animation: kk-dictate-pulse 1.6s ease-in-out infinite;
}
@keyframes kk-dictate-pulse { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: 0; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .kk-dictate-btn[aria-pressed="true"]::before { animation: none; } }
.kk-dictate-status { margin: 6px 0 0; font-size: var(--kk-fs-meta); line-height: 1.35; color: var(--kk-text-soft); }
/* A touch device never sees a title tooltip, so the button carries its own label there. */
@media (hover: none) { .kk-dictate-btn { top: 8px; right: 8px; } }

/* Development-only presence preview in the reader details rail. */
      .kk-pr-pulse { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:var(--kk-r-pill); background:#3f9d5c; box-shadow:0 0 0 0 rgba(63,157,92,.6); animation: kkPrPulse 2.2s infinite; vertical-align:middle; }
      @keyframes kkPrPulse { 70% { box-shadow:0 0 0 6px rgba(63,157,92,0); } 100% { box-shadow:0 0 0 0 rgba(63,157,92,0); } }
      @media (prefers-reduced-motion: reduce) { .kk-pr-pulse { animation: none; } }
      .kk-pr-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
      .kk-pr-row { display:flex; align-items:center; gap:10px; min-height:44px; }
      .kk-pr-av { flex:none; width:28px; height:28px; border-radius:var(--kk-r-pill); display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--kk-fs-meta); font-weight:700; }
      .kk-pr-av-anon { background:var(--kk-fill); color:var(--kk-text-soft); border:1px dashed var(--kk-line); }
      .kk-pr-who { display:flex; flex-direction:column; min-width:0; flex:1; }
      .kk-pr-who b { font-size:13px; font-weight:600; color:var(--kk-ink); display:flex; align-items:center; gap:6px; }
      .kk-pr-who span { font-size:11.5px; color:var(--kk-text-soft); }
      .kk-pr-tier { font-family:var(--kk-font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em; padding:1px 5px; border-radius:var(--kk-r-pill); background:var(--kk-fill); color:var(--kk-text-soft); font-weight:700; }
      .kk-pr-anon .kk-pr-who b { color:var(--kk-text-soft); font-weight:500; }
      .kk-pr-via { flex:none; width:34px; text-align:center; font-family:var(--kk-font-mono); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 0; border-radius:var(--kk-r-xs); border:1px solid var(--kk-line); color:var(--kk-text-soft); }
      .kk-pr-via-mcp { border-color:#8a6fb0; color:#8a6fb0; }
      .kk-pr-via-cli { border-color:#4f7a9b; color:#4f7a9b; }
      .kk-pr-age { font-family:var(--kk-font-mono); font-size:10.5px; color:var(--kk-text-soft); }
      .kk-pr-note { margin:var(--kk-s-3) 0 0; font-size:var(--kk-fs-micro); line-height:1.45; color:var(--kk-text-soft); }
      .kk-rp-dot.kk-pr-live { background:#3f9d5c; color:#fff; }


/* Spec 34 — focused admin navigation. Mobile groups wrap; desktop has a local rail. */
.kk-admin { max-width: none; min-width: 0; }
.kk-admin > * { min-width: 0; }
.kk-admin-nav { padding: var(--kk-s-4) 0; margin-bottom: 20px; border-bottom: 1px solid var(--kk-line); }
.kk-admin-nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--kk-line); border-radius: 6px; background: var(--kk-card); color: var(--kk-text); font: inherit; }
.kk-admin-nav-links { display: none; }
.kk-admin-nav.is-open .kk-admin-nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: var(--kk-s-3); }
.kk-admin-nav-links > .kk-tab { grid-column: 1 / -1; }
.kk-admin-nav-group { display: flex; flex-direction: column; gap: var(--kk-s-1); min-width: 0; }
.kk-admin-nav-label { padding: 6px 10px; font-size: var(--kk-fs-meta); color: var(--kk-text-soft); }
.kk-admin-nav .kk-tab { display: flex; align-items: center; gap: var(--kk-s-2); min-height: 44px; padding: 10px; border: 0; border-radius: 6px; white-space: normal; font-size: 13px; }
.kk-admin-nav .kk-tab.is-active { background: var(--kk-card); color: var(--kk-text); box-shadow: inset 3px 0 var(--kk-secondary); font-weight: 600; }
.kk-admin-nav .kk-tab:hover { background: var(--kk-card); }
.kk-admin-nav a:focus-visible, .kk-admin-destination:focus-visible { outline: 2px solid var(--kk-secondary); outline-offset: 2px; }
.kk-admin-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 20px 0; border-block: 1px solid var(--kk-line); }
.kk-admin-summary strong { display: block; font-size: 28px; line-height: 1.3; }
.kk-admin-summary span { font-size: var(--kk-fs-meta); color: var(--kk-text-soft); }
.kk-admin-section { margin-top: var(--kk-s-5); }
.kk-admin-section h2 { font-size: 16px; margin-bottom: var(--kk-s-3); }
.kk-admin-destination { display: flex; justify-content: space-between; align-items: center; gap: var(--kk-s-4); padding: 18px; min-width: 0; }
.kk-admin-destination + .kk-admin-destination { border-top: 1px solid var(--kk-line); }
.kk-admin-destination p { margin: 5px 0 0; font-size: 13px; color: var(--kk-text-soft); max-width: 65ch; }
.kk-admin-count { font-size: 20px; font-weight: 600; flex-shrink: 0; }
@media (min-width: 1100px) {
  .kk-main-inner:has(> .kk-admin) { max-width: 1240px; }
  .kk-admin { display: grid; grid-template-columns: 174px minmax(0, 1fr); column-gap: var(--kk-s-6); }
  .kk-admin > :not(.kk-admin-nav) { grid-column: 2; }
  .kk-admin > .kk-admin-nav { grid-column: 1; grid-row: 1 / span 40; align-self: start; position: sticky; top: 20px; padding: 0 18px 0 0; border-bottom: 0; border-right: 1px solid var(--kk-line); }
  .kk-admin-nav-toggle { display: none; }
  .kk-admin-nav .kk-admin-nav-links { display: flex; flex-direction: column; gap: var(--kk-s-3); padding-top: 0; }
  .kk-admin-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── TOUCH FIELD ZOOM GUARD ── */
/* iOS zooms the page when a field under 16px takes focus. The 16px floor for every
   field is design_systems/input_floor.css (D-35-3, touch devices only). Zoom keys off
   the input's size, not the hint's, so the placeholder keeps the surrounding type
   size (Q-88-25, founder 2026-10-09). */
@media (hover: none) and (pointer: coarse) {
  .kkapp .kk-sfilter-field input::placeholder { font-size: var(--kk-fs-body); }
}

/* Incoming work is distinct from personal content; phone layout comes first. */
.kk-incoming { min-width: 0; overflow-wrap: anywhere; }
.kk-incoming-intro { color: var(--kk-text-soft); margin-bottom: 20px; }
.kk-incoming-filters { display: grid; gap: var(--kk-s-3); margin-bottom: var(--kk-s-5); }
.kk-incoming-filters label { display: grid; gap: 6px; min-width: 0; }
.kk-incoming-filters select { width: 100%; min-width: 0; padding: var(--kk-s-2); color: var(--kk-ink); background: var(--kk-paper); border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); }
.kk-incoming section { margin-bottom: var(--kk-s-5); min-width: 0; }
.kk-incoming h2 { font-size: var(--kk-fs-heading); margin-bottom: var(--kk-s-3); }
@media (min-width: 768px) { .kk-incoming-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } }

/* Q-88-27 — an empty filtered result: names the filters, one honest action,
   drop one filter at a time with the count it brings back. */
.kk-filter-empty { padding: var(--kk-s-5) var(--kk-s-4); text-align: center; }
.kk-filter-empty-art { display: block; width: 120px; height: 64px; margin: 0 auto var(--kk-s-2); }
.kk-filter-empty-art rect { stroke: var(--kk-border); }
.kk-filter-empty-art rect.front { fill: var(--kk-card); }
.kk-filter-empty-art .dot { fill: var(--kk-text-soft); }
.kk-filter-empty-art .dot:nth-of-type(1) { fill: var(--kk-orientation); }
.kk-filter-empty-art .dot:nth-of-type(2) { fill: var(--kk-accent-fill); }
.kk-filter-empty h3 { margin: 0 0 var(--kk-s-1); color: var(--kk-ink); font: 600 var(--kk-fs-title) var(--kk-font-ui); }
.kk-filter-empty p { margin: 0 0 var(--kk-s-3); color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
.kk-filter-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.kk-filter-empty-btn { display: inline-flex; align-items: center; gap: var(--kk-s-1); padding: 6px 11px; border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-card); color: var(--kk-text); font-size: var(--kk-fs-meta); }
.kk-filter-empty-btn:hover { border-color: var(--kk-border); color: var(--kk-ink); }
.kk-filter-empty-btn.is-primary { background: var(--kk-primary); border-color: var(--kk-primary); color: var(--kk-on-primary); }
.kk-filter-empty-btn .x { color: var(--kk-text-soft); }
@media (prefers-reduced-motion: no-preference) {
  .kk-filter-empty-art .dot { animation: kk-filter-empty-float 3s ease-in-out infinite; }
  .kk-filter-empty-art .dot:nth-of-type(2) { animation-delay: .4s; }
  .kk-filter-empty-art .dot:nth-of-type(3) { animation-delay: .8s; }
}
@keyframes kk-filter-empty-float { 50% { transform: translateY(-4px); } }

/* Q-88-25 — design_systems/input_floor.css lifts the field to the input floor on touch
   devices; zoom keys off the input's size, not the hint's, so the placeholder stays lean. */
@media (hover: none) and (pointer: coarse) {
  .kkapp .kk-sfilter-field input::placeholder { font-size: var(--kk-fs-body); }
}

/* Native controls (a select's menu, checkboxes) follow the theme, not the OS: a light
   page on a dark Mac opened a dark system menu under Your menu → Opens first (founder
   2026-10-28). Kept here, not in tokens.css, which mirrors the v2 registry byte for byte. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }