/* ============================================================
   linq · unified command bar (search)

   One look, three placements:
     .lq-cmdbar--topbar   desktop fv-topbar (≥1024px, always on)
     .lq-cmdbar--sticky   mobile/tablet ld-header (≤1023px, always on)
     .lq-cmdbar--drawer   slide-up sheet toolbar (≤1023px, on open)

   Editing tokens here propagates to every viewport. Palette comes from
   the linq brand kit (locksmith.css `--linq-*`) — no raw hex.

   Default skin: dark-ink terminal prompt with a mono "SEARCH" eyebrow,
   cream typed text, blinking orange horizontal caret, and a ⌘K kbd hint.
   Same skin everywhere. The drawer variant inherits as-is — the older
   .sidebar-cmdbar v2 styling is gone since this partial replaced it.
   ============================================================ */

:root {
  --lqc-ink: #0F1623;
  --lqc-cream: #FAF6EE;
  --lqc-cream-mute: rgba(250, 246, 238, 0.55);
  --lqc-cream-soft: rgba(250, 246, 238, 0.45);
  --lqc-orange: #EA6A2C;
  --lqc-radius: 14px;
  --lqc-mono: 'Archivo Narrow', ui-monospace, Menlo, monospace;
}

.lq-cmdbar {
  /* Container has zero opinion — the wrap below is the visual surface. */
  display: block;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

.lq-cmdbar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--lqc-ink);
  border: 1px solid var(--lqc-ink);
  border-radius: var(--lqc-radius);
  padding: 12px 14px;
  cursor: text;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px -10px rgba(15, 22, 35, 0.55);
  min-width: 0;
  position: relative;
}

/* "SEARCH" prompt eyebrow — pseudo-style mono label sitting before the
   input. Hidden the moment the user focuses or types so the typed
   text takes its place naturally. */
.lq-cmdbar-prompt {
  font-family: var(--lqc-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lqc-cream-mute);
  flex: none;
}
.lq-cmdbar-wrap:focus-within .lq-cmdbar-prompt,
.lq-cmdbar-wrap:has(.lq-cmdbar-input:not(:placeholder-shown)) .lq-cmdbar-prompt {
  display: none;
}

.lq-cmdbar-input {
  /* Auto-size to typed content so the blinking caret pseudo (rendered
     after the input via the wrap's ::after) parks itself right at the
     end of the typed text. */
  flex: 0 1 auto;
  field-sizing: content;
  max-width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--lqc-cream);
  font-family: var(--lqc-mono);
  font-size: 13.5px;
  padding: 0;
  caret-color: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
.lq-cmdbar-input:focus,
.lq-cmdbar-input:focus-visible {
  outline: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--lqc-cream);
}
.lq-cmdbar-input::placeholder {
  color: var(--lqc-cream-soft);
  font-family: var(--lqc-mono);
  text-transform: none;
  letter-spacing: 0.01em;
}
.lq-cmdbar-input:focus::placeholder { color: transparent; }

/* Suppress the native WebKit / Blink clear button + magnifier glyph that
   `type="search"` adds — we render our own × via .lq-cmdbar-clear. */
.lq-cmdbar-input::-webkit-search-cancel-button,
.lq-cmdbar-input::-webkit-search-decoration,
.lq-cmdbar-input::-webkit-search-results-button,
.lq-cmdbar-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Pin Chrome / Safari autofill back to ink + cream so the field
   doesn't paint white-yellow when the browser remembers a value. */
.lq-cmdbar-input:-webkit-autofill,
.lq-cmdbar-input:-webkit-autofill:hover,
.lq-cmdbar-input:-webkit-autofill:focus,
.lq-cmdbar-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--lqc-ink) inset;
  -webkit-text-fill-color: var(--lqc-cream);
  caret-color: transparent;
  transition: background-color 5000s ease-in-out 0s;
}

/* Blinking horizontal orange caret — sits at the baseline. Only
   visible while the input is unfocused AND empty. Hidden the moment
   the user taps the field (focus) or types — replaced by the
   tappable .lq-cmdbar-clear × button below. */
.lq-cmdbar-wrap::after {
  content: '';
  width: 14px;
  height: 2px;
  background: var(--lqc-orange);
  box-shadow: 0 0 8px rgba(234, 106, 44, 0.7);
  flex: none;
  margin-left: auto;            /* keep the caret aligned to the right */
  align-self: flex-end;
  margin-bottom: 4px;
  animation: lqc-caret-blink 1s steps(2, end) infinite;
}
.lq-cmdbar-wrap:focus-within::after,
.lq-cmdbar-wrap:has(.lq-cmdbar-input:not(:placeholder-shown))::after {
  display: none;
}
@keyframes lqc-caret-blink { 50% { opacity: 0; } }

/* Tappable clear button × — replaces the underline caret on focus.
   Same orange + glow + blink animation so the visual feels like the
   caret morphing into a clear affordance. Tapping clears the input
   (JS in base.html wires the click). */
