/**
 * COA Suite — the storefront stylesheet (X8).
 *
 * Everything the plugin renders sits inside
 * `<div class="coas coas--layout-{clinical|minimal} coas--palette-{clinical|minimal|theme|custom}">`
 * and is driven by ELEVEN custom properties — ten colours and one length:
 *
 *     --coas-accent  --coas-hero-bg  --coas-hero-text  --coas-surface
 *     --coas-surface-alt  --coas-text  --coas-muted  --coas-border
 *     --coas-radius  --coas-pass  --coas-fail
 *
 * FALLBACK MECHANISM. The `.coas { }` block below and the `.coas--layout-*`
 * modifiers are the only places in this file where those eleven get literal
 * values — a layout owns the structure, so `.coas--layout-minimal` sets its
 * own `--coas-radius`; every component rule uses a bare `var(--coas-*)` with
 * no per-usage fallback, so each value has exactly one owner. The plugin re-declares all eleven on `.coas` in an inline block
 * printed after this file (COAS_Display::inline_css()), which therefore wins
 * by source order.
 *
 * A THEME overrides a token by declaring it on a selector MORE SPECIFIC than
 * `.coas` — `body .coas { --coas-accent: #123456; }` — in any stylesheet, in
 * any order: theme stylesheets print before this one, so source order cannot
 * be the contract. A `:root` declaration does NOT win. The Custom palette in
 * WooCommerce → Settings → COAs does the same thing without any CSS.
 *
 * HIDDEN STATE. The plugin hides things with the `hidden` ATTRIBUTE, never a
 * class. The first rule below is `.coas [hidden]` at (0,2,0) — an attribute
 * selector counts as a class — and the browser's own `[hidden]` rule loses to
 * ANY author `display` on the same element. It carries the file's ONE
 * `!important` (Kris, D4, 2026-09-17): a theme's responsive-table rule such
 * as `.woocommerce-tabs table tr { display: block }` at (0,2,1) would
 * otherwise reveal every size's history rows at once, silently. No component
 * rule ever needs to beat the hidden state, so the cost is nil. Still, no
 * rule in this file may declare `display` on an element the templates can
 * hide: `.coas-card`,
 * `.coas-overview`, `.coas-history__row`, `.coas-badge__variant`,
 * `.coas-notice`, `.coas-tab__title`, or any element-only subject inside
 * `.coas`. Their layout lives on an inner wrapper (`.coas-card__inner`, …).
 * tests/unit/Test_COAS_Assets.php parses this file and asserts it.
 *
 * A THEME OVERRIDES THE TEMPLATES by copying a file out of the plugin's
 * `templates/` directory into `<theme>/coa-suite/` — same relative path — and
 * the plugin says so in the admin when a copy falls behind.
 *
 * Accent usage: `--coas-accent` is only ever used on `--coas-surface` /
 * `--coas-surface-alt`; text on the hero uses `--coas-hero-text`. That is the
 * one pair the contrast guard measures.
 *
 * M1 owns exactly the two rules below. M2 appends the layout modifiers and
 * the components after them and never edits these two.
 */

.coas [hidden] { display: none !important; }

.coas {
    --coas-accent: #6d2777;
    --coas-hero-bg: #1c1025;
    --coas-hero-text: #fefefe;
    --coas-surface: #fefefe;
    --coas-surface-alt: #f2f0f4;
    --coas-text: #1c1025;
    --coas-muted: #6b6470;
    --coas-border: #e8e4ec;
    --coas-radius: 4px;
    --coas-pass: #1f7a4d;
    --coas-fail: #b42318;
}

