/*
    The public site, styled after the legacy repository (Docs/plan/public-search-ui-parity.md):
    HPDC cyan, Open Sans where installed, grey panels, refiners on the left.
    Mobile first; the two columns appear from 48rem.

    Themes (UiTheme.cs) are attributes on <html>, and every colour below is a token they set:
    - data-theme="hpdc" (default) or "classic": the brand theme, from configuration. Only the
      header differs; the classic one is the white header this app shipped with.
    - data-scheme="light", "dark" or "auto": the colour scheme. Always light for the public; staff
      choose in the staff area, and "auto" follows the device.
*/

:root {
    --accent: #00b5e0;
    --accent-dark: #007591; /* 4.7:1 on --panel, 5.3:1 on white (WCAG AA for body text) */
    --accent-hover: #005f78;
    --on-accent: #ffffff; /* text on an --accent-dark fill */
    --link: var(--accent-dark);
    --text: #333333;
    --muted: #5f5f5f;
    --border: #ababab;
    --panel: #f1f1f1;
    --panel-alt: #f2f2f2;
    --bg: #ffffff;
    --expired: #9b1c1c;
    --notice: #7a4f00;
    --mark: #eefafd;
    --pdf: #c0392b;
    /* DataFetch cell origins (UC-MEM-40) and the sheet's key column. */
    --tint-filled: #e3f6fb;
    --tint-overwritten: #fff1d6;
    --tint-unmatched: #fbe4e4;
    /* DataFetch's traffic light: matched or filled, to review or overwritten, no match. */
    --good: #1d7a3a;
    --warn: #b04a00;
    --bad: #b42318;
    --tint-good: #e4f5e9;
    /* The hpdc header's bar and wordmark; the theme block below sets the production values. */
    --bar: #00b5e0;
    --on-bar: #ffffff;
    --wordmark: #00b5e0;
    --promo: var(--panel);
    --promo-button: var(--accent-dark);
    --search-focus: var(--accent);
    --font: "Open Sans", Arial, sans-serif;
    --font-size: 15px;
    --content-width: 73rem;
    /* The smallest thing a pointer has to hit: WCAG 2.2 AA's 24 px, and on a touch screen the
       alt plan's 44 px mobile budget. Links inside a sentence are exempt, as WCAG exempts them. */
    --target: 24px;
}

@media (pointer: coarse) {
    :root {
        --target: 44px;
    }
}

/*
 * The hpdc theme's own values, measured from the production repository (Results.aspx, 2026-10-09):
 * #444 text, #666 secondary, #00b5e0 bar and wordmark, #f9f9f9 promo, 1080 px of content. The type
 * is modernised to each platform's UI font (Segoe UI Variable, San Francisco, Roboto): nothing to
 * download, so no layout shift and nothing against the page budgets (tests/ui-budget).
 *
 * Contrast: white on the production cyan is 2.4:1, below WCAG AA for the bar's 15 px links and the
 * promo button. Matched on purpose, at the product owner's request (2026-10-09). The accessible
 * alternative is --bar: #0081a2 (4.5:1).
 *
 * Before the dark blocks below, which win over it at equal specificity by coming later.
 */
:root[data-theme="hpdc"] {
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size: 14px;
    --text: #444444;
    --muted: #666666;
    --bar: #00b5e0;
    --wordmark: #00b5e0;
    --promo: #f9f9f9;
    --promo-button: #41b5de;
    --search-focus: #2a8dd4;
    --content-width: 1080px;
}

/*
 * The dark scheme, for staff who chose it or whose device prefers it. Twice, because a media query
 * cannot share a rule with an attribute selector: keep the two blocks identical.
 */
:root[data-scheme="dark"] {
    color-scheme: dark;
    --accent-dark: #00799a; /* a fill under white text, 5.0:1 */
    --accent-hover: #008db3;
    --link: #5fd0ee;
    --text: #e2e6e9;
    --muted: #a5afb7;
    --border: #4b545c;
    --panel: #1e2429;
    --panel-alt: #22292f;
    --bg: #14181b;
    --expired: #ff9a9a;
    --notice: #f2c063;
    --mark: #0d3a46;
    --pdf: #ff7b6b;
    --tint-filled: #103a45;
    --tint-overwritten: #463712;
    --tint-unmatched: #4a2222;
    --good: #5fd38a;
    --warn: #ffa55c;
    --bad: #ff8a80;
    --tint-good: #133a22;
    --bar: #006a84;
    --wordmark: #5fd0ee;
    --promo: #1e2429;
    --search-focus: #5fd0ee;
}

