/* allevs.ca public site: a dense "data portal" stylesheet for people who read a lot of specs at once. Small type,
   tabular figures, ruled grids, panel header bands, a dark masthead and spec sheets in two columns.
   Colour scheme: follows the system (prefers-color-scheme) unless the visitor picks light or dark, which the server
   renders as html[data-theme="light"|"dark"] (theme cookie). */

:root {
    --bg: #f3f4f6;
    --surface: #ffffff;
    --panel-head: #eceff3;
    --border: #d3d8df;
    --rule: #e5e8ec;
    --zebra: #f8f9fa;
    --hover: #eaf2fb;
    --text: #151a21;
    --muted: #5a6472;
    --accent: #0a6b4d;
    --accent-soft: #e1f2ea;
    --sources: var(--accent);
    --link: #1a5aa8;
    --ink: #0e1b28;
    --ink-text: #e7edf4;
    --ink-muted: #9aabbf;
    --warn: #7a5000;
    --warn-soft: #fff3d1;
    --danger: #a3261e;
    --danger-soft: #fce6e3;
    --info: #1d4e96;
    --info-soft: #e3ecfa;
    --radius: 2px;
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --header-h: 44px;
    color-scheme: light dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* The dark palette twice: when the system asks for it and the visitor hasn't picked light, and when they picked dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0a0e13;
        --surface: #11171e;
        --panel-head: #18202a;
        --border: #27313d;
        --rule: #1c2530;
        --zebra: #141b23;
        --hover: #17263a;
        --text: #dce3ea;
        --muted: #8b98a7;
        --accent: #4cc79a;
        --accent-soft: #123126;
        --sources: #3f8f72;
        --link: #82b4ff;
        --ink: #05080c;
        --ink-text: #e3e9f0;
        --ink-muted: #7f90a4;
        --warn: #f0c060;
        --warn-soft: #33290f;
        --danger: #f08a80;
        --danger-soft: #3a1815;
        --info: #8fb4f0;
        --info-soft: #172640;
    }
}

:root[data-theme="dark"] {
    --bg: #0a0e13;
    --surface: #11171e;
    --panel-head: #18202a;
    --border: #27313d;
    --rule: #1c2530;
    --zebra: #141b23;
    --hover: #17263a;
    --text: #dce3ea;
    --muted: #8b98a7;
    --accent: #4cc79a;
    --accent-soft: #123126;
    --sources: #3f8f72;
    --link: #82b4ff;
    --ink: #05080c;
    --ink-text: #e3e9f0;
    --ink-muted: #7f90a4;
    --warn: #f0c060;
    --warn-soft: #33290f;
    --danger: #f08a80;
    --danger-soft: #3a1815;
    --info: #8fb4f0;
    --info-soft: #172640;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 13px/1.4 var(--font);
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

/* Headings: compact titles, section labels */
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.005em; margin: 0.5em 0 0.2em; }
h2 {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted);
    margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
h3 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 14px 0 4px; }
h1:focus { outline: none; }