/* -------------------------------------------------------------------------
 * M2 — layout modifiers and components.
 *
 * LAYOUT MODIFIERS are root-scoped custom-property overrides wherever a knob
 * can express the difference. The `--coas-l-*` namespace is INTERNAL: it is
 * not part of the X8 freeze, components read it, nothing else may.
 *
 * DISPLAY is the one property with a rule attached. `.coas [hidden]` above is
 * (0,2,0) and the browser's own `[hidden]` rule loses to ANY author `display`
 * on the same element, so no rule below declares `display` on anything the
 * templates can hide: `.coas-card`, `.coas-overview`, `.coas-table`,
 * `.coas-history__row`, `.coas-history__empty`, `.coas-badge__variant`,
 * `.coas-notice`, `.coas-tab__title`, `.coas-scroll`, or any element-only
 * subject inside `.coas`. Card layout lives on `.coas-card__inner`.
 *
 * `.coas-scroll` joined that list in M3: the overview's wrapper carries the
 * border and the margin, so the script hides the WRAPPER rather than leaving
 * an empty bordered box behind (pack C1, OC-88). Its `display: block` was the
 * div default anyway, and declaring it would have beaten `[hidden]`.
 * ---------------------------------------------------------------------- */

.coas--layout-clinical {
    --coas-l-hero-fill: var(--coas-hero-bg);
    --coas-l-hero-ink: var(--coas-hero-text);
    --coas-l-eyebrow-case: uppercase;
    --coas-l-ornament-display: inline-block;
    /* A fill and its ink travel together: the tile is a surface-alt panel
       INSIDE the hero, so its text is the surface's ink, not the hero's
       (QA ISSUE-001 — white on near-white without this). */
    --coas-l-kpi-fill: var(--coas-surface-alt);
    --coas-l-kpi-ink: var(--coas-text);
}

.coas--layout-minimal {
    --coas-l-hero-fill: transparent;
    --coas-l-hero-ink: var(--coas-text);
    --coas-l-eyebrow-case: none;
    --coas-l-ornament-display: none;
    --coas-l-kpi-fill: transparent;
    --coas-l-kpi-ink: var(--coas-l-hero-ink);
    --coas-radius: 8px;
}

/* --- the tab ----------------------------------------------------------- */

.coas-tab {
    color: var(--coas-text);
    background: var(--coas-surface);
    /* The theme's own size, not a pixel base of ours (Kris, D3, 2026-09-17). */
    font-size: 1em;
    line-height: 1.5;
}

.coas-tab__title {
    margin: 0 0 1em;
    font-size: 1.35em;
    color: var(--coas-text);
}

.coas-tab a:focus-visible,
.coas-badge a:focus-visible {
    outline: 2px solid var(--coas-accent);
    outline-offset: 2px;
}

/* --- notices ----------------------------------------------------------- */

.coas-notice {
    margin: 1em 0;
    padding: 0.75em 1em;
    border: 1px solid var(--coas-border);
    border-radius: var(--coas-radius);
    background: var(--coas-surface-alt);
    color: var(--coas-muted);
}

/* --- tables ------------------------------------------------------------ */

.coas-scroll {
    overflow-x: auto;
    margin: 0 0 1.25em;
    border: 1px solid var(--coas-border);
    border-radius: var(--coas-radius);
}

.coas-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

.coas-table caption {
    padding: 0.75em 1em;
    text-align: start;
    font-weight: 600;
    color: var(--coas-text);
    background: var(--coas-surface-alt);
}

.coas-table th,
.coas-table td {
    padding: 0.6em 1em;
    text-align: start;
    vertical-align: top;
    border-top: 1px solid var(--coas-border);
    color: var(--coas-text);
}

.coas-table thead th {
    border-top: 0;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--coas-muted);
}

.coas-table tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.coas-overview tbody th {
    color: var(--coas-text);
}

/* --- verdicts ---------------------------------------------------------- */

.coas-verdict {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    font-weight: 600;
    color: var(--coas-muted);
}

.coas-verdict::before {
    content: "\2022";
}

.coas-verdict--pass {
    color: var(--coas-pass);
}

.coas-verdict--pass::before {
    content: "\2713";
}

.coas-verdict--fail {
    color: var(--coas-fail);
}

.coas-verdict--fail::before {
    content: "\2715";
}

.coas-verdict--info::before {
    content: "\2139";
}