@media (prefers-color-scheme: dark) {
    :root[data-scheme="auto"] {
        color-scheme: dark;
        --accent-dark: #00799a;
        --accent-hover: #008db3;
        --link: #5fd0ee;
        --text: #e2e6e9;
        --muted: #a5afb7;
        --border: #4b545c;
        --panel: #1e2429;
        --panel-alt: #22292f;
        --bg: #14181b;
        --expired: #ff9a9a;
        --notice: #f2c063;
        --mark: #0d3a46;
        --pdf: #ff7b6b;
        --tint-filled: #103a45;
        --tint-overwritten: #463712;
        --tint-unmatched: #4a2222;
        --good: #5fd38a;
        --warn: #ffa55c;
        --bad: #ff8a80;
        --tint-good: #133a22;
        --bar: #006a84;
        --wordmark: #5fd0ee;
        --promo: #1e2429;
        --search-focus: #5fd0ee;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: var(--font-size)/1.5 var(--font);
}

a {
    color: var(--link);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -999px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    background: var(--bg);
    padding: 0.75rem 1rem;
    z-index: 10;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Chrome ---- */

/* The classic header (_HeaderClassic.cshtml). */
.site-header {
    border-bottom: 3px solid var(--accent);
    background: var(--bg);
}

.site-header-inner,
.wrap,
main,
.site-footer {
    max-width: calc(var(--content-width) + 2rem);
    margin: 0 auto;
    padding: 0 1rem;
}

.site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.brand {
    display: flex;
    align-items: center;
}

/*
 * 183 x 132: three times its 61 x 44 display, for high-density phones. The attributes reserve the
 * box; 44px on every screen keeps the home link a full tap target (tests/ui-budget).
 */
.brand img {
    display: block;
    height: 44px;
    width: auto;
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}

.site-header nav a {
    color: var(--text);
    text-decoration: none;
}

.site-header nav a:hover {
    color: var(--link);
    text-decoration: underline;
}

/*
 * The hpdc header (_HeaderHpdc.cshtml), measured from the production repository: a 38 px cyan bar
 * of 15 px semibold white links, then a white band with the logo, the wordmark and Withdrawn HPDs,
 * lifted off the page by a soft shadow.
 */
.hpdc-header {
    position: relative;
    z-index: 2; /* the band's shadow falls on the page, not under it */
    border-bottom: 0;
}

.topbar {
    background: var(--bar);
    color: var(--on-bar);
}

.topbar-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 38px;
}

.hpdc-header .topbar nav {
    gap: 0 1.25rem;
}

.hpdc-header .topbar a,
.hpdc-header .topbar .link-button,
.nav-menu summary {
    color: var(--on-bar);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.hpdc-header .topbar a:hover,
.hpdc-header .topbar .link-button:hover {
    color: var(--on-bar);
    text-decoration: underline;
}

.hpdc-header .topbar a:focus-visible,
.hpdc-header .topbar button:focus-visible,
.nav-menu summary:focus-visible {
    outline-color: var(--on-bar);
}

.hpdc-header .topbar .signed-in-as {
    color: var(--on-bar);
    font-size: 15px;
    font-weight: 400;
}

.brandbar {
    background: var(--bg);
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}

.brandbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    min-height: 55px;
}

.hpdc-header .brand {
    gap: 0.3rem;
    text-decoration: none;
}

/* 46 x 33 as production shows it; the markup's 61 x 44 still reserves the shape (no layout shift). */
.hpdc-header .brand img {
    height: 33px;
}

.wordmark {
    color: var(--wordmark);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;
}

.hpdc-header .brandbar nav a {
    color: var(--muted);
    font-weight: 600;
    font-size: 14px;
}

/* The phone menu: one <summary> in the bar, its links dropped down under the header's top. */
.nav-menu {
    display: none;
}

.nav-menu summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--target);
    padding: 0 0.25rem;
}

.nav-menu summary::-webkit-details-marker {
    display: none;
}