.container { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

.muted { color: var(--muted); }
.small { font-size: 0.78rem; }
.lead { font-size: 0.95rem; max-width: 80ch; }
.note {
    background: var(--warn-soft); color: var(--text); border-left: 3px solid var(--warn); padding: 4px 8px; border-radius: var(--radius);
    font-size: 0.78rem;
}

ul.plain { list-style: none; padding: 0; margin: 0; }
.list-links li { padding: 3px 0; border-bottom: 1px solid var(--rule); font-size: 0.82rem; }
.columns { columns: 14rem; column-gap: 1.5rem; }

/* Masthead, banner, footer */
.site-header { background: var(--ink); border-bottom: 1px solid #000; position: sticky; top: 0; z-index: 10; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--header-h); flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: 0.01em; }
.brand span { color: #5fd3a6; }
.header-nav {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
}
.header-nav > a { color: var(--ink-text); }
.header-nav > a:hover { color: #fff; }
.units { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); overflow: hidden; }
.units a { padding: 1px 8px; color: var(--ink-muted); }
.units a.active { background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; }
.sample-banner { background: var(--info-soft); color: var(--info); text-align: center; font-size: 0.72rem; padding: 2px 16px; }
.site-footer { border-top: 1px solid var(--border); margin-top: 28px; padding: 10px 0 20px; color: var(--muted); font-size: 0.72rem; }

/* Home: a compact index */
.hero { padding: 10px 0 2px; }
.card-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font-size: 0.8rem; }
.card-title { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; border-bottom: 1px solid var(--rule); padding-bottom: 3px; }

/* Breadcrumbs */
.breadcrumbs ol { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.72rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "›"; margin-right: 4px; }

/* Badges: small square tags */
.badge {
    display: inline-block; font-size: 0.64rem; font-weight: 600; line-height: 1.55; padding: 0 5px; border-radius: var(--radius);
    text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--surface); border: 1px solid var(--border); color: var(--muted); vertical-align: middle; white-space: nowrap;
}
.badge.status-current { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.badge.status-upcoming { background: var(--info-soft); border-color: transparent; color: var(--info); }
.badge.status-past { color: var(--muted); }
.badge.estimate { background: var(--warn-soft); border-color: transparent; color: var(--warn); font-weight: 500; }
.badge.conflict { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.badge.selected, .badge.eligible { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* Data grids */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.8rem; background: var(--surface); border: 1px solid var(--border); }
table.data th, table.data td { padding: 4px 8px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
table.data thead th {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600;
    position: sticky; top: var(--header-h); z-index: 2; background: var(--panel-head); border-bottom: 1px solid var(--border);
    padding-top: 6px; padding-bottom: 6px;
}
/* Inside a horizontal scroller the header sticks to the scroller, not the page: no masthead offset there. */
.table-scroll table.data thead th { top: 0; }
table.data tbody th { font-weight: 500; }
table.data tbody tr:nth-child(even) { background: var(--zebra); }
table.data tbody tr:hover { background: var(--hover); }
.num { text-align: right !important; }
.model-block, .year-block { margin-bottom: 14px; }

/* Vehicle page: panels with header bands, facts, a two-column spec sheet */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px 10px; }
.panel h2 { margin: 0 -12px 8px; padding: 6px 12px; background: var(--panel-head); border-bottom: 1px solid var(--border); }
dl.facts { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 2px 12px; margin: 0; font-size: 0.8125rem; }
dl.facts dt { color: var(--muted); font-size: 0.78rem; }
dl.facts dd { margin: 0; font-weight: 500; }
dl.facts dd.big { font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.incentives li { padding: 4px 0; border-bottom: 1px solid var(--rule); font-size: 0.8rem; }
.incentives li:last-child { border-bottom-style: none; }
.siblings { margin-top: 10px; font-size: 0.8rem; }
.siblings a { margin-right: 12px; }
/* Blazor drops whitespace between inline elements, so spacing is explicit. */
.siblings strong, .jurisdiction, .claim strong { margin-right: 6px; }
.incentives .badge, .incentives strong, .claim .badge, .vehicle-head .badge { margin-right: 6px; }

/* Two columns split on the server (VehicleView.SplitColumns) so opening a section never moves others between columns;
   on narrow screens the column wrappers dissolve and the sections stack in their original order. */
.spec-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-items: start; margin-top: 8px; }
@media (max-width: 980px) {
    /* Flex so each section's inline "order" restores the category order even when one was pinned to the other column. */
    .spec-sheet { display: flex; flex-direction: column; }
    .spec-column { display: contents; }
}
.spec-category {
    break-inside: avoid; margin: 0 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0 10px 6px;
}
.spec-category h2 { margin: 0 -10px 4px; padding: 5px 10px; background: var(--panel-head); border-bottom: 1px solid var(--border); }

/* Spec rows as a grid: label | value | sources toggle on one line; an opened source list spans the full row below.
   The td dissolves (display: contents) so its value and details become grid items; the summary is pinned top-right. */
table.specs { display: block; width: 100%; border-collapse: collapse; font-size: 0.8rem; }
table.specs tbody { display: block; }
table.specs tr {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 8px;
    position: relative; padding: 3px 5.5rem 3px 0; border-bottom: 1px solid var(--rule);
}
table.specs tr:last-child, table.specs tr:last-child td { border-bottom: 0; }
table.specs th, table.specs td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
table.specs th { padding: 0; border: 0; font-weight: 400; color: var(--muted); }
table.specs td { display: contents; }
table.specs .value { font-weight: 600; margin-right: 6px; }
tr.state-unknown .value, tr.state-not_applicable .value { color: var(--muted); font-style: italic; font-weight: 400; }

details.sources { margin-top: 4px; font-size: 0.72rem; }
details.sources summary { cursor: pointer; color: var(--sources); width: fit-content; }
details.sources ul { margin-top: 0; border-left: 2px solid var(--border); padding-left: 10px; }
table.specs details.sources { grid-column: 1 / -1; margin: 0 -5.5rem 0 0; }
table.specs details.sources summary { position: absolute; top: 3px; right: 0; }
table.specs details.sources[open] { margin-top: 4px; margin-bottom: 2px; }
/* Source name, badges and value on one line; metadata underneath. */
.claim { padding: 3px 0; }
.claim > div:nth-child(-n+2) { display: inline; }
.claim > div:nth-child(2)::before { content: "· "; color: var(--muted); }
.claim.selected { border-left: 2px solid var(--accent); margin-left: -12px; }
.reason { margin: 6px 0 0; font-style: italic; }
details.missing { margin: 4px 0 0; color: var(--muted); font-size: 0.75rem; }
details.missing summary { cursor: pointer; }
.quality { margin-top: 8px; font-size: 0.72rem; }

/* Vehicle photos (doc 04 §6.3, layout A): the photo panel takes the left column, price above key specs the right one,
   on the same columns as the spec sheet below so everything lines up. One horizontal track holds every photo: one
   slide shows at a time, thumbnails pick it, phones swipe it. */
.vehicle-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 10px; align-items: start; }
.vehicle-side { display: grid; gap: 10px; }
.media-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    border-radius: var(--radius);
}
.media-track::-webkit-scrollbar { display: none; }
.media-slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; }
.media-slide picture, .media-thumbs picture, .lb-item picture, .lb-strip picture { display: contents; }
.media-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.media-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.media-count {
    position: absolute; right: 8px; bottom: 8px; padding: 1px 7px; border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 0.7rem;
}
.credit { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 6px 0 0; font-size: 0.72rem; color: var(--muted); }
.badge.shown { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.badge.exact { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.media-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
.media-thumbs a, .media-more { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); outline-offset: 1px; }
.media-thumbs a.current { outline: 2px solid var(--accent); }
.media-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-more {
    border: 1px solid var(--border); background: var(--panel-head); color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
/* No photos yet: the same 16:9 slot, a generic outline and an invitation to contribute (PhotoPlaceholder). */
.media-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%;
    aspect-ratio: 16 / 9; padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius);
    background: var(--zebra); color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer;
}
.media-empty:hover { background: var(--hover); }
.media-empty svg { width: 40%; max-width: 180px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
.media-empty span { color: var(--accent); font-weight: 600; }
.soon {
    max-width: min(320px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font-size: 0.8125rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.soon::backdrop { background: rgba(0, 0, 0, 0.3); }
.soon p { margin: 0 0 6px; }
.soon button { margin-top: 4px; padding: 2px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-head); color: var(--text); font: inherit; cursor: pointer; }
@media (max-width: 980px) {
    .vehicle-top { grid-template-columns: minmax(0, 1fr); }
    .media-thumbs { display: none; }
}
@media (max-width: 600px) {
    /* Edge to edge: the panel loses its side padding, border and corners; the caption keeps the page gutter. */
    .media.panel { margin-inline: -16px; padding-inline: 0; border-inline: 0; border-radius: 0; }
    .media.panel h2 { margin-inline: 0; padding-inline: 16px; }
    .media-track, .media-image { border-radius: 0; }
    .media .credit { padding: 0 16px; }
}

/* Lightbox: a full-screen dialog, one photo at a time, with its caption, credit and licence. */
.lightbox {
    width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: rgba(6, 9, 13, 0.96); color: #dfe6ee;
}
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.6); }
body:has(.lightbox[open]) { overflow: hidden; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; font-size: 0.8rem; }
.lb-bar button {
    background: none; border: 1px solid #4a525c; border-radius: var(--radius); color: #fff; padding: 2px 10px; font: inherit; cursor: pointer;
}
.lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 64px; }
/* A definite width, so the photo's percentage max-width has something to resolve against. */
.lb-item { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 0; margin: 0; }
.lb-item[hidden] { display: none; }
.lb-image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 210px); margin: 0 auto; object-fit: contain; }
.lb-item figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 8px; font-size: 0.78rem; }
.lb-credit { color: #93a1b1; }
.lb-credit a { color: #9cc4ff; }
.lb-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); padding: 8px 12px; border: 0; background: none;
    color: #fff; font-size: 34px; line-height: 1; opacity: 0.75; cursor: pointer;
}
.lb-arrow:hover { opacity: 1; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-strip { display: flex; gap: 6px; padding: 10px 18px 14px; overflow-x: auto; }
.lb-strip button {
    flex: 0 0 96px; aspect-ratio: 3 / 2; overflow: hidden; padding: 0; border: 0; border-radius: var(--radius); background: none;
    opacity: 0.55; cursor: pointer;
}
.lb-strip button.current { opacity: 1; outline: 2px solid #5fd3a6; }
.lb-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) {
    .lb-stage { padding: 0 8px; }
    .lb-arrow { display: none; }
}

/* Compare */
.compare-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 16px; }
.compare-add label { flex-basis: 100%; color: var(--muted); }
.compare-add select, .compare-add button {
    font: inherit; font-size: 0.8rem; padding: 3px 7px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text); max-width: 100%;
}
.compare-add button { background: var(--accent); border-color: var(--accent); color: #fff; cursor: pointer; }
.compare-toggle { margin: 0 0 8px; }
table.compare th, table.compare td { white-space: normal; vertical-align: top; min-width: 9rem; }
table.compare thead th { text-transform: none; font-size: 0.82rem; color: var(--text); }
table.compare tbody th[scope="row"], table.compare thead td {
    position: sticky; left: 0; background: var(--surface); color: var(--muted); font-weight: 400; z-index: 1;
}
table.compare tr.section th {
    background: var(--panel-head); color: var(--text); font-weight: 600; position: static;
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
}
table.compare tr.differs td { background: var(--warn-soft); }
table.compare td.state-unknown, table.compare td.state-not_applicable { color: var(--muted); font-style: italic; }
table.compare .badge { margin-left: 4px; }

/* Buttons */
.button { display: inline-block; background: var(--accent); color: #fff; padding: 4px 12px; border-radius: var(--radius); font-weight: 600; font-size: 0.8rem; border: 0; }
.button:hover { text-decoration: none; filter: brightness(1.08); }
.link-button { background: none; border: 0; padding: 4px 0; color: var(--accent); cursor: pointer; font: inherit; }

/* Explorer */
.to-results { display: none; }
.explorer { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.explorer-filters {
    display: flex; flex-direction: column; gap: 8px; font-size: 0.78rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px;
    position: sticky; top: calc(var(--header-h) + 8px); max-height: calc(100vh - var(--header-h) - 16px); overflow: auto;
}
.explorer-filters input, .explorer-filters select {
    font: inherit; font-size: 0.8rem; padding: 3px 7px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text); width: 100%;
}
.explorer-filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.explorer-filters legend, .filter-label {
    font-weight: 600; margin-bottom: 4px; padding: 0;
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
}
.choice-filter label { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.choice-filter input { width: auto; }
.range-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.range-filter legend { grid-column: 1 / -1; }
.more-filters > summary, .filter-group > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.filter-group { margin: 8px 0 0 8px; display: flex; flex-direction: column; gap: 10px; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 0.78rem; }
.columns-chooser { position: relative; }
.columns-chooser > summary { cursor: pointer; color: var(--accent); }
.columns-list { position: absolute; z-index: 5; top: 1.8rem; left: 0; width: 300px; max-height: 60vh; overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.15); }
.columns-list label { display: flex; gap: 6px; padding: 1px 0; font-size: 0.9rem; }
.columns-group { margin: 8px 0 2px; font-weight: 600; font-size: 0.85rem; color: var(--muted); }
.explorer-table thead th { padding-left: 4px; padding-right: 4px; }
.explorer-table button.sort { background: none; border: 0; padding: 4px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: inherit; }
.explorer-table button.sort.active { color: var(--accent); }
.explorer-table tbody th { white-space: normal; min-width: 12rem; }

@media (max-width: 860px) {
    .explorer { grid-template-columns: minmax(0, 1fr); }
    .explorer-filters { position: static; max-height: none; }
    .to-results { display: inline-block; margin-bottom: 12px; font-weight: 600; }
}

@media (max-width: 600px) {
    body { font-size: 13.5px; }
    .container { padding: 0 16px; }
    .site-header { position: static; }
    .header-nav { gap: 8px; }
    table.data thead th { top: 0; }
    dl.facts { grid-template-columns: minmax(0, 1fr) auto; }
    dl.facts dd { text-align: right; }
}

@media print {
    .site-header, .site-footer, .media-thumbs, .lightbox { display: none; }
    .spec-category { border-color: #999; }
}

/* Blazor framework UI */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Report an error */
.report-form { display: grid; gap: 6px; max-width: 640px; margin: 16px 0; }
.report-form label { margin-top: 10px; font-weight: 500; }
.report-form input, .report-form select, .report-form textarea {
    font: inherit; font-size: 0.8rem; padding: 3px 7px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: inherit;
}
.report-form button {
    justify-self: start; margin-top: 16px; padding: 3px 7px; font: inherit; font-size: 0.8rem; font-weight: 600; border: 0;
    border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer;
}
.report-form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); font-size: 0.82rem; }
.notice.error { border-color: var(--danger); background: var(--danger-soft); }