/*
 * K1 (Kota One) — web/styles/app.css
 *
 * THIS FILE IS THE RUNTIME CANON for components (Pulse 343 F24.1 / F7). Edit it
 * directly. docs/design/redesign/* is ARCHIVE, not canon — do NOT re-copy from
 * it. Reference for the full system: /test/UIstandards.html.
 *
 * Per F7 (CANON LOCATION) this file IS the design-system canon for
 * components (.btn, .badge, .card, .tbl, .chip, .avatar, .bar, .ph,
 * .toolbar, .topnav, .stat-card, .slide, etc.).
 *
 * F8 / F11 exception note: this file contains pre-existing canon
 * literals — rgba(...) shadows, #fff base colors, skin-swatch hex
 * (lines ~715-719 — these are visual previews of skin colors and
 * must show the actual skin, so cannot use a CSS variable), and a
 * `monospace` fallback in a font-family chain. F8 / F11 forbid the
 * INVENTION of new raw literals in screen code; they do not forbid
 * the canon defining its primitives. The §2.4 static-verification
 * grep filters web/styles/* when checking screen code (web/projects.html,
 * web/projects.js).
 */

/* ============================================================
   Bukaroo — Component styles (after / modernized)
   All values flow from tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Global hidden semantic ─────────────────────────────────
   The `hidden` HTML attribute is the project's canonical
   show/hide mechanism (web/system.js:70-71's hide()/show()
   helpers, projects.js, pulse.js all use it). Author CSS that
   sets `display: flex/grid/block` on a class then beats the
   user-agent `[hidden] { display: none }` rule via specificity,
   leaving elements visible when JS tries to hide them. Bug
   precedents: chunk 65.hotfix (modal-backdrop), chunk 66
   (sys-checkbox, sys-verify-row), and targeted local
   overrides on .topnav-gear, .pj-add-modal .pj-tab-panel,
   .pj-detail-menu. Fix once at the design-system layer.
   ───────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--base-fs);
  font-feature-settings: "cv11", "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
code, .mono, kbd { font-family: var(--font-mono); font-size: .92em; }

/* ── App shell ───────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
/* Backward-compat: archived files (planner-v1, planner-v2) still use
   the sidebar shell. With a .sidebar child, switch to grid layout. */
.app:has(> .sidebar) {
  display: grid;
  grid-template-columns: auto 1fr;
}

/* ── Top nav (DEPRECATED — legacy sidebar shell) ────────────────────────
   The `.topnav*` family pre-dates the topbar rewrite. The canonical topbar
   chrome is now injected by `topbar.js` and uses the `.tb-*` / `.k1-*`
   classes below. New pages must NOT hand-roll `<header class="topnav">`,
   `<button class="topnav-bell">`, or `<button class="topnav-fav">` —
   those specific patterns are forbidden by the topbar-consistency guardrail
   spec (F21 / CLAUDE-STANDARDS-FRONTEND). These CSS rules stay in place for
   any archived files that still reference them.
   ──────────────────────────────────────────────────────────────────────── */
.topnav {
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--pad-5);
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}
.topnav-brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text);
  padding-right: 12px; margin-right: 4px;
  border-right: 1px solid var(--divider);
  height: 36px;
  cursor: pointer;
}
.topnav-brand .sb-logo {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-base);
}
.topnav-brand .sb-name { font-size: var(--fs-base); font-weight: 600; letter-spacing: -.01em; }
.topnav-nav { display: flex; gap: 2px; }
.topnav-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text-2); font-size: var(--fs-base); font-weight: 500;
  cursor: pointer;
}
.topnav-link:hover { background: var(--hover); color: var(--text); }
.topnav-link.active {
  background: var(--accent-3); color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 30%, transparent);
}
.topnav-link svg { color: currentColor; }

/* Module slot (chunk 63.D canonical topbar). Sits right of the search
   input and holds the current module's name (as a .topnav-link.active
   linking back to module root) plus an optional gear icon for the
   module's settings page. Per-module JS toggles [hidden] on the gear
   based on hasAreaTier('<module>_settings', 'read'). */
.topnav-module {
  display: inline-flex;
  align-items: center;
  gap: var(--pad-1);
  margin-left: var(--pad-3);
}
.topnav-gear {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  color: var(--text-2);
  cursor: pointer;
}
.topnav-gear:hover { background: var(--hover); color: var(--text); border-color: var(--border-2); }
.topnav-gear[hidden] { display: none; }
.topnav-gear.active { color: var(--accent); border-color: var(--accent); background: var(--accent-3); }
.topnav-gear svg { color: currentColor; }

.topnav-search {
  flex: 1; max-width: 560px; min-width: 200px;
  position: relative;
  display: flex; align-items: center;
}
.topnav-search > .ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
  display: grid; place-items: center;
}
.topnav-search .input {
  width: 100%; height: 34px; padding-left: 34px;
  background: var(--surface-2);
}
.topnav-search .input:focus { background: var(--surface); }
.topnav-search .kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 1px 6px; font-size: var(--fs-sm);
  color: var(--text-3); font-family: var(--font-mono);
}
.topnav-actions {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
}
.topnav-fav {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-2); font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
}
.topnav-fav:hover { background: var(--hover); color: var(--text); }
.topnav-fav .star { color: var(--warning); font-size: var(--fs-base); }
.topnav-fav .caret { color: var(--text-3); font-size: var(--fs-xs); }
.topnav-fav.open .fav-pop { display: block; }
.topnav-bell {
  position: relative;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent;
  color: var(--text-2); cursor: pointer;
}
.topnav-bell:hover { background: var(--hover); color: var(--text); }
.topnav-bell .ncount {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: white;
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.topnav-user {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: oklch(0.62 0.16 30); color: white;
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
  margin-left: 2px;
  letter-spacing: .02em;
}

/* ── Sidebar (legacy — kept for archived files) ─────────── */
.sidebar {
  width: 232px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width var(--t-med);
  overflow: hidden;
}
.sidebar.collapsed { width: 60px; }

.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}
.sb-logo {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.sb-name {
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: var(--fs-md);
  white-space: nowrap;
}
.sidebar.collapsed .sb-name,
.sidebar.collapsed .sb-section-label,
.sidebar.collapsed .sb-item-label,
.sidebar.collapsed .sb-item-badge,
.sidebar.collapsed .sb-user-meta { display: none; }

.sb-search {
  margin: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.sb-search:hover { border-color: var(--border-2); }
.sb-search-kbd {
  margin-left: auto;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.sidebar.collapsed .sb-search { padding: 7px; }
.sidebar.collapsed .sb-search-text,
.sidebar.collapsed .sb-search-kbd { display: none; }

.sb-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 16px;
}
.sb-section-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 14px 10px 6px;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.sb-item:hover { background: var(--hover); color: var(--text); }
.sb-item.active {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.sb-item.active .sb-item-icon { color: var(--accent); }
.sb-item-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--text-3);
  display: grid;
  place-items: center;
}
.sb-item-label { flex: 1; }
.sb-item-badge {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 7px;
  border-radius: 999px;
}

.sb-user {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-3);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  flex-shrink: 0;
}
.sb-user-meta { flex: 1; min-width: 0; }
.sb-user-name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-user-role {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ── Main column ─────────────────────────────────────────── */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
  height: 100vh;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: var(--topbar-h, 56px);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.tb-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  color: var(--text-2);
  font-weight: 500;
}
.tb-crumbs .sep { color: var(--text-4); }
.tb-crumbs .now { color: var(--text); font-weight: 600; }