.lq-cmdbar-clear {
  display: none;                /* hidden until input is focused/typed */
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: auto;            /* right-align like the caret */
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font: 700 18px/1 var(--lqc-mono);
  color: var(--lqc-orange);
  text-shadow: 0 0 8px rgba(234, 106, 44, 0.7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: lqc-caret-blink 1s steps(2, end) infinite;
}
.lq-cmdbar-clear:hover { color: #FFB07A; }
.lq-cmdbar-wrap:focus-within .lq-cmdbar-clear,
.lq-cmdbar-wrap:has(.lq-cmdbar-input:not(:placeholder-shown)) .lq-cmdbar-clear {
  display: inline-flex;
}

/* ⌘K kbd — desktop-only affordance; touch devices hide it. Rendered
   AFTER the ::after caret pseudo (via `order: 1`) so the orange
   blinker sits to the LEFT of ⌘K, with ⌘K parked on the far right
   edge. Negative margin-left collapses the wrap's flex `gap: 10px`
   so the caret and kbd are flush together — no breathing room. */
.lq-cmdbar-kbd {
  font-family: var(--lqc-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--lqc-cream-mute);
  border: 1px solid rgba(250, 246, 238, 0.18);
  border-radius: 6px;
  padding: 2px 6px;
  background: rgba(250, 246, 238, 0.04);
  flex: none;
  order: 1;
  margin-left: -10px;
}
@media (hover: none) and (pointer: coarse) {
  .lq-cmdbar-kbd { display: none; }
}
/* Hide the ⌘K hint while the input is focused or has typed text — the
   tappable × clear takes the right edge instead, sitting where the
   orange underline caret sits in the resting state. Mirrors the same
   :focus-within / :has(:not(:placeholder-shown)) pattern used for the
   prompt eyebrow + underline caret above. */
.lq-cmdbar-wrap:focus-within .lq-cmdbar-kbd,
.lq-cmdbar-wrap:has(.lq-cmdbar-input:not(:placeholder-shown)) .lq-cmdbar-kbd {
  display: none;
}

/* Results dropdown — same overlay treatment everywhere. The drawer
   variant overrides position to `fixed` (below) so it escapes the
   sidebar's scroll container; topbar / sticky variants keep the
   default absolute. z-index pushed to 9999 so the dropdown layers
   above every drawer card / favourites tile / quick-create row. */
.lq-cmdbar-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--lqc-ink);
  border: 1px solid rgba(250, 246, 238, 0.10);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15, 22, 35, 0.55);
  max-height: 60vh;
  overflow-y: auto;
  display: none;
}
.lq-cmdbar-results:not(:empty) { display: block; }
/* Click-away hides the results dropdown but the input value AND the
   results HTML stay in the DOM. When the user focuses back into the
   search bar, :focus-within on the parent .lq-cmdbar matches again
   and the populated dropdown reappears. Overrides the legacy
   .cmdbar-results.open visibility rule from nav.css. */
.lq-cmdbar:not(:focus-within) .lq-cmdbar-results { display: none !important; }

/* ── Variant tweaks ── */

/* Desktop topbar — sit centred in the topbar's flex row. Wrap height
   pinned to 38px so it matches the phone + bell action pills sitting
   beside it (see desktop-topbar.css `.fv-topbar-bell` height). */
.lq-cmdbar--topbar { max-width: 480px; flex: 1 1 480px; }
.lq-cmdbar--topbar .lq-cmdbar-wrap {
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
}

/* Sticky tablet/mobile header — tighter padding, kbd hidden so the
   row stays compact next to the brand mark + bell icons. Hidden at
   <640px because the row is too cramped at phone widths; phone users
   still get search inside the slide-up drawer. Hidden ≥1024px because
   desktop has the full topbar search instead. */
.lq-cmdbar--sticky { flex: 1 1 0; max-width: none; margin: 0 8px; }
.lq-cmdbar--sticky .lq-cmdbar-wrap { padding: 8px 12px; border-radius: 12px; }
@media (max-width: 640px), (min-width: 1024px) {
  .lq-cmdbar--sticky { display: none; }
}

/* Drawer — full-width inside the sheet toolbar. Results dropdown
   uses `position: fixed` so it escapes the sidebar's overflow
   container and can render the full available space between the
   top of the viewport and just above the input. JS in base.html
   sets `bottom` on focus/input so the dropdown sits flush above the
   field (keyboard-aware via window.visualViewport). */
.lq-cmdbar--drawer { flex: 1 1 0; }
.lq-cmdbar--drawer .lq-cmdbar-wrap { padding: 14px 16px; position: relative; z-index: 10; }

/* Drawer cmdbar is mobile-only. Tablet (≥641px) and desktop (≥1024px)
   already show search in the header (sticky / topbar variants), so the
   duplicate inside the sidebar toolbar is hidden there. Mobile (≤640px)
   keeps it because the slide-up drawer is the only search affordance. */
@media (min-width: 641px) {
  .lq-cmdbar--drawer { display: none; }
}
.lq-cmdbar--drawer .lq-cmdbar-results {
  position: fixed;
  top: max(env(safe-area-inset-top, 8px), 8px);
  left: 12px;
  right: 12px;
  /* `bottom` is set by JS to (sidebar.bottom - input.top + 6). The sidebar
     is the containing block for this fixed panel because `.sidebar`
     applies `transform` / `will-change: transform`, so all four offsets
     are measured from the sidebar's edges (not the layout viewport).
     Using sidebar.bottom keeps the panel anchored just above the input
     even when the drawer is lifted above the on-screen keyboard via the
     `--lq-kb-h` variable on `.sidebar`. */
  bottom: auto;
  max-height: none;
  z-index: 9999;
  box-shadow: 0 -12px 32px -8px rgba(15, 22, 35, 0.55);
}

/* The ⌘K shortcut kbd is desktop-only — drop it from both mobile/tablet
   variants (sticky header AND slide-up drawer) at every input type, not
   just touch. Per design ask: no shortcut indicator on mobile/tablet. */
.lq-cmdbar--sticky .lq-cmdbar-kbd,
.lq-cmdbar--drawer .lq-cmdbar-kbd { display: none; }