/* Insights, industry and regional ranking pages. Shared primitives remain in cdl-components.css. */
.cdl-rankings {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: 0.5rem clamp(2.5rem, 6vw, 5rem);
}

.cdl-rankings__header,
.cdl-rankings__section,
.cdl-rankings__chart-grid,
.cdl-rankings__metric-grid,
.cdl-rankings__cards,
.cdl-rankings__detail-grid {
    min-width: 0;
}

.cdl-rankings__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-4) var(--cdl-space-6);
    align-items: end;
    justify-content: space-between;
}

.cdl-rankings__header-copy { max-width: 48rem; }

.cdl-rankings__eyebrow,
.cdl-rankings__panel-kicker,
.cdl-rankings__metric-note {
    margin: 0 0 var(--cdl-space-2);
    color: var(--cdl-brand);
    font-size: var(--cdl-text-12);
    font-weight: 800;
    letter-spacing: var(--cdl-tracking-caps);
    line-height: 1.25;
    text-transform: uppercase;
}

.cdl-rankings__panel-kicker,
.cdl-rankings__metric-note { color: var(--cdl-muted); }

.cdl-rankings__title {
    margin: 0;
    color: var(--cdl-ink);
    font-family: var(--cdl-font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: var(--cdl-leading-tight);
}

.cdl-rankings__subtitle,
.cdl-rankings__section-intro,
.cdl-rankings__definition {
    margin: var(--cdl-space-3) 0 0;
    color: var(--cdl-muted);
    font-size: var(--cdl-text-16);
    line-height: var(--cdl-leading-body);
}

.cdl-rankings__header-actions,
.cdl-rankings__section-actions,
.cdl-rankings__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-2);
    align-items: center;
}

.cdl-rankings__metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cdl-space-3);
}

.cdl-rankings__metric-grid--six { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cdl-rankings__metric .cdl-metric__value { font-size: clamp(1.5rem, 3vw, 2.25rem); }

.cdl-rankings__section {
    display: grid;
    gap: var(--cdl-space-5);
}

.cdl-rankings__section-heading {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-3) var(--cdl-space-5);
    align-items: end;
    justify-content: space-between;
}

.cdl-rankings__section-heading > div { max-width: 48rem; }

.cdl-rankings__section-title {
    margin: 0;
    color: var(--cdl-ink);
    font-family: var(--cdl-font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: var(--cdl-leading-tight);
}

.cdl-rankings__chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cdl-space-5);
}

.cdl-rankings__chart-grid--wide { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }

.cdl-rankings__chart-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cdl-rankings__chart-panel .cdl-panel__body {
    display: grid;
    flex: 1;
    gap: var(--cdl-space-4);
}

.cdl-rankings__chart-canvas {
    min-height: 20rem;
}

.cdl-rankings__chart-canvas--tall { min-height: 25rem; }

.cdl-rankings__chart-skeleton {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
}

.cdl-rankings__chart-canvas[data-cdl-chart-rendered="true"] .cdl-rankings__chart-skeleton { display: none; }

.cdl-rankings__chart-panel .cdl-panel__footer { padding: var(--cdl-space-3) var(--cdl-space-5); }
.cdl-rankings__chart-panel .cdl-provenance { width: 100%; }

.cdl-rankings__table-wrap {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.cdl-rankings__table {
    width: 100%;
    min-width: 38rem;
    margin: 0;
    border-collapse: collapse;
    font-family: var(--cdl-font-ui);
}

.cdl-rankings__table th {
    padding: 0.75rem var(--cdl-space-4);
    color: var(--cdl-muted);
    font-size: var(--cdl-text-12);
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--cdl-surface-subtle);
    border-bottom: 1px solid var(--cdl-border);
}

.cdl-rankings__table th.text-end,
.cdl-rankings__table td.text-end { text-align: right; }

.cdl-rankings__table td {
    padding: 0.875rem var(--cdl-space-4);
    color: var(--cdl-ink);
    font-size: var(--cdl-text-14);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    vertical-align: middle;
    border-bottom: 1px solid var(--cdl-border);
}

.cdl-rankings__table tbody tr:last-child td { border-bottom: 0; }
.cdl-rankings__table tbody tr:hover { background: color-mix(in srgb, var(--cdl-brand-tint) 38%, transparent); }

