/* ETF Rankings — /etf
   ---------------------------------------------------------------------------
   Deltas only. This page is the funds page's twin and wears funds.css: every
   fx- class here is defined there, and the two pages are meant to be visibly
   the same product. What follows is what an ETF table needs and a fund table
   does not — the premium band, the liquidity pill, the family rail, and the
   alert that fires when something on the page is trading far from what it
   holds.

   Layout tokens (--up, --down, --violet, --card-brd …) come from screener.css.
   --------------------------------------------------------------------------- */

/* ---------- family rail: the level above the group tabs ---------- */

.et-famrail {
    margin: 22px 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.et-famrail::-webkit-scrollbar {
    display: none;
}
.et-fams {
    display: flex;
    gap: 8px;
    min-width: max-content;
    padding-bottom: 2px;
}
.et-fam {
    appearance: none;
    cursor: pointer;
    white-space: nowrap;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    color: var(--muted);
    font: 600 13px/1 "Inter", sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.et-fam:hover {
    color: var(--txt);
    border-color: rgba(139, 92, 246, 0.4);
}
.et-fam.on {
    color: #fff;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    border-color: transparent;
}
.et-fam .fx-tab-n {
    opacity: 0.72;
    font-size: 11px;
}

/* ---------- the standing premium warning ---------- */

.et-alert {
    margin: 18px 0 0;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 93, 108, 0.12), rgba(255, 93, 108, 0.04));
    border: 1px solid rgba(255, 93, 108, 0.32);
}
.et-alert[hidden] {
    display: none;
}
.et-alert-h {
    font: 700 14.5px/1.3 "Inter", sans-serif;
    color: #ffb3ba;
    margin-bottom: 6px;
}
.et-alert-p {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--muted);
    max-width: 78ch;
}
.et-alert-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.et-alert-item {
    appearance: none;
    cursor: pointer;
    text-align: left;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 93, 108, 0.28);
    color: var(--txt);
    display: grid;
    gap: 1px;
    transition: border-color 0.15s, transform 0.15s;
}
.et-alert-item:hover {
    border-color: var(--down);
    transform: translateY(-1px);
}
.et-alert-item b {
    font-size: 13px;
    font-family: "JetBrains Mono", monospace;
}
.et-alert-item span {
    font-size: 12px;
    font-weight: 600;
}
.et-alert-item small {
    font-size: 10.5px;
    color: var(--faint);
}

/* ---------- meta line additions ---------- */

.et-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.et-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--up);
    box-shadow: 0 0 0 3px rgba(22, 209, 149, 0.16);
}
.et-groupstat {
    color: var(--muted);
}

/* ---------- score, and the penalty that can gut it ---------- */

.et-sc {
    font: 700 14px/1 "JetBrains Mono", monospace;
}
.et-sc.good {
    color: var(--up);
}
.et-sc.bad {
    color: var(--down);
}
.et-pen {
    display: block;
    font-style: normal;
    font-size: 10px;
    color: var(--down);
    margin-top: 2px;
    font-family: "JetBrains Mono", monospace;
}
.fx-score.et-score-bad {
    background: linear-gradient(135deg, #b3323f, #7c1d27);
}
.et-dr-score {
    margin-top: 12px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-brd);
}
.et-dr-score b {
    font: 800 22px/1 "JetBrains Mono", monospace;
}
.et-dr-score span {
    font-size: 11px;
    color: var(--faint);
}
.et-dr-score.good b {
    color: var(--up);
}
.et-dr-score.bad b {
    color: var(--down);
}

/* ---------- the premium band: where it sits, where it is now ---------- */

.et-band {
    position: relative;
    height: 22px;
    min-width: 120px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.035);
}
.et-band-zero {
    position: absolute;
    left: 50%;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: rgba(255, 255, 255, 0.24);
}
/* Where it normally trades. */
.et-band-box {
    position: absolute;
    top: 6px;
    bottom: 6px;
    border-radius: 3px;
    background: rgba(139, 92, 246, 0.34);
    border: 1px solid rgba(139, 92, 246, 0.5);
}
.et-band-med {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--violet);
    border-radius: 2px;
}
/* Where it is right now — deliberately the loudest mark on the bar. */
.et-band-now {
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
}
.et-sub {
    display: block;
    font-size: 10px;
    color: var(--faint);
    font-family: "JetBrains Mono", monospace;
    margin-top: 1px;
}
.et-livedot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--up);
    margin-left: 6px;
    vertical-align: middle;
}

