@layer components {
    .resources-trade-statistics {
        --trade-export: var(--color-primary);
        --trade-import: var(--color-accent);
        /* Sector palette (#1129): dark enough for white tile labels. */
        --trade-sector-1: #2f6b3a;
        --trade-sector-2: #3d3d3d;
        --trade-sector-3: #74378a;
        --trade-sector-4: #1d6d78;
        --trade-sector-5: #85562a;
        --trade-sector-6: #a2335a;
        --trade-sector-7: #5a656e;
        --trade-sector-8: #8a6d00;
        --trade-sector-9: #5b5f1e;
        --trade-sector-10: #1f4e8c;
        --trade-sector-11: #b0431b;
        --trade-sector-12: #3c4f9b;
        --trade-sector-13: #6e3a3a;
        --trade-sector-14: #58585e;
        gap: clamp(1rem, 2vw, 1.5rem);
        min-width: 0;
    }

    .trade-prototype-notice {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem 0.6rem;
        padding: 0.9rem 1rem;
        border-left: 4px solid var(--color-accent);
        background: color-mix(in srgb, var(--color-accent), white 91%);
        color: var(--color-text);
        font-size: 0.93rem;
    }

    .resources-trade-statistics__hero {
        gap: 0.7rem;
    }

    .trade-prototype-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin: 0;
        color: var(--color-text-muted);
        font-size: 0.9rem;
    }

    .trade-scope-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .trade-scope-nav__link {
        display: grid;
        min-width: 0;
        min-height: 48px;
        padding: 0.75rem;
        place-items: center;
        border-right: 1px solid var(--color-border);
        color: var(--color-text);
        text-align: center;
        text-decoration: none;
    }

    .trade-scope-nav__link:last-child {
        border-right: 0;
    }

    .trade-scope-nav__link:is(:hover, :focus-visible) {
        background: var(--color-surface-soft);
        color: var(--color-primary);
    }

    .trade-scope-nav__link.is-active {
        background: var(--color-primary-strong);
        color: var(--color-surface);
    }

    .trade-filters {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.8rem;
        padding: clamp(1rem, 2vw, 1.3rem);
        background: var(--color-surface-soft);
    }

    .trade-filters label {
        display: grid;
        min-width: 0;
        gap: 0.4rem;
        color: var(--color-text-muted);
        font-size: 0.82rem;
        font-weight: 700;
    }

    .trade-filters__heading {
        display: grid;
        grid-column: 1 / -1;
        gap: 0.2rem;
    }

    .trade-filters__heading :is(p, h2),
    .trade-local-selector p {
        margin: 0;
    }

    .trade-filters__heading h2 {
        font-family: var(--font-sans);
        font-size: 1rem;
    }

    .trade-filters select {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 0.65rem 2rem 0.65rem 0.7rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        color: var(--color-text);
        font: inherit;
        font-weight: 600;
    }

    .trade-filters__submit {
        grid-column: 1 / -1;
        justify-self: start;
        min-height: 46px;
    }

    .trade-section {
        display: grid;
        min-width: 0;
        gap: 1rem;
        padding: clamp(1rem, 2.5vw, 1.5rem);
        border: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .trade-section h2,
    .trade-section h3,
    .trade-section p {
        margin: 0;
    }

    .trade-section__heading {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
        justify-content: space-between;
        align-items: end;
    }

    .trade-section__heading > div {
        display: grid;
        gap: 0.25rem;
    }

    .trade-section__heading > p {
        color: var(--color-text-muted);
        font-size: 0.88rem;
    }

    .trade-related-links {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: 0.75rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .trade-related-links a {
        display: grid;
        min-height: 48px;
        padding: 0.75rem 0.9rem;
        align-content: center;
        border: 1px solid var(--color-border);
        background: var(--color-surface-alt);
        font-weight: 750;
        text-decoration: none;
    }

    .trade-kpi-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .trade-kpi {
        display: grid;
        min-width: 0;
        gap: 0.65rem;
        padding: 1.1rem;
        border: 1px solid var(--color-border);
        border-top: 3px solid var(--color-primary);
        background: var(--color-surface-alt);
    }

    .trade-kpi h3 {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .trade-kpi__value {
        color: var(--color-primary-strong);
        font-family: var(--font-serif);
        font-size: clamp(1.65rem, 3vw, 2.35rem);
        line-height: 1;
    }

    .trade-kpi__meta,
    .trade-kpi__source,
    .trade-method-note {
        overflow-wrap: anywhere;
        color: var(--color-text-muted);
        font-size: 0.84rem;
        line-height: 1.55;
    }

    .trade-kpi__source {
        color: var(--color-primary);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .trade-unavailable {
        display: grid;
        gap: 0.4rem;
        padding: 1rem;
        border: 1px dashed color-mix(in srgb, var(--color-text-muted), transparent 45%);
        background: var(--color-surface-alt);
        color: var(--color-text-muted);
        line-height: 1.55;
    }

    .trade-unavailable strong {
        color: var(--color-text);
    }

    .trade-trend-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.75fr);
        min-width: 0;
        gap: 1.25rem;
    }

    .trade-chart-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 1rem;
        margin-bottom: 0.65rem;
        color: var(--color-text-muted);
        font-size: 0.82rem;
    }

    .trade-chart-legend__item {
        display: inline-flex;
        min-width: 0;
        align-items: center;
        gap: 0.45rem;
    }

    .trade-chart-legend__item > span {
        width: 2rem;
        border-top: 3px solid var(--trade-export);
    }

    .trade-chart-legend__item--import > span {
        border-top-color: var(--trade-import);
        border-top-style: dashed;
    }

    .trade-chart-legend__item.is-muted,
    .trade-chart__line.is-muted {
        opacity: 0.22;
    }

    .trade-chart {
        display: block;
        width: 100%;
        min-width: 0;
        height: auto;
        border: 1px solid var(--color-border);
        background: var(--color-surface-alt);
    }

    .trade-chart__axis {
        stroke: var(--color-text-muted);
        stroke-width: 1;
    }

    .trade-chart__grid {
        stroke: var(--color-border);
        stroke-width: 1;
    }

    .trade-chart__line {
        fill: none;
        stroke: var(--trade-export);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 5;
    }

    .trade-chart__line--import {
        stroke: var(--trade-import);
        stroke-dasharray: 10 8;
    }

    .trade-chart__axis-title {
        fill: var(--color-text-muted);
        font-family: var(--font-sans);
        font-size: 14px;
    }

    .trade-chart-years {
        display: flex;
        justify-content: space-between;
        padding: 0.4rem 0.5rem 0;
        color: var(--color-text-muted);
        font-size: 0.75rem;
        text-align: center;
    }

    .trade-trend-copy {
        display: grid;
        align-content: start;
        gap: 0.8rem;
        padding-left: 1.25rem;
        border-left: 1px solid var(--color-border);
        color: var(--color-text-muted);
        line-height: 1.6;
    }

    .trade-trend-copy h3 {
        color: var(--color-text);
        font-family: var(--font-sans);
        font-size: 1rem;
    }

    .trade-trend-copy summary {
        min-height: 44px;
        color: var(--color-link);
        cursor: pointer;
        font-weight: 700;
    }

    .trade-table-scroll {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: auto;
        padding-bottom: 0.35rem;
    }

    .trade-table-scroll table {
        min-width: 36rem;
        border-collapse: collapse;
        font-size: 0.78rem;
    }

    .trade-table-scroll caption {
        padding-block: 0.5rem;
        text-align: left;
    }

    .trade-table-scroll :is(th, td) {
        padding: 0.45rem;
        border: 1px solid var(--color-border);
        text-align: left;
        white-space: nowrap;
    }

    .trade-two-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        gap: 1rem;
        align-items: start;
    }

    .trade-two-column > :only-child {
        grid-column: 1 / -1;
    }

    .trade-two-column > .trade-section {
        align-self: start;
    }

    .trade-context-list {
        display: grid;
        gap: 0;
        margin: 0;
    }

    .trade-context-list > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
        padding-block: 0.7rem;
        border-bottom: 1px solid var(--color-border);
    }

    .trade-context-list dt {
        overflow-wrap: anywhere;
        color: var(--color-text-muted);
    }

    .trade-context-list dd {
        margin: 0;
        color: var(--color-text);
        font-weight: 800;
        text-align: right;
    }

    .trade-provenance dl {
        display: grid;
        gap: 0;
        margin: 0;
    }

    .trade-provenance dl > div {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        gap: 1rem;
        padding-block: 0.7rem;
        border-bottom: 1px solid var(--color-border);
    }

    .trade-provenance dt {
        color: var(--color-text-muted);
        font-weight: 700;
    }

    .trade-provenance dd {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
    }

    .trade-provenance__footnote {
        color: var(--color-text-muted);
        font-size: 0.84rem;
        line-height: 1.55;
    }

    .trade-local-nav,
    .trade-control-group {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
    }

    .trade-local-nav {
        width: fit-content;
        max-width: 100%;
        border: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .trade-local-selector {
        display: grid;
        gap: 0.45rem;
    }

    .trade-local-nav__link,
    .trade-control {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0.55rem 0.8rem;
        border-right: 1px solid var(--color-border);
        color: var(--color-text);
        font-size: 0.84rem;
        font-weight: 750;
        text-decoration: none;
    }

    .trade-local-nav__link:last-child,
    .trade-control:last-child {
        border-right: 0;
    }

    .trade-local-nav__link:is(:hover, :focus-visible),
    .trade-control:is(:hover, :focus-visible),
    .trade-local-nav__link.is-active,
    .trade-control.is-active {
        background: var(--color-primary-strong);
        color: var(--color-surface);
    }

    .trade-history-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem 1rem;
        align-items: center;
    }

    .trade-control-group {
        border: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .trade-history-custom,
    .trade-ranking-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        gap: 0.75rem;
        align-items: end;
        padding: 1rem;
        background: var(--color-surface-soft);
    }

    .trade-history-custom label,
    .trade-ranking-controls label,
    .trade-product-search {
        display: grid;
        min-width: 0;
        gap: 0.4rem;
        color: var(--color-text-muted);
        font-size: 0.82rem;
        font-weight: 700;
    }

    .trade-history-custom input,
    .trade-ranking-controls :is(input, select),
    .trade-product-search input {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 0.65rem 0.7rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        color: var(--color-text);
        font: inherit;
    }

    .trade-chart-interactive {
        position: relative;
        min-width: 0;
    }

    .trade-chart-interactive:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--color-focus), transparent 25%);
        outline-offset: 4px;
    }

    .trade-chart__line--trade {
        stroke: var(--color-text);
        stroke-width: 3;
    }

    .trade-chart__line--balance {
        stroke: var(--color-primary-strong);
        stroke-width: 4;
    }

    .trade-chart__point {
        fill: var(--color-surface);
        stroke-width: 3;
    }

    .trade-chart__point--export,
    .trade-chart__point--balance {
        stroke: var(--trade-export);
    }

    .trade-chart__point--import {
        stroke: var(--trade-import);
    }

    .trade-chart__point--trade {
        stroke: var(--color-text);
    }

    .trade-chart-legend__item--trade > span {
        border-top-color: var(--color-text);
        border-top-width: 2px;
    }

    .trade-chart-legend__item--balance > span {
        border-top-color: var(--color-primary-strong);
    }

    .trade-chart__zero {
        stroke: var(--color-text);
        stroke-width: 1.5;
    }

    .trade-chart__crosshair {
        stroke: var(--color-text-muted);
        stroke-dasharray: 4 4;
        stroke-width: 1;
        pointer-events: none;
    }

    .trade-chart__tick-label {
        fill: var(--color-text-muted);
        font-family: var(--font-sans);
        font-size: 11px;
    }

    .trade-chart-tooltip {
        min-height: 3.25rem;
        padding: 0.7rem 0.8rem;
        border: 1px solid var(--color-border);
        border-top: 0;
        background: var(--color-surface);
        color: var(--color-text);
        font-size: 0.82rem;
        line-height: 1.5;
    }

    .trade-chart-stepper {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        margin-top: 0.7rem;
    }

    .trade-chart-stepper button {
        min-width: 7rem;
        min-height: 44px;
        padding: 0.55rem 0.8rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        color: var(--color-link);
        cursor: pointer;
        font: inherit;
        font-weight: 750;
    }

    .trade-chart-stepper button:disabled {
        opacity: 0.45;
        cursor: default;
    }

    .trade-history-table summary {
        min-height: 44px;
        color: var(--color-link);
        cursor: pointer;
        font-weight: 750;
    }

    .trade-history-table {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    :is(.trade-ranking-list, .trade-product-list) {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .trade-product-totals {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 0.85rem 0 0.45rem;
    }

    .trade-product-totals > div {
        min-width: 0;
        padding: 0.75rem;
        border: 1px solid var(--color-border);
        background: var(--color-surface-alt);
    }

    .trade-product-totals dt,
    .trade-product-totals small {
        display: block;
        color: var(--color-text-muted);
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .trade-product-totals dd {
        min-width: 0;
        margin: 0.25rem 0 0;
        overflow-wrap: anywhere;
    }

    .trade-product-totals strong {
        color: var(--color-primary-strong);
        font-variant-numeric: tabular-nums;
    }

    :is(.trade-ranking-list, .trade-product-list) li {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        gap: 0.75rem;
        align-items: center;
        min-height: 52px;
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--color-border);
    }

    :is(.trade-ranking-list__rank, .trade-product-list__rank) {
        color: var(--color-text-muted);
        font-variant-numeric: tabular-nums;
        font-weight: 800;
        text-align: center;
    }

    :is(.trade-ranking-list, .trade-product-list) a {
        display: grid;
        min-height: 44px;
        align-content: center;
        min-width: 0;
        overflow-wrap: anywhere;
        font-weight: 750;
    }

    .trade-ranking-list small {
        display: block;
        color: var(--color-text-muted);
        font-weight: 600;
    }

    .trade-product-list small {
        display: block;
        margin-top: 0.15rem;
        color: var(--color-text-muted);
        font-weight: 600;
    }

    :is(.trade-ranking-list, .trade-product-list) li > :last-child {
        display: grid;
        gap: 0.15rem;
        text-align: right;
    }

    .trade-ranking-list--compact li:nth-child(n + 6) {
        background: var(--color-surface-alt);
    }

    /* HS2 → HS4 and HS4 product cards (#1129) */
    .trade-hero-back {
        justify-self: start;
    }

    /* A long parent name wraps instead of widening the page (it matters on phones). */
    .resources-trade-statistics .trade-hero-back {
        max-width: 100%;
        white-space: normal;
    }

    .trade-hero-note {
        max-width: 50rem;
        margin: 0;
        color: var(--color-text-muted);
        line-height: 1.55;
    }

    /* The official MOC wording stays visible beneath TRCC's own description. */
    .trade-hero-official {
        max-width: 50rem;
        margin: 0;
        color: var(--color-text-muted);
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .trade-hero-official span {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .trade-filters-disclosure > summary {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem 1rem;
        min-height: 44px;
        padding: 0.65rem clamp(1rem, 2vw, 1.3rem);
        background: var(--color-surface-soft);
        color: var(--color-text);
        font-weight: 600;
        cursor: pointer;
    }

    .trade-filters-disclosure__action {
        color: var(--color-link);
        text-decoration: underline;
    }

    .trade-filters-disclosure__action::after {
        content: " ▾" / "";
    }

    .trade-filters-disclosure[open] .trade-filters-disclosure__action::after {
        content: " ▴" / "";
    }

    /* The disclosure summary already names the selection; keep the form heading for assistive tech only. */
    .trade-filters-disclosure .trade-filters__heading {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .trade-two-column--products > .trade-section {
        align-self: stretch;
        align-content: start;
    }

    .trade-product-totals--single {
        grid-template-columns: minmax(0, 1fr);
    }

    /* One row style for every ranking and product list (#1129). */
    :is(.trade-ranking-list, .trade-product-list) a {
        color: var(--color-link);
        font-weight: 600;
        text-decoration: none;
    }

    :is(.trade-ranking-list, .trade-product-list) a strong {
        font-weight: 600;
    }

    :is(.trade-ranking-list, .trade-product-list) a:is(:hover, :focus-visible) {
        text-decoration: underline;
    }

    .trade-kpi__exact {
        margin: -0.35rem 0 0;
        color: var(--color-text-muted);
        font-size: 0.8rem;
        font-variant-numeric: tabular-nums;
    }

    .trade-product-list__value {
        min-width: 8rem;
    }

    .trade-product-list__value > strong {
        font-variant-numeric: tabular-nums;
    }

    .trade-product-list__share {
        --trade-share-color: var(--trade-export);
        width: 100%;
        max-width: 10rem;
        height: 0.375rem;
        justify-self: end;
        border: 0;
        background: var(--color-border);
        color: var(--trade-share-color);
        appearance: none;
    }

    .trade-section--import .trade-product-list__share {
        --trade-share-color: var(--trade-import);
    }

    .trade-product-list__share::-webkit-progress-bar {
        background: var(--color-border);
    }

    .trade-product-list__share::-webkit-progress-value {
        background: var(--trade-share-color);
    }

    .trade-product-list__share::-moz-progress-bar {
        background: var(--trade-share-color);
    }

    /* HS code path, chapter siblings and product search (#1129). */
    .trade-hs-trail ol {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        color: var(--color-text-muted);
        font-size: 0.875rem;
    }

    .trade-hs-trail li:not(:last-child)::after {
        content: "›" / "";
        margin-left: 0.5rem;
    }

    .trade-hs-trail a {
        color: var(--color-link);
    }

    .trade-hs-siblings {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .trade-hs-siblings a {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 44px;
        padding: 0.35rem 0.75rem;
        border: 1px solid var(--color-border);
        background: var(--color-surface-alt);
        color: var(--color-link);
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    .trade-hs-siblings a:is(:hover, :focus-visible) {
        text-decoration: underline;
    }

    /* Long official MOC text stays at two lines in lists and chips; the product page shows it in full. */
    .trade-product-list .trade-product-list__official,
    .trade-hs-siblings__name {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .trade-hs-siblings__code {
        color: var(--color-text-muted);
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Choice and search rows carry no value column: keep the text left-aligned. */
    .trade-product-list--choice li {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .trade-product-list--choice li > :last-child {
        text-align: left;
    }

    .trade-product-finder {
        display: grid;
        gap: 0.4rem;
    }

    .trade-product-finder__row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .trade-product-finder input {
        flex: 1 1 16rem;
        min-width: 0;
        min-height: 44px;
        padding: 0.45rem 0.7rem;
        border: 1px solid var(--color-border);
    }

    /* Sector treemap and list (#1129). */
    .trade-sector--1 { --trade-sector: var(--trade-sector-1); }
    .trade-sector--2 { --trade-sector: var(--trade-sector-2); }
    .trade-sector--3 { --trade-sector: var(--trade-sector-3); }
    .trade-sector--4 { --trade-sector: var(--trade-sector-4); }
    .trade-sector--5 { --trade-sector: var(--trade-sector-5); }
    .trade-sector--6 { --trade-sector: var(--trade-sector-6); }
    .trade-sector--7 { --trade-sector: var(--trade-sector-7); }
    .trade-sector--8 { --trade-sector: var(--trade-sector-8); }
    .trade-sector--9 { --trade-sector: var(--trade-sector-9); }
    .trade-sector--10 { --trade-sector: var(--trade-sector-10); }
    .trade-sector--11 { --trade-sector: var(--trade-sector-11); }
    .trade-sector--12 { --trade-sector: var(--trade-sector-12); }
    .trade-sector--13 { --trade-sector: var(--trade-sector-13); }
    .trade-sector--14 { --trade-sector: var(--trade-sector-14); }

    .trade-sectors__direction {
        display: grid;
        gap: 0.9rem;
    }

    .trade-sectors__heading {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: end;
        gap: 0.5rem 1rem;
    }

    .trade-sectors__heading h3 {
        margin: 0;
    }

    .trade-sectors__total {
        display: grid;
        margin: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .trade-sectors__total strong {
        font-size: 1.35rem;
    }

    .trade-sectors__total small {
        color: var(--color-text-muted);
        font-size: 0.8rem;
    }

    .trade-treemap {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        background: var(--color-surface);
    }

    .trade-treemap__frame {
        fill: var(--trade-sector);
    }

    .trade-treemap__strip {
        fill: var(--trade-sector);
        filter: brightness(0.8);
    }

    .trade-treemap__tile {
        fill: var(--trade-sector);
        stroke: rgb(255 255 255 / 0.55);
        stroke-width: 1.5;
    }

    .trade-treemap__tile--other {
        fill: color-mix(in srgb, var(--trade-sector) 75%, #fff);
        stroke-dasharray: 4 3;
    }

    .trade-treemap a:is(:hover, :focus-visible) .trade-treemap__tile {
        filter: brightness(1.15);
        stroke: #fff;
        stroke-width: 3;
    }

    .trade-treemap__code {
        fill: #fff;
        font-size: 15px;
        font-weight: 600;
        pointer-events: none;
    }

    .trade-treemap__sector {
        fill: #fff;
        font-size: 17px;
        font-weight: 700;
        pointer-events: none;
    }

    .trade-sector-bar {
        display: none;
        width: 100%;
        height: 2rem;
    }

    .trade-sector-bar__segment {
        fill: var(--trade-sector);
        stroke: var(--color-surface);
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
    }

    .trade-sector-list,
    .trade-sector-list__chapters {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .trade-sector-list__item {
        border-bottom: 1px solid var(--color-border);
    }

    .trade-sector-list summary {
        display: grid;
        grid-template-columns: 1rem minmax(0, 1fr) auto;
        gap: 0.75rem;
        align-items: center;
        min-height: 52px;
        padding: 0.5rem 0;
        cursor: pointer;
        list-style: none;
    }

    .trade-sector-list summary::-webkit-details-marker {
        display: none;
    }

    .trade-sector-list__toggle::after {
        content: "▾" / "";
        margin-left: 0.35rem;
        color: var(--color-link);
    }

    .trade-sector-list details[open] .trade-sector-list__toggle::after {
        content: "▴" / "";
    }

    .trade-sector-list__swatch {
        width: 1rem;
        height: 1rem;
        background: var(--trade-sector);
    }

    .trade-sector-list__name small {
        display: block;
        color: var(--color-text-muted);
        font-weight: 600;
    }

    .trade-sector-list .trade-product-list__value {
        display: grid;
        gap: 0.15rem;
        min-width: 9rem;
        text-align: right;
    }

    .trade-sector-list .trade-product-list__share {
        --trade-share-color: var(--trade-sector);
    }

    .trade-sector-list__chapters {
        padding: 0 0 0.75rem 1.75rem;
    }

    .trade-sector-list__chapters li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.25rem 1rem;
        align-items: center;
        padding: 0.35rem 0;
        border-top: 1px dashed var(--color-border);
    }

    .trade-sector-list__chapters a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--color-link);
        text-decoration: none;
    }

    .trade-sector-list__chapters a:is(:hover, :focus-visible) {
        text-decoration: underline;
    }

    @media (min-width: 64rem) {
        .trade-sector-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 2rem;
            align-items: start;
        }
    }

    .trade-pagination {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 1rem;
        align-items: center;
        min-height: 44px;
        color: var(--color-text-muted);
        font-size: 0.84rem;
        text-align: center;
    }

    .trade-pagination a:first-child {
        justify-self: start;
    }

    .trade-pagination a:last-child {
        justify-self: end;
    }

    .trade-pagination a {
        display: inline-grid;
        min-height: 44px;
        padding: 0.45rem 0.35rem;
        align-items: center;
    }
}

@layer overrides {
    .resources-trade-statistics :is(a, button, select, summary):focus-visible {
        outline: 3px solid color-mix(in srgb, var(--color-focus), transparent 25%);
        outline-offset: 3px;
    }

    @media (max-width: 64rem) {
        .trade-filters {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .trade-trend-layout {
            grid-template-columns: 1fr;
        }

        .trade-trend-copy {
            padding-top: 1rem;
            padding-left: 0;
            border-top: 1px solid var(--color-border);
            border-left: 0;
        }

        .trade-history-custom,
        .trade-ranking-controls {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .trade-history-custom .btn,
        .trade-ranking-controls .btn {
            justify-self: start;
        }
    }

    @media (max-width: 48rem) {
        .trade-two-column {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 38rem) {
        .trade-scope-nav {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .trade-scope-nav__link:nth-child(2) {
            border-right: 0;
        }

        .trade-scope-nav__link:nth-child(-n + 2) {
            border-bottom: 1px solid var(--color-border);
        }

        .trade-filters,
        .trade-kpi-grid,
        .trade-two-column,
        .trade-product-totals {
            grid-template-columns: 1fr;
        }

        .trade-filters__submit {
            width: 100%;
        }

        .trade-section__heading {
            align-items: start;
        }

        .trade-provenance dl > div,
        .trade-context-list > div {
            grid-template-columns: 1fr;
            gap: 0.25rem;
        }

        .trade-history-custom,
        .trade-ranking-controls {
            grid-template-columns: 1fr;
        }

        .trade-history-custom .btn,
        .trade-ranking-controls .btn,
        .trade-chart-stepper > * {
            width: 100%;
        }

        .trade-chart__tick-label--x:not(.is-mobile-tick) {
            display: none;
        }

        .trade-chart-tooltip {
            min-height: 4.5rem;
        }

        :is(.trade-ranking-list, .trade-product-list) li {
            grid-template-columns: 2rem minmax(0, 1fr);
        }

        :is(.trade-ranking-list, .trade-product-list) li > :last-child {
            grid-column: 2;
            text-align: left;
        }

        .trade-product-list__share {
            justify-self: start;
        }

        .trade-sector-list summary {
            grid-template-columns: 1rem minmax(0, 1fr);
        }

        .trade-sector-list .trade-product-list__value {
            grid-column: 2;
            text-align: left;
        }

        /* On a phone the chapter treemap is unreadable: show the 100% sector bar and the list. */
        .trade-treemap {
            display: none;
        }

        .trade-sector-bar {
            display: block;
        }

        .trade-sectors__total {
            text-align: left;
        }

        .trade-sector-list__chapters {
            padding-left: 1.75rem;
        }

        .trade-sector-list__chapters li {
            grid-template-columns: minmax(0, 1fr);
        }

        .trade-sector-list__chapters .trade-product-list__value {
            grid-column: 1;
            min-width: 0;
            text-align: left;
        }

        .trade-context-list dd {
            text-align: left;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .resources-trade-statistics *,
        .resources-trade-statistics *::before,
        .resources-trade-statistics *::after {
            scroll-behavior: auto !important;
            transition-duration: 0.01ms !important;
        }
    }
}