/* ══════════════════════════════════════════════════════════════
   Keln — the sidebar (nav.js draws it; this dresses it).

   One floating glass panel on the left, under the top bar. Items sit
   in four small groups, a single lit capsule travels to the page you
   are on, and the whole thing folds to an icon rail with the pin.

   It replaces sidebar.css on every app page. The landing page keeps
   sidebar.css for its own marketing menu.

   The panel is docked, so it is on screen all the time: it carries
   no backdrop-filter while docked (a permanent blur over an animated
   star field is the most expensive thing a page can ask for). It is
   opaque enough not to need one. Only the phone drawer blurs, and
   only while it is open.
   ══════════════════════════════════════════════════════════════ */

:root {
  --kn-w: 236px;
  --kn-rail: 62px;
  --kn-top: 78px;
  --kn-edge: var(--s-7);
}

/* ══ THE PAGE NEVER MOVES WHEN THE SIDEBAR FOLDS ═════════════
   The page keeps room for the icon rail only, in both modes. Unfolded,
   the sidebar slides out OVER the page as a floating panel, and
   nothing behind it moves: no padding change, no re-layout, no panel
   resizing, no ResizeObserver waking. The only thing that animates is
   the sidebar itself, inside its own layout boundary (contain, below).

   A centred column already clear of the rail stays exactly where it
   is; a narrow window gives up just enough on the left for the rail.
   The values are constants, never per-mode custom properties: those
   inherit, and changing one restyles every element on the page. */
:root { --kn-L-rail: calc(var(--kn-rail) + 2 * var(--kn-edge)); }
body { --kn-col: var(--page-max, 1200px); }
body.kn-help { --kn-col: 830px; }
body.wk-body { --kn-col: 1240px; }
body.msg-page { --kn-col: 1680px; }
html.kn-full body,
html.kn-rail body { padding-left: clamp(0px, calc(2 * var(--kn-L-rail) + var(--kn-col) - 100vw), var(--kn-L-rail)); }

/* The top bar keeps the full width, so the logo stands over the
   sidebar and the bar's glass reaches the left edge. */
html.kn-full .topbar, html.kn-full .hbar,
html.kn-rail .topbar, html.kn-rail .hbar {
  margin-left: calc(-1 * clamp(0px, calc(2 * var(--kn-L-rail) + var(--kn-col) - 100vw), var(--kn-L-rail)));
}

/* Unfolded, it floats over the page: a solid ground beneath its glass
   so nothing reads through it, and a deeper shadow to say it floats. */
html.kn-full .kn {
  background-color: var(--bg);
  box-shadow: var(--e-over), inset 0 1px 0 rgba(var(--hl), .05);
}

/* Aris parks bottom-left; beside a docked sidebar, not on it. Its
   drifting probe reads the same edge in aris.js. */
html.kn-full .aris-panel, html.kn-full .aris--static .aris-probe { left: calc(var(--kn-w) + var(--kn-edge) + 24px); }
html.kn-rail .aris-panel, html.kn-rail .aris--static .aris-probe { left: calc(var(--kn-rail) + var(--kn-edge) + 24px); }
/* And it steps aside while the phone drawer is open. */
html.kn-drawer-open .aris-probe { opacity: 0; pointer-events: none; transition: opacity var(--d-fast) ease; }

/* ── The panel ─────────────────────────────────────────────── */
.kn {
  position: fixed;
  left: var(--kn-edge);
  top: var(--kn-top);
  bottom: var(--kn-edge);
  width: var(--kn-w);
  z-index: 40;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 34% at 0% 0%, color-mix(in srgb, var(--accent2) 9%, transparent), transparent 70%),
    radial-gradient(90% 30% at 100% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(168deg, rgba(var(--ground, 24, 31, 44), .94), rgba(var(--ground, 9, 13, 20), .96));
  box-shadow:
    var(--e-float),
    inset 0 1px 0 rgba(var(--hl), .05);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
}
/* Set on the panel itself, not on <html>: a class on the root restyles
   every element on the page, twice per fold. The layer comes down only
   once the fold has finished (see below). */
.kn.kn--anim { transition: width var(--d-base) var(--ease-out), z-index 0s linear var(--d-base); }

