/* ============================================================
   COMMAND PALETTE · W6
   Overlay component — loaded on every page.
   Variables come from today.css; safe defaults provided.
   ============================================================ */

.cmdk-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.cmdk-root.open {
  visibility: visible;
  pointer-events: auto;
}

.cmdk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.cmdk-root.open .cmdk-backdrop { opacity: 1; }

.cmdk-modal {
  position: absolute;
  top: 14vh;
  left: 50%;
  transform: translate(-50%, -8px) scale(.98);
  width: min(680px, calc(100vw - 32px));
  max-height: min(640px, 70vh);
  background: var(--surface-1, #1a1c1c);
  border: 1px solid var(--border, #2a2c2c);
  border-radius: 14px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.cmdk-root.open .cmdk-modal {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* ── Search input ─────────────────── */
.cmdk-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #2a2c2c);
  background: var(--surface-1, #1a1c1c);
}
.cmdk-search-icon {
  color: var(--text-mute, #6b7470);
  display: grid;
  place-items: center;
}
.cmdk-search-icon svg { width: 16px; height: 16px; }
.cmdk-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text, #e3e2e2);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: -.005em;
  outline: none;
  padding: 4px 0;
}
.cmdk-input::placeholder {
  color: var(--text-mute, #6b7470);
}
.cmdk-esc {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border: 1px solid var(--surface-4, #343535);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text-3, #869585);
  background: var(--surface-2, #1e2020);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── List ─────────────────── */
.cmdk-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3, #292a2a) transparent;
}
.cmdk-list::-webkit-scrollbar { width: 8px; }
.cmdk-list::-webkit-scrollbar-thumb {
  background: var(--surface-3, #292a2a);
  border-radius: 4px;
  border: 2px solid var(--surface-1, #1a1c1c);
}

.cmdk-section {
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute, #6b7470);
  padding: 14px 12px 6px;
}

.cmdk-row {
  display: grid;
  grid-template-columns: 28px 1fr auto 14px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-2, #bccbb9);
  position: relative;
  transition: background .08s;
}
.cmdk-row.selected {
  background: var(--surface-2, #1e2020);
  color: var(--text, #e3e2e2);
}
.cmdk-row.selected::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  background: var(--primary-bright, #53e076);
  border-radius: 0 2px 2px 0;
}

.cmdk-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--surface-3, #292a2a);
  color: var(--text-2, #bccbb9);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cmdk-icon svg { width: 14px; height: 14px; }
.cmdk-icon.sparkles, .cmdk-icon.zap {
  background: var(--primary-soft, rgba(83,224,118,.1));
  color: var(--primary-bright, #53e076);
}
.cmdk-icon.inbox {
  background: var(--info-soft, rgba(126,192,238,.1));
  color: var(--info, #7ec0ee);
}
.cmdk-icon.refresh {
  background: var(--surface-3, #292a2a);
  color: var(--text, #e3e2e2);
}
.cmdk-icon.check {
  background: var(--primary-soft, rgba(83,224,118,.1));
  color: var(--primary-bright, #53e076);
}
.cmdk-icon.alert {
  background: var(--warning-soft, rgba(255,183,77,.1));
  color: var(--warning, #ffb74d);
}
.cmdk-icon.sev-warn {
  background: var(--warning-soft, rgba(255,183,77,.1));
  color: var(--warning, #ffb74d);
}
.cmdk-icon.sev-error {
  background: var(--error-soft, rgba(255,180,171,.1));
  color: var(--error, #ffb4ab);
}
.cmdk-icon.pin {
  background: var(--primary-soft, rgba(83,224,118,.1));
  color: var(--primary-bright, #53e076);
}
.cmdk-icon.tag-warn {
  background: var(--warning-soft, rgba(255,183,77,.1));
  color: var(--warning, #ffb74d);
}

.cmdk-text {
  min-width: 0;
}
.cmdk-row-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text, #e3e2e2);
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-sub {
  font-size: 11.5px;
  color: var(--text-mute, #6b7470);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-shortcut {
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border: 1px solid var(--surface-4, #343535);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text-3, #869585);
  background: var(--surface-2, #1e2020);
}

.cmdk-arrow {
  color: var(--text-mute, #6b7470);
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.cmdk-arrow svg { width: 14px; height: 14px; }
.cmdk-row.selected .cmdk-arrow {
  opacity: 1;
  transform: translateX(2px);
  color: var(--primary-bright, #53e076);
}

.cmdk-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 18px;
  color: var(--text-mute, #6b7470);
  font-size: 12.5px;
  line-height: 1.5;
}
.cmdk-empty svg { color: var(--text-3, #869585); flex-shrink: 0; }
.cmdk-empty strong { color: var(--text-2, #bccbb9); font-weight: 600; }


/* ── Footer hints ─────────────────── */
.cmdk-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--border, #2a2c2c);
  background: var(--surface, #0d0e0f);
  font-size: 10.5px;
  color: var(--text-mute, #6b7470);
}
.cmdk-foot-spacer { flex: 1; }
.cmdk-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cmdk-hint kbd {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 5px;
  border: 1px solid var(--surface-4, #343535);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--text-3, #869585);
  background: var(--surface-2, #1e2020);
}
.cmdk-count { font-family: var(--mono, monospace); }
.cmdk-hint.mono { color: var(--text-3, #869585); }

.mono { font-family: var(--mono, monospace); }

/* ── Body class while open (prevent scroll bleed) ─── */
body:has(.cmdk-root.open) { overflow: hidden; }


/* ============================================================
   ════════════════════════════════════════════════════════════
   V3 CMDK ADDITIONS · pass 4 · audit #31  (ported from design)
   ════════════════════════════════════════════════════════════
   Visual refresh for grouped results so the palette can absorb
   page-jumps / settings toggles / playlist shortcuts without
   re-laying-out. JS schema {section, icon, label, shortcut,
   href, sub, tag} unchanged. */

.cmdk-section {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, var(--surface-1) 70%, transparent);
  z-index: 2;
  margin-top: 2px;
}
.cmdk-section:first-child { margin-top: 0; }
.cmdk-section[data-group="actions"]   { color: var(--primary-bright); }
.cmdk-section[data-group="pages"]     { color: var(--info-bright); }
.cmdk-section[data-group="playlists"] { color: var(--warning); }
.cmdk-section[data-group="settings"]  { color: var(--text-2); }

.cmdk-empty-group {
  font-size: 11px;
  color: var(--text-mute);
  padding: 4px 12px 10px;
  font-style: italic;
}

.cmdk-sub {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 2px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cmdk-tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--text-3);
}
.cmdk-tag.warn  { background: var(--warning-soft); color: var(--warning); }
.cmdk-tag.error { background: var(--error-soft);   color: var(--error); }
.cmdk-tag.info  { background: var(--info-soft);    color: var(--info-bright); }
.cmdk-tag.ok    { background: var(--primary-soft); color: var(--primary-bright); }

.cmdk-icon.group-pages     { background: var(--info-soft); color: var(--info-bright); }
.cmdk-icon.group-playlists { background: var(--warning-soft); color: var(--warning); }
.cmdk-icon.group-settings  { background: var(--surface-3); color: var(--text); }

.cmdk-foot {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 11px;
  color: var(--text-3);
}
.cmdk-foot-key { display: inline-flex; align-items: center; gap: 5px; }
.cmdk-foot-key kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px solid var(--surface-4);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--text-2);
  letter-spacing: .04em;
}
.cmdk-foot-key span { color: var(--text-mute); }
.cmdk-foot-spacer { flex: 1; }
.cmdk-foot-help {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: none;
  color: var(--text-3); font-family: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; padding: 0;
}
.cmdk-foot-help:hover { color: var(--text); }
.cmdk-foot-help kbd {
  font-family: var(--mono); font-size: 10px;
  padding: 1px 5px; background: var(--surface-2);
  border: 1px solid var(--surface-4); border-bottom-width: 2px;
  border-radius: 3px;
}