/*
 * Palette — unified search + menu surface.
 *
 * Closed state: just the navbar pill (visible at all viewports).
 * Open state: the overlay layer activates. Desktop renders a
 * top-anchored modal under the navbar with a scrim; mobile goes
 * full-screen.
 *
 * Visibility-toggled (NOT display-toggled) so the input inside
 * the overlay stays focusable for the gesture-time focus call —
 * iOS Safari only pops the soft keyboard when focus() runs inside
 * the original tap gesture on an element that's already in the
 * layout tree.
 */

/* ---- TRIGGER PILL ----------------------------------------------- */

.palette-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 640px;
  min-width: 0;
  height: 36px;
  padding: 0 0.625rem 0 0.875rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 5px);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: text;
  transition: border-color 100ms, background-color 100ms;
}

.palette-pill:hover {
  border-color: var(--ink-faint);
  background: var(--bg);
}

.palette-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Dark variant — scoped to a dark topbar so the pill matches its
   surrounding chrome on the video composer + post pages. */
.topbar.is-dark .palette-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.62);
}

.topbar.is-dark .palette-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.topbar.is-dark .palette-pill .palette-pill-label {
  color: rgba(255, 255, 255, 0.62);
}

.topbar.is-dark .palette-pill .palette-pill-kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
}

.palette-pill-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette-pill-kbd-row {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Hide the ⌘K hint on touch-primary devices — there's no keyboard
   shortcut to hint at. (hover: none) catches phones, tablets, and
   touch laptops without depending on viewport size. */
@media (hover: none) and (pointer: coarse) {
  .palette-pill-kbd-row { display: none; }
}

.palette-pill-kbd {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-dim);
  /* Soft grey fill so the kbd glyphs stand out against the now-white
     pill background. Border kept faint so it reads as a chip, not
     another input. */
  background: var(--bg-panel);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
}


/* ---- OVERLAY ---------------------------------------------------- */

/* Overlay is conditionally mounted via e:if={open}; flush() in the
   open handler drains the reactive update synchronously so the input
   lands in the DOM inside the user's tap gesture. The older
   always-mounted + opacity:0 approach is no longer needed. */
.palette {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
}


/* ---- SHELL (the actual content surface) ------------------------- */

.palette-shell {
  position: absolute;
  top: 56px;
  /* Anchor the shell's RIGHT edge to the topbar pill's right edge so
     the dropdown appears directly under the pill (which is itself
     right-anchored on desktop). Topbar-inner is `max-width: 1240px;
     padding: 0 1.5rem; margin: 0 auto` so the pill's right edge
     sits 1.5rem from the viewport right on narrow viewports, and
     1.5rem + (vw-1240)/2 on wider ones. The max() collapses to
     1.5rem when the calc goes negative (viewport < 1240). */
  right: max(1.5rem, calc((100vw - 1240px) * 0.5 + 1.5rem));
  left: auto;
  transform: none;
  width: min(640px, calc(100vw - 3rem));
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

@media (max-width: 700px) {
  .palette-shell {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}


/* ---- INPUT ROW -------------------------------------------------- */

.palette-input-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
}

.palette-input {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0;
  /* Mono throughout the palette so it reads as one piece with the
     rest of the site's mono surfaces (brand, byline, footer, kbd
     badges). 16px so iOS Safari does NOT zoom on focus. */
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

/* The palette frame is the visual focus indicator — the input sits
   flush inside it. Override every framework `input[type=search]:focus`
   treatment from @elements/style/form.css (the bare-input :where()
   rule sets border-color, background, and a soft drop-shadow that
   would paint a sky halo around the inner input). */
.palette-input:focus,
.palette-input:focus-visible,
.palette-input:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

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

.palette-input::-webkit-search-cancel-button { display: none; }
.palette-input::-webkit-search-decoration    { display: none; }

.palette-input-kbd {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-dim);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.palette-input-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 3px;
  font-size: 22px;
  line-height: 1;
}

.palette-input-close:hover {
  background: var(--bg-soft);
}


/* ---- CONTENT ---------------------------------------------------- */

.palette-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
  -webkit-overflow-scrolling: touch;
  /* Stop touch-scroll from bubbling to the body. With the JS
     position:fixed lock this is belt-and-suspenders, but it also
     prevents the rubber-band effect from peeking the underlying
     page on iOS. */
  overscroll-behavior: contain;
}

