/* ============================================================
   Visual system – layout
   Page shell: nav, page title, dropdowns, scroll-to-top,
   body padding, search‑page toggles.
   ============================================================ */

/* Clears the fixed nav, and only that - exactly, with nothing added. The title
   is the first thing under it and used to be pinned flush against its lower
   edge, so any breathing room here would drop it below where it has always sat.
   It reserved room for the title too when that was a second fixed bar; the
   title takes its own space in the normal way now. */
body:has(.MainNavigation) {
    padding-top: var(--nav-height);
}

.PageBody {
    padding: 1rem;
    padding-inline: var(--content-padding-inline);
}

/* ---------- Catalog ---------- */

.CompareModelsInputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.CompareModelsInputs label { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.CompareModelsInputs input { width: 100%; min-width: 0; }
.CalculateWorkloadButton { align-self: flex-end; }
@media (max-width: 700px) { .CompareModelsInputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.CatalogPage {
    padding-bottom: calc(var(--comparison-tray-height, 6rem) + 3rem);
}

.CatalogExplorerNav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-block: 1rem;
}

.SearchForm {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    margin-block: 1rem 2rem;
}

.SearchForm label, .ModelDetailCard > label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 10rem;
}

.SearchForm details {
    flex-basis: 100%;
}

.SearchFormControls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 1rem; width: 100%; }
.SearchFormControls > label:first-child { grid-column: 1 / -1; }
.SearchFormControls label { min-width: 0; }
.SearchFormControls input, .SearchFormControls select { width: 100%; min-width: 0; }
@media (min-width: 701px) {
    .SearchFormControls { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .SearchFormControls > label:first-child { grid-column: auto; }
}
.SearchFormPredicateFieldset { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 1rem; flex-basis: 100%; min-width: 0; border: 1px solid var(--hairline); border-radius: var(--radius-ctl); padding: 1rem; }
.SearchFormPredicateFieldset legend { font-weight: 650; padding-inline: 0.4rem; }
.SearchFormPredicateFieldset label { min-width: 0; }
.SearchFormPredicateFieldset select, .SearchFormPredicateFieldset input { min-width: 0; max-width: 100%; width: 100%; }
.SearchFormPredicateFieldset[hidden], .SearchFormAddPredicateButton[hidden] { display: none; }
@media (max-width: 700px) { .SearchFormPredicateFieldset { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 420px) { .SearchFormPredicateFieldset { grid-template-columns: minmax(0, 1fr); } }

.SearchForm details label {
    margin-block: 1rem;
}

.SearchForm details details {
    max-height: 20rem;
    overflow: auto;
}

.ModelResultList, .ProviderList {
    padding: 0;
    list-style: none;
}

.ModelResultList > li, .ModelDetailCard > section {
    overflow-x: auto;
}

.ModelResultListCards, .ProviderList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}

.CatalogSelectionList, .CatalogFieldList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.CatalogSelectionCard, .CatalogFieldCard { height: 100%; }
.CatalogFieldCard h2 { overflow-wrap: anywhere; }
.SearchForm details details > div { padding: 0.7rem; border-bottom: 1px solid var(--hairline); }
.SearchForm details details > div p { margin-bottom: 0.4rem; }
.SearchForm details details button { margin-inline-end: 0.5rem; }

.ModelCard {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.ModelCard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-pop);
}

.ModelCard p {
    margin: 0;
    overflow-wrap: anywhere;
}

.ModelCardActions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ModelResultTable, .ModelFieldTable, .ModelDetailCard table, .ModelComparisonCard > table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ModelResultTable {
    background: var(--surface);
}

.ModelHostingOfferList { padding: 0; list-style: none; }
.ModelHostingOfferList > li { overflow-x: auto; }
.ModelHostingOfferTable { width: 100%; background: var(--surface); font-size: 0.875rem; }
.ModelHostingOfferTable th, .ModelHostingOfferTable td { min-width: 11rem; padding: 0.8rem; border-bottom: 1px solid var(--hairline); }
.ModelHostingOfferTable td:first-child, .ModelHostingOfferTable th:first-child { position: sticky; left: 0; background: var(--surface); }