.tb-spacer { flex: 1; }

.tb-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.tb-pill:hover { border-color: var(--border-2); background: var(--hover); }
.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 18%, transparent); }
.tb-icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.tb-icon-btn:hover { color: var(--text); background: var(--hover); border-color: var(--border-2); }
.tb-icon-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-3); }

/* ── Top-bar primary nav (Planner | Hub) ─────────────────── */
.tb-nav { display: flex; gap: 2px; align-items: center; }
.tb-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 500;
  color: var(--text-2); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tb-link:hover { background: var(--hover); color: var(--text); }
.tb-link.active {
  background: var(--accent-3); color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 30%, transparent);
}
.tb-link svg { color: currentColor; }

/* ── Star-this-page button (page header action) ──────────── */
.btn-star {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-star:hover { background: var(--hover); color: var(--text); border-color: var(--border-2); }
.btn-star.starred {
  color: var(--warning);
  border-color: color-mix(in oklch, var(--warning) 35%, transparent);
  background: var(--warning-bg);
}
.btn-star .star-ico { font-size: var(--fs-base); line-height: 1; }

/* ── Sidebar-hidden focus mode (Projects, etc.) ──────────── */
body.sidebar-hidden .sidebar { display: none; }
body.sidebar-hidden .app { grid-template-columns: 1fr; }

/* ── Sidebar removed globally (was: focus mode for Projects) ── */
.sidebar { display: none !important; }
.app { grid-template-columns: 1fr !important; }

/* ── Unified topbar additions ─────────────────────────────── */
.tb-brand {
  display: flex; align-items: center; gap: 8px;
  padding-right: 8px; margin-right: 4px;
  border-right: 1px solid var(--border);
  height: 32px;
}
.tb-logo {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-base);
}
.tb-brandname { font-size: var(--fs-base); font-weight: 600; letter-spacing: -.01em; color: var(--text); }

.tb-search {
  /* Higher flex weight than .tb-spacer (flex:1) so the search input
     gets first claim on the topbar's remaining horizontal space.
     Important at Spacious where the placeholder text needs ~520px
     to render without clipping at 19px font-size. */
  flex: 2;
  max-width: 32em;
  min-width: 180px;
  position: relative;
  display: flex; align-items: center;
}
.tb-search > .ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
  display: grid; place-items: center;
}
.tb-search .input {
  width: 100%;
  min-height: 32px;
  padding: 6px calc(var(--pad-4) + var(--pad-2)) 6px calc(var(--pad-4) + var(--pad-2));
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
}
.tb-search .input:focus { background: var(--surface); border-color: var(--accent); }
.tb-kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: var(--surface); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--text-3);
}

.tb-user {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-3); color: var(--accent);
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
  border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
}
.tb-user { position: relative; }
.tb-user.lg { width: 36px; height: 36px; font-size: var(--fs-base); }
.tb-user-wrap { position: relative; }
.tb-user-wrap > .user-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 260px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 6px;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .12s, transform .12s;
  z-index: 60;
}
.tb-user-wrap.open > .user-pop { opacity: 1; pointer-events: auto; transform: translateY(0); }
.user-head {
  display: flex; gap: 10px; align-items: center;
  padding: 10px; border-radius: var(--r-sm);
  background: var(--surface-2);
  margin-bottom: 4px;
}
.user-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.user-mail { font-size: var(--fs-sm); }
.user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-base); color: var(--text); cursor: pointer;
}
.user-row:hover { background: var(--surface-2); }
.user-row.danger { color: var(--danger); }
.user-row.danger:hover { background: color-mix(in oklch, var(--danger) 8%, transparent); }
.user-row .kbd-hint {
  margin-left: auto;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 0 5px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--text-3);
}
.user-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Bell button + dropdown ─────────────────────── */
.tb-bell { position: relative; }
.tb-bell > .tb-icon-btn { position: relative; }
.tb-bell-dot {
  position: absolute; top: 4px; right: 4px;
  min-width: 14px; height: 14px; padding: 0 4px;
  border-radius: 7px;
  background: var(--danger); color: white;
  font-size: var(--fs-xs); font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
}
.tb-bell > .bell-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 6px;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .12s, transform .12s;
  z-index: 60;
  max-height: 480px; overflow: auto;
}
.tb-bell.open > .bell-pop { opacity: 1; pointer-events: auto; transform: translateY(0); }
.bell-pop .grp {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 8px 10px 4px;
}
.bell-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
}
.bell-row:hover { background: var(--surface-2); }
.bell-row.unread::before {
  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
}
.bell-row .badge { flex-shrink: 0; margin-top: 1px; }
.bell-body { min-width: 0; flex: 1; }
.bell-title { font-size: var(--fs-base); color: var(--text); line-height: 1.35; }
.bell-sub { margin-top: 2px; }
.bell-foot {
  display: flex; justify-content: space-between;
  padding: 8px 10px; margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-2); font-weight: 500;
  cursor: pointer;
}

/* ── Search results dropdown ─────────────────────── */
.tb-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 4px;
  display: none;
  z-index: 60;
  max-height: 420px; overflow: auto;
}
.tb-search-results.open { display: block; }
.sr-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 10px; align-items: center;
  padding: 7px 10px; border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-base);
}
.sr-row:hover, .sr-row.is-active { background: var(--surface-2); }
.sr-row .badge { justify-self: start; }
.sr-name { color: var(--text); }
.sr-sub { color: var(--text-3); }
.sr-empty { padding: 12px; text-align: center; }

/* ── Keyboard shortcuts overlay ─────────────────────── */
.kbd-overlay {
  position: fixed; inset: 0;
  background: color-mix(in oklch, var(--text) 30%, transparent);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
}
.kbd-overlay.open { display: flex; }
.kbd-card {
  width: min(520px, 92vw);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 6px;
}
.kbd-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px;
}
.kbd-h h4 { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin: 0; }
.kbd-close {
  width: 28px; height: 28px;
  background: transparent; border: 0; border-radius: var(--r-sm);
  font-size: var(--fs-lg); line-height: 1; color: var(--text-3);
  cursor: pointer;
}
.kbd-close:hover { background: var(--surface-2); color: var(--text); }
.kbd-grp { padding: 6px 8px; }
.kbd-grp-h {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 6px 6px 4px;
}
.kbd-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-base); color: var(--text);
}
.kbd-row:hover { background: var(--surface-2); }
.kbd-keys { display: flex; gap: 4px; }
.kbd-keys kbd {
  background: var(--surface-2); border: 1px solid var(--border);
  border-bottom-width: 2px;
  padding: 2px 7px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-family: 'JetBrains Mono', monospace;
  color: var(--text-2);
}