.coas-verdict--na::before {
    content: "\2013";
}

/* --- the card ---------------------------------------------------------- */

.coas-card {
    margin: 0 0 1.5em;
}

.coas-card__inner {
    display: grid;
    gap: 1.25em;
    /* minmax(0, 1fr), not 1fr: a bare 1fr track has an `auto` minimum, so
       the hero's KPI grid (three 9em tiles) forced the track wider than the
       card at 375px and this wrapper's overflow: hidden clipped it — found
       at the 0.3.0 smoke on the classic theme (item 9). */
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--coas-border);
    border-radius: var(--coas-radius);
    overflow: hidden;
    background: var(--coas-surface);
}

.coas-card__hero {
    padding: 1.25em 1.25em 1em;
    background: var(--coas-l-hero-fill);
    color: var(--coas-l-hero-ink);
}

.coas-card__hero h3 {
    margin: 0.2em 0 0.4em;
    font-size: 1.15em;
    color: var(--coas-l-hero-ink);
}

.coas-card__hero p {
    margin: 0 0 0.5em;
    color: var(--coas-l-hero-ink);
    opacity: 0.85;
}

.coas-card__hero span {
    margin-inline-end: 0.9em;
    white-space: nowrap;
}

.coas-card__body {
    padding: 0 1.25em 1.25em;
}

.coas-eyebrow {
    margin: 0;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    text-transform: var(--coas-l-eyebrow-case);
    opacity: 0.8;
}

.coas-ornament {
    display: var(--coas-l-ornament-display);
    margin-inline-end: 0.5em;
}

.coas-ornament::before {
    content: "\25C6";
}

.coas-kpi {
    display: grid;
    gap: 0.75em;
    /* min(9em, 100%): a tile's minimum can never exceed the row, so the grid
       fits any width and wraps one tile per row when it must. */
    grid-template-columns: repeat(auto-fit, minmax(min(9em, 100%), 1fr));
    margin: 0.9em 0 0;
    padding: 0;
}

.coas-kpi div {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.6em 0.75em;
    border-radius: var(--coas-radius);
    background: var(--coas-l-kpi-fill);
    color: var(--coas-l-kpi-ink);
}

