.trend-performance-shell {
    --tp-navy: #071d33;
    --tp-blue: #075487;
    --tp-green: #078352;
    --tp-red: #bf452d;
    --tp-gold: #ab6b00;
    --tp-line: #cbd9e6;
    --tp-pale: #f2f7fa;
    display: grid;
    width: min(1600px, calc(100% - 2rem));
    gap: 1rem;
    margin: 1rem auto 2.5rem;
}

.trend-performance-shell h2,
.trend-performance-shell h3,
.trend-performance-shell p {
    margin-top: 0;
}

.trend-performance-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.34fr);
    overflow: hidden;
    border-top: 5px solid var(--tp-navy);
    border-bottom: 1px solid var(--tp-line);
    background:
        radial-gradient(circle at 70% 18%, rgb(54 180 137 / 0.14), transparent 26rem),
        linear-gradient(115deg, #fff 0 64%, #edf5f8 100%);
}

.trend-hero-copy {
    min-width: 0;
    padding: clamp(1.4rem, 2.4vw, 2.8rem);
}

.trend-hero-copy h1 {
    max-width: 64rem;
    margin: 0.15rem 0 0.7rem;
    font-size: clamp(2.5rem, 4.2vw, 5.25rem);
    line-height: 0.94;
}

.trend-hero-description {
    max-width: 75rem;
    margin-bottom: 1rem;
    color: #29465f;
    font-size: clamp(0.96rem, 1.12vw, 1.18rem);
    font-weight: 650;
    line-height: 1.48;
}

.trend-universe-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trend-universe-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #9fb4c8;
    background: #fff;
    padding: 0.56rem 0.75rem;
    color: var(--tp-navy);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    text-decoration: none;
    text-transform: uppercase;
}

.trend-universe-switch:hover,
.trend-universe-switch:focus-visible {
    border-color: var(--tp-green);
    color: var(--tp-green);
    outline: 3px solid rgb(7 131 82 / 0.13);
}

.trend-universe-switch svg {
    width: 0.9rem;
    height: 0.9rem;
}

.trend-performance-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    border-left: 1px solid var(--tp-line);
    background: rgb(242 247 250 / 0.78);
}

.trend-market-picker,
.trend-meta-value,
.trend-meta-date,
.trend-integrity {
    min-width: 0;
    padding: 1rem;
    border-right: 1px solid var(--tp-line);
    border-bottom: 1px solid var(--tp-line);
}

.trend-market-picker {
    grid-column: 1 / -1;
}

.trend-meta-date {
    grid-column: 1 / -1;
}

.trend-integrity {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
    background: #edf8f2;
}

.trend-meta-label,
.trend-country-form label,
.trend-record-metrics span,
.trend-stat-head > span,
.trend-operations span {
    color: #567088;
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.115em;
    text-transform: uppercase;
}

.trend-market-name,
.trend-meta-value strong,
.trend-meta-date strong {
    display: block;
    margin-top: 0.22rem;
    color: var(--tp-navy);
    font-family: "Source Serif 4", serif;
    font-size: 1.35rem;
    line-height: 1.05;
}

.trend-meta-value strong {
    font-size: 2rem;
}

.trend-performance-meta small {
    display: block;
    margin-top: 0.3rem;
    color: #6a7e92;
    font-size: 0.72rem;
    font-weight: 700;
}

.trend-country-form {
    display: grid;
    gap: 0.3rem;
}

.trend-country-form select {
    width: 100%;
    min-height: 2.4rem;
    border: 1px solid #9fb4c8;
    background: #fff;
    color: var(--tp-navy);
    font: inherit;
    font-weight: 800;
}

.trend-integrity summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.1rem 0.55rem;
    align-content: center;
    min-height: 100%;
    padding: 1rem;
    color: #075f3f;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 900;
    list-style: none;
}

.trend-integrity summary::-webkit-details-marker {
    display: none;
}

.trend-integrity summary small {
    grid-column: 2;
    margin: 0;
    color: #4e7666;
}

.trend-status-dot {
    width: 0.6rem;
    height: 0.6rem;
    margin-top: 0.28rem;
    border-radius: 50%;
    background: #13ad70;
    box-shadow: 0 0 0 4px rgb(19 173 112 / 0.12);
}

.trend-integrity.is-attention {
    background: #fff5e7;
}

.trend-integrity.is-attention summary {
    color: #8c5100;
}

.trend-integrity.is-attention .trend-status-dot,
.trend-integrity.is-pending .trend-status-dot {
    background: #d27d00;
    box-shadow: 0 0 0 4px rgb(210 125 0 / 0.13);
}

