@layer components {
  /* The panel under the search field of the top bar, with the first results. */
  .search-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: min(40rem, 100vw - 2rem);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-block);
    color: var(--color-ink);
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--duration) var(--ease), translate var(--duration) var(--ease);

    @starting-style { opacity: 0; translate: 0 -4px; }

    & turbo-frame { display: block; transition: opacity var(--duration) var(--ease); }
    & turbo-frame[aria-busy="true"] { opacity: 0.6; }
  }

  .search-panel__header,
  .search-panel__footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
  }

  .search-panel__header { border-bottom: 1px solid var(--color-line); }
  .search-panel__footer { border-top: 1px solid var(--color-line); align-items: center; }
  .search-panel__list { list-style: none; margin: 0; padding: 0.375rem; }

  /* One result: type and number, name, context, date. */
  .search-result {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.125rem 1rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius);
    color: var(--color-ink);
    text-decoration: none;

    &:hover,
    &:focus-visible { background: var(--color-chip); text-decoration: none; }
    &:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  }

  .search-result__type { grid-column: 1; color: var(--color-ink-muted); font-size: var(--text-sm); font-weight: 600; }
  .search-result__id { font-variant-numeric: tabular-nums; }
  .search-result__name { grid-column: 1; font-weight: 700; }
  .search-result__sub { grid-column: 1; color: var(--color-ink-muted); font-size: var(--text-sm); }
  .search-result__date { grid-column: 2; grid-row: 1; justify-self: end; color: var(--color-ink-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
  .search-result__state { grid-column: 2; grid-row: 2 / span 2; justify-self: end; align-self: start; & .progress { align-items: flex-end; } }

  /* The part of a result that matches the words typed. */
  .search-result mark,
  .table mark {
    background: color-mix(in oklch, var(--color-accent) 22%, transparent);
    color: inherit;
    border-radius: var(--radius-sm);
    padding: 0 1px;
  }
}