/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Scrollbars on dark surfaces (docs, marketing, dark console).
 * scrollbar-color/width are inherited standards properties (Firefox and
 * Chromium 121+); the -webkit- pseudo-elements cover Safari and older
 * Chromium. Light console pages keep native scrollbars. */
html.dark {
  scrollbar-color: #374151 transparent;
  scrollbar-width: thin;
}
html.dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.dark ::-webkit-scrollbar-track {
  background: transparent;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #1f2937;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #374151;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.dark ::-webkit-scrollbar-corner {
  background: transparent;
}

:root {
  --search-bg: #ffffff;
  --search-bg-subtle: #f8fafc;
  --search-hover: #f1f5f9;
  --search-text: #0f172a;
  --search-secondary: #475569;
  --search-muted: #94a3b8;
  --search-border: #e2e8f0;
  --search-border-strong: #cbd5e1;
  --search-accent: #059669;
  --search-accent-text: #047857;
}
.dark {
  --search-bg: #111827;
  --search-bg-subtle: #0f172a;
  --search-hover: #1f2937;
  --search-text: #f1f5f9;
  --search-secondary: #9ca3af;
  --search-muted: #6b7280;
  --search-border: #1f2937;
  --search-border-strong: #374151;
  --search-accent: #10b981;
  --search-accent-text: #6ee7b7;
}
body.search-open { overflow: hidden; }
.search-icon-templates { display: none; }
.hero-search { position: relative; max-width: 42rem; margin-bottom: 1.5rem; }
.search-field { display: flex; align-items: center; gap: .65rem; border: 1px solid var(--search-border-strong); background: var(--search-bg); color: var(--search-text); box-shadow: 0 12px 30px rgb(0 0 0 / .2); }
.search-field:focus-within { border-color: var(--search-accent); box-shadow: 0 0 0 1px var(--search-accent), 0 12px 30px rgb(0 0 0 / .24); }
.search-field--hero { min-height: 3.5rem; padding: 0 .9rem; border-radius: 3px; }
.search-field--palette { min-height: 3.5rem; padding: 0 1rem; border-width: 0 0 1px; box-shadow: none; }
.search-field--palette:focus-within { box-shadow: none; }
.search-field__icon { display: inline-flex; flex: none; color: var(--search-muted); }
.search-field__input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--search-text); font-size: .95rem; }
.search-field__input::placeholder { color: var(--search-muted); }
.search-kbd, .docs-search-button kbd { border: 1px solid var(--search-border); background: var(--search-bg-subtle); color: var(--search-muted); padding: .15rem .4rem; border-radius: 2px; font: 500 .65rem/1.2 ui-monospace, monospace; }
.search-results { overflow-y: auto; background: var(--search-bg); color: var(--search-text); }
.search-results--hero { position: absolute; z-index: 40; top: calc(100% + .4rem); width: 100%; max-height: 28rem; border: 1px solid var(--search-border-strong); border-radius: 3px; box-shadow: 0 18px 45px rgb(0 0 0 / .34); }
.search-results--palette { max-height: min(65vh, 32rem); }
.search-group-label { padding: .7rem .9rem .3rem; color: var(--search-muted); font-size: .65rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.search-result { display: flex; width: 100%; align-items: flex-start; gap: .7rem; border: 0; background: transparent; padding: .62rem .9rem; color: inherit; text-align: left; cursor: pointer; }
.search-result:hover, .search-result[aria-selected="true"] { background: var(--search-hover); }
.search-result[aria-selected="true"] { box-shadow: inset 2px 0 var(--search-accent); }
.search-result__icon { display: inline-flex; flex: none; margin-top: .12rem; color: var(--search-accent); }
.search-result__copy { display: flex; min-width: 0; flex-direction: column; gap: .1rem; }
.search-result__title { font-size: .84rem; font-weight: 600; }
.search-result__description { overflow: hidden; color: var(--search-secondary); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.search-result mark { background: transparent; color: var(--search-accent-text); font-weight: 700; }
.search-hint, .search-empty { padding: 1.2rem; color: var(--search-muted); font-size: .8rem; text-align: center; }
.search-palette { position: fixed; z-index: 100; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; background: rgb(2 6 23 / .76); }
.search-palette[hidden] { display: none; }
.search-palette__panel { width: min(42rem, 100%); overflow: hidden; border: 1px solid var(--search-border-strong); border-radius: 3px; background: var(--search-bg); box-shadow: 0 28px 80px rgb(0 0 0 / .55); }
.search-footer { display: flex; gap: 1rem; border-top: 1px solid var(--search-border); padding: .55rem .9rem; color: var(--search-muted); font: .65rem ui-monospace, monospace; }
.docs-search-button { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; border: 1px solid var(--search-border); border-radius: 3px; background: var(--search-bg-subtle); padding: .5rem .65rem; color: var(--search-secondary); font-size: .75rem; cursor: pointer; }
.docs-search-button:hover { border-color: var(--search-border-strong); color: var(--search-text); }
@media (max-width: 640px) {
  .search-palette { padding: 0; background: var(--search-bg); }
  .search-palette__panel { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .search-results--palette { max-height: calc(100vh - 6.5rem); }
  .search-footer { position: absolute; bottom: 0; width: 100%; background: var(--search-bg); }
}