/* Popped out over the page, or open as the phone drawer, the sidebar is
   the thing in hand, so it sits over everything that floats on the
   page, Aris's probe and its whispers included (900/901), and under
   its own tooltips and menus (950) and every dialog (1000+). Folded,
   it goes back down to 40, so a page's own sheets and dialogs still
   cover it. Going up is instant; coming down waits for the fold. */
html.kn-full .kn,
html.kn-drawer-open .kn { z-index: 920; }
html.kn-full .kn.kn--anim,
html.kn-drawer-open .kn.kn--anim { transition: width var(--d-base) var(--ease-out), z-index 0s; }
/* Its own layout: the width animating above re-lays out the panel's
   contents only, never the page around it. */
.kn { contain: layout style; }

/* A few fixed stars in the glass, and the accent seam down the edge
   that ties the panel to the logo's gradient. */
.kn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(1px 1px at 18% 12%, rgba(var(--hl), .55), transparent 60%),
    radial-gradient(1px 1px at 72% 26%, rgba(var(--hl), .35), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 58%, color-mix(in srgb, var(--accent2) 70%, transparent), transparent 60%),
    radial-gradient(1px 1px at 84% 74%, rgba(var(--hl), .4), transparent 60%),
    radial-gradient(1px 1px at 12% 88%, rgba(var(--hl), .3), transparent 60%);
}
.kn::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: var(--r-hair);
  background: linear-gradient(180deg, transparent, var(--accent), var(--accent2), transparent);
  opacity: .45;
  pointer-events: none;
}

/* ── Head: a label and the pin ─────────────────────────────── */
.kn__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-6) var(--s-2) var(--s-8);
  flex-shrink: 0;
}
.kn__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  transition: opacity var(--d-fast) ease;
}
.kn__brand i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 10px var(--accent2);
  animation: kn-breathe 3.2s ease-in-out infinite;
}
@keyframes kn-breathe { 50% { opacity: .35; } }   /* opacity only: no repaint */

.kn__pin {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(var(--well), calc(.5 * var(--well-k)));
  color: var(--muted);
  cursor: pointer;
  transition: color var(--d-fast) ease, border-color var(--d-fast) ease, background var(--d-fast) ease, box-shadow var(--d-base) ease;
}
.kn__pin svg { width: 14px; height: 14px; transition: transform var(--d-base) var(--ease-spring); }
.kn__pin:hover {
  color: var(--ink);
  border-color: var(--border-hi);
  background: color-mix(in srgb, var(--accent2) 10%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent2) 25%, transparent);
}
.kn__pin:active svg { transform: scale(.85); }
.kn__pin:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* ── The list ──────────────────────────────────────────────── */
.kn__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-2) var(--s-4) var(--s-6);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--tint-a, 91, 140, 255), .22) transparent;
}

.kn-group + .kn-group { margin-top: var(--s-3); }
.kn-group[hidden] { display: none; }
.kn-group__label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: color var(--d-fast) ease;
}
.kn-group__label:hover { color: var(--muted); }
.kn-group__label:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.kn-group__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-chev {
  width: 10px;
  height: 10px;
  margin-left: auto;
  opacity: 0;
  transform: rotate(90deg);
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast) ease;
}
.kn-group__label:hover .kn-chev,
.kn-group__label:focus-visible .kn-chev,
.kn-group.is-folded .kn-chev { opacity: 1; }
.kn-group.is-folded .kn-chev { transform: none; }

/* Folding animates the real height, with no measuring in JS. */
.kn-group__items {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--d-base) var(--ease-out), opacity var(--d-base) ease;
}
.kn-group.is-folded .kn-group__items { grid-template-rows: 0fr; opacity: 0; }
.kn-group__inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-1); }

/* ── Items ─────────────────────────────────────────────────── */
.kn-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 36px;
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: var(--t-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--d-fast) ease, background var(--d-fast) ease, transform var(--d-base) var(--ease-out);
}
.kn-item[hidden] { display: none; }
.kn-item:hover { color: var(--ink); background: rgba(var(--tint-a, 91, 140, 255), .07); transform: translateX(2px); }
.kn-item:active { transform: translateX(2px) scale(.98); }
.kn-item:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; color: var(--ink); }