.ModelWorkloadList { padding: 0; list-style: none; }
.ModelWorkloadList > li { overflow-x: auto; }
.ModelWorkloadTable { width: 100%; background: var(--surface); font-size: 0.875rem; }
.ModelWorkloadTable th, .ModelWorkloadTable td { min-width: 11rem; padding: 0.8rem; border-bottom: 1px solid var(--hairline); }

.ModelScatterPlot {
    margin-block: 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
}
.ModelScatterPlot svg { width: 100%; max-height: 40rem; }
.ModelScatterPlot svg text { fill: currentColor; font-size: 12px; }
.ModelScatterPlot circle { fill: var(--accent); stroke: var(--ink); stroke-width: 0.5; cursor: pointer; }
.ModelScatterPlot circle:hover, .ModelScatterPlot circle:focus { fill: var(--ink); stroke-width: 2; }
.ModelScatterPlot [data-plot-selection] { padding: 1rem; background: var(--surface-2); border-radius: var(--radius-ctl); }
.ModelScatterPlot [data-plot-selection] a { font-weight: 650; }

.ModelResultTable th, .ModelResultTable td, .ModelFieldTable th, .ModelFieldTable td,
.ModelDetailCard th, .ModelDetailCard td, .ModelComparisonCard th, .ModelComparisonCard td {
    padding: 0.8rem;
    border-bottom: 1px solid var(--hairline);
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
    min-width: 10rem;
}

.ModelResultTable th:first-child, .ModelResultTable td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    min-width: 16rem;
}

.ModelResultTable p {
    font-size: 0.75rem;
    color: var(--muted);
    margin-block: 0.4rem 0;
}

.ModelResultTable th:first-child, .ModelHostingOfferTable th:first-child { background: var(--surface-2); }

.ModelDetailCard, .ModelComparisonCard {
    overflow-x: auto;
}

.ModelDetailCard h2, .ModelDetailCard section {
    margin-block: 1.5rem 1rem;
}

