/* Mutual Fund Rankings — /funds.html
   Layout tokens (--bg, --card, --up, --indigo …) come from screener.css, which
   every page already loads. Only what's specific to this page lives here. */

.fx-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: -8px 0 20px;
    font-size: 12.5px;
    color: var(--muted);
}
.fx-meta b {
    color: var(--txt);
    font-weight: 600;
}
.fx-meta-dot {
    color: var(--faint);
}

/* ---------------------------------------------------------------- method */

.fx-method {
    position: relative;
    z-index: 1;
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-radius: var(--radius);
    margin-bottom: 18px;
    overflow: hidden;
}
.fx-method-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 14px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.fx-method-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.fx-method-sub {
    grid-column: 1;
    font-size: 12.5px;
    color: var(--muted);
}
.fx-method-chev {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: var(--muted);
    transition: transform 0.18s ease;
}
.fx-method-head[aria-expanded="true"] .fx-method-chev {
    transform: rotate(180deg);
}
.fx-method-body {
    padding: 0 20px 20px;
    border-top: 1px solid var(--card-brd);
}
.fx-method-lead {
    margin: 16px 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: #c3c7d6;
    max-width: 74ch;
}
.fx-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.fx-w {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    border-radius: 12px;
    padding: 12px 14px;
}
.fx-w-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.fx-w-name {
    font-size: 12.5px;
    font-weight: 700;
}
.fx-w-pct {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--indigo);
}
.fx-w-bar {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 8px;
    overflow: hidden;
}
.fx-w-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--indigo), var(--violet));
}
.fx-w-desc {
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--muted);
}
.fx-method-notes {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 9px;
}
.fx-method-notes li {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--muted);
}
.fx-method-notes b {
    color: #cdd2e2;
}

/* ------------------------------------------------------------------ tabs */

/* One unbroken rail of categories.
   Eleven tabs wrapped to a second line and read as two unrelated groups, so
   they now sit in a single scrolling track inside a segmented control. The
   track scrolls rather than wraps on narrow screens, with a fade on the right
   edge as the only hint that there is more — a visible scrollbar under a row
   of pills looks like a mistake. */
.fx-tabs-rail {
    position: relative;
    z-index: 1;
    margin: 22px 0 18px;
}
.fx-tabs-rail::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 46px;
    border-radius: 0 13px 13px 0;
    background: linear-gradient(90deg, rgba(15, 17, 32, 0), rgba(15, 17, 32, 0.92));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.fx-tabs-rail.overflowing::after {
    opacity: 1;
}
.fx-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.26);
    border: 1px solid var(--card-brd);
    border-radius: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.fx-tabs::-webkit-scrollbar {
    display: none;
}
.fx-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    padding: 8px 10px;
    font: 600 12px/1 "Inter", sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}
.fx-tab:hover {
    color: var(--txt);
    background: rgba(255, 255, 255, 0.06);
}
.fx-tab.on {
    color: #fff;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.32);
}
.fx-tab-n {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--faint);
}
.fx-tab.on .fx-tab-n {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.fx-tab:hover .fx-tab-n {
    color: var(--muted);
}

/* Sub-selector inside a category that holds several peer groups. Lighter than
   the main tabs so the hierarchy reads at a glance. */
.fx-subtabs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: -6px 0 18px;
}
/* An explicit `display` beats the browser's own `[hidden] { display: none }`,
   so anything here that sets one has to opt back in — otherwise .hidden = true
   silently does nothing and the sub-tabs follow you onto other categories. */
.fx-subtabs[hidden],
.fx-cathead[hidden] {
    display: none;
}
.fx-subtab-lead {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--faint);
    margin-right: 2px;
}
.fx-subtab {
    background: none;
    border: 1px solid var(--card-brd);
    border-radius: 8px;
    color: var(--muted);
    padding: 6px 11px;
    font: 600 12px/1 "Inter", sans-serif;
    cursor: pointer;
}
.fx-subtab:hover {
    color: var(--txt);
    background: rgba(255, 255, 255, 0.05);
}
.fx-subtab.on {
    color: var(--txt);
    border-color: rgba(99, 102, 241, 0.7);
    background: rgba(99, 102, 241, 0.14);
}

/* ------------------------------------------------------- category header */

.fx-cathead {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 26px;
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.fx-cathead h2 {
    margin: 0 0 6px;
    font-size: 17px;
    letter-spacing: -0.015em;
}
.fx-cathead p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 70ch;
}
.fx-bench {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.fx-bench div {
    text-align: right;
}
.fx-bench span {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--faint);
    margin-bottom: 3px;
    white-space: nowrap;
}
.fx-bench b {
    font-family: "JetBrains Mono", monospace;
    font-size: 16px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- podium */

.fx-podium {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.fx-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-radius: var(--radius);
    padding: 16px 18px 15px;
    cursor: pointer;
    transition:
        transform 0.15s,
        border-color 0.15s;
}
.fx-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.5);
}
.fx-card.one {
    border-color: rgba(245, 182, 81, 0.4);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(245, 182, 81, 0.12), transparent 60%),
        var(--card);
}
.fx-card-rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--faint);
    margin-bottom: 8px;
}
.fx-card.one .fx-card-rank {
    color: var(--amber);
}
.fx-card-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin-bottom: 3px;
}
.fx-card-amc {
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 12px;
}
.fx-card-why {
    font-size: 12.5px;
    line-height: 1.6;
    color: #c3c7d6;
    margin-bottom: 13px;
    min-height: 40px;
}
.fx-card-row {
    display: flex;
    gap: 16px;
    border-top: 1px solid var(--card-brd);
    padding-top: 11px;
}
.fx-card-row div span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--faint);
    margin-bottom: 2px;
}
.fx-card-row div b {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
}
.fx-score {
    position: absolute;
    top: 15px;
    right: 16px;
    font-family: "JetBrains Mono", monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--indigo);
}
.fx-card.one .fx-score {
    color: var(--amber);
}