/* Three bars, drawn rather than fetched; a cross while open. */
.nav-menu summary::before {
    content: "";
    width: 1.1rem;
    height: 0.8rem;
    border-block: 2px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.nav-menu[open] summary::before {
    border: 0;
    height: 1.1rem;
    background:
        linear-gradient(45deg, transparent 44%, currentColor 44% 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, currentColor 44% 56%, transparent 56%);
}

.nav-menu nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0 1rem 0.5rem;
    background: var(--bar);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.nav-menu nav > a,
.nav-menu .signout {
    min-height: var(--target);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.nav-menu .signout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media (max-width: 47.99rem) {
    .hpdc-header .nav-wide {
        display: none;
    }

    .nav-menu {
        display: block;
    }

    /* The open menu hangs from the bar, over the page rather than pushing it down. */
    .topbar-inner {
        min-height: 0;
    }

    .topbar {
        position: relative;
    }

    .brandbar-inner {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }
}

.site-footer {
    margin-top: 3rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}

/* ---- Layout ---- */

.title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

h1 {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 1.25rem 0 0.75rem;
}

h2 {
    font-size: 1.15rem;
    font-weight: 600;
}

.two-column {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 48rem) {
    .two-column {
        grid-template-columns: 16rem minmax(0, 1fr);
    }

    .two-column-detail {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }

    /* The search page's refiners follow its results in the document (Index.cshtml). */
    .two-column-search .side-column {
        grid-column: 1;
        grid-row: 1;
    }

    .two-column-search .main-column {
        grid-column: 2;
    }

    .jump-to-filters {
        display: none;
    }
}

/* ---- Promo band ---- */

.promo {
    background: var(--panel);
    border-left: 4px solid var(--accent);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.promo h2 {
    margin: 0 0 0.5rem;
}

.promo-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}

.button,
button {
    display: inline-block;
    background: var(--accent-dark);
    color: var(--on-accent);
    border: 0;
    border-radius: 3px;
    padding: 0.45rem 0.9rem;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.button:hover,
button:hover {
    background: var(--accent-hover);
}

/* ---- Search box and results ---- */

.search-box label,
.withdrawn label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

/* A restored entry stays on the list (ADR 0010), marked so nobody mistakes it for one in force. */
.withdrawn .restored {
    display: block;
    color: var(--muted);
    font-style: italic;
}

.search-box-row {
    display: flex;
    gap: 0.5rem;
}

.search-box-row input[type=search] {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font: inherit;
}

.result-count {
    color: var(--muted);
    margin: 1rem 0 0.5rem;
}

.fuzzy-note {
    display: block;
}

.jump-to-filters {
    margin: 0 0 0.5rem;
}

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

.result {
    border-bottom: 1px solid var(--panel);
    padding: 0.6rem 0;
}

.quick-panel summary {
    cursor: pointer;
    list-style: none;
    font-size: 1.05rem;
    color: var(--link);
}

.quick-panel summary::-webkit-details-marker {
    display: none;
}

.quick-panel[open] summary .result-title,
.quick-panel summary:hover .result-title {
    text-decoration: underline;
}

.pdf-icon {
    display: inline-block;
    width: 0.85em;
    height: 1.05em;
    margin-right: 0.35rem;
    vertical-align: -0.1em;
    border: 2px solid var(--pdf);
    border-radius: 2px;
    background: linear-gradient(135deg, transparent 70%, var(--pdf) 70%);
}

.label {
    font-weight: 600;
    margin-right: 0.25rem;
}

.label-expired {
    color: var(--expired);
}

.label-notice {
    color: var(--notice);
}

.result-meta {
    margin: 0.15rem 0 0 1.2rem;
    color: var(--muted);
    font-size: 0.9rem;
}

/*
 * Search terms in a result, as the legacy page marked them: bold, on a cyan tint pale enough to
 * keep the title's --accent-dark at 4.6:1 (axe), with a cyan rule under it to carry the colour.
 */
.result mark {
    background: var(--mark);
    box-shadow: inset 0 -2px 0 var(--accent);
    color: inherit;
    font-weight: 700;
    padding: 0 0.05em;
    border-radius: 2px;
}

.panel {
    background: var(--panel-alt);
    border: 1px solid var(--border);
    padding: 0.75rem 1rem;
    margin: 0.5rem 0 0.25rem;
}

.cover {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    margin: 0 0 0.75rem;
}

.panel p {
    margin: 0 0 0.5rem;
}

/*
 * ---- Quick panel (UC-PUB-14) ----
 * The search-results block's PanelLayout chooses where a result's panel opens:
 * - beside: level with the clicked title, in CSS alone. From 64rem the list text stops short of
 *   the panel, so it covers nothing; between 48rem and 64rem it floats over the list's right side.
 * - docked: quick-panel.js moves the open panel into a column that stays in view (.is-docked,
 *   from 64rem). Without the script, or narrower, it opens under its title.
 * On a phone both open under the title, as before.
 */
.results {
    --quick-panel-width: 17rem;
}

.results .quick-panel[open] > summary {
    background: var(--mark);
}

.panel-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.panel .panel-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.panel-close {
    flex: none;
    min-width: var(--target);
    min-height: var(--target);
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.panel-close:hover {
    background: var(--panel);
    color: var(--text);
}

.results .cover {
    width: 100%;
    max-width: 350px;
}

/* No cover yet: the cover's own shape, so the panel does not move once one is drawn. */
.cover-missing {
    display: grid;
    place-items: center;
    aspect-ratio: 350 / 495;
    background: var(--panel);
    color: var(--muted);
    font-size: 0.9rem;
}

@media (min-width: 48rem) {
    .quick-panel-beside .result {
        position: relative;
    }

    .quick-panel-beside .quick-panel[open] > .panel {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: var(--quick-panel-width);
        margin: 0;
        background: var(--bg);
        box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
        font-size: 0.9rem;
    }

    /* The pointer at the title it belongs to. */
    .quick-panel-beside .quick-panel[open] > .panel::before {
        content: "";
        position: absolute;
        top: 0.8rem;
        left: -8px;
        width: 14px;
        height: 14px;
        background: var(--bg);
        border-left: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        transform: rotate(45deg);
    }
}

@media (min-width: 64rem) {
    .quick-panel-beside .result {
        padding-right: calc(var(--quick-panel-width) + 1.25rem);
    }

    .quick-panel-docked.is-docked .results-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--quick-panel-width);
        gap: 1.25rem;
        align-items: start;
    }

    .quick-panel-dock {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow: auto;
    }

    .quick-panel-dock .panel {
        margin: 0;
        background: var(--bg);
        font-size: 0.9rem;
    }
}

.dock-empty {
    margin: 0;
    padding: 2rem 1rem;
    border: 1px dashed var(--border);
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

.paging {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 1.25rem 0;
}

/* ---- Refiners ---- */

.refiners h2 {
    margin-top: 0;
}

.refiner {
    border-top: 1px solid var(--panel);
    padding: 0.5rem 0;
}

.refiner h3 {
    font-size: 0.95rem;
    margin: 0 0 0.25rem;
}

.refiner ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 18rem;
    overflow-y: auto;
}

.refiner li a {
    display: block;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}

.refiner li a:hover {
    text-decoration: underline;
}

.refiner li a.selected {
    font-weight: 700;
    color: var(--link);
}

.refiner li a.selected::before {
    content: "✓ ";
}

.count {
    color: var(--muted);
}

.refiner summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--link);
}