.kn-item__ico {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(var(--well), calc(.5 * var(--well-k)));
  border: 1px solid rgba(var(--tint-a, 91, 140, 255), .1);
  transition: background var(--d-fast) ease, border-color var(--d-fast) ease, box-shadow var(--d-base) ease, transform var(--d-base) var(--ease-spring);
}
.kn-item__ico .ico { width: 15px; height: 15px; }
.kn-item:hover .kn-item__ico {
  background: rgba(var(--tint-a, 91, 140, 255), .14);
  border-color: rgba(var(--tint-a, 91, 140, 255), .26);
  transform: scale(1.07);
}
.kn-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--d-fast) ease; }

/* A client's coach: a small planet in the coach's own colour, the same
   hue the orbit and the cards give them. */
.kn-item--coach .kn-item__ico { background: none; border-color: transparent; }
.kn-coach {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: .02em;
  color: rgb(255 255 255);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  background: radial-gradient(circle at 34% 30%, hsl(var(--h) 85% 76%), hsl(var(--h) 60% 46%) 55%, hsl(var(--h) 58% 28%));
  box-shadow: 0 0 0 1px hsl(var(--h) 70% 70% / .25), 0 2px 8px -2px hsl(var(--h) 80% 50% / .6);
}
.kn-item--coach:hover .kn-item__ico { background: none; border-color: transparent; }

/* Where you are. */
.kn-item.is-here { color: var(--ink); font-weight: 600; }
.kn-item.is-here:hover { background: none; transform: none; }
.kn-item.is-here .kn-item__ico {
  background: color-mix(in srgb, var(--accent2) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent2) 42%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent2) 28%, transparent);
  color: var(--accent2);
}

/* ── The lit capsule ───────────────────────────────────────
   One element for the whole list, moved with a transform, so going
   from Orbit to Constellation is a short flight rather than one row
   switching off and another switching on. */
.kn__marker {
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  top: 0;
  height: 36px;
  z-index: 0;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent2) 15%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--ease-spring), height var(--d-base) var(--ease-out), opacity var(--d-base) ease;
}
.kn__marker.is-on { opacity: 1; }
.kn__marker.is-instant { transition: opacity var(--d-base) ease; }
.kn__marker::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 3px;
  height: 20px;
  margin-top: -10px;
  border-radius: var(--r-hair);
  background: linear-gradient(180deg, var(--accent2), var(--accent3));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent2) 80%, transparent);
}
/* A sweep of light along the capsule when it lands. */
.kn__marker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(var(--hl), .14) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 120% 0;
  opacity: 0;
}
.kn__marker.is-landed::after { animation: kn-sweep .9s var(--ease-out); }
@keyframes kn-sweep {
  0%   { opacity: 1; background-position: 120% 0; }
  100% { opacity: 0; background-position: -30% 0; }
}

/* ── Badges ────────────────────────────────────────────────── */
.kn-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 18px;
  padding: 0 var(--s-3);
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 700;
  animation: kn-pop .5s var(--ease-spring);
}
.kn-badge[hidden] { display: none; }
.kn-badge--msgs {
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--accent2) 80%, transparent);
}
.kn-badge--cal {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 15%, transparent);
}
@keyframes kn-pop { from { transform: scale(.3); opacity: 0; } }

/* The logo wears a dot while there are unread messages. */
.logo.has-msgs { position: relative; }
.logo.has-msgs::before {
  content: "";
  position: absolute;
  top: 2px;
  right: -6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 0 2px var(--bg), 0 0 12px var(--accent2);
  animation: kn-pop .5s var(--ease-spring);
}