/* ----------------------------------------------------------------- table */

.fx-tablewrap {
    position: relative;
    z-index: 1;
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-radius: var(--radius);
    overflow: hidden;
}
.fx-tabletools {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--card-brd);
}
.fx-search {
    flex: 1;
    max-width: 340px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-brd);
    border-radius: 10px;
    padding: 9px 13px;
    color: var(--txt);
    font: 400 13px "Inter", sans-serif;
    outline: none;
}
.fx-search:focus {
    border-color: rgba(99, 102, 241, 0.6);
}
.fx-count {
    font-size: 12px;
    color: var(--muted);
}
.fx-scroll {
    overflow-x: auto;
}
.fx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    white-space: nowrap;
}
.fx-table th {
    position: sticky;
    top: 0;
    background: #12142a;
    text-align: right;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding: 11px 12px;
    border-bottom: 1px solid var(--card-brd);
    cursor: pointer;
    user-select: none;
}
.fx-table th:first-child,
.fx-table th.l {
    text-align: left;
}
.fx-table th:hover {
    color: var(--txt);
}
.fx-table th.sorted {
    color: var(--indigo);
}
.fx-table th .fx-arr {
    font-size: 8px;
    margin-left: 3px;
}
.fx-table td {
    text-align: right;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: "JetBrains Mono", monospace;
}
.fx-table td.l {
    text-align: left;
    font-family: "Inter", sans-serif;
}
.fx-table tbody tr {
    cursor: pointer;
    transition: background 0.12s;
}
.fx-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.08);
}
.fx-rank {
    color: var(--faint);
    font-weight: 700;
}
.fx-fund-n {
    font-weight: 600;
    font-size: 13px;
    white-space: normal;
    line-height: 1.35;
}
.fx-fund-amc {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}
.fx-pill {
    display: inline-block;
    min-width: 42px;
    padding: 3px 8px;
    border-radius: 7px;
    font-weight: 700;
    font-size: 12px;
    background: rgba(99, 102, 241, 0.16);
    color: #a5a8ff;
}
.fx-pill.q1 {
    background: rgba(22, 209, 149, 0.16);
    color: var(--up);
}
.fx-pill.q4 {
    background: rgba(255, 93, 108, 0.14);
    color: var(--down);
}
.up {
    color: var(--up);
}
.down {
    color: var(--down);
}
.dim {
    color: var(--faint);
}

/* Rolling-return distribution: worst → p25 → median → p75 → best, drawn on a
   shared scale so one glance compares the *spread* of outcomes, not just the
   midpoint. The dot is the median. */
.fx-dist {
    position: relative;
    width: 120px;
    height: 18px;
    margin-left: auto;
}
.fx-dist-line {
    position: absolute;
    top: 8px;
    height: 2px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 2px;
}
.fx-dist-box {
    position: absolute;
    top: 4px;
    height: 10px;
    background: rgba(99, 102, 241, 0.4);
    border-radius: 3px;
}
.fx-dist-med {
    position: absolute;
    top: 3px;
    width: 3px;
    height: 12px;
    background: #fff;
    border-radius: 2px;
}
.fx-dist-zero {
    position: absolute;
    top: 1px;
    width: 1px;
    height: 16px;
    background: rgba(255, 93, 108, 0.55);
}

/* Quartile strip — one square per calendar year */
.fx-qs {
    display: inline-flex;
    gap: 2px;
}
.fx-qs i {
    width: 7px;
    height: 14px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
}
.fx-qs i.q1 {
    background: var(--up);
}
.fx-qs i.q2 {
    background: rgba(22, 209, 149, 0.42);
}
.fx-qs i.q3 {
    background: rgba(255, 93, 108, 0.4);
}
.fx-qs i.q4 {
    background: var(--down);
}

/* ------------------------------------------------------------ new funds */