.trend-integrity[open] ul,
.trend-integrity[open] p {
    position: absolute;
    z-index: 5;
    width: min(24rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.8rem 1rem;
    border: 1px solid #a8bfaf;
    background: #fff;
    box-shadow: 0 1rem 2rem rgb(7 29 51 / 0.16);
    list-style: none;
}

.trend-integrity li {
    display: flex;
    gap: 0.45rem;
    padding: 0.24rem 0;
    color: #29465f;
    font-size: 0.76rem;
    font-weight: 750;
}

.trend-integrity li.is-pass span {
    color: var(--tp-green);
}

.trend-performance-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.31fr);
    gap: 1rem;
}

.trend-chart-panel,
.trend-record-summary,
.trend-week-panel,
.trend-holdings-panel,
.trend-transactions-panel,
.trend-explainer {
    border: 1px solid var(--tp-line);
    background: #fff;
}

.trend-chart-panel,
.trend-record-summary {
    min-width: 0;
}

.trend-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.15rem 0.8rem;
    border-bottom: 1px solid var(--tp-line);
}

.trend-section-heading h2,
.trend-record-summary-head h2 {
    margin: 0.12rem 0 0;
    font-size: clamp(1.55rem, 2.3vw, 2.55rem);
    line-height: 1;
}

.trend-section-heading p:not(.intel-kicker) {
    max-width: 57rem;
    margin: 0.45rem 0 0;
    color: #526b81;
    font-size: 0.84rem;
    font-weight: 700;
}

.trend-section-heading.is-compact {
    align-items: center;
}

.trend-section-heading.is-compact h2 {
    font-size: clamp(1.45rem, 1.9vw, 2rem);
}

.trend-chart-legend {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 0.7rem;
    color: #415c74;
    font-size: 0.72rem;
    font-weight: 800;
}

.trend-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.trend-chart-legend i {
    width: 1.4rem;
    border-top: 3px solid var(--tp-blue);
}

.trend-chart-legend i.is-benchmark {
    border-color: #8798aa;
    border-top-style: dashed;
}

.trend-chart-figure {
    margin: 0;
}

.trend-chart-wrap {
    min-height: 30rem;
    background: linear-gradient(180deg, #f7fbfd 0, #fff 100%);
}

.trend-index-chart {
    display: block;
    width: 100%;
    height: 30rem;
}

.trend-chart-figure figcaption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--tp-line);
    color: #60768a;
    font-size: 0.72rem;
    font-weight: 750;
}

.trend-chart-figure figcaption a {
    font-weight: 900;
}

.trend-record-summary {
    overflow: hidden;
    border-top: 5px solid var(--tp-green);
    background: linear-gradient(150deg, #fff, #f0f8f4);
}

.trend-record-summary-head {
    padding: 1rem;
    border-bottom: 1px solid var(--tp-line);
}

.trend-record-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trend-record-metrics > div {
    min-width: 0;
    min-height: 8.25rem;
    padding: 0.9rem;
    border-right: 1px solid var(--tp-line);
    border-bottom: 1px solid var(--tp-line);
}

.trend-record-metrics strong {
    display: block;
    margin-top: 0.45rem;
    color: var(--tp-navy);
    font-family: "Source Serif 4", serif;
    font-size: clamp(1.55rem, 2.1vw, 2.15rem);
    line-height: 1;
}

.trend-record-metrics small,
.trend-stat small,
.trend-operations small {
    display: block;
    margin-top: 0.38rem;
    color: #667d92;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

.trend-performance-stats,
.trend-operations {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 3px solid var(--tp-navy);
    border-right: 1px solid var(--tp-line);
    border-bottom: 1px solid var(--tp-line);
}

.trend-stat,
.trend-operations article {
    position: relative;
    min-width: 0;
    min-height: 7.1rem;
    padding: 0.85rem 2.35rem 0.85rem 0.9rem;
    border-left: 1px solid var(--tp-line);
    background: #fff;
}

.trend-stat.is-primary {
    background: #eef8f3;
}

.trend-stat strong,
.trend-operations strong {
    display: block;
    margin-top: 0.48rem;
    color: var(--tp-navy);
    font-family: "Source Serif 4", serif;
    font-size: clamp(1.45rem, 2vw, 2.25rem);
    line-height: 1;
}

.trend-kpi-help,
.trend-kpi-modal-head button {
    display: inline-grid;
    place-items: center;
    border: 1px solid #9eb2c5;
    background: #fff;
    color: var(--tp-navy);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.trend-kpi-help {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    font-size: 0.7rem;
}

.trend-kpi-help:hover,
.trend-kpi-help:focus-visible {
    border-color: var(--tp-green);
    outline: 3px solid rgb(7 131 82 / 0.12);
}

.trend-kpi-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(3 18 32 / 0.56);
}

.trend-kpi-modal[hidden] {
    display: none;
}

.trend-kpi-modal-card {
    width: min(32rem, 100%);
    border: 1px solid #9eb2c5;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgb(3 18 32 / 0.28);
}

.trend-kpi-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--tp-line);
    background: var(--tp-pale);
}

