/* ============================================================
   COMMAND PALETTE (public/palette.js)
   Uses the dashboard tokens from style.css, so it follows light and
   dark themes. Fallbacks keep it legible if style.css is missing.
   ============================================================ */
.cmdk-root {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; justify-content: center; align-items: flex-start;
  padding: max(12vh, 24px) 16px 16px;
}
.cmdk-root[hidden] { display: none; }
:root.cmdk-open, :root.cmdk-open body { overflow: hidden; }
.cmdk-backdrop {
  position: absolute; inset: 0;
  background: var(--overlay, rgba(20,20,24,.48));
  animation: cmdk-fade .14s ease both;
}
.cmdk-panel {
  position: relative; display: flex; flex-direction: column;
  width: min(640px, 100%); max-height: min(560px, calc(100vh - max(12vh, 24px) - 16px));
  overflow: hidden;
  border: 1px solid var(--border-strong, #e0e0e0); border-radius: 14px;
  background: var(--bg-popover, #fff); color: var(--text, #171717);
  box-shadow: var(--shadow-dialog, 0 28px 90px rgba(20,20,24,.26));
  font-family: var(--font, system-ui, sans-serif);
  animation: cmdk-in .16s var(--ease, ease) both;
}
.cmdk-search { display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--border, #ebebeb); }
.cmdk-search-icon { display: grid; flex: none; place-items: center; color: var(--text-faint, #737373); }
.cmdk-search-icon svg { width: 18px; height: 18px; }
.cmdk-input {
  flex: 1; min-width: 0; height: 54px; padding: 0;
  border: 0; outline: 0; background: transparent; color: var(--text, #171717);
  font: 400 15px/1.4 var(--font, system-ui, sans-serif);
}
.cmdk-input::placeholder { color: var(--text-faint, #737373); }
.cmdk-input:focus-visible { outline: none; }
.cmdk-close {
  display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 32px; padding: 0 6px;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-dim, #5c5c5c); font: 500 13px var(--font, system-ui, sans-serif);
}
.cmdk-close:hover { background: var(--bg-hover, #f0f0f0); }
.cmdk-close-text { display: none; }
.cmdk-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scroll-padding: 30px 6px 6px; }
.cmdk-list[hidden] { display: none; }
.cmdk-group + .cmdk-group { margin-top: 6px; }
.cmdk-group-label { padding: 8px 10px 4px; color: var(--text-faint, #737373); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.cmdk-item {
  display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px;
  border-radius: 8px; color: var(--text, #171717); font-size: 13.5px; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.cmdk-item[aria-selected="true"] { background: var(--bg-hover, #f0f0f0); }
.cmdk-icon { display: grid; flex: none; place-items: center; width: 18px; height: 18px; color: var(--text-dim, #5c5c5c); }
.cmdk-icon svg { width: 16px; height: 16px; }
.cmdk-item[aria-selected="true"] .cmdk-icon { color: var(--text, #171717); }
.cmdk-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-title mark { background: transparent; color: var(--accent-text, #D1383D); font-weight: 600; }
.cmdk-hint { flex: none; color: var(--text-faint, #737373); font-size: 12px; white-space: nowrap; }
.cmdk-hint kbd, .cmdk-foot kbd, .cmdk-close kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 3px;
  border: 1px solid var(--border-strong, #e0e0e0); border-radius: 5px; background: var(--bg-inset, #fafafa);
  color: var(--text-dim, #5c5c5c); font: 500 11px/1 var(--font, system-ui, sans-serif);
}
.cmdk-close kbd { margin-left: 0; }
.cmdk-empty { padding: 32px 16px 36px; color: var(--text-dim, #5c5c5c); font-size: 13.5px; text-align: center; overflow-wrap: anywhere; }
.cmdk-empty[hidden] { display: none; }
.cmdk-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 16px; border-top: 1px solid var(--border, #ebebeb); background: var(--bg-inset, #fafafa); color: var(--text-faint, #737373); font-size: 11.5px; }
.cmdk-foot kbd:first-child { margin-left: 0; }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 4px; }
.cmdk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cmdk-drop { from { transform: translateY(-100%); } to { transform: none; } }

/* Phones: a full-width sheet from the top with large touch targets. */
@media (max-width: 639.98px) {
  .cmdk-root { padding: 0; }
  .cmdk-panel {
    width: 100%; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    padding-top: env(safe-area-inset-top);
    border-width: 0 0 1px; border-radius: 0 0 16px 16px;
    animation: cmdk-drop .22s var(--ease, ease) both;
  }
  .cmdk-search { padding: 0 8px 0 16px; }
  .cmdk-input { height: 56px; font-size: 16px; }
  .cmdk-close { min-height: 44px; padding: 0 10px; color: var(--accent-text, #D1383D); font-size: 15px; }
  .cmdk-close .cmdk-close-key { display: none; }
  .cmdk-close-text { display: inline; }
  .cmdk-list { padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
  .cmdk-group-label { padding: 10px 10px 6px; font-size: 12.5px; }
  .cmdk-item { gap: 13px; min-height: 48px; padding: 0 12px; font-size: 15px; }
  .cmdk-icon, .cmdk-icon svg { width: 20px; height: 20px; }
  .cmdk-hint { font-size: 13px; }
  .cmdk-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cmdk-backdrop, .cmdk-panel { animation: none; }
}