/* ---------- liquidity ---------- */

.et-liq {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.et-liq b {
    font: 600 12.5px/1 "JetBrains Mono", monospace;
}
.et-liq-b {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: help;
}
.et-liq-deep {
    background: rgba(22, 209, 149, 0.16);
    color: var(--up);
}
.et-liq-good {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
}
.et-liq-fair {
    background: rgba(245, 182, 81, 0.16);
    color: var(--amber);
}
.et-liq-thin {
    background: rgba(255, 93, 108, 0.14);
    color: #ff8f9a;
}
.et-liq-illiquid {
    background: rgba(255, 93, 108, 0.24);
    color: var(--down);
}

.et-unranked-row {
    opacity: 0.62;
}
.et-unranked-row:hover {
    opacity: 1;
}

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

.et-dr-verdict {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.28);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--txt);
}
.et-dr-prem {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    margin-bottom: 14px;
}
.et-dr-prem-n {
    font: 800 30px/1 "JetBrains Mono", monospace;
    letter-spacing: -0.02em;
}
.et-dr-prem-d {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}
.et-dr-prem-d div {
    display: grid;
    gap: 2px;
}
.et-dr-prem-d span {
    font-size: 10.5px;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.et-dr-prem-d b {
    font: 700 14px/1 "JetBrains Mono", monospace;
}

.et-peers {
    display: grid;
    gap: 6px;
}
.et-peer {
    appearance: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 34px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-brd);
    color: var(--txt);
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.et-peer:hover {
    border-color: rgba(139, 92, 246, 0.45);
    background: rgba(139, 92, 246, 0.08);
}
.et-peer-r {
    font: 700 11px/1 "JetBrains Mono", monospace;
    color: var(--faint);
}
.et-peer b {
    font: 600 12.5px/1 "JetBrains Mono", monospace;
}
.et-peer-p,
.et-peer-v {
    font: 600 11.5px/1 "JetBrains Mono", monospace;
}
.et-peer-v {
    color: var(--muted);
    min-width: 62px;
    text-align: right;
}

/* ---------- compare ---------- */

.et-cmp-score {
    margin-top: 8px;
    font: 800 20px/1 "JetBrains Mono", monospace;
}
.et-cmp-score.bad {
    color: var(--down);
}
.et-cmp-score.dim {
    color: var(--faint);
}

/* The premium-penalty tile in the method grid — it is not a weight like the
   others and should not look like one. */
.fx-wt.et-wt-pen {
    border-color: rgba(255, 93, 108, 0.3);
    background: rgba(255, 93, 108, 0.07);
}
.fx-wt.et-wt-pen .fx-wt-n {
    color: var(--down);
}

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

@media (max-width: 720px) {
    .et-band {
        min-width: 92px;
    }
    .et-dr-prem-n {
        font-size: 24px;
    }
    .et-liq {
        gap: 5px;
    }
    .et-liq-b {
        font-size: 9px;
        padding: 2px 5px;
    }
}

/* ---------- "too new to rank" chips ----------
   funds.css sizes these for a fund name and an AMC of similar length. An ETF
   row is a short mono symbol against a long fund house, and with neither side
   allowed to shrink the two ran into each other. */

#etUnranked .fx-new-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#etUnranked .fx-new-item {
    align-items: baseline;
    max-width: 100%;
    min-width: 0;
}
#etUnranked .fx-new-item b {
    flex: 0 0 auto;
    font-family: "JetBrains Mono", monospace;
}
#etUnranked .fx-new-item span {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- narrow: drop columns rather than hide them behind a scroll ----

   A phone fits about five columns of this table. The first cut left all nine
   and let the container scroll sideways, which put the premium — the number
   this entire page exists to show — off-screen behind a gesture nobody makes.

   So on a phone the table sheds the columns that are context rather than
   answer, in order of what you can most afford to lose: the "usual range" bar
   (the number beside it already says where it sits), then the one-year return
   (never part of the rank), then tracking. Symbol, score, premium and turnover
   survive at every width, because those four are the page. Everything dropped
   is still in the drawer, one tap away.

   Columns are dropped by name, not by nth-child: the tracking column is only
   emitted for groups that track one index, so positional rules would cut the
   wrong cell in ten of the fifty-one groups. */

