@layer components {
  .global-search-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 8px 10px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 6px;
    background: rgb(255 255 255 / 7%);
    color: var(--color-gray-300);
    font-size: 0.8125rem;
    cursor: pointer;
  }

  .global-search-trigger kbd { margin-left: auto; font-size: 0.6875rem; }
  .global-search-trigger:hover { background: rgb(255 255 255 / 14%); color: white; }

  .global-search__announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .global-search {
    width: min(38rem, calc(100vw - 24px));
    max-height: calc(100dvh - min(12vh, 96px) - 24px);
    margin: min(12vh, 96px) auto auto;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .global-search[open] { display: flex; flex-direction: column; }
  .global-search::backdrop { background: rgb(15 23 42 / 40%); }
  .global-search__input-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
  .global-search__input-row input { flex: 1; min-width: 0; border: 0; padding: 4px 0; background: transparent; color: inherit; font-size: 1rem; outline: none; }
  .global-search__input-row:focus-within { box-shadow: inset 0 -2px var(--color-gray-400); }
  .global-search__close { padding: 4px; background: none; border: 0; color: var(--color-text-muted); cursor: pointer; }
  .global-search kbd { font-family: inherit; font-size: 0.6875rem; border: 1px solid var(--color-border); border-radius: 4px; padding: 2px 4px; }
  .global-search__results { overflow-y: auto; min-height: 100px; padding: 8px; }
  .global-search__group + .global-search__group { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 8px; }
  .global-search__heading { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; }
  .global-search__heading h2 { margin: 0; font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); }
  .global-search__result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; color: var(--color-text); }
  .global-search:has(input:focus) .global-search__group:first-child .global-search__result:first-of-type { background: var(--color-gray-100); }
  .global-search__result:hover, .global-search__result:focus { background: var(--color-gray-100); text-decoration: none !important; outline: none; }
  .global-search__result:focus-visible { box-shadow: inset 0 0 0 2px var(--color-gray-400); }
  .global-search__text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; font-size: 0.875rem; }
  .global-search__detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: 0.75rem; }
  .global-search__status { flex-shrink: 0; border-radius: 4px; padding: 2px 6px; background: var(--color-gray-100); color: var(--color-text-muted); font-size: 0.6875rem; }
  .global-search__footer { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.6875rem; }
  .global-search__footer > span:first-child { flex-shrink: 0; }
  .global-search__message { margin: 0; padding: 24px 12px; font-size: 0.875rem; color: var(--color-text-muted); }

  @media (max-width: 600px) {
    .global-search { margin-top: 16px; max-height: calc(100dvh - 32px); }
    .global-search__input-row { gap: 8px; padding: 12px; }
    .global-search__input-row input { font-size: 0.875rem; }
    .global-search__footer { padding: 12px; flex-wrap: wrap; }
    .global-search__result { gap: 8px; padding: 10px 8px; }
  }
}