.fx-new {
    position: relative;
    z-index: 1;
    margin: 20px 0 40px;
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-radius: var(--radius);
    padding: 16px 20px 18px;
}
.fx-new h3 {
    margin: 0 0 5px;
    font-size: 14px;
}
.fx-new > p {
    margin: 0 0 13px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 74ch;
}
.fx-new-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}
.fx-new-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12px;
    cursor: pointer;
}
.fx-new-item:hover {
    border-color: rgba(99, 102, 241, 0.5);
}
.fx-new-item b {
    font-weight: 600;
}
.fx-new-item span {
    font-family: "JetBrains Mono", monospace;
    color: var(--muted);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- drawer */

/* Above the sidebar's own layers (nav.css uses 210 for its scrim and 220 for
   the panel). On a narrow screen the sidebar is an overlay, and anything below
   220 opens *behind* its scrim — the fund detail has to win that stack. */
.fx-drawer-back {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(6, 7, 14, 0.72);
    backdrop-filter: blur(3px);
}
.fx-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 301;
    /* Matches the News reader panel — the detail view is two charts, a
       year-by-year strip and several metric grids, and they all breathe better
       wide. Narrower screens get the full width (see the query at the end). */
    width: min(1180px, 82vw);
    max-width: 100%;
    background: #0d0f1e;
    border-left: 1px solid var(--card-brd);
    box-shadow: -30px 0 70px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    animation: fxSlide 0.22s ease;
}
@keyframes fxSlide {
    from {
        transform: translateX(30px);
        opacity: 0;
    }
}
/* Fixed, not absolute.
   The drawer is the scrolling element, so an absolutely-positioned button
   scrolled away with the content — and on a phone the drawer is full width, so
   there is no backdrop to tap and no Esc key either. Once you were a screen
   into the About tab there was no way out. Fixed keeps it on screen at every
   scroll depth, and above the drawer's own z-index so nothing paints over it. */
.fx-drawer-x {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 310;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(24, 26, 45, 0.9);
    backdrop-filter: blur(6px);
    border: 1px solid var(--card-brd);
    color: var(--txt);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.fx-drawer-x:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
}
.fx-drawer-x:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 2px;
}
.fx-drawer-in {
    padding: 24px 26px 40px;
}
/* Drawer header sticks so the fund name and tab bar stay reachable through a
   long pane — the About and Planner tabs are several screens deep. */
.fx-d-head {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: -24px -26px 22px;
    padding: 24px 26px 0;
    background: linear-gradient(#0d0f1e 78%, rgba(13, 15, 30, 0));
}
.fx-d-tabs {
    display: flex;
    gap: 4px;
    margin-top: 16px;
    border-bottom: 1px solid var(--card-brd);
}
.fx-d-tab {
    position: relative;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    padding: 9px 14px 11px;
    font: 600 13px/1 "Inter", sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
.fx-d-tab:hover {
    color: var(--txt);
}
.fx-d-tab.on {
    color: var(--txt);
    border-bottom-color: var(--indigo);
}
.fx-cat-sub {
    font-weight: 500;
    color: var(--muted);
}

.fx-d-cat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--indigo);
    margin-bottom: 7px;
}
.fx-d-name {
    margin: 0 0 4px;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    padding-right: 40px;
}
.fx-d-amc {
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 18px;
}
.fx-d-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.fx-d-stat {
    flex: 1 1 110px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    border-radius: 12px;
    padding: 11px 13px;
}
.fx-d-stat span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--faint);
    margin-bottom: 4px;
}
.fx-d-stat b {
    font-family: "JetBrains Mono", monospace;
    font-size: 17px;
    font-weight: 700;
}
.fx-d-stat small {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 2px;
}
.fx-d-sec {
    margin-top: 24px;
}
.fx-d-sec h4 {
    margin: 0 0 4px;
    font-size: 13.5px;
}
/* Prose keeps a readable measure however wide the drawer gets — the grids and
   charts are what should use the extra width, not the sentences. */
.fx-d-sec > p,
.fx-d-note,
.fx-d-amc {
    max-width: 84ch;
}
.fx-d-sec > p {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}
.fx-chart {
    position: relative;
    height: 260px;
}
@media (min-width: 1000px) {
    .fx-chart {
        height: 310px;
    }
}
.fx-d-grid {
    display: grid;
    /* Wide enough that the longest label/value pair ("Middle half 14.6% –
       23.2%") stays on one line at the drawer's full width. */
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 8px;
}
.fx-d-kv {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12px;
}
.fx-d-kv span {
    color: var(--muted);
}
.fx-d-kv b {
    font-family: "JetBrains Mono", monospace;
}
.fx-d-years {
    display: grid;
    gap: 5px;
}
.fx-d-year {
    display: grid;
    grid-template-columns: 62px 1fr 62px 22px;
    align-items: center;
    gap: 9px;
    font-size: 12px;
}
.fx-d-year > i {
    font-style: normal;
    font-family: "JetBrains Mono", monospace;
    color: var(--muted);
}
.fx-d-bar {
    position: relative;
    height: 13px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
}
.fx-d-bar u {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 3px;
}
.fx-d-bar u.p {
    background: rgba(22, 209, 149, 0.6);
}
.fx-d-bar u.n {
    background: rgba(255, 93, 108, 0.6);
}
.fx-d-bar em {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
}
.fx-d-val {
    text-align: right;
    font-family: "JetBrains Mono", monospace;
}
.fx-d-q {
    width: 18px;
    height: 15px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    color: #080a12;
}
.fx-d-q.q1 {
    background: var(--up);
}
.fx-d-q.q2 {
    background: rgba(22, 209, 149, 0.5);
}
.fx-d-q.q3 {
    background: rgba(255, 93, 108, 0.5);
}
.fx-d-q.q4 {
    background: var(--down);
}
.fx-d-note {
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--faint);
    margin-top: 12px;
}
/* ------------------------------------------------- About / Planner panes */