/* ---- Detail, download, withdrawal ---- */

.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1rem;
}

.facts dt {
    font-weight: 600;
}

.facts dd {
    margin: 0;
}

.note {
    color: var(--muted);
}

.hpd-document {
    background: var(--panel);
    padding: 0.75rem 1rem;
}

.download-form label {
    display: block;
    margin: 0.4rem 0 0.2rem;
}

.download-form input[type=email] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font: inherit;
}

.download-form .terms {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
}

.download-form button {
    margin-top: 0.5rem;
}

.download-forget {
    margin-top: 0.4rem;
}

.errors ul {
    color: var(--expired);
    padding-left: 1.2rem;
}

.withdrawn-notice {
    border-left: 4px solid var(--expired);
    padding: 0.5rem 1rem;
    background: var(--panel);
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 1rem;
    font-size: 0.9rem;
}

th,
td {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--panel);
    vertical-align: top;
}

@media (max-width: 40rem) {
    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block;
    }

    thead {
        position: absolute;
        left: -999px;
    }

    tr {
        border-bottom: 1px solid var(--border);
        padding: 0.4rem 0;
    }

    td {
        border: 0;
        padding: 0.1rem 0;
        /* Legacy file names (256-20131126094131.pdf) have no break points of their own. */
        overflow-wrap: anywhere;
    }

    /* The header row is hidden here, so each stacked cell names itself. */
    td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
    }
}

/* ---- Account ---- */

.signout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.signed-in-as {
    color: var(--muted);
}

/* A sign-out is a POST, so it is a button; it reads as the header's other links. */
.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    min-height: var(--target);
}

.providers {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.75rem;
    max-width: 24rem;
}

/* ---- Target sizes ---- */

.brand,
.site-header nav a,
.site-footer a,
.paging a,
.jump-to-filters a,
.title-row > a,
.refiners > p > a,
.hpd-document p > a,
.quick-panel .panel > p > a,
.withdrawn td a {
    display: inline-flex;
    align-items: center;
    min-width: var(--target);
    min-height: var(--target);
}

.brand {
    display: flex;
}

/* Text that may wrap is padded rather than given a minimum height, so it stays centred. */
.refiner li a,
.refiner summary,
.quick-panel summary {
    padding-block: 0.2rem;
    padding-block: max(0.1rem, calc((var(--target) - 1lh) / 2));
}

button,
.button,
input[type=search],
input[type=email] {
    min-height: var(--target);
}

.download-form .terms {
    align-items: center;
    min-height: var(--target);
}