/* ── The account row ───────────────────────────────────────── */
.kn-acct {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin: 0 var(--s-4) var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(var(--well), calc(.5 * var(--well-k)));
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--d-fast) ease, background var(--d-fast) ease, box-shadow var(--d-base) ease;
}
.kn-acct:hover, .kn-acct[aria-expanded="true"] {
  border-color: var(--border-hi);
  background: rgba(var(--tint-a, 91, 140, 255), .07);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--accent2) 45%, transparent);
}
.kn-acct.is-here { border-color: color-mix(in srgb, var(--accent2) 45%, transparent); }
.kn-acct:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.kn-acct__av {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: var(--t-base);
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--accent2) 60%, transparent);
}
.kn-acct.has-new .kn-acct__av::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--gold);
  animation: kn-pop .5s var(--ease-spring);
}
.kn-acct__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); transition: opacity var(--d-fast) ease; }
.kn-acct__name { font-size: var(--t-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-acct__plan {
  font-family: var(--mono);
  font-size: var(--t-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent2);
}
.kn-acct__plan:empty { display: none; }
.kn-acct__more { display: inline-flex; gap: var(--s-1); padding-right: var(--s-2); transition: opacity var(--d-fast) ease; }
.kn-acct__more i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }

/* ══ The rail ════════════════════════════════════════════════ */
html.kn-rail .kn { width: var(--kn-rail); }
html.kn-rail .kn__head { justify-content: center; padding: var(--s-6) 0 var(--s-2); }
html.kn-rail .kn__brand { display: none; }
html.kn-rail .kn__pin svg { transform: rotate(180deg); }
html.kn-rail .kn__scroll { padding: var(--s-2) var(--s-3) var(--s-6); scrollbar-width: none; }
html.kn-rail .kn__scroll::-webkit-scrollbar { display: none; }
html.kn-rail .kn-group__label {
  height: 13px;
  padding: 0;
  pointer-events: none;
  justify-content: center;
}
html.kn-rail .kn-group__label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--border);
}
html.kn-rail .kn-group:first-child .kn-group__label { height: 0; }
html.kn-rail .kn-group:first-child .kn-group__label::before { display: none; }
html.kn-rail .kn-group__name, html.kn-rail .kn-chev { display: none; }
/* Folding is a full-width idea; the rail always shows every icon. */
html.kn-rail .kn-group.is-folded .kn-group__items { grid-template-rows: 1fr; opacity: 1; }
html.kn-rail .kn-item { justify-content: center; padding: 0; gap: 0; }
html.kn-rail .kn-item:hover { transform: none; }
html.kn-rail .kn-item__label { opacity: 0; width: 0; flex: 0; }
html.kn-rail .kn__marker { left: var(--s-3); right: var(--s-3); }
html.kn-rail .kn__marker::before { left: -4px; }
html.kn-rail .kn-badge {
  position: absolute;
  top: 3px;
  right: 7px;
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  box-shadow: 0 0 0 2px rgba(var(--shadow-ink, 12, 17, 25), calc(1 * var(--shade-k))), 0 0 10px currentColor;
}
html.kn-rail .kn-badge--cal { background: var(--gold); }
html.kn-rail .kn-acct { justify-content: center; margin: 0 var(--s-3) var(--s-4); padding: var(--s-3) 0; }
html.kn-rail .kn-acct__txt, html.kn-rail .kn-acct__more { display: none; }

/* ══ Simple: the rail keeps its words ════════════════════════
   Every icon carries its name underneath, so nothing has to be
   hovered to be understood. The rail widens to fit them. */
html[data-density="minimal"] { --kn-rail: 84px; }
/* Simple has no score, so its map is not in the menu either. */
html[data-density="minimal"] .kn-item[data-kn="constellation"] { display: none; }
/* A client's Simple has no journey and no videos section to go to. */
html[data-app="client"][data-density="minimal"] .kn-item[data-kn="journey"],
html[data-app="client"][data-density="minimal"] .kn-item[data-kn="videos"] { display: none; }
/* Aris sits beside the rail, clear of the account button. */
html.kn-rail[data-density="minimal"] .aris-probe { left: calc(var(--kn-L-rail) + var(--s-6)) !important; }
html[data-density="minimal"].kn-rail .kn-item {
  flex-direction: column;
  justify-content: center;
  gap: var(--s-1);
  height: auto;
  min-height: 52px;
  padding: var(--s-3) 0;
}
html[data-density="minimal"].kn-rail .kn-item__label {
  opacity: 1;
  width: auto;
  flex: none;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--t-2xs);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* ── Rail tooltips ─────────────────────────────────────────── */