.fx-a-lead p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.72;
    color: #d3d7e4;
    max-width: 78ch;
}
.fx-a-lead b {
    color: #fff;
}

/* The three "in rupees, not percentages" cards — the first thing a
   non-specialist can act on. */
.fx-a-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.fx-a-card {
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(99, 102, 241, 0.12), transparent 62%),
        rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    border-radius: 14px;
    padding: 15px 16px 14px;
}
.fx-a-card > span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 7px;
    line-height: 1.4;
}
.fx-a-card > b {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.fx-a-card > small {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--muted);
}
.fx-a-card small b {
    color: #cdd2e2;
}

.fx-a-sec {
    margin-top: 30px;
}
.fx-a-sec h4 {
    margin: 0 0 5px;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.fx-a-sec > p {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.68;
    color: var(--muted);
    max-width: 82ch;
}
.fx-a-sec > p b {
    color: #cdd2e2;
}
.fx-a-note {
    font-size: 12.5px;
    line-height: 1.68;
    color: var(--muted);
    max-width: 82ch;
    margin: 14px 0 0;
}
.fx-a-note b {
    color: #cdd2e2;
}
.fx-a-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    max-width: 84ch;
}
.fx-a-list li {
    font-size: 13px;
    line-height: 1.68;
    color: var(--muted);
}
.fx-a-list b {
    color: #dfe3f0;
}
.fx-a-list.warn li::marker {
    color: var(--amber);
}
.fx-a-list.tips li::marker {
    color: var(--indigo);
}

/* Odds of making money by holding period */
.fx-hold {
    display: grid;
    gap: 7px;
    max-width: 640px;
}
.fx-hold-row {
    display: grid;
    grid-template-columns: 76px 1fr 46px auto;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
}
.fx-hold-row > i {
    font-style: normal;
    color: var(--muted);
}
.fx-hold-bar {
    height: 16px;
    background: rgba(255, 93, 108, 0.22);
    border-radius: 4px;
    overflow: hidden;
}
.fx-hold-bar u {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(22, 209, 149, 0.7), var(--up));
    border-radius: 4px;
}
.fx-hold-row > b {
    font-family: "JetBrains Mono", monospace;
    text-align: right;
    color: var(--up);
}
.fx-hold-row > span {
    color: var(--faint);
    font-size: 11.5px;
}

/* Year-by-year returns. The number is the point; the bar just gives the eye
   somewhere to land and makes a bad year obvious without reading. */
.fx-yoy {
    display: grid;
    gap: 4px;
    max-width: 620px;
}
.fx-yoy-row {
    display: grid;
    grid-template-columns: 68px 1fr 74px;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
}
.fx-yoy-row > i {
    font-style: normal;
    font-family: "JetBrains Mono", monospace;
    color: var(--muted);
}
.fx-yoy-row > i em {
    font-style: normal;
    font-size: 9px;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.fx-yoy-bar {
    position: relative;
    height: 15px;
    background: rgba(255, 255, 255, 0.035);
    border-radius: 4px;
}
/* Centre line: returns run both ways from it, so a loss reads instantly. */
.fx-yoy-bar > span {
    position: absolute;
    left: 50%;
    top: -1px;
    bottom: -1px;
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
}
.fx-yoy-bar u {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 3px;
}
.fx-yoy-bar u.p {
    background: linear-gradient(90deg, rgba(22, 209, 149, 0.5), rgba(22, 209, 149, 0.85));
}
.fx-yoy-bar u.n {
    background: linear-gradient(90deg, rgba(255, 93, 108, 0.85), rgba(255, 93, 108, 0.5));
}
.fx-yoy-row > b {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    text-align: right;
}

/* ------------------------------------------------------- similar funds */

.fx-sim-list {
    display: grid;
    gap: 7px;
    max-width: 760px;
}
.fx-sim {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    text-decoration: none;
    color: inherit;
    transition:
        border-color 0.15s,
        background 0.15s,
        transform 0.15s;
}
.fx-sim:hover {
    border-color: rgba(99, 102, 241, 0.55);
    background: rgba(99, 102, 241, 0.08);
    transform: translateX(2px);
}
.fx-sim-rank {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--faint);
}
.fx-sim-main {
    display: block;
    min-width: 0;
}
.fx-sim-main b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.fx-sim-main em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}
.fx-sim-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.fx-sim-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 12.5px;
    white-space: nowrap;
}
.fx-sim-num i {
    font-style: normal;
    font-size: 9.5px;
    color: var(--faint);
    letter-spacing: 0.05em;
}