@media (pointer: coarse) {
    /* Room for eight 44 px values before a list scrolls. */
    .refiner ul {
        max-height: 24rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Member experiences (ADR 0024): the organisation page's tiles. */
.organization h2 {
    margin-top: 0;
}

.members {
    margin: 0;
    padding-left: 1.25rem;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0.5rem 0 1.5rem;
    padding: 0;
}

.tile a {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: var(--target);
    padding: 0.75rem;
    border: 1px solid var(--border);
    background: var(--panel-alt);
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

.tile a:hover,
.tile a:focus-visible {
    border-color: var(--link);
}

.tile img {
    width: 100%;
    height: 6rem;
    object-fit: contain;
}

.tile small {
    color: var(--muted);
    font-weight: 400;
}

/* A page header with a logo beside it (DataFetch). The dashboard page's own look is
   css/dashboard.css, loaded by that page only. */
.dashboard-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.dashboard-logo {
    max-width: 8rem;
    max-height: 5rem;
    object-fit: contain;
}

/* ---- DataFetch (/datafetch/{profile}, plan/datafetch.md) ---- */

/*
 * Soft tints are mixed from the theme's colours, so the profile's accent, dark mode and the hpdc
 * theme all follow without their own values.
 */
.datafetch {
    --df-accent: var(--accent-dark);
    --df-soft: color-mix(in srgb, var(--df-accent) 10%, var(--bg));
    --df-good-soft: color-mix(in srgb, var(--good) 11%, var(--bg));
    --df-warn-soft: color-mix(in srgb, var(--warn) 13%, var(--bg));
    --df-bad-soft: color-mix(in srgb, var(--bad) 10%, var(--bg));
    --df-line: color-mix(in srgb, var(--border) 55%, var(--bg));
    --df-radius: 8px;
    --df-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 20px -14px rgb(0 60 75 / 40%);
    max-width: 80rem;
    margin: 0 auto;
    padding: 1rem;
}

.datafetch-intro {
    color: var(--muted);
}

.df-mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.df-muted {
    color: var(--muted);
}

.df-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* The rail: a numbered pill per step, ✓ when done, a spinner while it works, and what it produced. */
.df-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.df-steps button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--target);
    padding: 0.4rem 0.9rem 0.4rem 0.45rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--df-line);
    border-radius: 999px;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.df-steps button:hover:not(:disabled) {
    background: var(--df-soft);
    color: var(--text);
    border-color: var(--df-accent);
}

.df-steps button:disabled {
    cursor: default;
    opacity: 0.6;
}

.df-steps .current button {
    border-color: var(--df-accent);
    box-shadow: 0 0 0 2px var(--df-soft);
    font-weight: 600;
}

.df-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--panel);
    color: var(--muted);
    font-weight: 700;
    font-size: 0.85rem;
}

.df-steps .current .df-step-number,
.df-steps .done .df-step-number {
    background: var(--df-accent);
    color: var(--on-accent);
}

.df-step-text small {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted);
}

/* Progress: what is running, how far, for how long. */
.df-progress {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    background: var(--df-soft);
}

.df-progress-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.df-bar {
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--df-accent) 20%, var(--bg));
    overflow: hidden;
}

.df-bar i {
    display: block;
    height: 100%;
    background: var(--df-accent);
    transition: width 0.25s;
}

.df-bar.indeterminate i {
    width: 30%;
    animation: df-slide 1.1s ease-in-out infinite;
}

@keyframes df-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(340%); }
}

.df-spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.1em;
    animation: df-spin 0.7s linear infinite;
}

@keyframes df-spin {
    to { transform: rotate(360deg); }
}

/* The flow: the five steps stacked as cards, numbered 01 to 05; only the current one is open. */
.df-flow {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.df-section {
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    background: var(--bg);
    box-shadow: var(--df-shadow);
    scroll-margin-top: 1rem;
}

.df-section.open {
    border-color: color-mix(in srgb, var(--df-accent) 45%, var(--bg));
}

.df-section-head {
    margin: 0;
    font-size: 1.05rem;
}

.datafetch .df-section-head button {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    min-height: var(--target);
    padding: 0.9rem 1.15rem;
    background: none;
    border: 0;
    border-radius: var(--df-radius);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: left;
}

.datafetch .df-section-head button:hover:not(:disabled) {
    background: var(--df-soft);
}

.datafetch .df-section-head button:disabled {
    opacity: 1;
    cursor: default;
}

.df-section.open .df-section-head button {
    border-bottom: 1px solid var(--df-line);
    border-radius: var(--df-radius) var(--df-radius) 0 0;
}

.df-section.locked .df-section-title {
    color: var(--muted);
}

.df-section-num {
    color: var(--muted);
    font-size: 0.8rem;
}

.df-section.done .df-section-num {
    color: var(--good);
}

.df-section-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--muted);
}

.df-panel {
    padding: 1.25rem;
}

.df-card {
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
}

.df-drop {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    padding: 2rem 1rem;
    border: 2px dashed var(--border);
    border-radius: var(--df-radius);
    background: var(--panel);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.df-drop:hover,
.df-drop.dragging {
    border-color: var(--df-accent);
    background: var(--df-soft);
}

.df-drop.loaded {
    padding: 1rem;
}

/* The label is the control; the native button stays for keyboards and screen readers, unseen. */
.df-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.df-drop {
    position: relative;
}

.df-drop:focus-within {
    outline: 2px solid var(--df-accent);
    outline-offset: 2px;
}

.df-drop-icon {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--df-accent);
}