.coas-kpi dt {
    margin: 0;
    font-size: 0.75em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

.coas-kpi dd {
    margin: 0.2em 0 0;
}

.coas-kpi__value {
    font-weight: 600;
    font-size: 1.05em;
}

.coas-preview {
    margin: 0 0 1.25em;
    border: 1px solid var(--coas-border);
    border-radius: var(--coas-radius);
    overflow: hidden;
}

.coas-preview img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.coas-more {
    margin: 0 0 0.75em;
    color: var(--coas-muted);
    font-size: 0.9em;
}

.coas-more__link {
    font-weight: 600;
    color: var(--coas-accent);
}

/* --- documents --------------------------------------------------------- */

.coas-docs {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

.coas-doc {
    color: var(--coas-accent);
}

.coas-docs .coas-doc {
    padding: 0.35em 0;
    border-top: 1px solid var(--coas-border);
}

.coas-docs .coas-doc span {
    margin-inline-start: 0.6em;
    color: var(--coas-muted);
    font-size: 0.85em;
}

/* --- history ----------------------------------------------------------- */

.coas-history {
    margin-top: 1.5em;
}

.coas-history h3 {
    margin: 0 0 0.4em;
    font-size: 1.05em;
}

.coas-history__count {
    margin: 0 0 0.75em;
    color: var(--coas-muted);
    font-size: 0.9em;
}

.coas-tag {
    margin-inline-start: 0.5em;
    padding: 0.1em 0.5em;
    border-radius: var(--coas-radius);
    background: var(--coas-surface-alt);
    color: var(--coas-muted);
    font-size: 0.8em;
}

.coas-history .coas-doc {
    margin-inline-end: 0.6em;
}

/* --- the badge --------------------------------------------------------- */

.coas-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.75em 0;
    padding: 0.5em 0.75em;
    border: 1px solid var(--coas-border);
    border-radius: var(--coas-radius);
    background: var(--coas-surface-alt);
    color: var(--coas-text);
    font-size: 0.9em;
}

.coas-badge__icon::before {
    content: "\2713";
    color: var(--coas-pass);
    font-weight: 700;
}

.coas-badge__link {
    margin-inline-start: auto;
    font-weight: 600;
    color: var(--coas-accent);
}

/* --- narrow screens ---------------------------------------------------- */

@media (max-width: 600px) {
    .coas-card__inner {
        gap: 1em;
    }

    .coas-card__hero,
    .coas-card__body {
        padding-inline: 1em;
    }

    .coas-kpi {
        grid-template-columns: repeat(auto-fit, minmax(min(7em, 100%), 1fr));
    }

    .coas-badge__link {
        margin-inline-start: 0;
    }
}

/* ===================================================================== *
 * R4 M2: the single certificate page.
 *
 * Appended, never folded into the rules above: the hidden-state rule and
 * the token block are M1's, the card/table/badge components are R3's, and
 * this half is the single page's own (plan OC-32). Every subject here is a
 * `.coas-*` class and none of them declares `display` on anything the
 * templates can hide — tests/unit/Test_COAS_Assets.php parses the file and
 * asserts both.
 * ===================================================================== */

/* A definite width, not fit-content: on a theme whose page wrapper is a flex
   container (Highend's #main-wrapper is a column flexbox), the auto side
   margins switch stretch off, and the wrapper grew to its widest table's
   min-content, so the whole page ran off a phone's screen. min-width: 0
   covers a row-flex or grid parent the same way. */
.coas-single-wrap {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 60rem;
    margin: 0 auto;
    padding-inline: 1rem;
}

.coas-single {
    color: var(--coas-text);
}

/* --- the hero ----------------------------------------------------------- */

.coas-single__hero {
    padding: 1.25em 1.5em;
    border-radius: var(--coas-radius);
    background: var(--coas-l-hero-fill);
    color: var(--coas-hero-text);
}

.coas-breadcrumb {
    margin-bottom: 0.75em;
    color: var(--coas-hero-text);
    font-size: 0.85em;
}

.coas-breadcrumb a {
    color: var(--coas-hero-text);
    text-decoration: underline;
}

.coas-breadcrumb__separator {
    margin-inline: 0.35em;
    opacity: 0.6;
}

.coas-single__title {
    margin: 0.15em 0 0.5em;
    font-size: 1.6em;
    line-height: 1.2;
    color: var(--coas-hero-text);
}

.coas-hero__strip {
    margin: 0.15em 0 0.5em;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--coas-hero-text);
}

.coas-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
    margin: 0 0 0.9em;
    padding: 0;
    list-style: none;
    font-size: 0.9em;
}

.coas-chip {
    display: flex;
    gap: 0.35em;
    align-items: baseline;
}

.coas-chip__label {
    color: var(--coas-hero-text);
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85em;
}

.coas-chip__value {
    color: var(--coas-hero-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* --- the product bar ---------------------------------------------------- */

.coas-product-bar {
    margin-top: 1em;
    padding: 0.6em 0.9em;
    border: 1px solid var(--coas-border);
    border-radius: var(--coas-radius);
    background: var(--coas-surface-alt);
    font-size: 0.95em;
}

.coas-product-bar p {
    margin: 0;
}

.coas-product-bar__label {
    margin-inline-end: 0.5em;
    color: var(--coas-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8em;
}

.coas-product-bar__link {
    font-weight: 600;
    color: var(--coas-accent);
}

.coas-single__unavailable {
    margin: 0;
    color: var(--coas-muted);
    font-style: italic;
}

/* --- sample information ------------------------------------------------- */

.coas-sample-info {
    margin-top: 1.5em;
}

.coas-sample-info h2 {
    margin: 0 0 0.5em;
    font-size: 1.1em;
}

.coas-sample-info__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16em, 100%), 1fr));
    gap: 0.5em 1.5em;
    margin: 0;
}