/* ── Favorites (★) button + dropdown ─────────────────────── */
.tb-fav {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tb-fav:hover { background: var(--hover); color: var(--text); border-color: var(--border-2); }
.tb-fav .star { color: var(--warning); font-size: var(--fs-base); line-height: 1; }
.tb-fav .caret { color: var(--text-3); font-size: var(--fs-xs); }
.tb-fav .fav-pop {
  position: absolute; top: 38px; right: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 200;
  display: none;
  text-align: left;
  cursor: default;
}
.tb-fav.open .fav-pop { display: block; }
.tb-fav .fav-pop .grp {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
  padding: 8px 10px 4px;
}
.tb-fav .fav-pop .fav-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-base); color: var(--text);
}
.tb-fav .fav-pop .fav-row:hover { background: var(--hover); }
.tb-fav .fav-pop .fav-row .star { color: var(--warning); width: 14px; text-align: center; }
.tb-fav .fav-pop .fav-row .sub { margin-left: auto; color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tb-fav .fav-pop .fav-foot {
  margin-top: 4px; padding: 8px 10px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-2);
  border-radius: 0 0 var(--r-md) var(--r-md);
  cursor: pointer;
}
.tb-fav .fav-pop .fav-foot:hover { background: var(--hover); }

/* Skin picker dropdown */
.skin-pop {
  position: absolute;
  top: 52px;
  right: 20px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  z-index: 200;
  display: none;
}
.skin-pop.open { display: block; }
.skin-pop h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 10px; font-weight: 600; }
.skin-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.skin-sw {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 2px solid var(--border);
  position: relative;
  overflow: hidden;
}
.skin-sw.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-3); }
.skin-sw-name {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding: 1px 0;
  background: rgba(0,0,0,.35);
  color: #fff;
  border-radius: 3px;
}
.skin-sw-daylight  { background: linear-gradient(135deg, #fafaf7 50%, oklch(0.55 0.10 155) 50%); }
.skin-sw-midnight  { background: linear-gradient(135deg, #0b0f17 50%, oklch(0.78 0.14 155) 50%); }
.skin-sw-slate     { background: linear-gradient(135deg, #15171c 50%, oklch(0.70 0.16 270) 50%); }
.skin-sw-paper     { background: linear-gradient(135deg, #f6f1e7 50%, oklch(0.55 0.14 60) 50%); }
.skin-sw-terminal  { background: linear-gradient(135deg, #0a0d10 50%, oklch(0.82 0.18 152) 50%); }

.density-row { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; }
.density-row button {
  flex: 1; background: none; border: none;
  padding: 6px 8px; font-size: var(--fs-sm); color: var(--text-2);
  border-radius: var(--r-sm); cursor: pointer; font-weight: 500;
}
.density-row button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* Before/after floating toggle */
.ba-toggle {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  display: flex;
  gap: 2px;
  box-shadow: var(--shadow-lg);
  z-index: 300;
}
.ba-toggle button {
  background: none; border: none;
  padding: 7px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: .01em;
}
.ba-toggle button.active {
  background: var(--accent);
  color: var(--on-accent);
}

/* ── Scroll container ───────────────────────────────────── */
/* Scroll container */
.screen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Screens injection root: pass height/flex through so full-bleed surfaces
   (Planner, future canvases) can resolve a definite height. */
#screens-root {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.screen-pad { padding: var(--pad-6); max-width: 1480px; margin: 0 auto; }

/* Planner pane needs a full-height flex column so its .pl-stage / .pl-board
   (which use flex:1) can resolve against a definite height. */
.screen-pane[data-screen="planner"],
.screen-pane[data-screen="planner"] > [data-mode-pane] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.screen-pane[data-screen="planner"] .pl-stage { flex: 1; min-height: 0; }

/* ── Page header ────────────────────────────────────────── */
.ph {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.ph-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}
.ph-sub {
  font-size: var(--fs-base);
  color: var(--text-3);
  margin-top: 4px;
}
.ph-actions { display: flex; gap: 8px; align-items: center; }

/* ── Buttons ────────────────────────────────────────────── */
/* Buttons. Canonical form is two classes: `btn primary` / `btn ghost` /
   `btn danger`. Hyphenated aliases (`.btn-primary` etc.) are accepted too
   (#343) so the universal muscle-memory form doesn't render unstyled —
   they carry the full base styling on their own. Prefer the space form. */
.btn, .btn-primary, .btn-ghost, .btn-danger, .btn-xs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--ctl-h);
  padding: 4px 12px;
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn:hover, .btn-primary:hover, .btn-ghost:hover, .btn-danger:hover, .btn-xs:hover { background: var(--hover); border-color: var(--border-2); }
/* Keyboard focus ring (#343 a11y). :focus-visible shows it for keyboard nav
   only, never on mouse click. Applies to every interactive component. */
.btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible, .btn-xs:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}
.btn.primary, .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn.primary:hover, .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost, .btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover, .btn-ghost:hover { background: var(--hover); color: var(--text); }
.btn.danger, .btn-danger { color: var(--danger); border-color: var(--border); }
.btn.danger:hover, .btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-sm, .btn-xs { min-height: var(--ctl-h-sm); height: var(--ctl-h-sm); padding: 0 9px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-icon { width: var(--ctl-h); padding: 0; justify-content: center; }

/* ── Cards / surfaces ────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: var(--pad-5); }
.card-h {
  padding: var(--pad-4) var(--pad-5);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-h h3 { font-size: var(--fs-base); font-weight: 600; letter-spacing: -.01em; }
.card-h .meta { font-size: var(--fs-sm); color: var(--text-3); }

/* ── Stats grid ────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--pad-4) var(--pad-5);
}
.stat-card .label { font-size: var(--fs-sm); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat-card .value { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; margin-top: 6px; color: var(--text); }
.stat-card .delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); margin-top: 4px; }
.stat-card .delta.up { color: var(--success); }
.stat-card .delta.down { color: var(--danger); }
.stat-card.accent .value { color: var(--accent); }
/* Semantic variants (Pulse 343, 2026-07-03, first real consumer: Devices stat bar)
   — a stat tile carrying a real status number (e.g. "12 offline") needs
   more than .accent's brand-color option. */
.stat-card.ok .value   { color: var(--success); }
.stat-card.warn .value { color: var(--warning); }

/* ── Checkbox/toggle label ──────────────────────────────────
   .toggle-item was carried over from the legacy index.html SPA into
   web/hr.js (Approvals + employee-editor tabs, #561) and web/chat-
   settings.js without ever being defined here — Codex caught the gap
   during #561's final chunk. Retroactively fixes every existing use,
   not just the new one. */
.toggle-item { display: flex; align-items: center; gap: var(--pad-2); cursor: pointer; color: var(--text-2); }

/* ── Inputs ──────────────────────────────────────────────── */
.input {
  height: var(--ctl-h);
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-base);
  width: 100%;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.input::placeholder { color: var(--text-3); }
.search-input {
  position: relative;
}
.search-input .input { padding-left: 32px; }
.search-input .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }

/* ── Filter chips ────────────────────────────────────────── */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--ctl-h-sm);
  padding: 0 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip:hover { background: var(--hover); color: var(--text); }
.chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chip.active { background: var(--accent-3); color: var(--accent); border-color: var(--accent); }
.chip-count { background: var(--surface-2); border-radius: 999px; padding: 0 6px; font-size: var(--fs-sm); font-weight: 600; }
.chip.active .chip-count { background: color-mix(in oklch, var(--accent) 20%, transparent); }

/* ── Toolbar ─────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.toolbar > .grow { flex: 1; }

/* ── Data table ─────────────────────────────────────────── */
.tbl-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.tbl thead th {
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 10px var(--cell-px);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl tbody td {
  padding: var(--cell-py) var(--cell-px);
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.tbl tbody tr { transition: background var(--t-fast); cursor: pointer; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .num { font-variant-numeric: tabular-nums; }
.tbl .mono { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--badge-h);
  padding: 0 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-purple  { background: var(--purple-bg);  color: var(--purple); }
.badge-neutral { background: var(--surface-2);  color: var(--text-2); border-color: var(--border); }
.badge-accent  { background: var(--accent-3);   color: var(--accent); border-color: color-mix(in oklch, var(--accent) 30%, transparent); }
/* Categorical palette (Pulse 343 P1) — for type-distinctions (plan types, sync
   states, kinds) that are NOT semantic states. Skin-invariant pastels, same
   hue set as the avatar palette. Use these instead of bending success/warning/
   info to non-state meanings (or instead of dead badge-green/blue/yellow). */
.badge-cat-1 { background: oklch(0.90 0.05 30);  color: oklch(0.40 0.12 30); }
.badge-cat-2 { background: oklch(0.90 0.05 80);  color: oklch(0.40 0.12 80); }
.badge-cat-3 { background: oklch(0.90 0.05 155); color: oklch(0.40 0.12 155); }
.badge-cat-4 { background: oklch(0.90 0.05 240); color: oklch(0.40 0.12 240); }
.badge-cat-5 { background: oklch(0.90 0.05 295); color: oklch(0.40 0.12 295); }
.badge-cat-6 { background: oklch(0.90 0.05 350); color: oklch(0.40 0.12 350); }

/* ── Feedback states (empty / loading / error) — Pulse 343 P3 ──────────────
   Canonical "nothing here / failed" zones. Empty = dashed card (matches the
   app's cl-empty/ct-empty), error = calm card w/ danger left-accent, loading =
   real spinner. Use a .state-icon chip with an inline SVG (NOT emoji). Never
   render a bare blank div. .inline drops the card for table cells / small gaps. */
.empty-state, .error-state {
  display: grid; justify-items: center; gap: var(--pad-2);
  padding: var(--pad-6) var(--pad-4);
  text-align: center; color: var(--text-3); font-size: var(--fs-sm);
  background: var(--surface);
  border: 1px dashed var(--border-2); border-radius: var(--r-lg);
}
.empty-state.inline, .error-state.inline { background: none; border: none; padding: var(--pad-5) var(--pad-4); }
.error-state { border-style: solid; border-left: 3px solid var(--danger); }
.empty-state-h { font-size: var(--fs-base); font-weight: 600; color: var(--text-2); }
.error-state .empty-state-h { color: var(--text); }
.empty-state-sub { max-width: 44ch; line-height: 1.45; }
/* Icon chip — a muted rounded tile holding an inline SVG (currentColor). */
.state-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
.state-icon svg { width: 20px; height: 20px; }
.error-state .state-icon { color: var(--danger); background: var(--danger-bg); border-color: color-mix(in oklch, var(--danger) 28%, var(--border)); }
/* Loading — canonical token-colored spinner (the app had none). */
.loading-state { display: flex; align-items: center; justify-content: center; gap: var(--pad-2); padding: var(--pad-6); color: var(--text-3); font-size: var(--fs-sm); }
.spinner { width: 16px; height: 16px; border: 2px solid color-mix(in oklch, var(--accent) 26%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Focus rings (a11y) — Pulse 343 quick-win ─────────────────────────────
   Shared keyboard focus for interactive canon classes that lacked one. btn/
   chip/tab/input/menu-item already carry their own. Mouse clicks don't trigger
   :focus-visible, so this is invisible to mouse users. */
.topnav-link:focus-visible, .tb-link:focus-visible, .tb-icon-btn:focus-visible,
.tb-fav:focus-visible, .tb-star:focus-visible, .topnav-gear:focus-visible,
.topnav-bell:focus-visible, .tb-pill:focus-visible, .tb-active-pill:focus-visible,
.tb-active-cog:focus-visible, .user-row:focus-visible, .fav-row:focus-visible,
.bell-row:focus-visible, .sr-row:focus-visible, .set-nav-item:focus-visible,
.ni-type-btn:focus-visible, .mention-bell-item:focus-visible,
.k1-help:focus-visible, .k1-userpill:focus-visible, .k1-canvas-launch:focus-visible,
.k1-mark:focus-visible, .density-row button:focus-visible, .ba-toggle button:focus-visible,
.btn-star:focus-visible, .btn-icon:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}
/* skin swatch clips box-shadow (overflow:hidden) — use outline instead. */
.skin-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Pagination — Pulse 343 P1 (generalizes .wk-pager) ─────────────────── */
.pager { display: flex; align-items: center; gap: var(--pad-2); justify-content: center; padding: var(--pad-3) 0; font-size: var(--fs-sm); color: var(--text-2); }
.pager .grow { flex: 1; }
.pager-info { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ── Tabs / segmented nav — Pulse 343 P1 (generalizes wk-tab/modnav/vault tabs) ─ */
/* Tabs — track-segmented control (#343 P3, Ryan-chosen). Recessed track; active
   sits on a raised surface chip. Same language as the .density-row switch. */
.tabs {
  display: inline-flex; gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
}
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--ctl-h-sm); padding: 0 var(--pad-3);
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-2); background: none; border: none;
  border-radius: var(--r-sm); cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab.active, .tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* .tabs.fill — stretch to fill the row with equal-width tabs (fixed small sets). */
.tabs.fill { display: flex; }
.tabs.fill .tab { flex: 1; }

/* ── Avatars ─────────────────────────────────────────────── */
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.avatar.sm { width: 22px; height: 22px; font-size: var(--fs-xs); }
.avatar.lg { width: 40px; height: 40px; font-size: var(--fs-base); }
.avatar-a1 { background: oklch(0.85 0.08 30); color: oklch(0.35 0.10 30); }
.avatar-a2 { background: oklch(0.85 0.08 80); color: oklch(0.35 0.10 80); }
.avatar-a3 { background: oklch(0.85 0.08 155); color: oklch(0.35 0.10 155); }
.avatar-a4 { background: oklch(0.85 0.08 240); color: oklch(0.35 0.10 240); }
.avatar-a5 { background: oklch(0.85 0.08 295); color: oklch(0.35 0.10 295); }
.avatar-a6 { background: oklch(0.85 0.08 350); color: oklch(0.35 0.10 350); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar + .avatar { margin-left: -8px; }

/* ── Progress bar ────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.bar-track { flex: 1; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; min-width: 80px; }
.bar-fill { height: 100%; background: var(--success); border-radius: 999px; transition: width var(--t-med); }
.bar-fill.warn { background: var(--warning); }
.bar-fill.bad  { background: var(--danger); }

/* ── Kanban (Planner) ────────────────────────────────────── */
.kanban {
  display: flex;
  gap: 12px;
  padding: 0 var(--pad-6) var(--pad-6);
  overflow-x: auto;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
}
.kanban::-webkit-scrollbar { height: 8px; }
.kanban::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.kcol {
  width: 296px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  max-height: 100%;
}
.kcol.you { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-3); }
.kcol-h {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kcol-name { font-size: var(--fs-base); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcol-meta { display: flex; gap: 4px; font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--text-3); }
.kcol-meta .m-t { color: var(--success); }
.kcol-meta .m-k { color: var(--info); }
.kcol-meta .m-p { color: var(--purple); }
.kcol-body { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }

.kday { padding: 4px 6px 2px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.kday.today { color: var(--accent); }
.kcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-4);
  border-radius: var(--r-sm);
  padding: 10px 11px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.kcard:hover { background: var(--hover); border-color: var(--border-2); }
.kcard.p-critical { border-left-color: var(--danger); }
.kcard.p-high     { border-left-color: var(--warning); }
.kcard.p-medium   { border-left-color: var(--info); }
.kcard.p-low      { border-left-color: var(--text-4); }
.kcard-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 4px;
  font-family: var(--font-mono);
}
.kcard-time { font-weight: 600; color: var(--text); }
.kcard-client { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 3px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard-title { font-size: var(--fs-base); line-height: 1.35; color: var(--text); font-weight: 500; }
.kcard-foot { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* ── Slide-over panel ────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.32);
  z-index: 250;
  display: none;
  animation: fade .15s ease;
}
.overlay.open { display: block; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.slide {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(720px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 251;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.2,.6,.2,1);
  display: flex; flex-direction: column;
}
.slide.open { transform: translateX(0); }
.slide-h {
  padding: var(--pad-5) var(--pad-5) var(--pad-4);
  border-bottom: 1px solid var(--border);
  display: flex; gap: 12px; align-items: flex-start;
}
.slide-h h2 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em; }
.slide-h .sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 4px; }
.slide-body { flex: 1; overflow-y: auto; padding: var(--pad-5); }
/* Slide variants — Pulse 343 P1 (generalizes the wk-drawer needs). */
.slide.narrow { width: min(460px, 92vw); }
.slide.wide   { width: min(920px, 96vw); }
.slide-foot {
  padding: var(--pad-4) var(--pad-5);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--pad-2); justify-content: flex-end; align-items: center;
  flex-wrap: wrap;
}
.slide-foot .grow { flex: 1; }  /* left-side status/error; actions stay right */

/* ── Menu / popover — Pulse 343 P1 ─────────────────────────────────────────
   Canonical dropdown/popover. Generalizes the 6 hand-rolled ones (user-pop,
   fav-pop, skin-pop, wk-colmenu, vault-client-dd, device dropdown). Position
   the wrapper relative; toggle [hidden] or .open. */
.menu {
  position: absolute;
  min-width: 200px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--pad-1);
  z-index: var(--z-dropdown);
}
.menu[hidden] { display: none; }
/* menu-item normalizes <button>/<a> so it has no UA chrome and fills width. */
/* menu-item — matches the .user-row/.fav-row topbar menus (#343 P3): base font,
   calmer surface-2 hover. Normalized for <button>/<a> (no UA chrome, full width). */
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--ctl-h); text-align: left;
  appearance: none; background: transparent; border: 0;
  padding: var(--pad-2);
  border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-base); color: var(--text); cursor: pointer;
  white-space: nowrap;
}
/* hover + keyboard-managed active state (roving .active/.focused without DOM focus). */
.menu-item:hover, .menu-item.active, .menu-item.focused, .menu-item.is-active { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: color-mix(in oklch, var(--danger) 8%, transparent); }
.menu-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.menu-item[disabled], .menu-item.disabled, .menu-item.locked { opacity: .5; cursor: not-allowed; pointer-events: none; }
.menu-item .grow { flex: 1; }
.menu-item .sub, .menu-item .kbd-hint { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); }
.menu-sep { height: 1px; background: var(--border); margin: var(--pad-1) 0; }
.menu-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: var(--pad-2) var(--pad-3) var(--pad-1); }
.menu-empty { padding: var(--pad-3); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }

/* ── Modal (design-system v1.1 — sanctioned pass-2b extension) ───
 * A centered modal dialog distinct from .slide (which is a right-edge
 * slide-over). Used for short confirmations + small wizards. Tokens
 * only; no raw color literals. Density-aware spacing via --pad-*.
 *
 *   <div class="modal-backdrop">
 *     <div class="modal open" role="dialog" aria-modal="true">
 *       <div class="modal-h">
 *         <h2>Title</h2>
 *         <button class="btn ghost btn-icon" aria-label="Close">×</button>
 *       </div>
 *       <div class="modal-body">…</div>
 *       <div class="modal-actions">
 *         <button class="btn">Cancel</button>
 *         <button class="btn primary">Save</button>
 *       </div>
 *     </div>
 *   </div>
 */
.modal-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in oklch, var(--text) 32%, transparent);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad-4);
  animation: fade var(--t-fast);
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 2 * var(--pad-4)));
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateY(var(--pad-2)) scale(.98);
  transition: opacity var(--t-med), transform var(--t-med);
}
.modal.open { opacity: 1; transform: translateY(0) scale(1); }
.modal-h {
  padding: var(--pad-4);
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pad-3);
}
.modal-h h2 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em; }
.modal-body {
  flex: 1; overflow-y: auto;
  padding: var(--pad-5) var(--pad-4);
}
.modal-actions {
  padding: var(--pad-3) var(--pad-4);
  border-top: 1px solid var(--divider);
  display: flex; justify-content: flex-end; gap: var(--pad-2);
}

