/*
 * Kapable Platform — Shared Header
 * Uses --kp-* tokens from kapable-theme.css exclusively.
 * Height: 44px. Designed to work across all app surfaces.
 */

/* sticky per operator ask 2026-07-22: header must outrank main content in
   z-index — equal z buries popovers (dropdowns at z 200) under later-painted
   page content (IMP-2590 lane lesson).
 *
 * BOTH rules below must carry position:sticky — not just .kp-header. Two
 * mount shapes exist across consumers:
 *   1. Wrapper mount (kv2-launchpad, kv2-chat): a `<div id="kapable-header">`
 *      that kapable-header.js#mount() renders the real <header class="kp-
 *      header"> into. sticky on .kp-header alone does NOTHING here — a
 *      sticky element only moves within its containing block's bounds, and
 *      the wrapper div is exactly header-height (it has no extra scrollable
 *      room for the child to "stick" through), so the whole wrapper needs
 *      to be the sticky element.
 *   2. Direct render (kv2-board, designer-ui): <header class="kp-header">
 *      is itself a flex-shell child, with `main` doing the overflow
 *      scrolling. There the header already sits outside the scroller, so
 *      sticky on it is a harmless no-op — the #kapable-header rule below
 *      simply never matches.
 * Consumer note: any app that already declares its own `#kapable-header`
 * rule (kv2-launchpad's styles.css has `#kapable-header { position:
 * relative; z-index: 10 }`, written for the old non-sticky header) must
 * drop or realign that local rule — otherwise it wins by source order and
 * silently cancels this fix. That realignment is wave-1 consumer work, not
 * done here.
 */
#kapable-header,
.kp-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.kp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 44px;
  background: var(--kp-surface);
  border-bottom: 1px solid var(--kp-border);
  font-family: var(--kp-font);
  flex-shrink: 0;
}

/* ── Left: brand + app name ── */
.kp-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.kp-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--kp-text);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: color 0.15s;
}
.kp-header-brand:hover {
  text-decoration: none;
  color: var(--kp-accent);
}
.kp-header-brand img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
}
.kp-header-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
}
/* Wordmark sizing in the header context (register rules live in kapable-theme.css) */
.kp-header-brand .kp-wordmark {
  font-size: 14px;
}

.kp-header-sep {
  color: var(--kp-text-muted);
  font-weight: 300;
  font-size: 16px;
  user-select: none;
  opacity: 0.5;
}

.kp-header-app {
  display: inline-flex;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  color: var(--kp-text-dim);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.kp-header-app:hover,
a.kp-header-app:focus-visible {
  color: var(--kp-accent);
  text-decoration: none;
}

/* ── App context region (header-v0.7.0, opts.contextEl) ──
 * A flexible middle strip between the primary nav and the right cluster,
 * for app-supplied context (document title, kind, reading minutes). It
 * absorbs all spare width (flex:1) and ellipsizes rather than wrapping —
 * the header stays one 44px row no matter how long a title is. min-width:0
 * is load-bearing: without it flex refuses to shrink below content size
 * and the right cluster gets pushed off-viewport. */
.kp-header-context {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
}

/* ── App actions slot (header-v0.7.0, opts.actionsEl) ──
 * Leading position inside the right cluster. On coarse/narrow screens the
 * slot itself scrolls horizontally so a control-dense app (artifacts) never
 * wraps the header; the shared theme/user cluster stays fixed at the edge.
 * Popovers inside the slot need to escape — overflow only clips when the
 * slot actually scrolls, so consumers with popover children should keep the
 * control count within the viewport or use fixed-position sheets on mobile
 * (the artifacts pattern). */
.kp-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
@media (max-width: 700px) {
  .kp-header-actions {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .kp-header-actions::-webkit-scrollbar { display: none; }
}

/* ── Right: actions ── */
.kp-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Icon button (theme toggle, chat toggle) ── */
.kp-header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: none;
  border: 1px solid transparent;
  color: var(--kp-text-dim);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  position: relative;
  padding: 0;
}
.kp-header-icon-btn:hover {
  background: var(--kp-surface-hi);
  border-color: var(--kp-border);
  color: var(--kp-text);
}
.kp-header-icon-btn svg {
  width: 16px;
  height: 16px;
}

/* Chat badge in header */
.kp-header-chat-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kp-danger);
  display: none;
}
.kp-header-chat-badge.visible {
  display: block;
}

/* ── User button ── */
.kp-header-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 6px;
  background: none;
  border: 1px solid transparent;
  color: var(--kp-text-dim);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--kp-font);
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.kp-header-user-btn:hover {
  background: var(--kp-surface-hi);
  border-color: var(--kp-border);
}
.kp-header-user-btn.open {
  background: var(--kp-surface-hi);
  border-color: var(--kp-border);
}

.kp-header-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kp-accent-bg);
  color: var(--kp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}

.kp-header-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.5;
  transition: transform 0.15s;
}
.kp-header-user-btn.open .kp-header-chevron {
  transform: rotate(180deg);
}