.coas-sample-info__row {
    border-top: 1px solid var(--coas-border);
    padding-top: 0.4em;
}

.coas-sample-info__row dt {
    color: var(--coas-muted);
    font-size: 0.85em;
}

.coas-sample-info__row dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* --- the results tables ------------------------------------------------- */

.coas-results {
    margin-top: 1.5em;
}

.coas-results h2 {
    margin: 0 0 0.5em;
    font-size: 1.1em;
}

.coas-section__note {
    margin: 0.4em 0 1.25em;
    color: var(--coas-muted);
    font-size: 0.85em;
}

/* --- the documents card ------------------------------------------------- */

.coas-documents {
    margin-top: 1.5em;
}

.coas-documents h2 {
    margin: 0 0 0.6em;
    font-size: 1.1em;
}

.coas-doc-icon {
    margin: 0 0 0.6em;
    font-size: 2.2em;
    line-height: 1;
}

.coas-documents .coas-doc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: baseline;
    border-top: 1px solid var(--coas-border);
    padding: 0.5em 0;
}

.coas-doc__label {
    font-weight: 600;
}

.coas-doc__kind,
.coas-doc__size {
    color: var(--coas-muted);
    font-size: 0.85em;
}

.coas-doc__action {
    color: var(--coas-accent);
    font-weight: 600;
}

.coas-fingerprint {
    flex-basis: 100%;
    color: var(--coas-muted);
    font-size: 0.75em;
    word-break: break-all;
}

.coas-fingerprint--pending {
    font-style: italic;
}

.coas-lab {
    display: flex;
    gap: 0.6em;
    align-items: center;
    margin: 0.9em 0 0;
}

.coas-lab__logo {
    width: auto;
    height: 2.5em;
}

.coas-verify {
    margin: 0.6em 0 0;
    font-size: 0.9em;
}

/* --- the "full report on request" line (0.5.2) ---------------------------- */

/* Its own surface, so the accent border sits on `--coas-surface-alt` (the
   accent rule above) on the single page too, whose `.coas-single` has no
   background. On the card the `<p>` itself is `.coas-request`, so
   `overflow-wrap` reaches a long custom message inside the card's
   `overflow: hidden`. None of these is a hideable subject, and none
   declares `display` (X8). */
.coas-request {
    margin-block: 1em;
    padding: 0.75em 1em;
    background: var(--coas-surface-alt);
    border-inline-start: 3px solid var(--coas-accent);
    color: var(--coas-text);
    overflow-wrap: anywhere;
}

.coas-request__message {
    margin: 0;
}

.coas-request__link {
    margin-inline-start: 0.5em;
}

.coas-table .coas-request__link {
    margin-inline-start: 0;
}

/* --- the history and its switcher --------------------------------------- */

.coas-history h2 {
    margin: 0 0 0.5em;
    font-size: 1.1em;
}

.coas-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: end;
    margin: 0 0 0.75em;
}

.coas-switcher__label {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    color: var(--coas-muted);
    font-size: 0.85em;
}

.coas-history__current {
    background: var(--coas-surface-alt);
}

.coas-history__current th {
    font-weight: 700;
}

/* --- the disclaimer and the editor placeholder -------------------------- */

.coas-single__disclaimer {
    margin-top: 1.5em;
    border-top: 1px solid var(--coas-border);
    padding-top: 0.75em;
    color: var(--coas-muted);
    font-size: 0.8em;
}

.coas-single--placeholder {
    padding: 1em;
    border: 1px dashed var(--coas-border);
    border-radius: var(--coas-radius);
    color: var(--coas-muted);
}

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 600px) {
    .coas-single__hero {
        padding: 1em;
    }

    .coas-single__title {
        font-size: 1.35em;
    }
}