@media (max-width: 900px) {
    .fx-table [data-c="premBand"] {
        display: none;
    }
}
@media (max-width: 720px) {
    .fx-table [data-c="y1"] {
        display: none;
    }
    .fx-table [data-c="rank"] {
        padding-left: 2px;
        padding-right: 2px;
    }
    /* The fund house is the first thing to go when the name column narrows —
       the symbol is the identifier people search on. */
    .fx-table .fx-fund-amc {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 42vw;
    }
}
@media (max-width: 560px) {
    .fx-table [data-c="track"] {
        display: none;
    }
    /* The compare checkbox goes too. Building a side-by-side comparison is a
       two-handed, wide-screen activity; on a phone the way into an ETF is to
       tap the row and read the drawer, which says everything the comparison
       would and in sentences. */
    .fx-table [data-c="cmp"] {
        display: none;
    }
    /* The price-vs-NAV sub-line is what makes the premium column wide, and the
       premium above it is the number that matters. Both are in the drawer. */
    .et-sub {
        display: none;
    }
    /* Turnover stacks the figure over its verdict rather than sitting beside
       it — the pill is worth keeping, it just doesn't need its own column. */
    .et-liq {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
    .fx-table th,
    .fx-table td {
        padding-left: 6px;
        padding-right: 6px;
    }
    .fx-table [data-c="sym"] {
        max-width: 34vw;
    }
    .fx-table .fx-fund-n,
    .fx-table .fx-fund-amc {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 34vw;
    }
    /* Swap in the short header. The label sets the column's minimum width, so
       "Premium to NAV" was costing more pixels than the figures under it. */
    .fx-table th[data-short] {
        font-size: 0;
    }
    .fx-table th[data-short]::after {
        content: attr(data-short);
        font-size: 10.5px;
        letter-spacing: 0.04em;
    }
}

/* ---------- REITs & InvITs ----------
   The page's other half. It shares the rail, the search box and the drawer
   frame with the ETF table and nothing else — a trust has no NAV to be at a
   premium to, so where an ETF row shows a gap this one shows a yield split
   three ways by how each rupee is taxed. */

.et-fam-split {
    width: 1px;
    align-self: stretch;
    margin: 4px 4px;
    background: var(--card-brd);
    flex: 0 0 auto;
}
.et-fam-trust.on {
    background: linear-gradient(135deg, #0f8f6a, var(--up));
}

/* The alert block is red for a premium and neutral for an explanation. */
.et-alert-info {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04));
    border-color: rgba(99, 102, 241, 0.32);
}
.et-alert-info .et-alert-h {
    color: #bfc4ff;
}

.et-yield {
    font: 700 15px/1 "JetBrains Mono", monospace;
    color: var(--up);
}
.et-asset {
    font-size: 12.5px;
    font-weight: 600;
}

/* The stacked bar: income, dividend, capital returned — one scale across the
   whole table, so two trusts at the same headline yield look as different as
   they are. */
.et-split {
    display: flex;
    height: 16px;
    min-width: 130px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}
.et-split i {
    display: block;
    height: 100%;
}
.et-sp-i {
    background: var(--amber);
}
.et-sp-d {
    background: var(--indigo);
}
.et-sp-c {
    background: rgba(255, 255, 255, 0.24);
}
.et-key {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 7px;
    vertical-align: baseline;
}

.et-taxdl dd small {
    display: block;
    color: var(--faint);
    font-size: 11px;
    line-height: 1.6;
    margin-top: 3px;
    font-weight: 400;
    max-width: 46ch;
}
.et-aftertax {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(22, 209, 149, 0.08);
    border: 1px solid rgba(22, 209, 149, 0.28);
    display: grid;
    gap: 4px;
}
.et-aftertax-k {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.et-aftertax-v {
    font: 800 24px/1 "JetBrains Mono", monospace;
    color: var(--up);
}
.et-aftertax small {
    color: var(--faint);
    font-size: 11px;
    line-height: 1.65;
    margin-top: 4px;
}

.et-paytbl td,
.et-paytbl th {
    white-space: nowrap;
}
.et-paytbl .r {
    text-align: right;
}

@media (max-width: 720px) {
    .fx-table [data-c="asset"],
    .fx-table [data-c="total1y"] {
        display: none;
    }
}
@media (max-width: 560px) {
    /* A phone keeps the three that answer the question — which trust, what it
       yields, and how much of that is actually income. Turnover goes: every
       REIT here trades deeply, and the one number where it matters (the thin
       InvITs) is a tap away in the drawer. */
    .fx-table [data-c="income"],
    .fx-table [data-c="liq"] {
        display: none;
    }
    .et-split {
        min-width: 96px;
    }
    .et-aftertax-v {
        font-size: 20px;
    }
    .et-legend {
        gap: 4px 12px;
    }
    .et-legend span {
        font-size: 10.5px;
    }
}

/* The key for the stacked yield bar, in the group head where the reader is. */
.et-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
}
.et-legend span {
    font-size: 11.5px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
}