/* ── Lightweight confirmation modal (tm-modal) ──────────────────────────
 * Shared base used by canvas.js (mode-switch, reset, save) and the ticket
 * workspace member picker. ticket.css extends with list/row/role variants.
 */
.tm-modal-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in oklch, var(--text) 32%, transparent);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
}
.tm-modal-backdrop.open { display: flex; }
.tm-modal {
  width: 420px; max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--pad-4);
  box-shadow: var(--shadow-lg);
}
.tm-modal h4 {
  margin: 0 0 var(--pad-3) 0;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
.tm-modal-search {
  width: 100%; box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--pad-1) var(--pad-2);
  color: var(--text);
  font: inherit; font-size: var(--fs-sm);
}
.tm-modal-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--pad-4); gap: var(--pad-3);
}
.tm-modal-actions { display: flex; gap: var(--pad-2); }

/* ── Sections ────────────────────────────────────────────── */
.sect { margin-bottom: 28px; }
.sect-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.sect-h h4 {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); font-weight: 600;
}

/* ── Detail grid ────────────────────────────────────────── */
.dgrid { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; }
.dgrid dt { font-size: var(--fs-sm); color: var(--text-3); }
.dgrid dd { font-size: var(--fs-base); color: var(--text); }

/* ── Settings layout ────────────────────────────────────── */
.settings { display: flex; height: 100%; }
.set-nav {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px 8px;
  overflow-y: auto;
}
.set-nav-section { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 14px 10px 6px; font-weight: 600; }
.set-nav-item {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text-2);
  cursor: pointer;
  font-weight: 500;
}
.set-nav-item:hover { background: var(--hover); color: var(--text); }
.set-nav-item.active { background: var(--surface-2); color: var(--accent); }