/* Screen only, so a narrow printout keeps the print sheet's table: the cells
   tighten and the results' test names may wrap (a history date does not), so
   most tables fit a phone; a wider one scrolls inside its .coas-scroll box. */
@media screen and (max-width: 600px) {
    .coas-single .coas-table {
        font-size: 0.875em;
    }

    .coas-single .coas-results .coas-table tbody th {
        white-space: normal;
    }

    .coas-single .coas-table caption,
    .coas-single .coas-table th,
    .coas-single .coas-table td {
        padding-inline: 0.5em;
    }

    .coas-single .coas-table th,
    .coas-single .coas-table td {
        padding-block: 0.45em;
    }
}

/* --- the library (R4 M3) ------------------------------------------------ */

.coas-library__title {
    margin: 0 0 0.3em;
    font-size: 1.5em;
}

.coas-library__lede {
    margin: 0 0 1em;
    color: var(--coas-muted);
}

.coas-library__search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: end;
    margin: 0 0 0.75em;
}

.coas-library__label {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    color: var(--coas-muted);
    font-size: 0.85em;
}

.coas-library__count {
    margin: 0 0 1em;
    color: var(--coas-muted);
    font-size: 0.9em;
}

.coas-library__split {
    margin: 0.5em 0 0;
    color: var(--coas-muted);
    font-size: 0.85em;
}

/* No `display` here or on .coas-card--library below: both carry the `hidden`
   attribute when the script narrows the list, and the plugin's own
   `.coas [hidden]` rule has to win (D-R3-26, X8). Their layout lives on the
   grid wrapper instead. */
.coas-library__group {
    margin: 0 0 2em;
}

.coas-library__group-title {
    margin: 0 0 0.2em;
    font-size: 1.15em;
}

.coas-library__group-chip {
    margin: 0 0 0.75em;
}

.coas-library__grid {
    display: grid;
    gap: 1.25em;
    /* min(22em, 100%): a card's minimum can never exceed the row, so the grid
       fits any width and drops to one column when it must. */
    grid-template-columns: repeat(auto-fill, minmax(min(22em, 100%), 1fr));
}

.coas-library__header {
    margin: 0 0 1em;
}

.coas-library__latest {
    margin: 0 0 2em;
}

.coas-library__link {
    margin: 1em 0;
}

.coas-library--placeholder {
    padding: 1em;
    border: 1px dashed var(--coas-border);
    border-radius: var(--coas-radius);
    color: var(--coas-muted);
}

.coas-card--library {
    margin: 0;
    border: 1px solid var(--coas-border);
    border-radius: var(--coas-radius);
    overflow: hidden;
    background: var(--coas-surface);
}

.coas-card--library .coas-card__body {
    padding: 1em;
}

.coas-card__product {
    margin: 0 0 0.2em;
    color: var(--coas-muted);
    font-size: 0.85em;
}

.coas-card__title {
    margin: 0 0 0.5em;
    font-size: 1.05em;
}

.coas-card__chips {
    margin: 0 0 0.4em;
    color: var(--coas-muted);
    font-size: 0.85em;
}

.coas-card__purity {
    margin: 0 0 0.5em;
}

.coas-card__actions {
    margin: 0;
}

.coas-card__actions .coas-doc {
    margin-inline-start: 0.75em;
}

/* --- the filter bar (R4b M2) ------------------------------------------- */

/* ONE form since 0.5.0: the search box, then the drawer holding the menus,
   then the buttons. The drawer is a native <details>, rendered open; the
   script folds it on a narrow screen. Its summary is hidden on wide screens
   only while it is OPEN — a drawer folded on a phone and then widened keeps
   its opener, with or without the script. The breakpoint below is the one
   `library/controls.php` writes into `data-coas-drawer` (599.98px / 600px —
   no fractional width falls between them). The summary is not a hideable
   subject (X8), so it may say `list-item`: a theme's `summary { display:
   block; }` (Highend's normalize) would take the disclosure marker away. */
.coas-drawer {
    flex-basis: 100%;
    margin: 0;
}