.df-hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
}

/* Buttons: primary is the accent fill; secondary is outlined; confirm is the orange pill. */
.datafetch button {
    border-radius: 6px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.df-actions .primary,
.df-panel .primary {
    background: var(--df-accent);
    border: 1px solid var(--df-accent);
    color: var(--on-accent);
    font-weight: 600;
}

.df-panel .primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--df-accent) 82%, black);
}

.datafetch button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.df-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.df-secondary:hover:not(:disabled) {
    background: var(--df-soft);
    color: var(--text);
    border-color: var(--df-accent);
}

.df-confirm {
    background: var(--df-warn-soft);
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--bg));
    font-weight: 600;
}

.df-confirm:hover:not(:disabled) {
    background: var(--df-good-soft);
    color: var(--good);
    border-color: var(--good);
}

.df-small {
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
}

.df-close {
    background: none;
    color: var(--muted);
    border: 0;
    padding: 0 0.4rem;
    font-size: 1.25rem;
    line-height: 1;
}

.df-close:hover {
    background: var(--panel);
    color: var(--text);
}

.df-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
    margin: 1rem 0;
}

.df-row label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.datafetch select,
.datafetch input[type="number"],
.datafetch input[type="search"] {
    min-height: var(--target);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    max-width: 100%;
}

.datafetch select:hover,
.datafetch input[type="number"]:hover,
.datafetch input[type="search"]:hover {
    border-color: var(--df-accent);
}

.df-row small,
.df-table small,
.df-match small {
    display: block;
    color: var(--muted);
}

.df-check {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    cursor: pointer;
}

.df-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.df-actions-start {
    justify-content: flex-start;
}

.df-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 0.5rem;
}

.df-error {
    color: var(--bad);
    font-weight: 600;
    padding: 0.6rem 0.9rem;
    border-radius: var(--df-radius);
    background: var(--df-bad-soft);
}

.df-notice {
    color: var(--warn);
}

.df-done {
    color: var(--good);
    font-weight: 600;
}

.df-details {
    margin: 0.75rem 0;
}

.df-details summary {
    cursor: pointer;
    color: var(--muted);
}

/* Chips: small rounded counts and states. */
.df-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
}

.df-chip {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--df-soft);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.df-chip-muted {
    background: var(--panel);
    color: var(--muted);
}

.df-chip-ok {
    background: var(--df-good-soft);
    color: var(--good);
}

.df-chip-warn {
    background: var(--df-warn-soft);
    color: var(--warn);
}

.df-chip-bad {
    background: var(--df-bad-soft);
    color: var(--bad);
}

/* Stat tiles; in step 2 they are the tabs. */
.df-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.df-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--df-line);
    border-left: 4px solid var(--border);
    border-radius: var(--df-radius);
    background: var(--bg);
    color: var(--text);
    text-align: left;
}

button.df-stat:hover {
    background: var(--df-soft);
    color: var(--text);
}

.df-stat[aria-selected="true"] {
    background: var(--df-soft);
    border-color: var(--df-accent);
    box-shadow: 0 0 0 1px var(--df-accent);
}

.df-stat-matched { border-left-color: var(--good); }
.df-stat-review { border-left-color: var(--warn); }
.df-stat-none { border-left-color: var(--bad); }
.df-stat-matched .df-stat-value { color: var(--good); }
.df-stat-review .df-stat-value { color: var(--warn); }
.df-stat-none .df-stat-value { color: var(--bad); }

.df-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.df-stat-label {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--muted);
}

.df-swatch {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    border: 1px solid var(--df-line);
}

/* The confidence sliders, with the counts they give as they move. */
.df-confidence {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
    padding: 0.85rem 1rem;
    border-radius: var(--df-radius);
    background: var(--panel);
}

.df-confidence > .df-label {
    flex-basis: 100%;
}

.df-confidence label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.9rem;
}

.df-confidence input[type="range"] {
    width: 11rem;
    accent-color: var(--df-accent);
}

.df-confidence-note {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.9rem;
}

.df-confidence-note .df-notice {
    display: block;
}

/* Step 2's rows: tinted by class, the candidate picked in place. */
.df-matches {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    overflow: hidden;
}

.df-match {
    display: grid;
    grid-template-columns: 2.5rem minmax(10rem, 1fr) minmax(14rem, 1.6fr) 3.5rem auto;
    gap: 0.4rem 0.9rem;
    align-items: center;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--df-line);
    border-left: 4px solid transparent;
    transition: background 0.15s;
}