/* ── Dropdown ── */
.kp-header-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--kp-surface);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius, 8px);
  min-width: 200px;
  box-shadow: var(--kp-shadow-lg, 0 8px 24px rgba(15, 23, 42, 0.14));
  z-index: 200;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  /* visibility keeps the CLOSED menu out of the tab order (a11y): opacity
     alone leaves invisible items keyboard-focusable. The delayed visibility
     transition preserves the fade-out. */
  visibility: hidden;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0.15s;
}
.kp-header-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.kp-header-dd-section {
  padding: 10px 12px;
}
.kp-header-dd-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--kp-text);
}
.kp-header-dd-email {
  font-size: 12px;
  color: var(--kp-text-dim);
  margin-top: 2px;
}
.kp-header-dd-sep {
  height: 1px;
  background: var(--kp-border);
}

.kp-header-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--kp-text);
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  font-family: var(--kp-font);
  transition: background 0.1s;
}
.kp-header-dd-item:hover {
  background: var(--kp-surface-hi);
  text-decoration: none;
}
.kp-header-dd-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--kp-text-dim);
}
.kp-header-dd-item.danger {
  color: var(--kp-danger);
}
.kp-header-dd-item.danger svg {
  color: var(--kp-danger);
}
.kp-header-dd-item.danger:hover {
  background: var(--kp-danger-bg);
}

/* ── Tool switcher ───────────────────────────────────────────────────────
   The shared shell's cross-tool index: a grid-glyph trigger beside the app
   link, opening a grouped, filterable panel. Ruled grammar; the panel is a
   dialog, so it earns a container. */
.kp-header-switcher-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: none;
  border: 1px solid transparent;
  color: var(--kp-text-dim);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.kp-header-switcher-btn:hover {
  background: var(--kp-surface-hi);
  border-color: var(--kp-border);
  color: var(--kp-text);
}
.kp-header-switcher-btn svg { width: 13px; height: 13px; }

.kp-switcher {
  position: absolute;
  left: 12px;
  top: calc(100% + 4px);
  width: min(560px, calc(100vw - 24px));
  background: var(--kp-surface);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius, 4px);
  box-shadow: var(--kp-shadow-lg, 0 8px 24px rgba(15, 23, 42, 0.14));
  z-index: 200;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0.15s;
}
.kp-switcher.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.kp-switcher-find {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--kp-text);
  font-family: var(--kp-font);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--kp-border);
  outline: none;
}
.kp-switcher-find::placeholder { color: var(--kp-text-muted); }
.kp-switcher-find:focus-visible { border-bottom-color: var(--kp-accent); }

.kp-switcher-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 18px;
  padding: 8px 8px 10px;
  max-height: 340px;
  overflow-y: auto;
}
.kp-switcher-group h4 {
  margin: 0;
  padding: 10px 10px 4px;
  font-family: var(--kp-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--kp-text-dim);
}
.kp-switcher-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--kp-text);
}
.kp-switcher-item:hover { text-decoration: none; }
.kp-switcher-item.selected { background: var(--kp-accent-bg); }
.kp-switcher-idx {
  font-family: var(--kp-font);
  font-variant-numeric: tabular-nums;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: var(--kp-text-dim);
  flex-shrink: 0;
}
.kp-switcher-name {
  font-family: var(--kp-font-display);
  font-optical-sizing: auto;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.kp-switcher-item.selected .kp-switcher-name,
.kp-switcher-item.here .kp-switcher-name { color: var(--kp-accent); }
.kp-switcher-ext {
  margin-left: auto;
  font-size: 10px;
  color: var(--kp-text-dim);
}
.kp-switcher-empty {
  grid-column: 1 / -1;
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--kp-text-muted);
}
.kp-switcher-foot {
  display: flex;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--kp-border-subtle, var(--kp-border));
  font-family: var(--kp-font);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--kp-text-dim);
}
.kp-switcher-foot kbd {
  font-family: inherit;
  font-size: 9px;
  border: 1px solid var(--kp-border);
  border-radius: 3px;
  padding: 0 4px;
}

@media (max-width: 640px) {
  .kp-switcher { left: 8px; width: calc(100vw - 16px); }
  .kp-switcher-cols { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .kp-header { padding: 0 4px 0 12px; }
  .kp-header-app { display: none; }
  .kp-header-sep { display: none; }
}
/* header-v0.7.2 (DESK-142): every header control is a 44 px target on a phone or any coarse
   pointer (the tool switcher was 24 px, the icon buttons 32, the user button 34). The bar is
   44 px tall, so they fill it without moving it. */
@media (max-width: 600px), (pointer: coarse) {
  .kp-header-switcher-btn, .kp-header-icon-btn { width: 44px; height: 44px; }
  .kp-header-user-btn { height: 44px; }
  .kp-header-brand { min-height: 44px; }
  .kp-header-dd-item { min-height: 44px; }
  .kp-switcher-item { min-height: 44px; align-items: center; }
  .kp-switcher-find { font-size: 16px; }
}