.trend-kpi-modal-head h2 {
    margin: 0;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1rem;
}

.trend-kpi-modal-head button {
    width: 1.75rem;
    height: 1.75rem;
}

.trend-kpi-modal-card p {
    margin: 0;
    padding: 1rem;
    color: #405b73;
    font-weight: 650;
    line-height: 1.55;
}

.trend-week-overview {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.trend-week-overview span {
    border: 1px solid var(--tp-line);
    background: var(--tp-pale);
    padding: 0.4rem 0.55rem;
    color: #516a80;
    font-size: 0.73rem;
    font-weight: 800;
}

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

.trend-week-column {
    min-width: 0;
}

.trend-week-column + .trend-week-column {
    border-left: 1px solid var(--tp-line);
}

.trend-week-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--tp-line);
    background: var(--tp-pale);
}

.trend-week-column.is-entry .trend-week-head {
    box-shadow: inset 4px 0 0 var(--tp-green);
}

.trend-week-column.is-exit .trend-week-head {
    box-shadow: inset 4px 0 0 var(--tp-red);
}

.trend-week-head h3 {
    margin: 0;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trend-week-head small {
    color: #62798e;
    font-size: 0.71rem;
    font-weight: 700;
}

.trend-week-head span {
    color: var(--tp-navy);
    font-family: "Source Serif 4", serif;
    font-size: 1.45rem;
    font-weight: 700;
}

.trend-week-list {
    display: grid;
    max-height: 26rem;
    overflow: auto;
}

.trend-week-item {
    display: grid;
    grid-template-columns: minmax(9rem, 0.65fr) minmax(4.5rem, 0.2fr) minmax(0, 1fr);
    gap: 0.4rem 0.7rem;
    align-items: baseline;
    padding: 0.68rem 0.9rem;
    border-bottom: 1px solid #dde6ee;
    background: #fff;
}

.trend-week-item:nth-child(even) {
    background: #fbfdfe;
}

.trend-week-item > span {
    font-weight: 900;
    text-align: right;
}

.trend-week-item small,
.trend-row small,
.trend-tx-row small {
    display: block;
    overflow: hidden;
    color: #60768a;
    font-size: 0.72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trend-week-item > small:last-child {
    grid-column: 3;
}

.trend-operations {
    border-top-color: #8094a7;
}

.trend-operations article {
    min-height: 6.2rem;
    padding-right: 0.9rem;
    background: #f8fbfc;
}

.trend-operations strong {
    font-size: 1.4rem;
}

.trend-holdings-grid,
.trend-transaction-grid {
    display: grid;
}

.trend-row,
.trend-tx-row {
    display: grid;
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
    padding: 0.62rem 0.85rem;
    border-bottom: 1px solid #dde6ee;
    background: #fff;
    font-size: 0.79rem;
}

.trend-row:nth-child(odd),
.trend-tx-row:nth-child(odd) {
    background: #f9fbfc;
}

.trend-row {
    grid-template-columns: minmax(10rem, 1.3fr) repeat(7, minmax(5rem, 0.6fr));
}

.trend-tx-row {
    grid-template-columns: minmax(6.5rem, 0.6fr) minmax(5rem, 0.42fr) minmax(10rem, 1.1fr) minmax(5rem, 0.44fr) minmax(10rem, 0.95fr) minmax(5rem, 0.44fr) minmax(11rem, 1fr);
}

.trend-head {
    border-bottom-color: #b7c8d7;
    background: #eaf1f5 !important;
    color: #526b81;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.095em;
    text-transform: uppercase;
}

.trend-row > div,
.trend-tx-row > div {
    min-width: 0;
    font-weight: 750;
}

.trend-action,
.trend-new-position {
    display: inline-flex;
    min-width: 4.2rem;
    justify-content: center;
    padding: 0.28rem 0.45rem;
    border: 1px solid var(--tp-line);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trend-action.is-entry,
.trend-new-position {
    border-color: rgb(7 131 82 / 0.3);
    background: #edf8f2;
    color: var(--tp-green);
}

.trend-action.is-exit {
    border-color: rgb(191 69 45 / 0.28);
    background: #fff2ef;
    color: var(--tp-red);
}

.trend-pagination {
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--tp-line);
}

.trend-explainer {
    padding: 0;
}

.trend-explainer > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    list-style: none;
}

.trend-explainer > summary::-webkit-details-marker {
    display: none;
}

.trend-explainer > summary h2 {
    margin: 0.12rem 0 0;
    font-size: 1.55rem;
}

.trend-explainer > summary > span {
    color: var(--tp-blue);
    font-size: 0.78rem;
    font-weight: 900;
}

.trend-explainer > summary > span::after {
    margin-left: 0.45rem;
    content: "+";
}

.trend-explainer[open] > summary > span::after {
    content: "−";
}

.trend-explainer-body {
    display: grid;
    gap: 0.8rem;
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--tp-line);
}