@media (max-width: 560px) {
    .fx-sim {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .fx-sim-stats {
        grid-column: 2;
        margin-top: 6px;
    }
}

/* "How it compares" bars */
.fx-a-cmp {
    display: grid;
    gap: 8px;
    max-width: 680px;
}
.fx-a-cmp-row {
    display: grid;
    grid-template-columns: 190px 1fr 58px;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
}
.fx-a-cmp-row > i {
    font-style: normal;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fx-a-cmp-row.strong > i,
.fx-a-cmp-row.strong > b {
    color: var(--txt);
    font-weight: 700;
}
.fx-a-cmp-bar {
    height: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}
.fx-a-cmp-bar u {
    display: block;
    height: 100%;
    background: rgba(138, 143, 163, 0.55);
    border-radius: 4px;
}
.fx-a-cmp-row.strong .fx-a-cmp-bar u {
    background: linear-gradient(90deg, var(--indigo), var(--violet));
}
.fx-a-cmp-row > b {
    font-family: "JetBrains Mono", monospace;
    text-align: right;
}

.fx-chart-sm {
    height: 190px;
}

/* ------------------------------------------------------------- planner */

.fx-pl-form {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    border-radius: 14px;
    padding: 16px 18px 18px;
    margin-bottom: 6px;
}
.fx-pl-modes {
    display: inline-flex;
    gap: 3px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 16px;
}
.fx-pl-mode {
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    padding: 7px 14px;
    font: 600 12.5px/1 "Inter", sans-serif;
    cursor: pointer;
}
.fx-pl-mode.on {
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    color: #fff;
}
.fx-pl-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.fx-pl-field {
    display: block;
}
.fx-pl-field.off {
    display: none;
}
.fx-pl-field > span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 6px;
}
.fx-pl-input {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--card-brd);
    border-radius: 10px;
    padding: 0 11px;
}
.fx-pl-input:focus-within {
    border-color: rgba(99, 102, 241, 0.7);
}
.fx-pl-input i {
    font-style: normal;
    color: var(--faint);
    font-size: 13px;
    margin-right: 6px;
}
.fx-pl-input input {
    width: 100%;
    background: none;
    border: 0;
    outline: none;
    color: var(--txt);
    font: 700 15px/1 "JetBrains Mono", monospace;
    padding: 11px 0;
}
.fx-pl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}
.fx-pl-chips button {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-brd);
    border-radius: 999px;
    color: var(--muted);
    padding: 5px 11px;
    font: 500 11.5px/1 "Inter", sans-serif;
    cursor: pointer;
}
.fx-pl-chips button:hover {
    color: var(--txt);
    border-color: rgba(99, 102, 241, 0.6);
}

.fx-pl-result {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 9px;
    margin-bottom: 16px;
}
.fx-pl-res {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    border-radius: 12px;
    padding: 12px 14px;
}
.fx-pl-res span {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 5px;
}
.fx-pl-res b {
    font-family: "JetBrains Mono", monospace;
    font-size: 19px;
    font-weight: 700;
}

.fx-pl-projs,
.fx-pl-goals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 9px;
}
.fx-pl-proj,
.fx-pl-goal {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    border-radius: 12px;
    padding: 13px 15px;
}
.fx-pl-proj span,
.fx-pl-goal span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 6px;
}
.fx-pl-proj b,
.fx-pl-goal b {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.fx-pl-proj small,
.fx-pl-goal small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--faint);
}
.fx-pl-proj:nth-child(2) b {
    color: var(--up);
}

/* -------------------------------------------------------------- risk band */

/* Green through amber to red across the six bands. Deliberately not a traffic
   light in the good/bad sense — "Very High" isn't a warning against the fund,
   it's a statement about the ride, and the copy alongside says so. */
