/* The jump palette: the sections as tiles, one bare-voice input, grouped
   links below. */
@layer components {
  /* It is a .popup (see popups.css) — it belongs to the pill it hangs from and
     centres under it, which is the default there. All this adds is a width:
     wide enough to read a project name and its description in one line. */
  .palette {
    inline-size: min(34rem, 92vw);

    /* Equal columns filling the width, so four tiles read as one row of
       destinations rather than four buttons of different weight. */
    .palette__sections {
      display: grid;
      /* Equal tiles that wrap rather than compress. One row wherever there is
         room, two on a phone — with five tiles a forced single row squeezed
         "My stuff" onto two lines and left its digit stranded at the tile's
         edge, which read as a bug rather than as a wrap. */
      grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
      gap: var(--inline-space-half);
      margin-block-end: var(--block-space-half);
    }

    /* The tiles answer to the filter like every other row, so once none of
       them match, their row goes rather than leaving a gap above the results. */
    .palette__sections:not(:has(> :not([hidden]))) {
      display: none;
    }

    input {
      inline-size: 100%;
      padding: var(--block-space-half) var(--inline-space);
      color: var(--color-ink);
      background-color: transparent;
      border: none;
      border-block-end: var(--border);

      &::placeholder {
        color: var(--color-ink-faint);
      }

      /* The palette opens with this field already focused. A shu baseline the
         instant the dialog appears would spend the accent on nothing, so the
         hairline just stays put. */
      &:focus-visible {
        outline: none;
        border-block-end: var(--border);
      }
    }

    /* The groups scroll together, so a heading cannot sit still while its own
       rows slide away underneath it. */
    .palette__results {
      margin-block-start: var(--block-space-half);
      max-block-size: 50vh;
      overflow: auto;
    }

    /* A heading with nothing left under it is a label for nothing. The filter
       hides rows; this asks the group whether it still has any — no controller
       has to know that headings exist. */
    .palette__group:not(:has(li:not([hidden]))) {
      display: none;
    }

    .palette__group > h2 {
      padding: var(--block-space-half) var(--inline-space) 0;
    }

    li a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--block-space-half) var(--inline-space);
      color: var(--color-ink);
      text-decoration: none;
      border-radius: var(--border-radius);

      &:hover,
      &:focus-visible {
        background-color: var(--color-surface);
      }
    }

    /* Where the arrows are, and what return will follow. Selected is mizu, and
       a tint brings its paired ink — including for the type beside the name,
       which would otherwise stay grey on a wash. */
    li[data-selected] a {
      color: var(--color-selected-ink);
      background-color: var(--color-selected);

      .txt-subtle {
        color: inherit;
        opacity: 0.7;
      }
    }

    kbd {
      font-size: var(--text-x-small);
      color: var(--color-ink-faint);
    }

    /* The search door under the jump list: one hairline says where jumping
       ends and finding begins. The row itself dresses like every other. */
    .palette__search {
      margin-block-start: var(--block-space-half);
      padding-block-start: var(--block-space-half);
      border-block-start: var(--border);
    }

    /* Shown only when the filter has hidden every row — fizzy's blank slate,
       asked as a question about the list rather than counted in a controller.
       An account with nothing in it yet answers the same way, which is right. */
    .palette__empty {
      display: none;
      padding: var(--block-space) var(--inline-space);
      color: var(--color-ink-subtle);
    }

    /* Both halves of the palette answer to the filter, so the note appears
       only when neither the tiles nor the rows have anything left. */
    &:not(:has([data-filter-target="item"]:not([hidden]))) .palette__empty {
      display: block;
    }
  }

  /* The tile's layout, fill and radius are utilities on the element; what is
     left here is what makes it a destination rather than a box: the glyph's
     size, no underline, and where you already are. Selected is mizu, and a
     tint always brings its paired ink — including for the digit, which would
     otherwise stay faint grey on a wash. */
  .palette-section {
    --icon-size: 1.25rem;

    color: var(--color-ink);
    text-decoration: none;
    text-align: center;

    &:hover {
      --fill-color: var(--color-line);
    }

    /* Where you already are, and where return would take you, read the same:
       both are mizu, and a tint brings its paired ink — including for the
       digit, which would otherwise stay faint grey on a wash. */
    &[aria-current="page"],
    &[data-selected] {
      --fill-color: var(--color-selected);

      color: var(--color-selected-ink);

      kbd {
        color: inherit;
        opacity: 0.65;
      }
    }
  }
}