.set-content { flex: 1; overflow-y: auto; padding: var(--pad-6) var(--pad-6); }

/* ── Login screen ────────────────────────────────────────── */
.login-stage {
  display: grid;
  place-items: center;
  height: 100vh;
  background: var(--bg);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
}
.login-logo {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  display: grid; place-items: center;
  font-size: var(--fs-lg); font-weight: 700;
  margin: 0 auto 18px;
  letter-spacing: -.02em;
}
.login-card h1 { text-align: center; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.login-card p.sub { text-align: center; font-size: var(--fs-base); color: var(--text-3); margin-top: 6px; margin-bottom: 28px; }
.login-ms {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  height: 42px;
  background: var(--text);
  color: var(--surface);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}
.login-foot { margin-top: 22px; text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
.login-foot strong { color: var(--text-2); }

/* ── Design system page ─────────────────────────────────── */
.ds-grid { display: grid; gap: 24px; grid-template-columns: 1fr; max-width: 1100px; }
.ds-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.ds-row > h3 { font-size: var(--fs-base); font-weight: 600; color: var(--text); padding-top: 4px; }
.ds-row > h3 .ds-sub { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--text-3); margin-top: 4px; }
.swatch-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sw {
  height: 64px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.sw-label {
  position: absolute; bottom: 4px; left: 6px;
  font-size: var(--fs-xs); font-family: var(--font-mono);
  color: var(--text); background: var(--surface);
  padding: 1px 4px; border-radius: 3px;
  border: 1px solid var(--border);
}

.type-spec { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.type-spec:last-child { border-bottom: none; }
.type-spec .name { width: 110px; font-size: var(--fs-sm); color: var(--text-3); font-family: var(--font-mono); }
.type-spec .sample { flex: 1; }
.type-spec .specs { font-size: var(--fs-sm); color: var(--text-3); font-family: var(--font-mono); }

.h1 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; }
.h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; }
.h3 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em; }
.h4 { font-size: var(--fs-base); font-weight: 600; }
.body { font-size: var(--fs-base); }
.small { font-size: var(--fs-sm); color: var(--text-2); }
.caption { font-size: var(--fs-sm); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

/* ── Utility ─────────────────────────────────────────────── */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.between { justify-content: space-between; }
.muted { color: var(--text-3); }
.t-2 { color: var(--text-2); }
.fw-6 { font-weight: 600; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 18px; }
.mb-1 { margin-bottom: 6px; } .mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 18px; }
.gap-1 { gap: 6px; } .gap-2 { gap: 10px; } .gap-3 { gap: 14px; }
.flex { display: flex; } .wrap { flex-wrap: wrap; } .ai-c { align-items: center; }
.hide { display: none !important; }

