/* No page baseline import here: every page imports #app/shared/styles/page.css
   through its own style.css, and a page on another baseline (the /ui catalog,
   on @elements/ui and its themes) renders this template too. */

/*
 * Palette: the site's search and menu surface, on @elements/ui's Command.
 *
 * The package styles the dialog, the search row, the list, the groups, the
 * highlight and the empty state. This file keeps the site's own pieces: the
 * trigger pill in the topbar, where the open panel sits, the row content
 * (badge, kind chip, byline, snippet) and the shortcut footer.
 */

.palette-mount {
  display: contents;
}

/* ---- 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 and 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 {
  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;
}

/* No shortcut to hint at on a touch-primary device. (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;
}

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

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


/* ---- PANEL PLACEMENT -------------------------------------------- */

/* Opens over the search box: same top, left edge and width, measured when
   it opens (anchorToPill). The fallbacks are the box's usual place. The
   package centers a dialog in its overlay; this one is pinned instead. */
.dialog-overlay:has(> .dialog.palette-dialog) {
  padding: 0;
  place-items: start;
}

.dialog.palette-dialog {
  margin: var(--palette-top, 10px) 0 0 var(--palette-left, 1.5rem);
  width: var(--palette-width, min(640px, calc(100vw - 3rem)));
  max-width: none;
  max-height: calc(100vh - var(--palette-top, 10px) - 40px);
}

/* The list takes the panel's height instead of the package's item cap, so
   the panel scrolls like the box it grew out of. */
.dialog.palette-dialog .command {
  flex: 1 1 auto;
  min-height: 0;
}

.dialog.palette-dialog .command-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* 16px in the search input so iOS Safari does not zoom on focus. */
.dialog.palette-dialog .command-input {
  font-size: 16px;
}

@media (max-width: 700px) {
  .dialog-overlay:has(> .dialog.palette-dialog) {
    --dialog-inset: 0px;
  }

  .dialog.palette-dialog {
    margin: 0;
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}


/* ---- ROWS ------------------------------------------------------- */

/* Rows are a menu, not body copy: one step under the page's text size, so
   fourteen of them read as a list and not as a column of headings. */
.palette-dialog .command-item {
  font-size: var(--text-sm);
}

/* A group is a label and its rows. The label is a small uppercase line
   with a hairline under it, and every group after the first has a hairline
   above its label too, so each label sits in its own band and the rows hang
   under it. No fill: the highlighted row already uses the tint. */
.palette-dialog .command-group-heading {
  min-height:     0;
  /* The negative top margin pulls the first heading flush under the search
     box's rule, cancelling the list's padding. The hidden "no results" box
     is the list's first child, so this cannot key off :first-child; the
     rule for a group after a group puts the margin back to zero. */
  margin:         calc(var(--overlay-padding) * -1) calc(var(--overlay-padding) * -1) var(--overlay-padding);
  /* A pixel more above than below: the caps sat half a pixel high of the
     band's centre, and the eye reads an uppercase label as high before it
     reads it as low. */
  padding:        calc(var(--space-2) + 1px) calc(var(--item-padding-x) + var(--overlay-padding)) calc(var(--space-2) - 1px);
  border-bottom:  var(--overlay-border-width) solid var(--rule);
  color:          var(--ink-dim);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  /* Uppercase has no descenders, so the page's line height left empty space
     under the caps and the label rode high in its band. A tight line box
     puts the padding evenly above and below the letters. */
  line-height:    1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.palette-dialog .command-group + .command-group {
  margin-top:     var(--overlay-padding);
  margin-inline:  calc(var(--overlay-padding) * -1);
  padding-inline: var(--overlay-padding);
  border-top:     var(--overlay-border-width) solid var(--rule);
}

.palette-dialog .command-group + .command-group .command-group-heading {
  margin-top: 0;
}

/* The row's content is a link, so a modifier click opens a new tab. It
   takes the item's padding so the whole row is the click target. */
.palette-dialog .command-item.palette-item {
  padding: 0;
}

.palette-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  min-height: var(--item-height);
  padding: var(--space-1-5) var(--item-padding-x);
  box-sizing: border-box;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.palette-link:hover {
  text-decoration: none;
  color: inherit;
}

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

.command-item[data-highlighted].palette-item.is-active-page .palette-item-label {
  color: inherit;
}

.palette-item-head {
  display: flex;
  align-items: center;
  min-width: 0;
}

.palette-item-label {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette-item-note {
  font-size: var(--text-caption);
  color: var(--ink-dim);
}

/* Second row on full-text hits: the snippet with <mark> highlights from
   ts_headline, up to two lines so the match reads in context. */
.palette-item-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-caption);
  color: var(--ink-dim);
  line-height: 1.4;
  white-space: normal;
}

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

/* Meta line on full-text hits: chip, by @author, ago. Mirrors the meta
   strip on /feed and /search rows. */
.palette-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.3;
}

.command-item[data-highlighted] .palette-item-meta,
.command-item[data-highlighted] .palette-item-desc,
.command-item[data-highlighted] .palette-item-note {
  color: inherit;
}

.palette-item-meta-sep { color: var(--ink-dim); }

/* Kind chip, a pill tinted from its own hue so every kind reads as the
   same object whatever its color. */
.palette-item-kind {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.5;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: color-mix(in srgb, currentColor 12%, transparent);
  width: fit-content;
}

/* Kind chip colors come from the --kind-* tokens in app/shared/styles/vars.css
   (mirrored from KindColor in app/lib/enums.ts): the same hue per kind across
   feed, palette, post byline, search results and 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-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-demo     { color: var(--kind-demo);     }
/* Courses and lessons both surface as "learn", in the course hue. */
.palette-item-kind.kind-learn    { color: var(--kind-course);   }
.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);     }
.palette-item-kind.kind-post     { color: var(--kind-post);     }
/* Issues and the manual take the neutral: the editorial palette is a locked
   set, and every unclaimed hue near them is one step from another kind. */
.palette-item-kind.kind-issue    { color: var(--ink-soft);      }
.palette-item-kind.kind-man      { color: var(--ink-soft);      }

/* Unread count on the Notifications row, the old topbar bell badge's blue
   and scale, at the end of the 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);
  color: white;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
}


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

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

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

.palette-footer kbd {
  margin-right: 0.25rem;
}

/* No keyboard to hint at on a phone, and the list needs the room. */
@media (max-width: 700px) {
  .palette-footer { display: none; }
}