@layer components {

  .palette {
    width: min(42rem, var(--panel-ceiling));
    
    max-height: min(32rem, calc(100dvh - var(--space-10)));
    margin: 12dvh auto auto;
    padding: 0;
    color: var(--ink);
    overflow: hidden;
  }

  @media (width <= 48rem) {
    .palette {
      margin-top: calc(var(--safe-top) + var(--space-2));
      max-height: calc(100dvh - var(--safe-top) - var(--space-2) * 2);
    }
  }

  
  .palette[open] {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity var(--transition),
                overlay var(--transition) allow-discrete,
                display var(--transition) allow-discrete;

    @starting-style { opacity: 0; }
  }

  
  .palette {
    opacity: 0;
    transition: opacity var(--transition-exit),
                overlay var(--transition-exit) allow-discrete,
                display var(--transition-exit) allow-discrete;
  }

  .palette::backdrop { background: var(--scrim-strong); }

  
  .palette::backdrop {
    opacity: 0;
    transition: opacity var(--transition-exit),
                overlay var(--transition-exit) allow-discrete,
                display var(--transition-exit) allow-discrete;
  }

  .palette[open]::backdrop {
    opacity: 1;
    transition: opacity var(--transition),
                overlay var(--transition) allow-discrete,
                display var(--transition) allow-discrete;

    @starting-style { opacity: 0; }
  }

  .palette__form {
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: var(--space-3);
    border-bottom: var(--line-w) solid var(--line);
  }

  
  .palette__prefix {
    flex: none;
    max-width: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    letter-spacing: var(--tracking-label);
    color: var(--ink-faint);
    white-space: nowrap;
    opacity: 0;
    transition: max-width var(--transition), opacity var(--transition);
  }

  .palette[data-reference] .palette__prefix { max-width: 8ch; opacity: 1; }

  .palette__input {
    font: inherit;
    font-size: var(--text-md);
    flex: 1;
    min-width: 0;
    height: var(--control-h);
    padding: 0 var(--space-3) 0 0;
    border: 0;
    background: none;
    color: var(--ink);
  }

  .palette__input:focus { outline: none; }
  .palette__input::placeholder { color: var(--ink-faint); }
  .palette__input::-webkit-search-cancel-button { display: none; }

  .palette__results { overflow-y: auto; }
  .palette__list { list-style: none; margin: 0; padding: var(--space); position: relative; }

  .palette__cursor {
    position: absolute;
    left: var(--space);
    right: var(--space);
    top: 0;
    height: 0;
    
    border-radius: var(--radius-inset);
    background: var(--accent-sunk);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), height var(--transition),
                opacity var(--transition);
  }

  .palette__cursor[data-at] { opacity: 1; }

  .palette__result {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h-sm);
    padding: var(--space) var(--space-2);
    border-radius: var(--radius-inset);
    color: var(--ink);
    text-decoration: none;
  }

  .palette__result { position: relative; }
  .palette__result:hover { background: var(--surface-hover); }

  .palette__title {
    font-size: var(--text-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .palette__state {
    display: flex;
    align-items: baseline;
    gap: var(--space);
    white-space: nowrap;
  }

  .palette__match {
    background: none;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  .palette__project { font-size: var(--text-xs); color: var(--ink-faint); }

  .palette__empty {
    padding: var(--space-3);
    color: var(--ink-faint);
    font-size: var(--text-sm);
  }

  .palette__result--command .palette__title { grid-column: 1 / span 2; }
  .palette__result--command .task__ref { grid-column: 3; color: var(--ink-faint); }

  .palette__group { padding: var(--space-2) var(--space-2) var(--space); }
}