/* ---------- drawer charts ----------
   Hand-drawn SVG, not a charting library — see the note above premiumChart().
   Every chart is a viewBox with preserveAspectRatio off, so it fills whatever
   width the drawer gives it without a resize listener; the stroke widths are
   set with vector-effect so they don't stretch with it. */

.ec-wrap {
    margin: 4px 0 14px;
}
.ec-svg {
    display: block;
    width: 100%;
    height: 190px;
    overflow: visible;
}
.ec-grid {
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.ec-zero {
    stroke: rgba(255, 255, 255, 0.42);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}
.ec-line {
    fill: none;
    stroke: var(--txt);
    stroke-width: 1.6;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.ec-dot {
    fill: #fff;
    stroke: var(--bg);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
/* Above NAV is a cost, below it is a discount — so the fill is red over the
   zero line and green under it, which is the reverse of every other chart on
   the site and correct here. */
.ec-fill-up {
    fill: rgba(255, 93, 108, 0.28);
    stroke: none;
}
.ec-fill-dn {
    fill: rgba(22, 209, 149, 0.24);
    stroke: none;
}
.ec-fill-neutral {
    fill: rgba(139, 92, 246, 0.16);
    stroke: none;
}
.ec-band {
    fill: rgba(255, 255, 255, 0.05);
}
.ec-mark {
    stroke: rgba(99, 102, 241, 0.5);
    stroke-width: 1;
    stroke-dasharray: 2 3;
    vector-effect: non-scaling-stroke;
}
.ec-ylab,
.ec-xlab {
    fill: var(--faint);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
}
.ec-ylab {
    text-anchor: end;
}
.ec-xlab {
    text-anchor: middle;
}
.ec-b-income {
    fill: var(--amber);
}
.ec-b-dividend {
    fill: var(--indigo);
}
.ec-b-capital {
    fill: rgba(255, 255, 255, 0.26);
}
.ec-b-unknown {
    fill: rgba(255, 255, 255, 0.16);
}
.ec-key {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 8px;
}
.ec-key span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--faint);
}
.ec-key i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 auto;
}
.ec-k-up {
    background: rgba(255, 93, 108, 0.55);
}
.ec-k-dn {
    background: rgba(22, 209, 149, 0.5);
}
.ec-k-band {
    background: rgba(255, 255, 255, 0.14);
}
.ec-k-mark {
    background: rgba(99, 102, 241, 0.6);
}

@media (max-width: 560px) {
    .ec-svg {
        height: 160px;
    }
    .ec-ylab,
    .ec-xlab {
        font-size: 13px;
    }
}

/* ---------- the drawer's own furniture ----------
   These seven classes were used by the drawer markup and defined nowhere:
   funds.css names its equivalents `fx-d-*`, and I had written `fx-dr-*`. The
   result was a panel of raw browser defaults — an unstyled <dl> stacks its
   term above an indented definition, which is why a screen full of careful
   figures read as a wall of text. Defining them here rather than renaming to
   funds.css's set on purpose: this drawer holds charts and a tax breakdown that
   the fund drawer has no equivalent of, and it should be free to lay them out
   its own way. */

.fx-dr-head {
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--card-brd);
}
.fx-dr-rank {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 6px;
}
.fx-dr-head h2 {
    margin: 0;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-family: "JetBrains Mono", monospace;
}
.fx-dr-amc {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.fx-dr-sec {
    margin: 0 0 26px;
}
.fx-dr-sec h4 {
    margin: 0 0 8px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.fx-dr-note {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--muted);
    max-width: 78ch;
}
.fx-dr-fine {
    margin: 26px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--card-brd);
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--faint);
    max-width: 82ch;
}