.cdl-rankings__table a {
    color: var(--cdl-ink);
    font-weight: 700;
    text-decoration: none;
}

.cdl-rankings__table a:hover { color: var(--cdl-brand); }

.cdl-rankings__table-meta {
    display: inline-block;
    margin-top: 0.125rem;
    color: var(--cdl-muted);
    font-size: var(--cdl-text-12);
}

.cdl-rankings__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cdl-space-4);
}

.cdl-rankings__region-card {
    display: grid;
    gap: var(--cdl-space-3);
    min-height: 100%;
    color: var(--cdl-ink);
    text-decoration: none;
    transition: border-color var(--cdl-motion-fast) var(--cdl-ease-standard), box-shadow var(--cdl-motion-fast) var(--cdl-ease-standard), transform var(--cdl-motion-fast) var(--cdl-ease-standard);
}

.cdl-rankings__region-card:hover {
    color: var(--cdl-ink);
    border-color: color-mix(in srgb, var(--cdl-brand) 45%, var(--cdl-border));
    box-shadow: var(--cdl-shadow-raised);
    transform: translateY(-2px);
}

.cdl-rankings__card-header {
    display: flex;
    gap: var(--cdl-space-3);
    align-items: start;
    justify-content: space-between;
}

.cdl-rankings__card-title {
    margin: 0;
    color: inherit;
    font-family: var(--cdl-font-display);
    font-size: var(--cdl-text-20);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.cdl-rankings__count {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
    color: var(--cdl-brand-deep);
    font-size: var(--cdl-text-12);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--cdl-brand-tint);
    border-radius: var(--cdl-radius-pill);
}

.cdl-rankings__card-copy { margin: 0; color: var(--cdl-muted); font-size: var(--cdl-text-14); line-height: var(--cdl-leading-body); }

.cdl-rankings__chips { margin-top: auto; }

.cdl-rankings__chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.5rem;
    color: var(--cdl-muted);
    font-size: var(--cdl-text-12);
    font-weight: 700;
    line-height: 1.2;
    background: var(--cdl-surface-subtle);
    border-radius: var(--cdl-radius-pill);
}

.cdl-rankings__chip--primary { color: var(--cdl-brand-deep); background: var(--cdl-brand-tint); }

.cdl-rankings__detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cdl-space-3);
}

.cdl-rankings__notice {
    display: flex;
    gap: var(--cdl-space-3);
    align-items: flex-start;
    padding: var(--cdl-space-4);
    color: var(--cdl-muted);
    font-size: var(--cdl-text-14);
    line-height: var(--cdl-leading-body);
    background: var(--cdl-surface-subtle);
    border: 1px solid var(--cdl-border);
    border-radius: var(--cdl-radius-control);
}

.cdl-rankings__notice i { flex: 0 0 auto; margin-top: 0.1rem; color: var(--cdl-information); }

.cdl-rankings__ai-status {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.35rem;
    align-items: center;
    padding: 0.35rem 0.55rem;
    color: var(--cdl-warning);
    font-size: var(--cdl-text-12);
    font-weight: 800;
    line-height: 1.2;
    background: color-mix(in srgb, var(--cdl-warning) 10%, var(--cdl-surface));
    border: 1px solid color-mix(in srgb, var(--cdl-warning) 35%, var(--cdl-border));
    border-radius: var(--cdl-radius-pill);
}

.cdl-rankings__ai-summary {
    max-width: 72ch;
    margin: 0;
    color: var(--cdl-ink);
    font-size: var(--cdl-text-16);
    line-height: var(--cdl-leading-body);
}

.cdl-rankings__faq-list {
    display: grid;
    gap: var(--cdl-space-2);
}

.cdl-rankings__faq-list details {
    padding: var(--cdl-space-3) var(--cdl-space-4);
    background: var(--cdl-surface-subtle);
    border: 1px solid var(--cdl-border);
    border-radius: var(--cdl-radius-control);
}

.cdl-rankings__faq-list summary {
    color: var(--cdl-ink);
    font-size: var(--cdl-text-14);
    font-weight: 800;
    cursor: pointer;
}

.cdl-rankings__faq-list p {
    margin: var(--cdl-space-3) 0 0;
    color: var(--cdl-muted);
    font-size: var(--cdl-text-14);
    line-height: var(--cdl-leading-body);
}

