/* Site-wide search widget (search.js).
   Mirrors the Help site's Material search: rounded field in the charcoal top
   bar, white result card, brand-blue accents.

   Self-contained on purpose. It mounts into three different page chromes —
   the portal top bar (css/portal.css), the Sphinx/shibuya header (python/), and
   the front-page hero — and python/ does not load portal.css, so the brand
   values are repeated here rather than taken from --brand/--topbar. Keep them
   in step with css/portal.css. */

.uds {
    --uds-brand: #3e9bd6;
    --uds-brand-strong: #2f8bc4;
    --uds-ink: rgba(0, 0, 0, 0.87);
    --uds-muted: rgba(0, 0, 0, 0.54);
    --uds-line: rgba(0, 0, 0, 0.10);
    --uds-card-bg: #ffffff;
    --uds-hover: #f4f9fd;
    --uds-field-bg: rgba(255, 255, 255, 0.12);
    --uds-field-fg: #ffffff;
    --uds-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 22rem;
    margin: 0 1rem;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: 16px;
}

@media (prefers-color-scheme: dark) {
    .uds {
        --uds-brand-strong: #4aa8e0;
        --uds-ink: rgba(255, 255, 255, 0.87);
        --uds-muted: rgba(255, 255, 255, 0.52);
        --uds-line: rgba(255, 255, 255, 0.12);
        --uds-card-bg: #262933;
        --uds-hover: rgba(255, 255, 255, 0.06);
        --uds-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }
}

/* --- field ------------------------------------------------------------- */

.uds__field {
    position: relative;
    display: flex;
    align-items: center;
}

.uds__icon {
    position: absolute;
    left: 0.6rem;
    width: 1.1rem;
    height: 1.1rem;
    pointer-events: none;
    opacity: 0.7;
    color: var(--uds-field-fg);
}

.uds__input {
    width: 100%;
    padding: 0.4rem 1.9rem 0.4rem 2.2rem;
    border: 1px solid transparent;
    border-radius: 1.2rem;
    background: var(--uds-field-bg);
    color: var(--uds-field-fg);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.uds__input::placeholder { color: rgba(255, 255, 255, 0.6); }
.uds__input:hover { background: rgba(255, 255, 255, 0.18); }

/* WebKit draws its own clear button on type=search; we supply .uds__clear. */
.uds__input::-webkit-search-cancel-button,
.uds__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* Focused, the field becomes the same surface as the results panel below it —
   which means it must follow the panel's colours, not a hard-coded white:
   --uds-ink is near-white in dark mode, so white here left white-on-white text. */
.uds__input:focus {
    background: var(--uds-card-bg);
    color: var(--uds-ink);
    border-color: var(--uds-brand);
}

.uds__input:focus::placeholder { color: var(--uds-muted); }
.uds__input:focus + .uds__icon,
.uds__field:focus-within .uds__icon { color: var(--uds-muted); }

/* Clear button, shown only once there is something to clear. */
.uds__clear {
    position: absolute;
    right: 0.45rem;
    display: none;
    padding: 0.15rem 0.3rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--uds-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.uds__clear:hover { color: var(--uds-brand-strong); }
.uds--filled .uds__clear { display: block; }

/* --- results ----------------------------------------------------------- */

.uds__panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 40;
    display: none;
    max-height: min(70vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--uds-line);
    border-radius: 0.4rem;
    background: var(--uds-card-bg);
    box-shadow: var(--uds-shadow);
    color: var(--uds-ink);
    text-align: left;
}

.uds--open .uds__panel { display: block; }

.uds__meta {
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--uds-line);
    color: var(--uds-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.uds__list { margin: 0; padding: 0; list-style: none; }

.uds__item + .uds__item { border-top: 1px solid var(--uds-line); }

.uds__link {
    display: block;
    padding: 0.6rem 0.9rem;
    color: inherit;
    text-decoration: none;
}

.uds__link:hover,
.uds__link.uds--active {
    background: var(--uds-hover);
    text-decoration: none;
}

.uds__title {
    display: block;
    color: var(--uds-brand-strong);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.uds__teaser {
    display: block;
    margin-top: 0.15rem;
    color: var(--uds-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    /* Two lines is enough to judge a hit without turning the list into prose. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.uds__badge {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.2rem;
    background: var(--uds-hover);
    border: 1px solid var(--uds-line);
    color: var(--uds-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: 0.05rem;
}

.uds__link mark {
    background: rgba(62, 155, 214, 0.22);
    color: inherit;
    border-radius: 2px;
}

.uds__empty {
    padding: 1rem 0.9rem;
    color: var(--uds-muted);
    font-size: 0.85rem;
}

/* Sub-results: other matching sections of the same page. */
.uds__sections { margin: 0.25rem 0 0; padding: 0; list-style: none; }

.uds__section-link {
    display: block;
    padding: 0.15rem 0 0.15rem 0.75rem;
    border-left: 2px solid var(--uds-line);
    color: var(--uds-muted);
    font-size: 0.8rem;
    text-decoration: none;
}

.uds__section-link:hover,
.uds__section-link.uds--active {
    border-left-color: var(--uds-brand);
    color: var(--uds-brand-strong);
    background: var(--uds-hover);
    text-decoration: none;
}

/* --- hero variant (front page) ----------------------------------------- */

.uds--hero {
    max-width: 44rem;
    margin: 0 auto;
    flex: none;
    width: 100%;
    --uds-field-bg: var(--uds-card-bg);
    --uds-field-fg: var(--uds-ink);
}

.uds--hero .uds__input {
    padding: 0.85rem 2.6rem 0.85rem 3rem;
    border-color: var(--uds-line);
    border-radius: 2rem;
    background: var(--uds-card-bg);
    color: var(--uds-ink);
    font-size: 1.05rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.uds--hero .uds__input::placeholder { color: var(--uds-muted); }
.uds--hero .uds__input:hover { background: var(--uds-card-bg); }
.uds--hero .uds__input:focus { box-shadow: 0 0 0 3px rgba(62, 155, 214, 0.25); }

.uds--hero .uds__icon {
    left: 1.1rem;
    width: 1.3rem;
    height: 1.3rem;
    color: var(--uds-muted);
}

.uds--hero .uds__clear { right: 1rem; }

/* --- shibuya (python/) ------------------------------------------------- */

/* The Sphinx header lays its children out in a flex row with its own spacing;
   sit in that row at a fixed width instead of stretching. */
.sy-head-extra .uds {
    flex: 0 1 15rem;
    margin: 0 0.5rem 0 0;
    --uds-field-bg: rgba(255, 255, 255, 0.10);
}

/* The field is narrow and sits near the right edge, so let the results grow
   leftward instead of wrapping every title. */
.sy-head-extra .uds .uds__panel {
    left: auto;
    right: 0;
    width: 26rem;
    max-width: calc(100vw - 2rem);
}

@media (max-width: 900px) {
    .uds { max-width: 14rem; margin: 0 0.6rem; }
}

@media (max-width: 640px) {
    /* Too little room for a field and the brand; the hero and in-page search
       remain reachable, so drop the bar-mounted one. */
    .topbar__inner > .uds,
    .sy-head-extra .uds { display: none; }
    .uds--hero { display: block; }
}