.trend-method-intro {
    max-width: 78rem;
    margin: 0.9rem 0 0;
    color: #3e5870;
    font-size: 0.88rem;
    font-weight: 700;
}

.trend-method-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.trend-method-card {
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid var(--tp-line);
    background: #f9fbfc;
}

.trend-method-card > span,
.trend-method-assumptions > span {
    color: #5d7388;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.trend-method-card h3 {
    margin: 0.25rem 0 0.35rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.85rem;
}

.trend-method-card p {
    margin: 0;
    color: #526b81;
    font-size: 0.79rem;
    font-weight: 650;
    line-height: 1.48;
}

.trend-method-assumptions {
    display: grid;
    grid-template-columns: minmax(8rem, 0.16fr) minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.8rem;
    border: 1px solid var(--tp-line);
    background: #f3f7f9;
}

.trend-method-assumptions ul {
    display: grid;
    gap: 0.32rem;
    margin: 0;
    padding-left: 1rem;
    color: #334e66;
    font-size: 0.78rem;
    font-weight: 700;
}

.trend-empty {
    padding: 1rem;
    background: #f7fafc;
    color: #5d7488;
    font-weight: 800;
}

.trend-disclosure {
    margin: 0;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--tp-line);
    border-bottom: 1px solid var(--tp-line);
    color: #62778a;
    font-size: 0.72rem;
    font-weight: 650;
}

.is-positive {
    color: var(--tp-green) !important;
}

.is-negative {
    color: var(--tp-red) !important;
}

@media (max-width: 1180px) {
    .trend-performance-hero,
    .trend-performance-dashboard {
        grid-template-columns: 1fr;
    }

    .trend-performance-meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-top: 1px solid var(--tp-line);
        border-left: 0;
    }

    .trend-market-picker,
    .trend-meta-date,
    .trend-integrity {
        grid-column: auto;
        grid-row: auto;
    }

    .trend-record-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .trend-record-metrics > div {
        min-height: auto;
    }

    .trend-method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trend-head {
        display: none;
    }

    .trend-row,
    .trend-tx-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .trend-row > div::before,
    .trend-tx-row > div::before {
        display: block;
        margin-bottom: 0.12rem;
        color: #6a7e91;
        content: attr(data-label);
        font-size: 0.66rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}

@media (max-width: 780px) {
    .trend-performance-shell {
        width: min(100% - 1rem, 1600px);
        margin-top: 0.5rem;
    }

    .trend-hero-copy {
        padding: 1.1rem;
    }

    .trend-performance-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trend-market-picker,
    .trend-meta-date {
        grid-column: 1 / -1;
    }

    .trend-integrity {
        grid-column: 2;
        grid-row: 2;
    }

    .trend-section-heading,
    .trend-section-heading.is-compact,
    .trend-explainer > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .trend-chart-legend,
    .trend-week-overview {
        justify-content: flex-start;
    }

    .trend-record-metrics,
    .trend-performance-stats,
    .trend-operations,
    .trend-week-grid,
    .trend-method-grid,
    .trend-method-assumptions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trend-week-column + .trend-week-column {
        border-top: 1px solid var(--tp-line);
        border-left: 0;
    }

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

    .trend-chart-wrap,
    .trend-index-chart {
        min-height: 22rem;
        height: 22rem;
    }

    .trend-week-item {
        grid-template-columns: minmax(8rem, 0.7fr) minmax(4rem, 0.3fr);
    }

    .trend-week-item > small:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .trend-performance-meta,
    .trend-record-metrics,
    .trend-performance-stats,
    .trend-operations,
    .trend-row,
    .trend-tx-row,
    .trend-method-grid,
    .trend-method-assumptions,
    .trend-week-item {
        grid-template-columns: 1fr;
    }

    .trend-market-picker,
    .trend-meta-date,
    .trend-integrity {
        grid-column: auto;
        grid-row: auto;
    }

    .trend-week-item > span {
        text-align: left;
    }

    .trend-week-item > small:last-child {
        grid-column: auto;
    }

    .trend-chart-wrap,
    .trend-index-chart {
        min-height: 18rem;
        height: 18rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trend-performance-shell * {
        scroll-behavior: auto !important;
    }
}