.cdl-rankings__risk-key {
    display: grid;
    gap: var(--cdl-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cdl-rankings__risk-key li {
    display: flex;
    gap: var(--cdl-space-3);
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--cdl-space-2);
    color: var(--cdl-muted);
    font-size: var(--cdl-text-14);
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--cdl-border);
}

.cdl-rankings__risk-key li:last-child { padding-bottom: 0; border-bottom: 0; }
.cdl-rankings__risk-key strong { color: var(--cdl-ink); }
.cdl-rankings__risk-key--positive strong { color: var(--cdl-positive); }
.cdl-rankings__risk-key--warning strong { color: var(--cdl-warning); }
.cdl-rankings__risk-key--critical strong { color: var(--cdl-critical); }

.cdl-rankings__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 74.99rem) {
    .cdl-rankings__metric-grid,
    .cdl-rankings__detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cdl-rankings__chart-grid,
    .cdl-rankings__chart-grid--wide { grid-template-columns: 1fr; }
    .cdl-rankings__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
    .cdl-rankings { gap: 3rem; }
    .cdl-rankings__header { align-items: start; }
    .cdl-rankings__header-actions,
    .cdl-rankings__header-actions .cdl-action { width: 100%; }
    .cdl-rankings__section-heading { align-items: start; }
    .cdl-rankings__chart-panel .cdl-panel__header { align-items: flex-start; }
    .cdl-rankings__chart-panel .cdl-panel__header .cdl-action { width: 100%; }
    .cdl-rankings__chart-panel .cdl-panel__body,
    .cdl-rankings__chart-panel .cdl-panel__footer { padding: var(--cdl-space-4); }
    .cdl-rankings__chart-canvas,
    .cdl-rankings__chart-canvas--tall { min-height: 17rem; }
    .cdl-rankings__cards { grid-template-columns: 1fr; }
    .cdl-rankings__table { min-width: 34rem; }
    .cdl-rankings__table th,
    .cdl-rankings__table td { padding-right: var(--cdl-space-3); padding-left: var(--cdl-space-3); }
}

@media (max-width: 22.5rem) {
    .cdl-rankings__metric-grid,
    .cdl-rankings__detail-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .cdl-rankings__chart-skeleton::after { animation: none; }
    .cdl-rankings__region-card { transition: none; }
}

/* ==========================================================================
   polish-public additions (APPEND-ONLY SECTION).
   Keyboard and touch polish for the benchmark table scroll regions used on
   the Industry, Region, Insights, Countries and GlobalCompany surfaces.
   Do not merge these into the rules above: the declarations above are being
   re-tokenised in-place by the brand pass. New rules only below this line.
   ========================================================================== */
.cdl-rankings__table-wrap {
    position: relative;
    overscroll-behavior-inline: contain;
}

.cdl-rankings__table-wrap:focus-visible {
    border-radius: var(--cdl-radius-control);
    outline: 3px solid color-mix(in srgb, var(--cdl-brand) 55%, transparent);
    outline-offset: -3px;
}

/* Mobile swipe affordance: mirrors the cdl-insight-table-wrap hint so every
   data table announces its own horizontal scroll instead of clipping. */
@media (max-width: 47.99rem) {
    .cdl-rankings__table-wrap[role="region"] { padding-top: 2rem; }

    .cdl-rankings__table-wrap[role="region"]::before {
        position: absolute;
        top: 0.55rem;
        left: var(--cdl-space-3);
        color: var(--cdl-muted);
        font-size: var(--cdl-text-12);
        font-weight: 800;
        letter-spacing: 0.04em;
        content: "Scroll horizontally to compare \2192";
    }

    /* Touch targets: actions rendered as chip rows stay comfortably tappable. */
    .cdl-rankings__header-actions .cdl-action,
    .cdl-rankings__section-actions .cdl-action { min-height: 2.75rem; }
}

/* Dense action rows (e.g. the 10-way country compare picker) collapse into a
   native disclosure so small screens are not faced with a wall of buttons. */
.cdl-rankings__disclosure {
    background: var(--cdl-surface);
    border: 1px solid var(--cdl-border);
    border-radius: var(--cdl-radius-panel);
}

.cdl-rankings__disclosure > summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-2) var(--cdl-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--cdl-space-4) var(--cdl-space-5);
    color: var(--cdl-ink);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.cdl-rankings__disclosure > summary::-webkit-details-marker { display: none; }