/* scrollbars — subtle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-2); }

/* ============================================================
   F21 — Canonical topbar (Pulse #166 T2)
   Used by web/topbar.js. Section H of CLAUDE-STANDARDS canonizes
   the markup contract; these classes are the visual canon.
   ============================================================ */

/* K1 mark — replaces the legacy .topnav-brand B/Bukaroo wordmark */
.k1-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: 0.3px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 4px;
  transition: filter var(--t-fast);
  font-family: var(--font-mono);
}
.k1-mark:hover { filter: brightness(1.08); }

/* First-name pill — replaces the legacy .topnav-user circular initials */
.k1-userpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px 0 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-base); font-weight: 500;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.k1-userpill:hover { background: var(--hover); border-color: var(--border-2); }
.k1-userpill .caret { color: var(--text-3); font-size: var(--fs-xs); padding-right: 4px; }

/* Topbar star button — toggles favorite for current page. Matches .mention-bell
   + .k1-canvas-launch + .k1-help icon-button shape. Starred state uses warning
   color. Behavior wired in topbar.js. */
.tb-star {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 6px;
  border: 0;
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.tb-star:hover { background: var(--hover); color: var(--text); }
.tb-star.starred { color: var(--warning); }
.tb-star:disabled { opacity: 0.5; cursor: not-allowed; }

/* Canvas launcher — same shape as .mention-bell + .k1-help. Click opens
   /canvas in a new window (not a tab); behavior wired in topbar.js. */
.k1-canvas-launch {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--t-fast), color var(--t-fast);
  border: 0;
  background: transparent;
  text-decoration: none;
}
.k1-canvas-launch:hover { background: var(--hover); color: var(--text); }
.k1-canvas-launch svg { flex-shrink: 0; }

