/* Site search (/search/). Colors and fonts come only from the live stylesheet's tokens (--bg, --ink, --accent ...), as in
   tools/vendor-pages/static/catalog.css, so the page follows DESIGN.md (The Yard Ticket) in light and dark. Flat: no shadows. */

input, select, textarea { font-size: 1rem; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.ss-top { padding-block: 1.5rem 1.25rem; border-bottom: 1px solid var(--line); }
.ss-top h1 { font-size: clamp(1.9rem, 4.4vw, 2.6rem); margin-bottom: 1rem; }
.ss-form label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: .35rem; }
.ss-box { display: flex; gap: .5rem; align-items: stretch; }
.ss-box input { flex: 1; min-width: 0; min-height: 3.25rem; font-size: 1.1rem; padding: .7rem .9rem; }
.ss-go { min-height: 3.25rem; padding-inline: 1.1rem; flex: none; }
.ss-clear { flex: none; min-height: 3.25rem; min-width: 3.25rem; padding: 0 .8rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; }
.ss-clear:hover { border-color: var(--ink-3); }
.ss-help { margin-top: .7rem; font-size: .95rem; color: var(--ink-2); }
.ss-help a { color: var(--accent); font-weight: 600; }

.ss-body { padding-block: 1.25rem 3rem; }
.ss-status { color: var(--ink-2); font-size: .95rem; min-height: 1.5rem; margin-bottom: .5rem; }
.ss-status:empty { min-height: 0; margin: 0; }
.ss-status.ss-status-sr { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ss-listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .7rem .9rem;
  margin-bottom: 1rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; }
.ss-listbar[hidden] { display: none; }
.ss-listbar .btn { padding: .6rem 1rem; min-height: 44px; }

.ss-h { font-size: 1.125rem; letter-spacing: -.02em; margin: 1.4rem 0 .5rem; }
.ss-results > .ss-h:first-child { margin-top: .5rem; }
.ss-pages, .ss-items, .ss-chips, .ss-skeleton { list-style: none; margin: 0; padding: 0; }
.ss-pages { border-top: 1px solid var(--line); }
.ss-page { display: grid; gap: .1rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.ss-page:hover .ss-title, .ss-page:focus-visible .ss-title { color: var(--accent); }
.ss-kind { font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.ss-title { font-weight: 700; font-size: 1.05rem; }
.ss-desc { font-size: .92rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.ss-items-head { margin-top: 1.4rem; }
.ss-items-head .ss-h { margin: 0 0 .2rem; }
.ss-note { font-size: .92rem; color: var(--ink-3); margin: 0 0 .6rem; }
.ss-items { border-top: 1px solid var(--line); }
.ss-item { display: flex; gap: .8rem; align-items: center; justify-content: space-between; padding: .75rem .2rem; border-bottom: 1px solid var(--line); }
.ss-what { min-width: 0; }
.ss-name { font-weight: 600; overflow-wrap: anywhere; }
.ss-meta { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .88rem; color: var(--ink-3); margin-top: .1rem; }
.ss-meta b, .ss-name b, .ss-title b { font-weight: 800; color: var(--ink); }
.ss-group { color: var(--ink-3); }
a.ss-group { color: var(--accent); }
.ss-add { flex: none; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  color: var(--accent); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.ss-add:hover { border-color: var(--accent); }
.ss-add.ss-added { color: var(--ink-2); }
.ss-more { margin-top: 1rem; width: 100%; min-height: 48px; }
.ss-more[hidden] { display: none; }

.ss-none { margin-top: 1rem; padding: 1.25rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.ss-none h2 { font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .4rem; overflow-wrap: anywhere; }
.ss-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.ss-actions .btn { min-height: 48px; }
.ss-tip { margin-top: .8rem; font-size: .92rem; color: var(--ink-3); }

.ss-start h2 { font-size: 1.25rem; letter-spacing: -.02em; margin: 1.6rem 0 .6rem; }
.ss-start > :first-child h2, .ss-start > h2:first-child { margin-top: .4rem; }
.ss-start p { max-width: 65ch; color: var(--ink-2); }
.ss-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.ss-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); text-decoration: none; font-weight: 600; }
.ss-chip:hover { border-color: var(--accent); color: var(--accent); }
.ss-depts { margin-top: .4rem; }
.ss-dept { padding: 1rem 1.1rem; }
.ss-dept h3 { font-size: 1rem; }
.ss-start .ss-note { margin-top: 1.4rem; }

.ss-skeleton li { height: 3.4rem; padding: 1rem .2rem 0; border-bottom: 1px solid var(--line); }
.ss-skeleton li::before { content: ""; display: block; width: 60%; height: .9rem; border-radius: var(--radius); background: var(--bg-inset); }
@media (prefers-reduced-motion: no-preference) { .ss-skeleton li { animation: ss-wait 1.2s ease-in-out infinite alternate; } }
@keyframes ss-wait { from { opacity: 1; } to { opacity: .45; } }

@media (min-width: 720px) {
  .ss-top { padding-block: 2.2rem 1.6rem; }
  .ss-box { max-width: 46rem; }
  .ss-add { padding-inline: 1rem; }
}

/* Call and text at the thumb on a phone, as on the live pages (seo/tools/live_pages.py PHONE_BAR_CSS). */
[data-phone-bar] { display: none; }
@media (max-width: 768px) {
  body { padding-bottom: calc(3.25rem + env(safe-area-inset-bottom)); }
  [data-phone-bar] { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--bg); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom); }
  [data-phone-bar] a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 3.25rem; font-weight: 600; text-decoration: none; color: var(--ink); }
  [data-phone-bar] a + a { border-left: 1px solid var(--line); }
  [data-phone-bar] a:first-child { background: var(--accent); color: var(--accent-ink); }
}