.cdl-rankings__disclosure > summary > span:first-child {
    display: inline-flex;
    gap: var(--cdl-space-2);
    align-items: center;
}

.cdl-rankings__disclosure > summary i { color: var(--cdl-brand); }

.cdl-rankings__disclosure-count {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    color: var(--cdl-muted);
    font-size: var(--cdl-text-12);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--cdl-surface-subtle);
    border-radius: var(--cdl-radius-pill);
}

.cdl-rankings__disclosure-count::after {
    display: inline-block;
    margin-left: 0.375rem;
    content: "\25BE";
    transition: transform var(--cdl-motion-fast) var(--cdl-ease-standard);
}

.cdl-rankings__disclosure[open] .cdl-rankings__disclosure-count::after { transform: rotate(180deg); }

.cdl-rankings__disclosure > .cdl-rankings__compare-list {
    padding: 0 var(--cdl-space-5) var(--cdl-space-5);
}

/* Compare chips stay compact and wrapping on small screens instead of
   inheriting the full-width stacked treatment meant for 2-3 hero actions. */
@media (max-width: 47.99rem) {
    .cdl-rankings__disclosure > summary,
    .cdl-rankings__disclosure > .cdl-rankings__compare-list { padding-right: var(--cdl-space-4); padding-left: var(--cdl-space-4); }

    .cdl-rankings__compare-list { width: 100%; }

    .cdl-rankings__compare-list .cdl-action {
        flex: 1 1 auto;
        justify-content: center;
        width: auto;
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdl-rankings__disclosure-count::after { transition: none; }
}

/* ==========================================================================
   countries-fix additions (APPEND-ONLY SECTION).
   League-table mobile fit, the compare page's stacked mobile layout and the
   "Not reported" KPI/absence states for the Countries surfaces.
   ========================================================================== */

/* Numeric cells never wrap or clip mid-glyph; the trailing column keeps
   breathing room against the scroll edge. */
.cdl-rankings__table th.text-end,
.cdl-rankings__table td.text-end { white-space: nowrap; }

.cdl-rankings__table th.text-end:last-child,
.cdl-rankings__table td.text-end:last-child { padding-right: var(--cdl-space-5); }

/* Country league: the identity column pins to the left edge of the scroll
   region so rows never lose their country mid-scroll. */
@media (max-width: 47.99rem) {
    .cdl-rankings__table--league th.cdl-rankings__league-rank,
    .cdl-rankings__table--league td.cdl-rankings__league-rank {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 2.75rem;
        min-width: 2.75rem;
        max-width: 2.75rem;
        background: var(--cdl-surface);
    }

    .cdl-rankings__table--league th.cdl-rankings__league-country,
    .cdl-rankings__table--league td.cdl-rankings__league-country {
        position: sticky;
        left: 2.75rem;
        z-index: 2;
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: var(--cdl-surface);
        box-shadow: 1px 0 0 var(--cdl-border);
    }

    .cdl-rankings__table--league th.cdl-rankings__league-rank,
    .cdl-rankings__table--league th.cdl-rankings__league-country { background: var(--cdl-surface-subtle); }
}

/* Under 30rem the rank column drops (order already ranks the rows). Only
   the countries league additionally collapses its identity cell to flag +
   ISO code: that trade is honest only where the cell carries a flag and ISO
   fallback, so it is scoped to the --countries variant. Company leagues
   (employers, top websites) have no fallback and keep the name visible,
   ellipsised in the sticky cell. The collapsed country name stays available
   to screen readers. */
@media (max-width: 29.99rem) {
    .cdl-rankings__table--league th.cdl-rankings__league-rank,
    .cdl-rankings__table--league td.cdl-rankings__league-rank { display: none; }

    .cdl-rankings__table--league th.cdl-rankings__league-country,
    .cdl-rankings__table--league td.cdl-rankings__league-country { left: 0; max-width: 8.5rem; }

    .cdl-rankings__table--countries { min-width: 100%; }

    .cdl-rankings__table--countries th,
    .cdl-rankings__table--countries th.text-end { white-space: normal; }

    .cdl-rankings__table--countries th.cdl-rankings__league-country,
    .cdl-rankings__table--countries td.cdl-rankings__league-country { max-width: 7rem; }

    .cdl-rankings__table--countries .cdl-rankings__league-name {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Compare page: below 48rem the wide headline table gives way to a stacked
   per-metric layout so the second country is never clipped off-screen. */
.cdl-rankings__compare-stack { display: none; }

@media (max-width: 47.99rem) {
    .cdl-rankings__table-wrap--wide { display: none; }

    .cdl-rankings__compare-stack {
        display: grid;
        gap: var(--cdl-space-4);
        padding: var(--cdl-space-4);
    }

    .cdl-rankings__compare-stack-metric {
        display: grid;
        gap: var(--cdl-space-2);
        padding-bottom: var(--cdl-space-4);
        border-bottom: 1px solid var(--cdl-border);
    }

    .cdl-rankings__compare-stack-metric:last-child { padding-bottom: 0; border-bottom: 0; }

    .cdl-rankings__compare-stack-label {
        margin: 0;
        color: var(--cdl-muted);
        font-size: var(--cdl-text-12);
        font-weight: 800;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .cdl-rankings__compare-stack-values {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--cdl-space-3);
    }

    .cdl-rankings__compare-stack-cell {
        display: grid;
        gap: var(--cdl-space-1);
        min-width: 0;
    }

    .cdl-rankings__compare-stack-country {
        overflow: hidden;
        color: var(--cdl-muted);
        font-size: var(--cdl-text-12);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cdl-rankings__compare-stack-value {
        color: var(--cdl-ink);
        font-size: var(--cdl-text-16);
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    .cdl-rankings__compare-stack-delta,
    .cdl-rankings__compare-stack-meta {
        margin: 0;
        color: var(--cdl-muted);
        font-size: var(--cdl-text-12);
        font-variant-numeric: tabular-nums;
    }
}

/* Inline note inside a panel (e.g. contact fields neither registry reports). */
.cdl-rankings__compare-note { margin: var(--cdl-space-4); }

/* Absence states say "Not reported" in words — never a fabricated 0.0%. */
.cdl-rankings__metric .cdl-metric__value--na { font-size: clamp(1.35rem, 2.5vw, 1.65rem); }

.cdl-rankings__absence { padding: var(--cdl-space-5); }

.cdl-rankings__absence .cdl-state__title { font-size: var(--cdl-text-16); }

/* ==========================================================================
   mobile-fit additions (APPEND-ONLY SECTION).
   Chip-cluster hubs (Lists + NAICS directories), the Stats hub counts table
   and the scroll-edge fade that makes clipped columns read as scrollable.
   ========================================================================== */

/* Chip clusters: hundreds of directory links rendered as compact wrapping
   pills inside a per-sector disclosure — never the full-width stacked
   treatment .cdl-rankings__header-actions applies to 1-2 hero CTAs. Markup
   ships open so every link stays in the DOM for crawlers and no-JS readers;
   a small per-view script collapses clusters on small screens, where the
   summary still names the sector and its link count. */
.cdl-chip-cluster { min-width: 0; }

.cdl-chip-cluster > summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-2) var(--cdl-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--cdl-space-4) var(--cdl-space-5);
    color: var(--cdl-ink);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.cdl-chip-cluster > summary::-webkit-details-marker { display: none; }

.cdl-chip-cluster[open] .cdl-rankings__disclosure-count::after { transform: rotate(180deg); }

.cdl-chip-cluster__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-2);
    padding: 0 var(--cdl-space-5) var(--cdl-space-5);
}

.cdl-chip-cluster__list .cdl-action {
    justify-content: flex-start;
    min-height: 2.25rem;
    padding: 0.3125rem 0.75rem;
    text-align: left;
}

/* Counts stay glued to their label: the separator and the value are one
   unbreakable unit, so the "·" never orphan-wraps away from its number. */
.cdl-chip-cluster__list .cdl-rankings__table-meta {
    margin-top: 0;
    white-space: nowrap;
}

@media (max-width: 47.99rem) {
    .cdl-chip-cluster > summary { padding: var(--cdl-space-4); }

    .cdl-chip-cluster__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 var(--cdl-space-4) var(--cdl-space-4);
    }

    .cdl-chip-cluster__list .cdl-action {
        min-height: 2.75rem;
        overflow-wrap: anywhere;
        white-space: normal;
    }
}

/* Stats hub: the two-digit code folds under the sector name as muted meta,
   so sector and count both survive first paint on narrow screens. */
.cdl-rankings__table-meta--block {
    display: block;
    margin-top: 0.25rem;
}

/* Numeric cells reserve room so a value and its unit ("55.7K") are never
   split or clipped apart at the container edge. Wrapping is already
   forbidden on .text-end cells above. */
.cdl-rankings__table td.text-end { min-width: 6rem; }

@media (max-width: 47.99rem) {
    .cdl-rankings__table--counts { min-width: 100%; }

    .cdl-rankings__table--counts th,
    .cdl-rankings__table--counts th.text-end { white-space: normal; }
}

/* Scroll-edge fade: on narrow screens the ranking tables overflow their
   region, so a sticky gradient strip rides the right edge of the scrollport
   and the cut columns read as scrollable rather than broken. The strip sits
   after the table in flow, so at full scroll the fade covers only its own
   gutter — never data. Tables designed to fit the viewport (--counts,
   --countries) skip it. */
@media (max-width: 35.99rem) {
    .cdl-rankings__table-wrap:not(:has(.cdl-rankings__table--counts, .cdl-rankings__table--countries)) { display: flex; }

    .cdl-rankings__table-wrap:not(:has(.cdl-rankings__table--counts, .cdl-rankings__table--countries)) > .cdl-rankings__table { flex: 0 0 auto; }

    .cdl-rankings__table-wrap:not(:has(.cdl-rankings__table--counts, .cdl-rankings__table--countries))::after {
        position: sticky;
        right: 0;
        flex: 0 0 2.75rem;
        content: "";
        pointer-events: none;
        background: linear-gradient(to right, transparent, var(--cdl-surface) 85%);
    }
}

/* ==================================================================== */
/* Wave-3 "Benchmark my business" tool (/uk/benchmark-my-business) —    */
/* append-only section. Opt-in .cdl-benchtool__* selectors composed     */
/* over the existing cdl-panel / cdl-filter-bar / cdl-provenance        */
/* primitives; nothing here overrides earlier rules. Mobile-first.      */
/* ==================================================================== */

/* The GET form: filter-bar fields wrap on narrow screens; the submit
   button drops to its own full-width row so the primary action never
   hides at the end of a wrapped line of inputs. */
.cdl-benchtool__form { align-items: end; }

.cdl-benchtool__form > button[type="submit"] { flex: 1 1 100%; }

@media (min-width: 48rem) {
    .cdl-benchtool__form > button[type="submit"] { flex: 0 1 auto; margin-left: auto; }
}

/* Explainer / honest-limits cards: one column, three-up from tablet. */
.cdl-benchtool__grid { display: grid; gap: var(--cdl-space-4); }

@media (min-width: 48rem) {
    .cdl-benchtool__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Gating notices stack tightly above the result table. */
.cdl-benchtool__notice { margin-bottom: var(--cdl-space-3); }

.cdl-benchtool__notice .cdl-panel__body { padding: var(--cdl-space-3) var(--cdl-space-4); }

/* "Your position" list: one bordered row per comparison with an
   outcome-coloured edge. Above/below borrow the verdict palette;
   in-line stays neutral — the tool reports position, not judgement. */
.cdl-benchtool__deltas {
    display: grid;
    gap: var(--cdl-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cdl-benchtool__delta {
    padding: var(--cdl-space-3) var(--cdl-space-4);
    background: var(--cdl-surface);
    border: 1px solid var(--cdl-border);
    border-left: 4px solid var(--cdl-border-strong);
    border-radius: var(--cdl-radius-control);
}

.cdl-benchtool__delta--above { border-left-color: var(--cdl-positive); }
.cdl-benchtool__delta--below { border-left-color: var(--cdl-warning); }
.cdl-benchtool__delta--inline { border-left-color: var(--cdl-border-strong); }

.cdl-benchtool__delta-metric {
    display: block;
    color: var(--cdl-muted);
    font-size: var(--cdl-text-12);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Cite/copy: readonly field plus its copy button share a row from
   tablet up; on phones the button drops under the field. */
.cdl-benchtool__cite { display: grid; gap: var(--cdl-space-2); }

.cdl-benchtool__cite-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cdl-space-2);
    align-items: start;
}

.cdl-benchtool__cite-row .cdl-toolform__input { flex: 1 1 16rem; }

.cdl-benchtool__cite-row textarea.cdl-toolform__input { resize: vertical; min-height: 4.5rem; }