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

    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;
    }

    /* At rest the palette is short — five recent pages and five projects,
       the starred first, the jump menu's own measure (user, 2026-10-12). The
       rest waits for a query: the older visits and projects, the lists, the
       directories, the pings, what the server finds. The empty field is the
       state, so no controller keeps it; navigable_list skips what this hides. */
    &:has(input:placeholder-shown) :is(.palette__recent li:nth-child(n + 6), .palette__projects li:nth-child(n + 6), .palette__more) {
      display: none;
    }


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

    /* A group after another starts further down, so Projects breathes below
       Recently visited instead of reading as its last row (user,
       2026-10-12). Double, because the palette's rows run on a tight
       --block-space of their own. */
    .palette__group ~ .palette__group > h2 {
      padding-block-start: var(--block-space-double);
    }

    li a {
      display: flex;
      align-items: center;
      gap: var(--inline-space);
      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);
      }

      /* One line a row, on a phone as at a desk (user, 2026-10-14). The name
         takes its width, and what stands beside it — the project, a record's
         type — fills what is left and is cut first. Only a name wider than
         the row is cut. */
      > :last-child:not(:first-child) {
        flex: 1 1 0;
        text-align: end;
      }
    }

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

  /* 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. */
  .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 is mizu, and a tint brings its paired ink —
       including for the digit, which would otherwise stay faint grey on a
       wash. */
    &[aria-current="page"] {
      --fill-color: var(--color-selected);

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

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