/* =========================================================
   Search palette (.spal) — idonym search spec §5, plan-4 Phase B.
   Ratify-pending canonical component (DESIGN.md §3): a DIALOG composed
   on the canonical modal shell (modal.css + ui_modal.js) + the .menu row
   anatomy (menu.css) — NOT a .menu fork, NOT a new scrim system. This
   file owns ONLY the palette-specific skins: the top-anchored shell
   placement, the input row, group headers, result-option skin, the six
   states, and the header trigger. Rows reuse .menu__item / .menu__label /
   .menu__check verbatim from menu.css; the retry action reuses .btn.
   Tokens only — no raw colors, no bare z-index, no style= (DESIGN.md §4).
   ========================================================= */

/* ── Shell: top-anchored command-palette placement (modifier on the
      canonical .modal shell, same pattern as .reprompt-modal). ─────────── */
.spal-modal { align-items: flex-start; }

/* ── Panel skin on .modal__panel: reset the default card padding/width so
      the palette owns its own internal layout. ────────────────────────── */
.modal__panel.spal {
  padding: 0;
  gap: 0;
  max-width: none;
  width: min(640px, calc(100% - var(--sp-6)));
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  margin-top: 12vh;
  max-height: min(560px, 76vh);
  overflow: hidden;
  animation: spal-in var(--dur-med) var(--ease);
}
@keyframes spal-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.99); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal__panel.spal { animation: none; }
}

/* ── Input row ────────────────────────────────────────────────────────── */
.spal__inputrow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.spal__glass { flex: none; color: var(--fg-3); display: flex; }
.spal__spinner { flex: none; width: 18px; height: 18px; display: none; }
.spal.is-loading .spal__spinner { display: block; }
.spal.is-loading .spal__glass { display: none; }
.spal__spinner circle {
  fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 38; stroke-dashoffset: 24;
  transform-origin: center; animation: spal-spin 0.8s linear infinite;
}
@keyframes spal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spal__spinner circle { animation: none; }
}
.spal__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-sans); font-size: var(--fs-lg); color: var(--fg);
  line-height: var(--lh-snug);
}
.spal__input::placeholder { color: var(--fg-3); }
.spal__clear {
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: var(--fg-3); padding: var(--sp-1); border-radius: var(--r-sm);
  display: none;
}
.spal.has-query .spal__clear { display: inline-flex; }
.spal__clear:hover { color: var(--fg); }
.spal__clear:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.spal__esc {
  flex: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1;
  padding: 3px 6px; border-radius: var(--r-sm);
  background: var(--surface-muted); color: var(--fg-3);
  border: 1px solid var(--border);
}
.spal__esc:focus-visible { outline: none; box-shadow: var(--sh-focus); }

/* ── Results scroll body ──────────────────────────────────────────────── */
.spal__body { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 120px; }
.spal__group { padding: var(--sp-2) var(--sp-2) var(--sp-3); }

/* Group header on the canonical .menu__label — keeps an inline count slot. */
.spal__grouphd {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
.spal__grouphd .count {
  font-family: var(--font-mono); color: var(--fg-3); font-weight: var(--fw-regular);
}

/* Result option = canonical .menu__item + this .opt result skin: larger gap
   for the 32px type icon, scroll margin for keyboard nav, combobox active
   state (options carry aria-selected — bridge the menu__check reveal to it). */
.opt { gap: var(--sp-3); padding: 9px var(--sp-3); border-radius: var(--r-md); scroll-margin: 8px; }
.opt[aria-selected="true"] { background: var(--brand-soft-bg); }
:root[data-theme="dark"] .opt[aria-selected="true"] { background: var(--surface-muted); }
.opt[aria-selected="true"] .menu__check { visibility: visible; }
.opt .menu__check { color: var(--accent-strong); display: flex; align-items: center; }
.opt .opt__icon svg, .opt .menu__check svg { color: inherit; }
.opt__icon {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.opt__icon--project { background: var(--ent-org-bg); color: var(--ent-org-fg); }
.opt__icon--document { background: var(--ent-id-bg); color: var(--ent-id-fg); }
.opt__main { flex: 1; min-width: 0; }
.opt__name {
  font-size: var(--fs-body); color: var(--fg); font-weight: var(--fw-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opt__name mark {
  background: var(--accent-soft-bg); color: var(--accent-soft-fg);
  border-radius: var(--r-sm); padding: 0 1px;
}
:root[data-theme="dark"] .opt__name mark { color: var(--gold-300); }
.opt__sub {
  font-size: var(--fs-xs); color: var(--fg-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.opt__sub .dot {
  width: 3px; height: 3px; border-radius: var(--r-pill);
  background: var(--fg-3); opacity: 0.6; flex: none;
}
.fmt {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 2px 5px; border-radius: var(--r-sm); flex: none;
  background: var(--surface-muted); color: var(--fg-3); border: 1px solid var(--border);
}
/* Fold-match hint (ć≈c): shown when the match only survived via folding. */
.opt__fold {
  flex: none; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--fg-3);
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm); padding: 1px 4px;
}

/* ── Non-result states (empty / no-results / error / opening) ─────────── */
.spal__state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--sp-3); padding: var(--sp-9) var(--sp-6); min-height: 200px;
}
.spal__state .ic { color: var(--fg-3); }
.spal__state h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg); }
.spal__state p { font-size: var(--fs-sm); color: var(--fg-3); max-width: 38ch; }
.spal__state--error .ic { color: var(--danger); }
.spal__state code {
  font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--surface-muted);
  padding: 2px 6px; border-radius: var(--r-sm); color: var(--fg-2);
}
.spal__state--success .ic { color: var(--success); }
.spal__retry { margin-top: var(--sp-2); }
/* Empty/recent honest-deferral note (short, sits under the Recent group). */
.spal__state--note { min-height: 0; padding: var(--sp-5) var(--sp-6) var(--sp-7); }
.spal__state--note p { max-width: 44ch; }

/* ── Footer: privacy reassurance (transport-only claim — §8-safe). ────── */
.spal__foot {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border);
  background: var(--bg-sunken);
}
.spal__privacy {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--fg-3);
}
.spal__privacy svg { flex: none; color: var(--success); }

/* Screen-reader-only (palette-scoped; the app has no shared util yet). */
.spal__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* The palette's entry point is the sidebar's `.sb-search` labeled row
   (option B, 2026-07-14; styled in dashboard-v2.css). The old `.searchbtn`
   header pill was retired then — see base.html. */

/* ≤560px: the palette goes full-screen (on-screen-keyboard budget). */
@media (max-width: 560px) {
  .spal-modal { align-items: stretch; }
  .modal__panel.spal {
    margin-top: 0; width: 100%; max-height: 100vh; height: 100vh; border-radius: 0;
  }
}