.coas-drawer__summary {
    display: list-item;
    margin: 0 0 0.5em;
    cursor: pointer;
    font-weight: 600;
}

@media (min-width: 600px) {
    .coas-drawer[open] > .coas-drawer__summary {
        display: none;
    }
}

/* A <fieldset> now: its own border, background and padding are the bar's,
   and `min-inline-size: 0` undoes the fieldset's min-content floor so the
   menus wrap. */
.coas-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    align-items: end;
    min-inline-size: 0;
    margin: 0;
    padding: 0.75em;
    border: 1px solid var(--coas-border);
    border-radius: var(--coas-radius);
    background: var(--coas-surface-alt);
}

.coas-facets__field {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    color: var(--coas-muted);
    font-size: 0.85em;
}

/* The plugin's own visually-hidden pattern — never a theme's
   `screen-reader-text`: the bar's legend everywhere, and the chips'
   "Remove filter:" prefix. */
.coas-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.coas-library__clear {
    align-self: center;
    font-size: 0.9em;
}

/* --- the active-filter chips (R4b M2) ------------------------------------ */

/* Their own classes: `.coas-chip` belongs to the cards, the group headers
   and the certificate page. */
.coas-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 0 0 0.75em;
    padding: 0;
    list-style: none;
}

.coas-active-filter {
    margin: 0;
}

.coas-active-filter__link {
    display: inline-block;
    padding: 0.2em 0.75em;
    border: 1px solid var(--coas-border);
    border-radius: 999px;
    background: var(--coas-surface);
    color: var(--coas-text);
    font-size: 0.85em;
    text-decoration: none;
}

.coas-active-filter__link:hover,
.coas-active-filter__link:focus-visible {
    border-color: var(--coas-accent);
    color: var(--coas-accent);
}

.coas-active-filter__link--clear {
    border-style: dashed;
}

/* --- the empty state and the lookup's "see them all" (R4b M2) ------------ */

.coas-library__empty-link {
    display: inline-block;
    margin-inline-start: 0.5em;
    font-weight: 600;
    color: var(--coas-accent);
}

/* X24e: the lookup's "Showing … of … — See them all in the library". Its
   link carries no class of its own, so it is styled on the INLINE box —
   padding, border, colour — and never given a `display`: a subject with no
   `.coas-` class is a hideable one to X8's pin. */
.coas-library__more {
    margin: 1em 0 0;
    color: var(--coas-muted);
    font-size: 0.9em;
}

.coas-library__more a {
    margin-inline-start: 0.35em;
    padding: 0.15em 0.6em;
    border: 1px solid var(--coas-border);
    border-radius: var(--coas-radius);
    color: var(--coas-accent);
    font-weight: 600;
    text-decoration: none;
}

/* --- the phone layout (R4b M2) ------------------------------------------- */

/* The search box full width first; the menus two to a row. The same
   599.98px `library/controls.php` hands the script. */
@media (max-width: 599.98px) {
    .coas-library__search input[type="search"] {
        flex: 1 1 100%;
        min-inline-size: 0;
    }

    .coas-facets {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coas-facets__field select {
        inline-size: 100%;
    }
}

/* --- pagination --------------------------------------------------------- */

/* Core writes this list (`paginate_links( 'type' => 'list' )`), so every
   subject below is a bare element: a foreign class subject is not allowed in
   this file, and a bare subject may not declare `display` (X8). The items are
   floated instead — `left` first as the fallback, `inline-start` after it so a
   browser that understands the logical value mirrors under RTL. */
.coas-pagination {
    display: flow-root;
    margin-top: 1.5em;
}

.coas-pagination ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.coas-pagination li {
    float: left;
    float: inline-start;
    margin-inline-end: 0.35em;
    margin-bottom: 0.35em;
}

.coas-pagination a,
.coas-pagination span {
    padding: 0.25em 0.6em;
    border: 1px solid var(--coas-border);
    border-radius: var(--coas-radius);
    text-decoration: none;
}