/* The metric list. Two columns — label left, figure right — on one row each,
   with a rule between, so a column of numbers reads as a column of numbers. */
.fx-dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: 0;
    border: 1px solid var(--card-brd);
    border-radius: 14px;
    overflow: hidden;
}
.fx-dl dt,
.fx-dl dd {
    padding: 11px 15px;
    border-top: 1px solid var(--card-brd);
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.fx-dl dt:first-of-type,
.fx-dl dt:first-of-type + dd {
    border-top: 0;
}
.fx-dl dt {
    font-size: 12.5px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.015);
}
.fx-dl dd {
    margin: 0;
    justify-content: flex-end;
    text-align: right;
    font: 600 13.5px/1.5 "JetBrains Mono", monospace;
    flex-wrap: wrap;
}
.fx-dl dd small {
    display: block;
    width: 100%;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.6;
    color: var(--faint);
    text-align: right;
}

/* The tax breakdown is the one list that reads better left-aligned: each row
   carries a sentence of explanation, and a right-aligned paragraph is a wall. */
.fx-dl.et-taxdl dd {
    justify-content: flex-start;
    text-align: left;
}
.fx-dl.et-taxdl dd small {
    text-align: left;
}
.fx-dl.et-taxdl dt {
    align-items: center;
}

@media (max-width: 620px) {
    .fx-dr-head h2 {
        font-size: 22px;
    }
    .fx-dl {
        grid-template-columns: 1fr auto;
    }
    .fx-dl dt,
    .fx-dl dd {
        padding: 9px 11px;
        font-size: 12px;
    }
    .fx-dl dd small {
        font-size: 10.5px;
    }
}

/* ===========================================================================
   The detail drawer, designed.

   The panel answers one question — should I buy this, and what will it really
   cost me — and it answers in a fixed order that the numbering encodes: what it
   costs you now, whether you can get out, what it actually holds. The ordinals
   are not ornament; the copy in section three refers back to section one.

   Everything is quiet except one instrument per side. For an ETF that is the
   gap meter: two bars at true relative length with the rupee figures on them,
   because "+19.98% to NAV" is a fact you have to convert before it means
   anything, and two visibly different bars is the same fact already converted.
   For a trust it is the yield ledger: one bar that splits into the three
   amounts that add up to the headline. Both are built from the site's existing
   palette — no new colours, no accent invented for the occasion.
   =========================================================================== */

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

.dr-head {
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--card-brd);
}
.dr-eyebrow {
    font: 700 10.5px/1 "Inter", sans-serif;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 10px;
}
.dr-title {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.dr-title h2 {
    margin: 0;
    font: 700 30px/1 "JetBrains Mono", monospace;
    letter-spacing: -0.03em;
}
.dr-score {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--card-brd);
    background: rgba(255, 255, 255, 0.04);
    font: 700 17px/1 "JetBrains Mono", monospace;
}
.dr-score small {
    font-size: 10px;
    font-weight: 500;
    color: var(--faint);
    letter-spacing: 0.02em;
}
.dr-score.good {
    color: var(--up);
    border-color: rgba(22, 209, 149, 0.35);
    background: rgba(22, 209, 149, 0.09);
}
.dr-score.bad {
    color: var(--down);
    border-color: rgba(255, 93, 108, 0.35);
    background: rgba(255, 93, 108, 0.09);
}
.dr-sub {
    margin: 9px 0 0;
    font-size: 13px;
    color: var(--muted);
}

/* The one sentence that decides it. Set as a lede, not as a callout box —
   a box would make it look like an aside, and it is the opposite. */
.dr-verdict {
    margin: 0 0 30px;
    padding-left: 16px;
    border-left: 2px solid var(--violet);
    font-size: 15px;
    line-height: 1.7;
    color: var(--txt);
    max-width: 74ch;
}
.dr-verdict b {
    font-weight: 700;
}

/* ---- sections ---- */