/* Global Chat Responses — active customer chats on every authenticated page. */
.tb-chat-wrap { position: relative; }
.k1-chat-responses {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-2); cursor: pointer;
}
.k1-chat-responses:hover { background: var(--hover); color: var(--text); }
.tb-chat-badge {
  position: absolute; top: -2px; right: -3px; min-width: 16px; height: 16px;
  padding: 0 var(--pad-1); border-radius: 8px; background: var(--danger);
  color: var(--on-danger); font-size: var(--fs-xs); font-weight: 700; line-height: 16px;
}
.tb-chat-badge[hidden] { display: none; }
.tb-chat-pop {
  position: absolute; top: calc(100% + var(--pad-2)); right: 0; z-index: 200;
  display: none; width: min(380px, calc(100vw - var(--pad-4))); max-height: 480px;
  overflow: hidden; border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.tb-chat-wrap.open .tb-chat-pop { display: block; }
.tb-chat-head { display: flex; align-items: center; justify-content: space-between; padding: var(--pad-3); border-bottom: 1px solid var(--border); color: var(--text); font-size: var(--fs-sm); font-weight: 650; }
.tb-chat-head a { color: var(--accent); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; }
.tb-chat-list { max-height: 420px; overflow-y: auto; }
.tb-chat-row { display: flex; align-items: flex-start; gap: var(--pad-3); padding: var(--pad-3); border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.tb-chat-row:hover { background: var(--hover); }
.tb-chat-row-main { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--pad-1); min-width: 0; }
.tb-chat-row strong { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.tb-chat-row small { flex-basis: 100%; overflow: hidden; color: var(--text-3); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.tb-chat-row time { color: var(--text-3); font-size: var(--fs-xs); }
.tb-chat-unread { padding: var(--pad-0) var(--pad-1); border-radius: 3px; background: var(--danger); color: var(--on-danger); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; }
.tb-chat-empty { padding: var(--pad-5); color: var(--text-3); font-size: var(--fs-sm); text-align: center; }

/* Canonical topbar mobile contract: retain primary navigation and immediate
   attention utilities; collapse search until focused and omit low-priority
   Favorites/module identity text. */
@media (max-width: 760px) {
  .topbar { gap: var(--pad-1); padding: 0 var(--pad-2); }
  .tb-link { width: 32px; padding: 0; justify-content: center; font-size: 0; }
  .tb-link svg { width: 16px; height: 16px; }
  .tb-nav-cog, .tb-fav, .tb-active { display: none !important; }
  .tb-search { flex: 0 0 32px; min-width: 32px; max-width: 32px; }
  .tb-search .input { width: 32px; padding: 0; color: transparent; cursor: pointer; }
  .tb-search .input::placeholder { color: transparent; }
  .tb-search > .ico { left: 9px; }
  .tb-kbd { display: none; }
  .tb-search:focus-within { position: absolute; left: var(--pad-2); right: var(--pad-2); z-index: 70; width: auto; max-width: none; }
  .tb-search:focus-within .input { width: 100%; padding-left: var(--pad-6); padding-right: var(--pad-3); color: var(--text); cursor: text; }
  .tb-search:focus-within .input::placeholder { color: var(--text-3); }
  .k1-userpill { width: 32px; padding: 0; justify-content: center; }
  .k1-userpill #k1-userpill-name { max-width: 1ch; overflow: hidden; }
  .k1-userpill .caret { display: none; }
  .tb-spacer { min-width: 0; }
}

/* Help (?) button — matches .mention-bell shape for visual consistency */
.k1-help {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--t-fast), color var(--t-fast);
  border: 0;
  background: transparent;
  text-decoration: none;
}
.k1-help:hover { background: var(--hover); color: var(--text); }
.k1-help svg { flex-shrink: 0; }

/* User-menu group label inside .user-pop */
.user-pop .pop-grp {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
  padding: 10px 10px 4px;
}
.user-pop .skin-grid { gap: 4px; margin: 0 4px 8px; padding: 0; }
.user-pop .density-row { margin: 0 4px 4px; }

/* Active module pill + gear (right of search, F21.2 element order).
   Moved into production app.css per Codex r1 MEDIUM (was only in
   docs/design/redesign/app.css prototype). */
.tb-active {
  display: flex; align-items: center; gap: 2px;
}
.tb-active:empty { display: none; }
.tb-active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  background: var(--accent-3);
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast);
}
.tb-active-pill:hover { background: color-mix(in oklch, var(--accent) 16%, var(--surface)); }
.tb-active-cog {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.tb-active-cog:hover { color: var(--text); background: var(--hover); border-color: var(--border-2); }
/* Gear marked active while on the module's own settings page (#343). */
.tb-active-cog.active { color: var(--accent); background: var(--accent-3, var(--hover)); border-color: var(--accent); }
/* Nav-pill gear (Planner/Hub) — matches the 32px nav-pill height, sits snug
   beside its pill (the 2px .tb-nav gap is the only separation). (#343) */
.tb-nav-cog { width: 32px; height: 32px; }
.tb-active-cog svg { color: currentColor; }

/* Mention bell — ported from index.html inline <style> (lines 495-513
   at extraction time). Tokens translated to canon: --bg2→--surface,
   --bg3→--hover, --text2→--text-2, --text3→--text-3, --border→--border,
   --border2→--border-2, --red→--danger, --bg2-hi→--surface-2.
   Used by /mention-bell.js (which auto-binds to #mention-bell). */
.mention-bell-wrap { position: relative; }
.mention-bell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--t-fast), color var(--t-fast);
  border: 0;
  background: transparent;
}
.mention-bell:hover { background: var(--hover); color: var(--text); }
.mention-bell svg { flex-shrink: 0; }
.mention-badge {
  position: absolute; top: 2px; right: 1px;
  min-width: 16px; height: 16px;
  background: var(--danger); color: var(--on-danger);
  font-size: var(--fs-xs); font-weight: 700;
  border-radius: 8px;
  padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
}
.mention-bell-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px; max-height: 480px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: none;
}
.mention-bell-dropdown:not([hidden]) { display: block; }
.mention-badge[hidden],
.mention-bell-mark-all[hidden],
.mention-bell-status[hidden] { display: none; }
.mention-bell-wrap.open .mention-bell-dropdown { display: block; }
.mention-bell-title {
  padding: 10px 14px;
  font-size: var(--fs-xs); letter-spacing: 1.5px;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.mention-bell-mark-all {
  background: none; border: none;
  color: var(--text-3);
  font-size: var(--fs-xs); letter-spacing: 1px;
  cursor: pointer;
  padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase;
  font-family: var(--font-ui);
}
.mention-bell-mark-all:hover { background: var(--hover); color: var(--text); }
.mention-bell-status {
  padding: var(--pad-2) var(--pad-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.mention-bell-status.is-error {
  background: var(--danger-bg);
  color: var(--danger);
}
.mention-bell-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.mention-bell-item.btn {
  width: 100%;
  height: auto;
  min-height: var(--row-h);
  display: block;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  white-space: normal;
  text-align: left;
}
.mention-bell-item:last-child { border-bottom: none; }
.mention-bell-item:hover { background: var(--hover); }
.mention-bell-item.is-unread {
  border-left: 3px solid var(--accent);
  padding-left: 11px;
  background: var(--surface-2);
}
.mention-bell-item-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.mention-bell-source {
  flex-shrink: 0;
  text-transform: uppercase;
}
.mention-bell-item-ref {
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.mention-bell-item-title {
  font-size: var(--fs-sm); color: var(--text-2);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mention-bell-item-time {
  font-size: var(--fs-xs); color: var(--text-3);
  flex-shrink: 0;
}
.mention-bell-item-excerpt {
  font-size: var(--fs-sm); color: var(--text-3);
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.4;
}
.mention-bell-empty {
  color: var(--text-3);
  font-size: var(--fs-sm);
  padding: 14px;
  text-align: center;
}

/* Shared @mention autocomplete — /mention-bell.js. Consumers attach the
   helper to their own textarea; the backend remains the token authority. */
.k1-mention-popup {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--pad-1));
  z-index: var(--z-dropdown);
  width: 22rem;
  max-width: 100%;
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--pad-0) 0;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.k1-mention-item {
  padding: var(--pad-1) var(--pad-3);
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.k1-mention-item.active,
.k1-mention-item:hover {
  background: var(--accent-3);
  color: var(--accent);
}

/* ── New Item Wizard (NiWizard) — web/new-item-wizard.js ──────────────────
   Shared across Planner and Work. Styles live here (not injected) per F14. */
.ni-wiz-modal { overflow: hidden; }
.ni-wiz-heading { letter-spacing: .06em; font-size: var(--fs-xs); color: var(--accent); }
.ni-modal-body { padding: var(--pad-4) 24px; }
.ni-type-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-2); margin-bottom: var(--pad-4); }
.ni-type-icon { font-size: var(--fs-md); margin-bottom: var(--pad-1); }
.ni-type-label { font-size: var(--fs-xs); letter-spacing: 1px; color: var(--text-2); }
.ni-type-sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--pad-1); }
.ni-type-btn {
  background: var(--surface); border: 2px solid var(--border);
  padding: var(--pad-3) var(--pad-2); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; font-family: inherit;
  border-radius: var(--r-md);
}
.ni-type-btn:hover { border-color: var(--text-2); }
.ni-type-btn.active-ticket { border-color: var(--info);    background: var(--info-bg); }
.ni-type-btn.active-task   { border-color: var(--success); background: var(--success-bg); }
.ni-field { margin-bottom: var(--pad-3); }
.ni-field label { display: block; font-size: var(--fs-xs); letter-spacing: 1px; color: var(--text-3); margin-bottom: var(--pad-1); }
.ni-field input, .ni-field select, .ni-field textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: var(--fs-base);
  padding: var(--pad-1) var(--pad-2); outline: none; border-radius: var(--r-sm);
}
.ni-field input:focus, .ni-field select:focus, .ni-field textarea:focus { border-color: var(--accent); }
.ni-field textarea { resize: vertical; min-height: 60px; }
.ni-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-2); }
.ni-field-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--pad-2); }
.ni-err { display: none; font-size: var(--fs-xs); color: var(--danger); margin-top: var(--pad-1); }
.ni-field-note { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--pad-1); }