.df-match:last-child {
    border-bottom: 0;
}

.df-match:hover {
    background: var(--panel);
}

.df-match.df-review { background: var(--df-warn-soft); border-left-color: var(--warn); }
.df-match.df-none { background: var(--df-bad-soft); border-left-color: var(--bad); }
.df-match.df-matched { border-left-color: var(--good); }
.df-match.df-settled { background: var(--bg); }
.df-match.df-open { background: var(--df-soft); }

.df-match-row {
    color: var(--muted);
    text-align: right;
}

.df-match-pick select {
    width: 100%;
}

.df-picked {
    font-weight: 600;
}

.df-match-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    white-space: nowrap;
}

.df-score {
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.df-score-matched { color: var(--good); }
.df-score-review { color: var(--warn); }
.df-score-none { color: var(--bad); }

@media (max-width: 52rem) {
    .df-match {
        grid-template-columns: 2rem 1fr auto;
    }

    .df-match-pick {
        grid-column: 2 / -1;
    }

    .df-match-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}

/* Resolving a row: a search card under it. */
.df-resolve {
    padding: 0.85rem 1rem 1rem 3.4rem;
    border-bottom: 1px solid var(--df-line);
    background: var(--df-soft);
}

.df-resolve-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.df-resolve-search input[type="search"] {
    flex: 1 1 16rem;
}

.df-choices {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.4rem;
}

.df-choice {
    display: block;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--df-line);
    background: var(--bg);
    color: var(--text);
    text-align: left;
}

.df-choice:hover {
    border-color: var(--df-accent);
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--df-accent);
}

.df-choice small {
    display: block;
    color: var(--muted);
}

/* Step 3's field cards. */
.df-maps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0.75rem;
}

.df-map {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    background: var(--bg);
    transition: border-color 0.15s, background 0.15s;
}

.df-map.on {
    border-color: color-mix(in srgb, var(--df-accent) 55%, var(--bg));
    background: var(--df-soft);
}