.ModelFactList { display: flex; flex-wrap: wrap; gap: 0.7rem; padding: 0; list-style: none; margin-block: 1rem; }
/* ---------- Catalog disclosures and collections ---------- */
.ModelDetailCard > details, .ModelComparisonCard > details, .CatalogFieldCard > details {
    margin-block: 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-ctl);
    padding: 1rem;
}
.ModelArrayCollection details { margin-block: 0.75rem; padding: 0.75rem; background: var(--surface-2); border-radius: var(--radius-ctl); }
.ModelArrayCollection summary, .ModelDetailCard summary, .ModelComparisonCard summary, .CatalogFieldCard summary {
    cursor: pointer;
    font-weight: 650;
    overflow-wrap: anywhere;
}
.ModelArrayCollectionValues { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.ModelArrayCollectionValues > li { padding: 0.35rem 0.7rem; border-radius: var(--radius-ctl); background: var(--surface-2); border: 1px solid var(--hairline); overflow-wrap: anywhere; max-width: 100%; }
.ModelArrayCollection dl { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr); gap: 0.6rem 1.2rem; margin-block: 1rem; }
.ModelArrayCollection dt { color: var(--muted); overflow-wrap: anywhere; }
.ModelArrayCollection dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.CatalogValueDetails > p { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 400; }
.ModelDetailCardDescription { white-space: pre-wrap; overflow-wrap: anywhere; }
.ModelHostingOfferTable details { width: 24rem; max-width: 70vw; }
.ModelHostingOfferTable details summary { cursor: pointer; font-weight: 650; }
.ModelHostingOfferTable dl { display: grid; gap: 0.35rem; }
.ModelHostingOfferTable dt { margin-block-start: 0.75rem; font-weight: 650; }
.ModelHostingOfferTable dd { margin: 0; overflow-wrap: anywhere; }
.ModelHostingOfferTable dd p { color: var(--muted); font-size: 0.75rem; margin-block: 0.3rem; }
.ModelArrayCollectionTable, .ModelArrayCollectionRaw { overflow-x: auto; max-width: 100%; }
.ModelArrayCollectionTable table { width: 100%; }
.ModelArrayCollection > p { color: var(--muted); }
.ModelArrayCollection > p > span { display: inline-block; margin-inline-end: 1rem; }
.ModelDetailCard > a, .CreatorCard > a, .ProviderCard > a { display: inline-block; margin-inline-end: 1rem; margin-block: 0.5rem; }
.ModelFieldRow details { margin-block-start: 0.5rem; font-size: 0.75rem; font-weight: 400; }
.ModelFieldRow details p { margin-block: 0.4rem; }
@media (max-width: 600px) {
    .ModelArrayCollection dl { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
    .ModelArrayCollection dd { margin-block-end: 0.8rem; }
}
.ModelFactList > li { padding: 0.7rem; border: 1px solid var(--hairline); border-radius: var(--radius-ctl); background: var(--surface-2); }

.ModelComparisonTray {
    position: fixed;
    bottom: 1rem;
    left: var(--content-padding-inline);
    right: var(--content-padding-inline);
    z-index: 19;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
}

.ModelComparisonTray p { margin: 0; }
.ModelComparisonTray [data-comparison-items] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ModelComparisonTray [data-comparison-items] button { font-size: 0.75rem; }
.CompareModelsButton { margin-inline-start: auto; align-self: flex-end; }
.ModelComparisonFlight {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    padding: 0.5rem;
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-pop);
}
.ModelArrayComparisonTable, .ModelChangeCard table, .CatalogFieldValueList table { width: 100%; }
.ModelChangeCard, .CreatorCard, .ModelWatchlistCard { overflow-x: auto; }
.ModelChangeList, .CreatorList, .ModelWatchlistList { list-style: none; padding: 0; }
.ModelChangeCard td, .ModelArrayComparisonTable td { vertical-align: top; overflow-wrap: anywhere; }
.ModelComparisonTray [data-comparison-items] > button { animation: ComparisonItemIn 180ms ease; }
@keyframes ComparisonItemIn { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: translateY(0); } }
.ModelCompareButton[aria-pressed="true"], .ModelWatchButton[aria-pressed="true"] {
    background-color: var(--accent);
    background-image: var(--accent-image, none);
    color: var(--accent-ink) !important;
}
[hidden] { display: none !important; }

@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 280ms; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
    .ModelCard:hover { transform: none; }
}

/* ---------- Fixed header: nav bar + page title ---------- */