.fx-risk {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
}
.fx-risk.big {
    font-size: 12px;
    padding: 4px 10px;
}
.fx-risk.r1 { background: rgba(22, 209, 149, 0.14); color: #16d195; border-color: rgba(22, 209, 149, 0.3); }
.fx-risk.r2 { background: rgba(115, 209, 122, 0.14); color: #73d17a; border-color: rgba(115, 209, 122, 0.3); }
.fx-risk.r3 { background: rgba(220, 200, 90, 0.13); color: #d8c65c; border-color: rgba(220, 200, 90, 0.28); }
.fx-risk.r4 { background: rgba(245, 182, 81, 0.14); color: var(--amber); border-color: rgba(245, 182, 81, 0.3); }
.fx-risk.r5 { background: rgba(255, 138, 91, 0.14); color: #ff8a5b; border-color: rgba(255, 138, 91, 0.3); }
.fx-risk.r6 { background: rgba(255, 93, 108, 0.15); color: var(--down); border-color: rgba(255, 93, 108, 0.34); }

/* Six-segment riskometer.
   Every segment keeps its own hue whether or not it's the active one, so the
   row reads as a green-to-red ramp instead of a line of grey boxes — the first
   version made five of six segments identical and the whole control went pale.
   Bars climb left to right, and the icons repeat the escalation for anyone who
   can't separate the greens from the ambers. */
.fx-meter {
    --r1: #16d195;
    --r2: #7ed957;
    --r3: #f5d451;
    --r4: #f5b651;
    --r5: #ff8a5b;
    --r6: #ff5d6c;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: end;
    gap: 6px;
    max-width: 680px;
}
.fx-meter-seg {
    --c: var(--muted);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 9px 4px 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}
.fx-meter-seg.r1 { --c: var(--r1); }
.fx-meter-seg.r2 { --c: var(--r2); }
.fx-meter-seg.r3 { --c: var(--r3); }
.fx-meter-seg.r4 { --c: var(--r4); }
.fx-meter-seg.r5 { --c: var(--r5); }
.fx-meter-seg.r6 { --c: var(--r6); }

.fx-meter-ico {
    font-size: 15px;
    line-height: 1;
    filter: grayscale(0.55) opacity(0.6);
    transition: filter 0.18s ease;
}
/* The climbing bar — height is the escalation, redundant with colour on
   purpose so the meaning survives a colour-blind reader or a mono print. */
.fx-meter-bar {
    display: block;
    width: 100%;
    border-radius: 3px;
    background: color-mix(in srgb, var(--c) 45%, transparent);
}
.fx-meter-seg.r1 .fx-meter-bar { height: 6px; }
.fx-meter-seg.r2 .fx-meter-bar { height: 11px; }
.fx-meter-seg.r3 .fx-meter-bar { height: 16px; }
.fx-meter-seg.r4 .fx-meter-bar { height: 21px; }
.fx-meter-seg.r5 .fx-meter-bar { height: 26px; }
.fx-meter-seg.r6 .fx-meter-bar { height: 31px; }

.fx-meter-seg i {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    color: color-mix(in srgb, var(--c) 72%, #8a8fa3);
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
}

/* Active band: full saturation, a glow, and a pointer so the eye lands on it
   before it reads any of the labels. */
.fx-meter-seg.on {
    background: color-mix(in srgb, var(--c) 26%, transparent);
    border-color: var(--c);
    transform: translateY(-3px);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent),
        0 8px 26px color-mix(in srgb, var(--c) 32%, transparent);
}
.fx-meter-seg.on .fx-meter-ico {
    filter: none;
    font-size: 19px;
}
.fx-meter-seg.on .fx-meter-bar {
    background: var(--c);
    box-shadow: 0 0 12px color-mix(in srgb, var(--c) 65%, transparent);
}
.fx-meter-seg.on i {
    color: #fff;
    font-size: 11px;
}
.fx-meter-seg.on::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--c);
}

/* color-mix is well supported now, but a browser without it would render every
   segment on the fallback colour — so give the inactive state a plain floor. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .fx-meter-seg {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--card-brd);
    }
    .fx-meter-seg.on {
        background: rgba(99, 102, 241, 0.22);
        border-color: var(--indigo);
    }
    .fx-meter-bar {
        background: var(--muted);
    }
    .fx-meter-seg.on .fx-meter-bar {
        background: #fff;
    }
}

/* ------------------------------------------------------- NAV range switch */

.fx-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.fx-nav-range {
    display: inline-flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--card-brd);
    border-radius: 10px;
    padding: 3px;
}
.fx-nav-range button {
    background: none;
    border: 0;
    border-radius: 7px;
    color: var(--muted);
    padding: 6px 12px;
    font: 700 11.5px/1 "Inter", sans-serif;
    cursor: pointer;
}
.fx-nav-range button:hover {
    color: var(--txt);
    background: rgba(255, 255, 255, 0.05);
}
.fx-nav-range button.on {
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    color: #fff;
}
.fx-nav-delta {
    display: flex;
    align-items: baseline;
    gap: 9px;
}
.fx-nav-delta b {
    font-family: "JetBrains Mono", monospace;
    font-size: 16px;
    font-weight: 700;
}
.fx-nav-delta span {
    font-size: 11px;
    color: var(--faint);
}

/* --------------------------------------------------------- Best Funds tab */

.fx-tab-best {
    color: var(--amber) !important;
}
.fx-tab-best .fx-tab-n {
    color: var(--amber);
    background: rgba(245, 182, 81, 0.16);
}
.fx-tab-best.on {
    color: #1a1408 !important;
    background: linear-gradient(135deg, #f5b651, #f59e0b);
    box-shadow: 0 2px 12px rgba(245, 182, 81, 0.34);
}
.fx-tab-best.on .fx-tab-n {
    background: rgba(0, 0, 0, 0.2);
    color: #1a1408;
}
.fx-best-toggle {
    display: inline-flex;
    gap: 2px;
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--card-brd);
    border-radius: 10px;
    padding: 3px;
}
.fx-best-toggle button {
    background: none;
    border: 0;
    border-radius: 7px;
    color: var(--muted);
    padding: 6px 12px;
    font: 600 11.5px/1 "Inter", sans-serif;
    cursor: pointer;
}
.fx-best-toggle button.on {
    background: rgba(245, 182, 81, 0.18);
    color: var(--amber);
}
.fx-card-in {
    font-style: normal;
    color: var(--muted);
    font-weight: 600;
}

.fx-new-idx {
    font-style: normal;
    font-size: 10.5px;
    color: var(--faint);
    margin-left: 5px;
}

.fx-loading,
.fx-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 900px) {
    .fx-drawer {
        width: 100%;
    }
    /* On a phone this is the ONLY way out of the drawer — full width means no
       backdrop to tap, and there's no Esc key. So it gets a 44px target (the
       minimum that's reliably tappable), a solid fill rather than a translucent
       one so it never disappears into a chart behind it, and clears the notch
       on phones that have one. */
    .fx-drawer-x {
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: calc(10px + env(safe-area-inset-right, 0px));
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 24px;
        background: #1b1e33;
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
    }
    /* Keep the fund name clear of the bigger button. */
    .fx-d-name {
        padding-right: 54px;
    }
}