.df-map-head {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.df-map-head strong {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-map-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.df-map-col {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 4px;
    background: var(--panel);
    font-weight: 700;
    font-size: 0.85rem;
}

.df-map-sample {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-map select {
    width: 100%;
}

/* Tables: step 1's sheet and step 4's preview. */
.df-table {
    width: 100%;
    border-collapse: collapse;
}

.df-table th,
.df-table td {
    border-bottom: 1px solid var(--df-line);
    padding: 0.35rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.df-table thead th {
    background: var(--panel);
}

.df-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.df-grid-scroll {
    overflow-x: auto;
}

.df-preview-scroll {
    max-height: 32rem;
    overflow: auto;
}

.df-preview td,
.df-preview th {
    white-space: nowrap;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.df-preview thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.df-letter {
    background: none;
    color: var(--df-accent);
    border: 0;
    padding: 0 0.3rem;
    font-weight: 700;
}

.df-letter:hover {
    background: var(--df-soft);
    color: var(--df-accent);
}

.df-key-tag {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--df-accent);
    color: var(--on-accent) !important;
    font-size: 0.7rem;
}

/* Each cell's origin (UC-MEM-40), not by colour alone: the cell's title names it too. */
.df-o-filled { background: var(--tint-good); box-shadow: inset 2px 0 0 var(--good); }
.df-o-overwritten { background: var(--tint-overwritten); box-shadow: inset 2px 0 0 var(--warn); }
.df-o-kept { background: var(--panel); color: var(--muted); }
.df-o-nodata { color: var(--muted); font-style: italic; }
.df-o-unmatched { background: var(--tint-unmatched); box-shadow: inset 2px 0 0 var(--bad); }

.df-swatch.df-o-nodata {
    background: var(--bg);
}

.df-empty {
    color: var(--muted);
}

/* Step 1's view of the sheet: the header row stands out, rows above it are faded. */
.df-sheet td,
.df-sheet th {
    white-space: nowrap;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9em;
}

.df-sheet .df-header-row td {
    font-weight: 700;
    background: var(--panel);
}

.df-sheet .df-before td {
    color: var(--muted);
}

.df-sheet .df-key {
    background: var(--tint-filled);
}

@media (prefers-reduced-motion: reduce) {
    .df-spinner,
    .df-bar.indeterminate i {
        animation: none;
    }

    .datafetch *,
    .datafetch button {
        transition: none;
    }
}

/* ---- The hpdc theme's page, after the production repository's Results.aspx ---- */

/*
 * The header already names the site and links Withdrawn HPDs, as production's does; the search
 * page keeps its h1 for screen readers and drops the visible repeat.
 */
[data-theme="hpdc"] .search-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

[data-theme="hpdc"] .search-title > a {
    display: none;
}

[data-theme="hpdc"] main {
    padding-top: 1.1rem;
}

[data-theme="hpdc"] h1 {
    font-size: 1.45rem;
}

/* The promo: a pale panel, a rounded cyan button, no accent rule. */
[data-theme="hpdc"] .promo {
    background: var(--promo);
    border-left: 0;
    padding: 1rem 1.25rem;
}

[data-theme="hpdc"] .promo .button {
    background: var(--promo-button);
    border-radius: 5px;
    padding: 0.65rem 1.4rem;
    font-size: 13px;
    font-weight: 700;
}

[data-theme="hpdc"] .promo .button:hover {
    filter: brightness(0.92);
}

/*
 * The search box: one large field with the magnifier inside it, as production has. The label stays
 * for screen readers; the button keeps "Search" as its name and shows the icon.
 */
[data-theme="hpdc"] .search-box {
    max-width: 47rem;
    margin: 0.5rem 0 1rem;
}

[data-theme="hpdc"] .search-box label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

[data-theme="hpdc"] .search-box-row {
    position: relative;
    gap: 0;
}

[data-theme="hpdc"] .search-box-row input[type=search] {
    min-height: 44px;
    padding: 0.35rem 3rem 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 20px;
    background: var(--bg);
    color: var(--text);
}

[data-theme="hpdc"] .search-box-row input[type=search]:focus {
    border-color: var(--search-focus);
    outline: 1px solid var(--search-focus);
    outline-offset: 0;
}

[data-theme="hpdc"] .search-box-row button {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 44px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 0; /* the name stays "Search"; the icon below is what shows */
}

[data-theme="hpdc"] .search-box-row button:hover {
    background: var(--panel);
}

[data-theme="hpdc"] .search-box-row button::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='14' cy='10' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9 15 3 21' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='14' cy='10' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9 15 3 21' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Filters: production's wider column, grey headings and small grey values, no rules between. */
@media (min-width: 48rem) {
    [data-theme="hpdc"] .two-column {
        grid-template-columns: 18.75rem minmax(0, 1fr);
        gap: 2.5rem;
    }
}

[data-theme="hpdc"] .refiners h2 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

[data-theme="hpdc"] .refiner {
    border-top: 0;
    padding: 0.4rem 0 0.6rem;
}

[data-theme="hpdc"] .refiner h3 {
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

[data-theme="hpdc"] .refiner li a {
    color: var(--muted);
    font-size: 13px;
}

[data-theme="hpdc"] .refiner li a.selected {
    color: var(--link);
}

[data-theme="hpdc"] .refiner summary {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
}

/* Results: dark titles with the PDF icon, terms in bold, no rules between. */
[data-theme="hpdc"] .result {
    border-bottom: 0;
    padding: 0.45rem 0;
}

[data-theme="hpdc"] .quick-panel summary {
    color: var(--text);
    font-size: 15px;
}

[data-theme="hpdc"] .quick-panel summary:hover .result-title,
[data-theme="hpdc"] .quick-panel[open] summary .result-title {
    color: var(--link);
}

[data-theme="hpdc"] .result mark {
    background: none;
    box-shadow: none;
}

[data-theme="hpdc"] .result-meta {
    color: var(--text);
    font-size: 13px;
}

/*
 * The search page's HTML banner (HtmlBannerBlock, UC-ADM-67). Its HTML is staff-written and may not
 * carry a style sheet, so its classes are styled here, scoped to .html-banner: the production
 * repository's banner on a wide screen, wrapping to a column on a phone.
 */
.html-banner {
    margin-bottom: 1.25rem;
}

.html-banner .banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 0.65rem 0.65rem;
    background: var(--promo);
}

.html-banner img {
    max-width: 100%;
    height: auto;
}

.html-banner .banner-logo {
    width: 200px;
}

.html-banner .banner-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    padding: 0.6rem 1.4rem;
    min-width: 12rem;
    border-radius: 5px;
    background: var(--promo-button);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.html-banner .banner-button:hover {
    filter: brightness(0.92);
}

.html-banner .banner-cards {
    display: flex;
    gap: 10px;
}

/* White cards in either scheme: the logos are drawn for white. */
.html-banner .banner-card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 6px 1px rgba(196, 196, 196, 0.5);
}

.html-banner .banner-card img {
    max-width: 80px;
    max-height: 80px;
}

.html-banner .banner-text {
    flex: 1 1 18rem;
    margin: 0;
    font-size: 14px;
}

.html-banner .banner-text a {
    color: var(--link);
    font-weight: 700;
    text-decoration: none;
}

.html-banner .banner-text a:hover {
    text-decoration: underline;
}

@media (max-width: 47.99rem) {
    .html-banner .banner-logo {
        width: 160px;
    }

    .html-banner .banner-button {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }
}