.palette-section + .palette-section {
  border-top: 1px solid var(--rule-soft);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.palette-section-label {
  padding: 0.5rem 1rem 0.25rem;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  color: var(--ink-dim);
}

.palette-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  /* Indent items so they read as children of the section label,
     like a clean menu — no right-side metadata column. */
  padding: 0.4375rem 1rem 0.4375rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
}

.palette-item:hover {
  background: var(--bg-soft);
}

/* Keyboard / shared selection — distinct from hover so the user
   can tell at a glance which row Enter will activate. Stronger
   tinted bg + a 2px accent bar on the left side. */
.palette-item.is-selected {
  background: var(--accent-wash);
  box-shadow: inset 2px 0 0 var(--accent);
}

.palette-item.is-active-page .palette-item-label {
  color: var(--accent-deep);
  font-weight: 500;
}

.palette-item-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Second row on FTS hits: snippet with <mark> highlights from
   ts_headline. Wraps to up to 2 lines so the user sees the match
   in context. Hidden on nav items. */
.palette-item-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.4;
}

.palette-item-desc mark {
  background: #fff3a3;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* Third row on FTS hits: lowercase kind label (post/comment/course/page).
   Own line; nav items have no kind so this doesn't render. */
.palette-item-kind {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* Kind chip colors come from the centralized --kind-* tokens in
   app/shared/styles/global.css (mirrored from KindColor in
   app/lib/enums.ts). Same hue per kind across feed, palette, post
   byline, search results, profile rows. */
.palette-item-kind.kind-discuss  { color: var(--kind-discuss);  }
.palette-item-kind.kind-show     { color: var(--kind-show);     }
.palette-item-kind.kind-ask      { color: var(--kind-ask);      }
.palette-item-kind.kind-announce { color: var(--kind-announce); }
.palette-item-kind.kind-teach    { color: var(--kind-teach);    }
.palette-item-kind.kind-course   { color: var(--kind-course);   }
.palette-item-kind.kind-lesson   { color: var(--kind-lesson);   }
.palette-item-kind.kind-guide    { color: var(--kind-guide);    }
.palette-item-kind.kind-video    { color: var(--kind-video);    }
.palette-item-kind.kind-comment  { color: var(--kind-comment);  }
.palette-item-kind.kind-page     { color: var(--kind-page);     }
.palette-item-kind.kind-user     { color: var(--kind-user);     }
/* Defensive fallback — see --kind-post in global.css. */
.palette-item-kind.kind-post     { color: var(--kind-post);     }
/* Issues are a 2-kind surface (bug / feature) without dedicated kind
   hues; the palette chip uses ink-soft so issue results read
   distinctly from the colored content-kind chips. */
.palette-item-kind.kind-issue    { color: var(--ink-soft);      }

/* Right-aligned count badge — used by the Notifications row when
   there are unread notifications. Same blue + scale as the old
   topbar bell badge, rendered inline at the end of the item label. */
.palette-item-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 0.5rem;
  border-radius: 9px;
  background: var(--accent-blue);
  color: white;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
}

.palette-empty {
  padding: 1.25rem 1rem;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-dim);
}


/* ---- FOOTER ----------------------------------------------------- */

.palette-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--rule-soft);
  background: var(--bg-soft);
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-dim);
}

.palette-footer-spacer { flex: 1; }

.palette-footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  margin-right: 0.25rem;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
}


/* ---- MOBILE OVERRIDES ------------------------------------------- */

@media (max-width: 700px) {
  .palette-pill {
    height: 40px;
    padding: 0 0.875rem 0 1rem;
    max-width: none;
  }

  .palette-pill-label {
    font-size: 14px;
  }
}


/* ---- VIEWPORT VISIBILITY HELPERS -------------------------------- */

@media (max-width: 700px) {
  .palette-desktop-only { display: none !important; }
}

@media (min-width: 701px) {
  .palette-mobile-only { display: none !important; }
}