/* ── Toast notifications — Pulse 343 Phase 1 ─────────────────────────────
   Stack in a .toast-group fixed to bottom-right. JS creates/destroys
   individual .toast elements; CSS handles appearance + enter/exit animation.
   Variant classes: .toast.success / .toast.warning / .toast.danger / .toast.info
   z-index uses var(--z-toast) from tokens (highest layer). */
.toast-group {
  position: fixed; bottom: var(--pad-5); right: var(--pad-5);
  display: flex; flex-direction: column; gap: var(--pad-2);
  z-index: var(--z-toast);
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--pad-2);
  min-width: 260px; max-width: 380px;
  padding: var(--pad-3) var(--pad-3) var(--pad-3) var(--pad-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  color: var(--text);
  pointer-events: auto;
  animation: toast-in var(--t-med) ease both;
}
.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.danger  { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--info); }
/* default (no variant) — neutral left accent */
.toast:not(.success):not(.warning):not(.danger):not(.info) { border-left-color: var(--border-2); }
.toast-content { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; color: var(--text); line-height: 1.3; }
.toast-body { color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.toast-close {
  flex-shrink: 0; margin-top: 1px;
  width: 20px; height: 20px;
  background: transparent; border: 0;
  color: var(--text-3); cursor: pointer;
  border-radius: var(--r-sm); display: grid; place-items: center;
  padding: 0; font-size: var(--fs-base); line-height: 1;
}
.toast-close:hover { background: var(--hover); color: var(--text); }
.toast-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@keyframes toast-in { from { opacity: 0; transform: translateX(var(--pad-4)); } to { opacity: 1; transform: translateX(0); } }
.toast.out { animation: toast-out var(--t-med) ease both; }
@keyframes toast-out { to { opacity: 0; transform: translateX(var(--pad-4)); } }

/* ── Tooltip — Pulse 343 Phase 1 ─────────────────────────────────────────
   Pure-CSS via .has-tooltip wrapper + [role="tooltip"] child element.
   Default placement: above (top). Modifiers: .tip-bottom / .tip-left / .tip-right.
   JS may also position floating tooltips; this covers the inline-markup case.
   Uses the text/bg inversion for maximum contrast across all skins. */
.has-tooltip { position: relative; }
.has-tooltip [role="tooltip"] {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--text); color: var(--bg);
  padding: 3px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); line-height: 1.4;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--t-fast);
  z-index: var(--z-dropdown);
}
.has-tooltip:hover [role="tooltip"],
.has-tooltip:focus-within [role="tooltip"] { opacity: 1; }
.has-tooltip.tip-bottom [role="tooltip"] { bottom: auto; top: calc(100% + 6px); }
.has-tooltip.tip-left  [role="tooltip"] { bottom: auto; top: 50%; left: auto; right: calc(100% + 6px); transform: translateY(-50%); }
.has-tooltip.tip-right [role="tooltip"] { bottom: auto; top: 50%; left: calc(100% + 6px); transform: translateY(-50%); }

/* ── Bulk-action bar — Pulse 343 Phase 1 ─────────────────────────────────
   Floating pill at the bottom of the screen while rows are selected.
   Toggle with [hidden]. JS sets .bulk-count text and wires action buttons.
   Uses z-index: var(--z-sticky) — below modals/overlays, above page content. */
.bulk-bar {
  position: fixed; bottom: var(--pad-4); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--pad-3);
  padding: var(--pad-2) var(--pad-3) var(--pad-2) var(--pad-4);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-sticky);
  white-space: nowrap;
  font-size: var(--fs-sm);
}
.bulk-bar[hidden] { display: none; }
.bulk-count { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.bulk-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
.bulk-actions { display: flex; gap: var(--pad-2); }