@media (max-width: 760px) {
    .fx-cathead {
        grid-template-columns: 1fr;
    }
    .fx-bench div {
        text-align: left;
    }
    .fx-drawer-in {
        padding: 20px 16px 36px;
    }
}

/* ==========================================================================
   Compare — the tray, and the sheet it opens
   ========================================================================== */

/* ---- the toggle that lives in every table row ---- */
.fx-cmp-cell {
    width: 34px;
    padding-right: 0 !important;
}
.fx-cmp-t {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-brd);
    color: var(--faint);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition:
        background 0.14s,
        border-color 0.14s,
        color 0.14s,
        transform 0.14s;
}
.fx-table tbody tr:hover .fx-cmp-t {
    color: var(--txt);
    border-color: rgba(255, 255, 255, 0.22);
}
.fx-cmp-t.on {
    background: rgba(99, 102, 241, 0.25);
    border-color: var(--indigo);
    color: #fff;
}
.fx-cmp-t.on span {
    /* The same control reads "add" and "added"; rotating the + into a ×
       would say "remove", which is the wrong emphasis for a chosen row. */
    transform: rotate(45deg);
    display: block;
}
/* Bounce when the fourth is already picked — a disabled-looking control
   would not explain why, and this is the explanation. */
.fx-cmp-t.full {
    animation: fxCmpNope 0.4s ease;
    border-color: var(--down);
    color: var(--down);
}
@keyframes fxCmpNope {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    75% {
        transform: translateX(3px);
    }
}

/* ---- the drawer's compare button ---- */
.fx-d-cmp {
    margin-left: auto;
    /* The tab strip is a stretch-aligned flex row; without this the button
       grows to the strip's height and stops reading as a button. */
    align-self: center;
    margin-bottom: 6px;
    padding: 7px 13px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-brd);
    color: var(--muted);
    font: 600 12.5px "Inter", sans-serif;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}
.fx-d-cmp:hover {
    color: var(--txt);
    border-color: rgba(255, 255, 255, 0.24);
}
.fx-d-cmp.on {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--indigo);
    color: #dfe0ff;
}

/* ---- the tray ---- */
/* An author `display` beats the user-agent's `[hidden] { display: none }`, so
   without this the tray sets hidden and stays on screen — which is what made
   Clear look like it did nothing while the state behind it was already empty. */
.fx-cmp-tray[hidden] {
    display: none;
}
.fx-cmp-tray {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 290;
    display: flex;
    align-items: center;
    gap: 14px;
    /* One row, always. Four chips plus the buttons don't fit at the old
       980px, and the tray wrapping upward over the page reads as broken. */
    flex-wrap: nowrap;
    max-width: min(1180px, calc(100vw - 24px));
    padding: 11px 14px;
    border-radius: 14px;
    background: rgba(18, 20, 42, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    animation: fxCmpRise 0.2s ease;
}
@keyframes fxCmpRise {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
.fx-cmp-chips {
    display: flex;
    gap: 7px;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
/* Chips share whatever room is left and shrink together. The name is what
   gives; the × never does — it used to be inside the chip's own overflow and
   got clipped away exactly when there were most chips to remove. */
.fx-cmp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 260px;
    padding: 5px 6px 5px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--card-brd);
    font: 500 12px "Inter", sans-serif;
    color: var(--txt);
    white-space: nowrap;
}
.fx-cmp-chip-t {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fx-cmp-chip button {
    flex: none;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.fx-cmp-chip button:hover {
    background: var(--down-soft);
    color: var(--down);
}
.fx-cmp-acts {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex: none; /* the chips shrink, the buttons never do */
}
.fx-cmp-go {
    padding: 9px 16px;
    border-radius: 10px;
    border: 0;
    background: var(--indigo);
    color: #fff;
    font: 700 13px "Inter", sans-serif;
    cursor: pointer;
    transition: filter 0.15s;
}
.fx-cmp-go:hover:not(:disabled) {
    filter: brightness(1.12);
}
.fx-cmp-go:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: var(--faint);
    cursor: default;
}
.fx-cmp-clear {
    padding: 9px 13px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--card-brd);
    color: var(--muted);
    font: 600 12.5px "Inter", sans-serif;
    cursor: pointer;
}
.fx-cmp-clear:hover {
    color: var(--txt);
    border-color: rgba(255, 255, 255, 0.24);
}

/* ---- the sheet ---- */
.fx-cmp-back {
    position: fixed;
    inset: 0;
    z-index: 320;
    background: rgba(6, 7, 14, 0.78);
    backdrop-filter: blur(4px);
}
.fx-cmp {
    position: fixed;
    inset: 0;
    z-index: 321;
    margin: auto;
    width: min(1240px, 94vw);
    max-height: 94vh;
    border-radius: 20px;
    background: #0d0f1e;
    border: 1px solid var(--card-brd);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    animation: fxCmpIn 0.22s ease;
}
@keyframes fxCmpIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}
.fx-cmp-in {
    padding: 26px 28px 40px;
}
.fx-cmp-close {
    position: sticky;
    top: 14px;
    float: right;
    margin: 14px 16px 0 0;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(24, 26, 45, 0.92);
    backdrop-filter: blur(6px);
    border: 1px solid var(--card-brd);
    color: var(--txt);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.fx-cmp-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

.fx-cmp-head h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.fx-cmp-win {
    margin: 0;
    max-width: 78ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
}
.fx-cmp-win b {
    color: var(--txt);
    font-weight: 600;
}
.fx-cmp-warn {
    margin: 12px 0 0;
    max-width: 78ch;
    padding: 10px 13px;
    border-radius: 11px;
    background: rgba(245, 182, 81, 0.09);
    border: 1px solid rgba(245, 182, 81, 0.28);
    font-size: 12.5px;
    line-height: 1.6;
    color: #f0d5a4;
}

/* ---- the fund columns ---- */
.fx-cmp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 20px 0 4px;
}
.fx-cmp-card {
    position: relative;
    padding: 14px 14px 13px;
    border-radius: 13px;
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-top: 3px solid var(--c);
}
.fx-cmp-card h3 {
    margin: 0 0 4px;
    padding-right: 22px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}