.MainNavigation {
    display: flex;
    gap: 1.5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background-color: var(--glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    padding-inline: var(--content-padding-inline);
    z-index: 20;
    align-items: center;
}

.MainNavigationSiteLinks {
    display: flex;
    gap: 1.5rem;
}

.NavBrand {
    font-family: var(--display-font);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.3;
    align-self: center;
}

.NavBrand:hover { color: var(--ink); }

/* On the Messages link in the menu, riding alongside the label rather than
   positioned against it - the menu is a list of plain links. */
.NavDropdownMenu a { position: relative; }

.MainNavigation a {
    font-weight: 500;
    font-size: 0.9rem;
}

.MainNavigation > div { align-items: center; }

/* The title is content, not chrome: it sits at the top of <main> and scrolls up
   out of view with everything below it, leaving the nav as the only thing
   pinned. The glass and the backdrop blur went with the fixed position - they
   were there so content could pass underneath, which it no longer does - and so
   did the full-bleed offsets and its own inline padding, since it now sits in
   the content column the body already indents. The rule under it stays, as the
   separation it was drawing is still worth drawing. */
.PageTitle {
    position: relative;
    height: var(--nav-height);
    margin: 0 0 1rem;
    line-height: 3rem;
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Dropdown menus ---------- */

.NavDropdown { position: relative; }
.NavDropdownTrigger { cursor: pointer; }

.NavDropdownMenu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 11rem;
    z-index: 20;
    padding: 0.5rem;
    border-radius: var(--radius-card);
    border-top-left-radius: 0;
    box-shadow: var(--shadow-pop);
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.NavDropdown:hover .NavDropdownMenu,
.NavDropdown:focus-within .NavDropdownMenu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.NavDropdownMenu {
    top: calc(100% + 3px);
}

/* ---------- Scroll-to-top ---------- */

.ScrollToTopButton {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 20;
    padding: 0.5rem 0.5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink);
    font-size: 0.875rem;
    cursor: pointer;
}

.ScrollToTopButton.Scrolled { display: block; }


/* ---------- Catalog color and rhythm ---------- */

.CatalogPage .PageTitle { font-size: clamp(1.8rem, 3vw, 2.75rem); letter-spacing: -0.045em; }
.CatalogExplorerParagraph { max-width: 65ch; padding: 1rem 1.25rem; border-inline-start: 3px solid var(--accent); border-radius: var(--radius-ctl); background: var(--surface); font-size: 0.95rem; line-height: 1.7; color: var(--ink); }
.CatalogExplorerLink {
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    font-size: 0.875rem;
    font-weight: 550;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.CatalogExplorerLink:hover, .CatalogExplorerLink:focus-visible { background: var(--accent-soft); border-color: var(--accent); }
.SearchForm { border-block-start: 3px solid var(--accent); }
.SearchForm:focus-within { box-shadow: var(--shadow-card), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.SearchForm label { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.SearchForm input, .SearchForm select { font-weight: 450; color: var(--ink); }
.SearchFormPredicateFieldset { width: 100%; background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.SearchFormPredicateFieldset legend { grid-column: 1 / -1; float: none; width: auto; margin-block-end: 0.25rem; }
.SearchForm > details { width: 100%; align-self: stretch; }
.SearchFormAddPredicateButton { align-self: flex-start; }
.SearchFormActions { display: flex; flex-wrap: wrap; align-items: center; align-self: flex-end; gap: 0.75rem; }
.SearchFormLink { padding: 0.5rem 0.75rem; border-radius: var(--radius-pill); font-size: 0.875rem; }
.SearchFormLink:hover { background: var(--accent-soft); }
.SearchForm summary { cursor: pointer; font-weight: 600; line-height: 1.6; }
.SearchForm summary:hover { color: var(--accent); }
.UpdateCatalogButton { align-self: flex-end; }
.ModelCard { border-block-start: 3px solid color-mix(in srgb, var(--accent) 55%, var(--hairline)); padding: 1.25rem; gap: 0.85rem; }
.ModelCard:focus-within { box-shadow: var(--shadow-pop); border-color: var(--accent); }
.ModelCard:focus-within > h2 > a { color: var(--accent); }
.ModelCardHeading { margin: 0; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.ModelCardProviderLabel {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 650;
}
.ModelCardProviderLabel::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.ModelCardIdentifier { color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.75rem; line-height: 1.6; }
.ModelCardDescription { font-size: 0.875rem; line-height: 1.7; }
.ModelCardMetrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem 1rem; padding-block: 0.85rem; margin: 0; border-block: 1px solid var(--hairline); font-size: 0.8125rem; }
.ModelCardMetricLabel { color: var(--muted); overflow-wrap: anywhere; }
.ModelCardMetricValue { margin: 0; text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; overflow-wrap: anywhere; }
.ModelCardActions .Button { font-size: 0.8125rem; }
.ModelCard:has(.ModelCompareButton[aria-pressed='true']) { border-color: var(--accent); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--accent); }
:is(.ProviderCard, .CreatorCard, .CatalogSelectionCard, .CatalogFieldCard, .ModelWatchlistCard) { transition: box-shadow 160ms ease, border-color 160ms ease; }
:is(.ProviderCard, .CreatorCard, .CatalogSelectionCard, .CatalogFieldCard, .ModelWatchlistCard):hover,
:is(.ProviderCard, .CreatorCard, .CatalogSelectionCard, .CatalogFieldCard, .ModelWatchlistCard):focus-within { border-color: var(--accent); box-shadow: var(--shadow-pop); }
.CatalogPage table { font-variant-numeric: tabular-nums; }
.CatalogPage tr:has(.ModelCompareButton[aria-pressed='true']) > td { background-color: color-mix(in srgb, var(--surface) 89%, var(--accent)); }
.CatalogPage tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--surface) 96%, var(--accent)); }
.CatalogPage tbody tr:hover > td, .CatalogPage tbody tr:focus-within > td { background-color: color-mix(in srgb, var(--surface) 92%, var(--accent)); }
.CatalogPage tbody tr:hover > th, .CatalogPage tbody tr:focus-within > th { background-color: color-mix(in srgb, var(--surface-2) 92%, var(--accent)); }
.CatalogPage th { line-height: 1.5; }
.CatalogPage td { line-height: 1.65; }
.ModelScatterPlot circle { transition: r 140ms ease, stroke-width 140ms ease; }
.ModelScatterPlot circle:hover, .ModelScatterPlot circle:focus { r: 6px; }
.ModelDetailCard > details[open], .ModelComparisonCard > details[open], .CatalogFieldCard > details[open] { border-color: color-mix(in srgb, var(--accent) 50%, var(--hairline)); }
.ModelDetailCard summary:hover, .ModelComparisonCard summary:hover, .ModelArrayCollection summary:hover { color: var(--accent); }
.ModelComparisonTray { border-block-start: 3px solid var(--accent); background-image: var(--surface-image, none); }
.ModelComparisonTrayParagraph { color: var(--muted); font-size: 0.875rem; }
.ModelComparisonTrayItemsContainer { flex: 1 1 20rem; min-width: 0; }
.ModelComparisonTrayItemsContainer > button { max-width: 100%; overflow-wrap: anywhere; text-align: start; }
.ModelComparisonRemoveMark { color: #d32f2f; margin-inline-start: 0.4rem; font-size: 1rem; }
.CatalogPage:has(.ModelComparisonTray) .ScrollToTopButton { bottom: calc(var(--comparison-tray-height, 6rem) + 2rem); }

@media (prefers-reduced-motion: no-preference) {
    .ModelResultListCards > li, .ProviderList > li, .CatalogSelectionList > li { animation: CatalogCardIn 350ms ease-out both; }
    .ModelResultListCards > li:nth-child(2), .ProviderList > li:nth-child(2), .CatalogSelectionList > li:nth-child(2) { animation-delay: 35ms; }
    .ModelResultListCards > li:nth-child(3), .ProviderList > li:nth-child(3), .CatalogSelectionList > li:nth-child(3) { animation-delay: 70ms; }
    .ModelResultListCards > li:nth-child(4), .ProviderList > li:nth-child(4), .CatalogSelectionList > li:nth-child(4) { animation-delay: 105ms; }
}
@keyframes CatalogCardIn { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Glass surfaces ---------- */

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :is(.Card, .Form, .SearchBox, .NavDropdownMenu,
        .ConfirmDialogCard,
        .ModelComparisonTray, .CatalogExplorerParagraph) {
        background-color: var(--glass-panel);
        background-image: var(--glass-highlight);
        border-color: var(--glass-border);
        box-shadow: var(--glass-shadow), var(--shadow-card);
        -webkit-backdrop-filter: blur(18px) saturate(125%);
        backdrop-filter: blur(18px) saturate(125%);
    }

    .MainNavigation {
        background-color: color-mix(in srgb, var(--surface) 84%, transparent);
        background-image: var(--glass-highlight);
        border-color: var(--glass-border);
        box-shadow: var(--glass-shadow), var(--shadow-card);
        -webkit-backdrop-filter: blur(22px) saturate(125%);
        backdrop-filter: blur(22px) saturate(125%);
    }

    .SearchForm:focus-within {
        box-shadow: var(--glass-shadow), var(--shadow-card), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .ModelComparisonTray, .NavDropdownMenu, .ConfirmDialogCard {
        background-color: color-mix(in srgb, var(--surface) 92%, transparent);
        box-shadow: var(--glass-shadow), var(--shadow-pop);
    }
}

@media (prefers-reduced-transparency: reduce) {
    :is(.Card, .Form, .SearchBox, .NavDropdownMenu,
        .ConfirmDialogCard,
        .ModelComparisonTray, .CatalogExplorerParagraph, .MainNavigation) {
        background-color: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}