.dr-sec {
    margin: 0 0 34px;
}
.dr-sec-h {
    display: flex;
    align-items: baseline;
    gap: 11px;
    margin-bottom: 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--card-brd);
}
.dr-sec-n {
    font: 700 11px/1 "JetBrains Mono", monospace;
    color: var(--violet);
    opacity: 0.75;
    flex: 0 0 auto;
}
.dr-sec-h h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex: 1 1 auto;
}
.dr-sec-note {
    font-size: 11px;
    color: var(--faint);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    flex: 0 0 auto;
}
.dr-live {
    color: var(--up);
}
.dr-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--muted);
    max-width: 76ch;
}
.dr-note b {
    color: var(--txt);
}
.dr-fine {
    margin: 30px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--card-brd);
    font-size: 11.5px;
    line-height: 1.75;
    color: var(--faint);
    max-width: 84ch;
}

/* ---- the gap meter: the ETF signature ---- */

.dr-gap {
    display: grid;
    gap: 9px;
    padding: 18px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid var(--card-brd);
    margin-bottom: 16px;
}
.dr-gap-row {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    align-items: center;
    gap: 14px;
}
.dr-gap-k {
    font-size: 11px;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.dr-gap-track {
    display: block;
    height: 15px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}
.dr-gap-track i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.55), var(--violet));
}
.dr-gap-track i.nav {
    background: rgba(255, 255, 255, 0.22);
}
.dr-gap-v {
    font: 700 14px/1 "JetBrains Mono", monospace;
    min-width: 78px;
    text-align: right;
}
.dr-gap-delta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed var(--card-brd);
}
.dr-gap-delta b {
    font: 800 21px/1 "JetBrains Mono", monospace;
    letter-spacing: -0.02em;
}
.dr-gap-delta span {
    font-size: 12.5px;
    color: var(--muted);
}
.dr-gap.over .dr-gap-delta b {
    color: var(--down);
}
.dr-gap.under .dr-gap-delta b {
    color: var(--up);
}
.dr-gap.level .dr-gap-delta b {
    color: var(--muted);
}

/* ---- the yield ledger: the trust signature ---- */

.dr-ledger {
    padding: 18px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid var(--card-brd);
    margin-bottom: 16px;
}
.dr-ledger-bar {
    display: flex;
    height: 26px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}
.dr-ledger-bar i {
    display: block;
    height: 100%;
}
.dr-ledger-legs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin-top: 16px;
}
.dr-leg {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 0 8px;
}
.dr-leg i {
    grid-row: 1 / 3;
    align-self: center;
}
.dr-leg b {
    font: 700 17px/1.1 "JetBrains Mono", monospace;
}
.dr-leg span {
    grid-column: 2;
    font-size: 12px;
    color: var(--muted);
}
.dr-leg small {
    grid-column: 2;
    font-size: 10.5px;
    color: var(--faint);
}

/* ---- what you keep ---- */

.dr-keep {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(22, 209, 149, 0.1), rgba(22, 209, 149, 0.03));
    border: 1px solid rgba(22, 209, 149, 0.3);
}
.dr-keep-k {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.dr-keep-v {
    display: block;
    margin-top: 6px;
    font: 800 27px/1 "JetBrains Mono", monospace;
    letter-spacing: -0.02em;
    color: var(--up);
}
.dr-keep p {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.75;
    color: var(--faint);
    max-width: 80ch;
}

/* ---- charts, captioned ---- */

.dr-fig {
    margin: 0 0 16px;
    padding: 16px 18px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--card-brd);
}
.dr-fig figcaption {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--card-brd);
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--faint);
}
.dr-fig figcaption b {
    color: var(--muted);
}
.dr-fig .ec-wrap {
    margin: 0;
}

@media (max-width: 620px) {
    .dr-title h2 {
        font-size: 23px;
    }
    .dr-verdict {
        font-size: 14px;
        margin-bottom: 24px;
    }
    .dr-gap,
    .dr-ledger,
    .dr-keep,
    .dr-fig {
        padding: 14px;
        border-radius: 14px;
    }
    .dr-gap-row {
        grid-template-columns: 60px 1fr auto;
        gap: 9px;
    }
    .dr-gap-v {
        min-width: 62px;
        font-size: 12.5px;
    }
    .dr-gap-delta b {
        font-size: 18px;
    }
    .dr-keep-v {
        font-size: 22px;
    }
    .dr-ledger-legs {
        gap: 10px 18px;
    }
    .dr-sec {
        margin-bottom: 26px;
    }
}