/* ==========================================================================
   Command palette (⌘K) - glass overlay, keyboard-first rows.
   Renders from SneckWeb.CommandPaletteLive; wired into the board via
   notes/keyboard_routes.md. Builds on the --* custom properties that
   app.css defines on :root (app.css loads first in root.html.heex).

   v2 (notes/makeover_design_language.md): the panel is the MODAL tier
   (--shadow-3, --r-lg); rows/kbd/esc chips ride --r-sm; enter/exit
   motion is --dur-fast/--dur-base + --ease. New §2 tokens carry
   working fallbacks until M1 lands them in app.css.

   Classes styled here (all prefixed palette- / command-palette-):
     .command-palette-root   permanent wrapper (empty while closed)
     .palette-backdrop       click-to-close scrim behind the panel
     .palette-panel          the dialog itself (glass)
     .palette-input-row      glyph + search input + esc chip
     .palette-glyph          the ⌘ affordance
     .palette-input          the search input
     .palette-esc            the esc chip button
     .palette-results        scrollable listbox
     .palette-section        "Issues" / "Comments" / "Commands" headings
     .palette-row            one result/command (button)
     .palette-row.selected   the keyboard highlight
     .palette-row--comment   a comment hit row (number + excerpt + byline)
     .palette-comment-excerpt  the ts_headline excerpt (<mark>-ed hits)
     .palette-comment-meta   the author · time byline under the excerpt
     .palette-hint           empty-query guidance
     .palette-empty          no-matches message
     .palette-footer         key legend
     .palette-status         issue status chip (s-<status> variants)
     .palette-open-btn       the visible ⌘K button on the board (rendered
                             by the board, styled here)
     .focus-trigger          zero-JS focus re-fire helper (see notes)
   ========================================================================== */

.command-palette-root {
  /* No layout of its own while closed - the root renders nothing. */
}

/* The scrim sits above everything except itself: fixed to the viewport
   so it covers a scrolled board too. */
.palette-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim-strong);
  backdrop-filter: blur(6px) saturate(120%);
  z-index: 80;
  animation: palette-fade var(--dur-fast, 120ms) var(--ease, ease);
}

.palette-panel {
  position: fixed;
  top: 13vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  /* glass: translucent surface over the blurred scrim */
  background: color-mix(in srgb, var(--bg-1) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg, var(--radius-lg, 16px));
  box-shadow: var(--shadow-3);
  z-index: 81;
  overflow: hidden;
  animation: palette-in var(--dur-base, 200ms) var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1));
}

@keyframes palette-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.99);
  }
}

@keyframes palette-fade {
  from {
    opacity: 0;
  }
}

/* -- input row ----------------------------------------------------------- */

.palette-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border-bottom: 1px solid var(--border);
}

.palette-glyph {
  color: var(--accent);
  font-size: var(--size-md, 15px);
  font-family: var(--font-display);
}

.palette-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 2px 0;
  color: var(--text);
  font-size: var(--size-md, 15px);
  line-height: var(--lh-md, 1.5);
  outline: none;
  box-shadow: none;
}

.palette-input:focus {
  box-shadow: none;
  border-color: transparent;
}

/* The a11y pass: the base outline:none above (0,1,0) was out-weighing
   the global :focus-visible ring for this input - nothing marked the
   palette input when the user Tabbed back into it. A quiet underline
   carries the focus without boxing the borderless field. */
.palette-input:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 0 var(--accent-dim);
}

.palette-input::placeholder {
  color: var(--muted);
}

.palette-esc {
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
  border-radius: var(--r-sm, 6px);
}

.palette-esc:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent));
}

.palette-esc:hover .kbd {
  border-color: var(--accent-dim);
  color: var(--text);
}

.palette-panel .kbd {
  background: color-mix(in srgb, var(--bg-3) 70%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 5px);
  padding: 0 5px;
  font-size: var(--size-2xs);
  font-family: var(--font-mono);
  color: var(--muted);
}

/* -- results --------------------------------------------------------------- */

.palette-results {
  overflow-y: auto;
  padding: var(--sp-1, 4px);
  overscroll-behavior: contain;
}

.palette-section {
  font-size: var(--size-xs, 10px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--faint);
  padding: var(--sp-2, 8px) var(--sp-2, 8px) var(--sp-1, 4px);
}

.palette-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm, var(--radius-sm, 6px));
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-fast, 120ms) var(--ease, ease);
}

.palette-row:hover {
  background: var(--wash-4);
}

.palette-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent));
}

/* The keyboard highlight: a neutral wash + a 2px mint bar on the left
   edge. No tinted fill - the accent speaks only through the bar. */
.palette-row.selected {
  background: var(--wash-6);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Every command row leads with the same 16px glyph */
.palette-cmd-icon {
  flex-shrink: 0;
  color: var(--muted);
}

.palette-row.selected .palette-cmd-icon,
.palette-row:hover .palette-cmd-icon {
  color: var(--text-2);
}

.palette-row .num {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--muted);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.palette-row .p-title {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-row .card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-1, 4px);
  flex-shrink: 0;
}

.palette-status {
  font-size: var(--size-2xs);
  border-radius: var(--r-sm, 4px);
  padding: 1px var(--sp-1, 4px);
  color: var(--muted);
  background: var(--bg-3);
}