.fx-cmp-amc {
    font-size: 12px;
    color: var(--muted);
}
.fx-cmp-cat {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--faint);
}
.fx-cmp-swatch {
    display: none;
}
.fx-cmp-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--faint);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.fx-cmp-x:hover {
    background: var(--down-soft);
    color: var(--down);
}

/* ---- sections ---- */
.fx-cmp-sec {
    margin-top: 28px;
}
.fx-cmp-sec h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}
.fx-cmp-note {
    margin: 0 0 12px;
    max-width: 78ch;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
}
.fx-cmp-chart {
    height: 340px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 13px;
    background: var(--card);
    border: 1px solid var(--card-brd);
}

/* ---- the money blocks ---- */
.fx-cmp-money + .fx-cmp-money {
    margin-top: 14px;
}
.fx-cmp-money h5 {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0 0 9px;
    font-size: 13.5px;
    font-weight: 700;
}
.fx-cmp-money h5 small {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--faint);
}
.fx-cmp-money-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
.fx-cmp-money-cell {
    padding: 12px 13px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-left: 3px solid var(--c);
}
.fx-cmp-money-cell.win {
    background: var(--up-soft);
    border-color: rgba(22, 209, 149, 0.4);
    border-left-color: var(--c);
}
.fx-cmp-money-n {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 5px;
    line-height: 1.35;
}
.fx-cmp-money-cell b {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.fx-cmp-money-cell em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 11.5px;
    color: var(--muted);
}

/* ---- the comparison tables ---- */
.fx-cmp-scroll {
    overflow-x: auto;
    border-radius: 13px;
    border: 1px solid var(--card-brd);
}
.fx-cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: var(--card);
}
.fx-cmp-table thead th {
    position: sticky;
    top: 0;
    background: #12142a;
    text-align: right;
    padding: 11px 13px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--txt);
    border-bottom: 2px solid var(--c, var(--card-brd));
    min-width: 130px;
}
.fx-cmp-table thead th:first-child {
    min-width: 190px;
    border-bottom-color: var(--card-brd);
}
.fx-cmp-table tbody th.l {
    text-align: left;
    font-weight: 600;
    color: var(--txt);
    padding: 10px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
}
.fx-cmp-table tbody th.l small {
    display: block;
    font-weight: 400;
    font-size: 10.5px;
    color: var(--faint);
    white-space: normal;
    max-width: 30ch;
}
.fx-cmp-table td {
    text-align: right;
    padding: 10px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: "JetBrains Mono", monospace;
    white-space: nowrap;
}
.fx-cmp-table td.win {
    background: var(--up-soft);
    font-weight: 700;
}
/* The year table already colours a cell by its sign. "Best of the row" is the
   tint, never the text colour — otherwise the least-bad number in a year every
   fund lost would be printed green. */
.fx-cmp-table td.win:not(.up):not(.down) {
    color: var(--up);
}
.fx-cmp-years tbody th.l {
    font-family: "JetBrains Mono", monospace;
}

.fx-cmp-verdict p {
    margin: 0;
    max-width: 82ch;
    padding: 14px 16px;
    border-radius: 13px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.24);
    font-size: 13.5px;
    line-height: 1.68;
    color: #cfd2e6;
}
.fx-cmp-verdict p b {
    color: var(--txt);
}

.fx-cmp-disc {
    margin: 26px 0 0;
    max-width: 82ch;
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--faint);
}

@media (max-width: 760px) {
    .fx-cmp {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .fx-cmp-in {
        padding: 18px 16px 34px;
    }
    .fx-cmp-chart {
        height: 260px;
    }
    .fx-cmp-tray {
        left: 8px;
        right: 8px;
        transform: none;
        max-width: none;
        animation: none;
        /* A phone has no room for four chips and two buttons on one line, so
           here it does wrap — the desktop constraint is about not covering the
           page, and that doesn't apply to a full-width bar. */
        flex-wrap: wrap;
    }
    .fx-cmp-chips {
        flex-wrap: wrap;
    }
    .fx-cmp-acts {
        width: 100%;
    }
    .fx-cmp-go {
        flex: 1;
    }
}