.kn-tip {
  position: fixed;
  z-index: 950;          /* over the Aris probe (900), under every dialog (1200+) */
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: rgba(var(--ground, 14, 19, 28), .97);
  box-shadow: var(--e-card);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-4px, -50%);
  transition: opacity var(--d-fast) ease, transform var(--d-fast) var(--ease-out);
}
.kn-tip.is-on { opacity: 1; transform: translate(0, -50%); }
.kn-tip[hidden] { display: none; }
.kn-tip::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: inherit;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.kn-tip b {
  font-family: var(--mono);
  font-size: var(--t-2xs);
  color: var(--accent2);
}

/* ══ The account menu ════════════════════════════════════════ */
.kn-pop {
  position: fixed;
  z-index: 950;
  width: 268px;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(100% 50% at 0% 0%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 70%),
    linear-gradient(165deg, rgba(var(--ground, 26, 33, 46), .98), rgba(var(--ground, 10, 14, 22), .99));
  box-shadow: var(--e-over), 0 0 50px -10px color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--ink);
  font-family: var(--font);
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity var(--d-fast) ease, transform var(--d-base) var(--ease-spring);
}
.kn-pop.is-on { opacity: 1; transform: none; }
.kn-pop[hidden] { display: none; }

.kn-pop__head { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-3) var(--s-3) var(--s-4); }
.kn-pop__av {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: var(--t-md);
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--accent2) 60%, transparent);
}
.kn-pop__who { min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.kn-pop__who b { font-size: var(--t-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-pop__who small { font-size: var(--t-xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kn-pop__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin: 0 var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: rgba(var(--well), calc(.5 * var(--well-k)));
  border: 1px solid rgba(var(--tint-a, 91, 140, 255), .1);
}
.kn-plan {
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-4);
  border-radius: var(--r-pill);
  color: var(--muted);
  border: 1px solid var(--border);
}
.kn-plan--pro   { color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 45%, transparent); }
.kn-plan--ultra { color: var(--gold);    border-color: color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 0 14px -4px var(--gold); }
.kn-plan--team  { color: var(--accent);  border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.kn-pop__lvl { font-family: var(--mono); font-size: var(--t-2xs); color: var(--muted); white-space: nowrap; }

.kn-pop__rows { display: flex; flex-direction: column; gap: var(--s-1); }
.kn-pop__row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: var(--t-base);
  text-decoration: none;
  transition: background var(--d-fast) ease, color var(--d-fast) ease;
}
.kn-pop__row:hover, .kn-pop__row:focus-visible { background: rgba(var(--tint-a, 91, 140, 255), .09); color: var(--ink); outline: none; }
.kn-pop__row:focus-visible { box-shadow: inset 0 0 0 1px var(--border-hi); }
.kn-pop__row.is-here { color: var(--ink); background: color-mix(in srgb, var(--accent2) 10%, transparent); }
.kn-pop__row.is-accent { color: var(--accent2); }
.kn-pop__row.is-out:hover, .kn-pop__row.is-out:focus-visible { color: var(--hot); background: color-mix(in srgb, var(--hot) 9%, transparent); }
.kn-pop__ico { width: 18px; display: grid; place-items: center; flex-shrink: 0; }
.kn-pop__ico .ico { width: 15px; height: 15px; }
.kn-pop__new {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.kn-pop__new[hidden] { display: none; }
.kn-pop__sep { height: 1px; margin: var(--s-2) var(--s-3); background: rgba(var(--tint-a, 91, 140, 255), .1); }
.kn-pop__hint { margin: var(--s-3) var(--s-4) var(--s-2); font-size: var(--t-xs); color: var(--dim); }
.kn-pop__hint kbd {
  font-family: var(--mono);
  font-size: var(--t-2xs);
  padding: 0 var(--s-2);
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* ══ Phones: a drawer ════════════════════════════════════════ */
.kn-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(var(--ground, 4, 7, 12), .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-base) ease;
}
.kn-scrim.is-on {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
html:not(.kn-drawer) .kn-scrim { display: none; }

html.kn-drawer .kn {
  left: var(--s-5);
  bottom: var(--s-5);
  width: min(284px, calc(100vw - 20px));
  transform: translateX(calc(-100% - 20px));
  transition: transform .42s var(--ease-out), opacity var(--d-base) ease;
}
html.kn-drawer .kn.is-open {
  transform: none;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
html.kn-drawer .kn__pin { display: none; }
html.kn-drawer .kn__head { padding-bottom: var(--s-3); }
html.kn-drawer .kn-item { height: 42px; }
html.kn-drawer .kn.is-open .kn-item { animation: kn-in .38s var(--ease-out) backwards; }
html.kn-drawer .kn.is-open .kn-group:nth-child(2) .kn-item { animation-delay: .04s; }
html.kn-drawer .kn.is-open .kn-group:nth-child(3) .kn-item { animation-delay: .08s; }
html.kn-drawer .kn.is-open .kn-group:nth-child(4) .kn-item { animation-delay: .12s; }
html.kn-drawer .kn.is-open .kn-group:nth-child(5) .kn-item { animation-delay: .16s; }
@keyframes kn-in { from { opacity: 0; transform: translateX(-14px); } }

/* The help pages' menu button, shown only where there is a drawer. */
.kn-burger {
  display: none;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: rgba(var(--well), calc(.5 * var(--well-k)));
  cursor: pointer;
}
.kn-burger i { width: 14px; height: 2px; border-radius: var(--r-hair); background: var(--muted); }
html.kn-drawer .kn-burger { display: inline-flex; }

/* ── The tab bar (phones) ──────────────────────────────────────
   Four places and More, along the bottom under the thumb, clear of
   the home indicator. The page keeps room for it, and it steps aside
   while the keyboard is up. */
html.kn-tabs-on { --kn-tabs-h: 60px; }
html.kn-tabs-on body { padding-bottom: calc(var(--kn-tabs-h) + env(safe-area-inset-bottom)); }
html.kn-tabs-on.kn-typing { --kn-tabs-h: 0px; }
.kn-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 38;
  display: flex;
  height: calc(var(--kn-tabs-h, 60px) + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border-top: 1px solid rgba(var(--hl), .07);
  background: rgba(var(--ground, 7, 10, 16), .86);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  transition: transform var(--d-base) var(--ease-out);
}
html.kn-typing .kn-tabs { transform: translateY(110%); }
html.kn-drawer-open .kn-tabs { z-index: 41; }
.kn-tab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-2) 0 0;
  border: 0;
  background: none;
  color: var(--dim);
  font: 600 var(--t-2xs)/1.1 var(--font);
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.kn-tab__ico { position: relative; display: grid; place-items: center; width: 44px; height: 28px; border-radius: var(--r-pill); transition: background var(--d-fast) ease, color var(--d-fast) ease; }
.kn-tab__ico svg { width: 22px; height: 22px; }
.kn-tab__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-tab.is-here { color: var(--ink); }
.kn-tab.is-here .kn-tab__ico { background: color-mix(in srgb, var(--accent2) 18%, transparent); color: var(--accent2); }
.kn-tab:active .kn-tab__ico { transform: scale(.92); }
.kn-tab .kn-badge { position: absolute; top: -4px; right: 0; min-width: 18px; height: 16px; padding: 0 var(--s-2); }
.kn-tab__more { display: inline-flex; gap: var(--s-1); }
.kn-tab__more i { width: 4px; height: 4px; border-radius: var(--r-pill); background: currentColor; }
html.kn-drawer-open .kn-tab[data-kn-tab="more"] { color: var(--ink); }
html.kn-drawer-open .kn-tab[data-kn-tab="more"] .kn-tab__ico { background: rgba(var(--hl), .08); }
/* With the tab bar there, the drawer rises above it. */
html.kn-tabs-on.kn-drawer .kn { bottom: calc(var(--kn-tabs-h) + env(safe-area-inset-bottom) + var(--s-5)); }

/* ── Less motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kn, .kn__marker, .kn-item, .kn-item__ico, .kn-pop, .kn-tip, .kn-group__items { transition: none !important; }
  .kn__brand i, .kn-badge, .kn__marker.is-landed::after, .logo.has-msgs::before,
  .kn-acct.has-new .kn-acct__av::after { animation: none; }
  html.kn-drawer .kn.is-open .kn-item { animation: none; }
  .kn-item:hover { transform: none; }
  .kn-tabs, .kn-tab__ico { transition: none; }
}