.palette-status.s-in_progress {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 10%, transparent);
}

.palette-status.s-done {
  color: var(--accent);
}

.palette-status.s-canceled {
  color: var(--muted);
  text-decoration: line-through;
}

.palette-status.s-backlog {
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--status-backlog);
}

/* -- comment hits (FTS v2, notes/fts_routes.md §6) ---------------------------
   A comment row keeps the issue-row rhythm - number chip left - with a
   two-line body: the marked excerpt over a muted author · time byline.
   Issues stay the headline; this group renders under them. */

.palette-row--comment .p-comment {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.palette-comment-excerpt {
  font-size: var(--size-sm, 12.5px);
  line-height: var(--lh-sm, 1.5);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ts_headline's <mark> hits - the excerpt's only live markup (the rest
   of the body stays HTML-escaped; see CommandPaletteLive's
   comment_excerpt/1). */
.palette-comment-excerpt mark {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
  border-radius: 3px;
  padding: 0 1px;
}

.palette-comment-meta {
  font-size: var(--size-2xs);
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-hint,
.palette-empty {
  padding: var(--sp-4, 16px) var(--sp-3, 12px);
  color: var(--muted);
  font-size: var(--size-sm, 12.5px);
  line-height: 1.6;
}

.palette-empty {
  text-align: center;
}

/* -- recent searches (empty-input group) ----------------------------------- */

/* The whole group: the section heading doubles as the Clear row. */
.palette-recents {
  border-bottom: 1px solid var(--border);
}

.palette-recents-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2, 8px);
}

/* The Clear link - quiet, right-aligned in the section heading. */
.palette-recents-clear {
  background: none;
  border: none;
  padding: 0 2px;
  color: var(--faint);
  font-size: 11px;
  cursor: pointer;
  border-radius: var(--r-sm, 4px);
}

.palette-recents-clear:hover {
  color: var(--danger);
  text-decoration: underline;
}

.palette-recents-clear:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent));
}

/* A remembered term: the same row rhythm as command rows, with the
   clock glyph in the command-icon slot. */
.palette-row--recent {
  gap: 10px;
}

.palette-recent-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--faint);
  font-size: 11px;
  flex-shrink: 0;
}

/* -- recently viewed (empty-input group, keyboard entries) ------------------ */

/* Unlike recent searches (mouse-only rows outside the walk), the
   viewed-issue rows ARE listbox options - flat in the listbox for
   aria, so the group can't wrap them. The heading closes the group
   with the same hairline the recent-searches group uses. */
.palette-section--viewed {
  border-bottom: 1px solid var(--border);
}

/* The rows themselves reuse .palette-row + the issue-row spans; one
   nudge so the number chip leads the group like the clock glyph
   does for searches. */
.palette-row--viewed {
  gap: 10px;
}

/* -- footer ---------------------------------------------------------------- */

.palette-footer {
  display: flex;
  gap: var(--sp-4, 16px);
  padding: var(--sp-2, 8px) var(--sp-4, 16px);
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-0) 40%, transparent);
  color: var(--muted);
  font-size: var(--size-xs, 11px);
}

/* -- board affordances (rendered by the board, styled here) ---------------- */

/* The visible ⌘K button - mouse users' entry into the palette.
   Base styling (.palette-open-btn) lives in app.css's toolbar section;
   here we only make sure it matches the family. */
.palette-open-btn .kbd {
  background: var(--bg-3);
}

/* The zero-JS focus re-fire helper: a zero-size span whose id changes
   whenever the board wants to focus the create input, re-triggering its
   phx-mounted={JS.focus(...)}. Never visible. */
.focus-trigger {
  display: none;
}

/* -- filter: mode (notes/query_routes.md §b) -------------------------------- */

.palette-filter-error {
  margin: 6px 14px 0;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  background: var(--bg-2);
  color: var(--danger);
  font-size: 11.5px;
  line-height: 1.5;
}

.palette-filter-hints .palette-section {
  padding-top: 8px;
}

.palette-row--hint {
  justify-content: space-between;
  gap: 12px;
}

.palette-row-key {
  flex-shrink: 0;
  font-size: 12.5px;
}

.palette-row-hint {
  margin-left: auto;
  color: var(--faint);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- responsive (mobile pass, notes/mobile_pass.md) ----------------------------
   Phones: the palette is a full-screen sheet - edge to edge, input under
   the notch, results flexing to the home indicator. Rows are 44px. */

@keyframes palette-sheet-in {
  from {
    opacity: 0.4;
    transform: translateY(20px);
  }
}

@media (max-width: 767px) {
  .palette-panel {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: auto;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    animation: palette-sheet-in var(--dur-base, 200ms) var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1));
  }

  .palette-input-row {
    padding: calc(12px + env(safe-area-inset-top)) var(--sp-4, 16px) var(--sp-3, 12px);
  }

  .palette-input {
    font-size: 16px;
  }

  .palette-esc {
    min-width: 44px;
    min-height: 44px;
    margin: -8px -6px -8px 0;
  }

  .palette-results {
    flex: 1;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .palette-row {
    min-height: 44px;
    padding: 10px;
  }

  .palette-footer {
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 12px;
    overflow-x: auto;
  }
}