/*
 * funds.css
 *   /etf/{ticker}              /funds/{ticker}
 *   /etf/{ticker}/portfolio    /etf/{ticker}/flows    /etf/{ticker}/information
 * Version 1.0.0
 *
 * CARD CONTENTS ONLY, for all four fund pages.
 * ---------------------------------------------------------------------
 * The card shells — .bq-section, .bq-chart-box and the grids that place
 * them — come from assets/css/style.css and are shared with every other
 * template in this plugin. Nothing here touches their border, radius,
 * shadow or padding.
 *
 * Every rule is scoped to `.bq-fd`, a class only the four fund templates
 * put on #bq-ownership-container, and every new class is prefixed
 * `bq-fd-`, so loading this file cannot reach another page even by
 * accident. The per-page files (fund-overview.css and friends) hold only
 * what is genuinely specific to one page and depend on this one.
 *
 * The vocabulary is the site's existing one, deliberately: it is
 * ownership-pages.css's, token for token, because a fund page and an
 * ownership page are the same kind of page — a header, some tiles, a
 * chart, a long table — and a second design system for them would be a
 * third on a site that should have one.
 *   - 11px/700/uppercase micro-labels for chrome
 *   - hairline rules rather than boxes inside boxes
 *   - tabular figures everywhere a number can change under the reader
 *   - #15803d / #c5331f for direction, #00529b for state, never decoration
 *   - segmented controls instead of native selects for three or four
 *     fixed choices
 *
 * Lato is untouched: the global stylesheet forces
 * `font-family: var(--bq-lato) !important` on everything. Weight, size,
 * tracking and figure style do the work here.
 */

/* =====================================================================
   THE PALETTE
   ---------------------------------------------------------------------
   THE FIRST DRAFT WAS ONE HUE. Every card head, every donut arc, every
   rail, every link and every chip was #00529b at some lightness, because
   that is the site's one accent and a blue ramp is the obvious way to
   colour eleven sectors. Eleven blues is not eleven colours — it is one
   colour eleven times — and four pages built out of it read as one long
   grey-blue page whichever of them you were on.

   SO EACH KIND OF THING OWNS A HUE, and the hue means something:

     teal    what the fund OWNS      holdings, weights, allocation
     violet  money MOVING            flows in and out
     amber   what it COSTS           fees, expense ratios, gates
     rose    what could go WRONG     risks
     blue    the PRICE               one blue, one job

   A reader who has been on /flows knows violet is flow before they read
   the axis, and a fee tile is amber on the overview and amber in the
   share-class table. That is what a hue is for.

   The tones are held at roughly one lightness so no card shouts over its
   neighbour, and green/red are untouched: they mean direction, never
   decoration, and nothing else may borrow them.

   Ink and structure stay neutral and stay warm-neutral rather than
   blue-grey — see .bq-fd-page below for the page ground.
   ===================================================================== */
.bq-fd {
    /* Ink & type — warm-neutral greys, not blue-greys. The old ramp was
       mixed toward #00529b, which is a large part of why a page with no
       colour on it still read as blue. */
    --fd-ink:        #16202b;
    --fd-text:       #414c57;
    --fd-muted:      #6d7883;
    --fd-faint:      #98a1ab;

    /* Structure */
    --fd-line:       #ecebe8;
    --fd-line-mid:   #e0dedb;
    --fd-line-strong:#cfccc7;
    --fd-tint:       #faf9f7;
    --fd-tint-2:     #f4f3f0;

    /* The five accents */
    --fd-teal:       #0e8577;
    --fd-teal-soft:  rgba(14, 133, 119, .10);
    --fd-violet:     #6455d8;
    --fd-violet-soft:rgba(100, 85, 216, .10);
    --fd-amber:      #b0761a;
    --fd-amber-soft: rgba(176, 118, 26, .12);
    --fd-rose:       #c9456b;
    --fd-rose-soft:  rgba(201, 69, 107, .10);
    --fd-blue:       #2f6fd0;
    --fd-blue-soft:  rgba(47, 111, 208, .10);
    /* PRICE. The sixth hue, and it needed to be its own: the overview
       already spends teal on what the fund owns, amber on what it costs,
       violet on the strategy and rose on the risks, so the price line —
       the one fact on the page that is not an attribute of the fund but a
       reading from the market — had nowhere left to sit but blue, which
       is a link colour everywhere else on this site.

       Plum is red-purple where violet is blue-purple; at a 2px line
       weight against a white plot they do not read as the same family. */
    --fd-plum:       #7c3f7e;
    --fd-plum-soft:  rgba(124, 63, 126, .10);

    /* Direction. Untouched, and reserved. */
    --fd-green:      #15803d;
    --fd-green-soft: rgba(21, 128, 61, .10);
    --fd-red:        #c5331f;
    --fd-red-soft:   rgba(197, 51, 31, .09);
    --fd-flat:       #8b8f95;
    --fd-flat-soft:  rgba(139, 143, 149, .14);

    --fd-navy:       #16202b;

    /* Whatever hue the current block is speaking. Cards set it; rails,
       swatches, focus rings and links read it. One property is what lets
       a card change colour without a second copy of every rule. */
    --fd-accent:      var(--fd-teal);
    --fd-accent-soft: var(--fd-teal-soft);
}

/* Per-card accents. Put one of these on a .bq-chart-box or a .bq-section
   and everything inside it follows. */
.bq-fd .fd-teal   { --fd-accent: var(--fd-teal);   --fd-accent-soft: var(--fd-teal-soft); }
.bq-fd .fd-violet { --fd-accent: var(--fd-violet); --fd-accent-soft: var(--fd-violet-soft); }
.bq-fd .fd-amber  { --fd-accent: var(--fd-amber);  --fd-accent-soft: var(--fd-amber-soft); }
.bq-fd .fd-rose   { --fd-accent: var(--fd-rose);   --fd-accent-soft: var(--fd-rose-soft); }
.bq-fd .fd-blue   { --fd-accent: var(--fd-blue);   --fd-accent-soft: var(--fd-blue-soft); }
.bq-fd .fd-plum   { --fd-accent: var(--fd-plum);   --fd-accent-soft: var(--fd-plum-soft); }

/* THE PAGE GROUND.
   assets/css/style.css paints `body.bq-headless-page` #f0f2f5, a blue-grey
   that nine /stocks/* templates also sit on — so it cannot be changed
   there without changing all of them. The fund routes add .bq-fd-page in
   bq_fund_body_class(), and this is the one rule that needs.

   #f5f4f2 is warm-neutral: against the navy header it reads as paper
   rather than as more of the same blue, and it is what stops a page of
   white cards from having a blue cast before a single accent is drawn. */
body.bq-fd-page,
body.bq-fd-page.bq-headless-page {
    background-color: #f5f4f2;
}

/* A card's top edge carries its accent, 2px, full bleed. It is the
   cheapest possible way to say what a card is about, and it is what makes
   a column of four cards read as four subjects rather than four boxes.
   Applied only where a card has been given a hue. */
.bq-fd .fd-teal.bq-section,   .bq-fd .fd-teal.bq-chart-box,
.bq-fd .fd-violet.bq-section, .bq-fd .fd-violet.bq-chart-box,
.bq-fd .fd-amber.bq-section,  .bq-fd .fd-amber.bq-chart-box,
.bq-fd .fd-rose.bq-section,   .bq-fd .fd-rose.bq-chart-box,
.bq-fd .fd-blue.bq-section,   .bq-fd .fd-blue.bq-chart-box,
.bq-fd .fd-plum.bq-section,   .bq-fd .fd-plum.bq-chart-box {
    position: relative;
    /* The rule is drawn INSIDE the card's radius, so the card has to clip
       it. .bq-section is not overflow-hidden by default and a 2px bar on a
       6px radius would otherwise square off both top corners. */
    overflow: hidden;
}

.bq-fd .fd-teal.bq-section::before,   .bq-fd .fd-teal.bq-chart-box::before,
.bq-fd .fd-violet.bq-section::before, .bq-fd .fd-violet.bq-chart-box::before,
.bq-fd .fd-amber.bq-section::before,  .bq-fd .fd-amber.bq-chart-box::before,
.bq-fd .fd-rose.bq-section::before,   .bq-fd .fd-rose.bq-chart-box::before,
.bq-fd .fd-blue.bq-section::before,   .bq-fd .fd-blue.bq-chart-box::before,
.bq-fd .fd-plum.bq-section::before,   .bq-fd .fd-plum.bq-chart-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--fd-accent);
    opacity: .9;
}

/* Proportional digits make a column of weights jitter row to row as a
   table pages or filters. Anything that IS a number gets tabular ones. */
.bq-fd .bq-fd-num,
.bq-fd .bq-fd-kpi-val,
.bq-fd .bq-fd-table td,
.bq-fd .bq-fd-legend-val,
.bq-fd .bq-fd-dl dd,
.bq-fd .bq-fd-chip {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* =====================================================================
   CARD HEAD
   A micro-label on the left, the context the card is answering for on
   the right, one hairline under both. Chrome, not page copy.
   ===================================================================== */
.bq-fd .bq-fd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--fd-line);
}

.bq-fd .bq-fd-head h2,
.bq-fd .bq-fd-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fd-muted);
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.3;
}

.bq-fd .bq-fd-head-side {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bq-fd .bq-fd-meta {
    font-size: 11.5px;
    color: var(--fd-faint);
    letter-spacing: .01em;
    white-space: nowrap;
}

.bq-fd .bq-fd-meta strong {
    color: var(--fd-ink);
    font-weight: 700;
}

/* The sentence under a card head that says what the card is showing, in
   words, with the figures inline. */
.bq-fd .bq-fd-say {
    font-size: 13px;
    line-height: 1.65;
    color: var(--fd-text);
    margin: 0 0 16px;
}

.bq-fd .bq-fd-say strong { font-weight: 700; color: var(--fd-ink); }

/* =====================================================================
   AS-OF BANNER
   A quarterly portfolio snapshot read as live weights is the single most
   likely misreading of the Portfolio page, so the date is not a caption
   under a chart — it is the first thing above the page's content.
   ===================================================================== */
.bq-fd .bq-fd-asof {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    margin-bottom: 22px;
    /* AMBER, NOT BLUE. This is a caveat — "what you are reading is three
       months old" — and blue on this site means a link or a live state.
       An amber note is the one every reader already parses as "read me
       before you trust the number above". */
    background: var(--fd-amber-soft);
    border: 1px solid rgba(176, 118, 26, .22);
    border-radius: 7px;
    font-size: 12.5px;
    color: #6b4708;
    line-height: 1.5;
}

.bq-fd .bq-fd-asof svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--fd-amber);
}

.bq-fd .bq-fd-asof strong { font-weight: 700; }

/* =====================================================================
   KPI TILES
   ===================================================================== */
.bq-fd .bq-fd-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.bq-fd .bq-fd-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bq-fd .bq-fd-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bq-fd .bq-fd-kpi {
    padding: 4px 18px 18px;
    border-left: 1px solid var(--fd-line);
    border-bottom: 1px solid var(--fd-line);
    min-width: 0;
}

/* The grid draws its own rules, so the outer edges of it must not.
   nth-child on the column count, not a class, so a tile can be hidden for
   an absent field without the borders going wrong. */
.bq-fd .bq-fd-kpis .bq-fd-kpi:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.bq-fd .bq-fd-kpis .bq-fd-kpi:nth-last-child(-n + 3) { border-bottom: 0; padding-bottom: 4px; }
.bq-fd .bq-fd-kpis .bq-fd-kpi:nth-child(n + 4) { padding-top: 18px; }

.bq-fd .bq-fd-kpis--2 .bq-fd-kpi:nth-child(3n + 1) { border-left: 1px solid var(--fd-line); padding-left: 18px; }
.bq-fd .bq-fd-kpis--2 .bq-fd-kpi:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
.bq-fd .bq-fd-kpis--2 .bq-fd-kpi:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 4px; }
.bq-fd .bq-fd-kpis--2 .bq-fd-kpi:nth-child(n + 3) { padding-top: 18px; }

.bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-child(3n + 1) { border-left: 1px solid var(--fd-line); padding-left: 18px; }
.bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-last-child(-n + 4) { border-bottom: 0; padding-bottom: 4px; }
.bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-child(n + 5) { padding-top: 18px; }

.bq-fd .bq-fd-kpi-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--fd-faint);
    margin-bottom: 7px;
    line-height: 1.35;
}

.bq-fd .bq-fd-kpi-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--fd-ink);
    line-height: 1.15;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.bq-fd .bq-fd-kpi-val--sm { font-size: 16px; }
.bq-fd .bq-fd-kpi-val.is-up   { color: var(--fd-green); }
.bq-fd .bq-fd-kpi-val.is-down { color: var(--fd-red); }

.bq-fd .bq-fd-kpi-sub {
    font-size: 11.5px;
    color: var(--fd-muted);
    margin-top: 6px;
    line-height: 1.45;
}

/* A struck-through gross expense beside the net one. They are equal for
   most funds, and the struck figure is rendered only when they differ —
   two identical numbers side by side reads as a rendering fault. */
.bq-fd .bq-fd-strike {
    text-decoration: line-through;
    color: var(--fd-faint);
    font-weight: 600;
}

/* =====================================================================
   CHIPS
   ===================================================================== */
.bq-fd .bq-fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
    white-space: nowrap;
}

.bq-fd .bq-fd-chip--up   { background: var(--fd-green-soft); color: var(--fd-green); }
.bq-fd .bq-fd-chip--down { background: var(--fd-red-soft);   color: var(--fd-red); }
.bq-fd .bq-fd-chip--flat { background: var(--fd-flat-soft);  color: #5d6b79; }
.bq-fd .bq-fd-chip--blue { background: var(--fd-blue-soft);  color: var(--fd-blue); }
.bq-fd .bq-fd-chip--teal { background: var(--fd-teal-soft);  color: var(--fd-teal); }
.bq-fd .bq-fd-chip--amber{ background: var(--fd-amber-soft); color: #8a5a10; }
.bq-fd .bq-fd-chip--accent { background: var(--fd-accent-soft); color: var(--fd-accent); }
.bq-fd .bq-fd-chip--short{ background: var(--fd-red-soft);   color: var(--fd-red); }

/* The instrument qualifier — "Class C", "Series 2025A", "1st Lien Term Loan".
   Quieter than every other chip on purpose: it sits on a large share of rows
   rather than marking an exception, so it has to read as part of the name
   rather than compete with it. */
.bq-fd .bq-fd-chip--class {
    background: var(--fd-flat-soft);
    color: #5d6b79;
    font-weight: 600;
    font-size: 10px;
    padding: 2px 6px;
}

/* =====================================================================
   SEGMENTED CONTROLS  (chart ranges)
   ===================================================================== */
.bq-fd .bq-fd-seg {
    display: inline-flex;
    background: var(--fd-tint-2);
    border: 1px solid var(--fd-line-mid);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.bq-fd .bq-fd-seg button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 5px 11px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--fd-muted);
    line-height: 1.3;
    transition: background .14s ease, color .14s ease;
    font-family: inherit;
}

.bq-fd .bq-fd-seg button:hover { color: var(--fd-ink); }

.bq-fd .bq-fd-seg button.is-active {
    background: #fff;
    color: var(--fd-ink);
    box-shadow: 0 1px 2px rgba(11, 31, 46, .10);
}

.bq-fd .bq-fd-seg button:focus-visible {
    outline: 2px solid var(--fd-accent);
    outline-offset: 1px;
}

/* =====================================================================
   CHART KEYS
   ===================================================================== */
.bq-fd .bq-fd-keys {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bq-fd .bq-fd-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--fd-muted);
    letter-spacing: .01em;
    white-space: nowrap;
}

.bq-fd .bq-fd-key i {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--fd-accent);
    flex: none;
}

.bq-fd .bq-fd-key--bar i   { height: 9px; width: 9px; border-radius: 1px; }
.bq-fd .bq-fd-key--in i    { background: var(--fd-green); }
.bq-fd .bq-fd-key--out i   { background: var(--fd-red); }
.bq-fd .bq-fd-key--price i { background: var(--fd-plum); }
.bq-fd .bq-fd-key--weight i { background: var(--fd-teal); }
.bq-fd .bq-fd-key--aum i   { background: var(--fd-navy); }

/* =====================================================================
   PLOTS
   Explicit heights so the card does not collapse and then expand under
   the reader when Chart.js takes the canvas over.
   ===================================================================== */
.bq-fd .bq-fd-plot {
    position: relative;
    height: 260px;
    min-width: 0;
    margin-top: 4px;
}

.bq-fd .bq-fd-plot--tall  { height: 320px; }
.bq-fd .bq-fd-plot--short { height: 200px; }
.bq-fd .bq-fd-plot canvas { display: block; }

/* =====================================================================
   DONUT + LEGEND  (the exposure breakdowns)
   ===================================================================== */
.bq-fd .bq-fd-donut {
    display: grid;
    /* The ring is the subject of the card and was narrower than the text
       beside it. The legend is the 1fr, so every pixel the ring gains is a
       pixel the bar rows give up — one number, both halves of the change. */
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.bq-fd .bq-fd-donut-plot {
    position: relative;
    width: 210px;
    height: 210px;
}

.bq-fd .bq-fd-donut-plot canvas { position: relative; z-index: 1; }

/* Inset by the ring's thickness, not to the ring's edge. The hole in a
   68%-cutout donut is 68% of the plot, so `inset: 0` gave the label the
   whole 168px box to lay out in and let it run under the ring — measured on
   AGG, whose largest sector is "Communication Services" and which read as
   "MMUNICATION SERVI" with both ends behind the arcs. 17% a side is half of
   the remaining 32%, which is exactly the ring. */
.bq-fd .bq-fd-donut-core {
    position: absolute;
    inset: 0 17%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    z-index: 0;
}

.bq-fd .bq-fd-donut-core-val {
    font-size: 21px;
    font-weight: 700;
    color: var(--fd-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Two lines, then an ellipsis. A bucket name is filer text and can be
   anything from "Energy" to "US Government Sponsored Entity"; the legend
   beside the ring carries the full string, and this is a readout of what
   the pointer is on, so it can afford to be cut. */
.bq-fd .bq-fd-donut-core-lbl {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fd-faint);
    margin-top: 4px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.bq-fd .bq-fd-legend {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

/* THE LEGEND IS NOT CAPPED. THE CARD GETS TALLER.
   ---------------------------------------------------------------------
   It used to cap at 186px and scroll, to stop one card in a 2x2 grid
   towering over the other three. That traded a ragged grid for something
   worse: a card with its own scrollbar, which hides data behind a
   gesture nobody makes, and on a twelve-sector fund left three sectors
   permanently out of sight.

   A card is as tall as what is in it. A grid row of two is as tall as
   its taller card. Both are fine — a scrollbar inside a card is not.

   The fade and the .is-whole/.is-end classes are gone with it; what is
   left is the hover highlight, which the donut still drives. */
.bq-fd .bq-fd-legend-row {
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 4px;
    transition: background .12s ease;
    cursor: default;
}

.bq-fd .bq-fd-legend-row.is-hot { background: var(--fd-tint-2); }

.bq-fd .bq-fd-legend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    row-gap: 4px;
}

.bq-fd .bq-fd-legend-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--fd-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bq-fd .bq-fd-legend-name i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
    background: var(--fd-swatch, var(--fd-accent));
}

.bq-fd .bq-fd-legend-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--fd-ink);
    white-space: nowrap;
}

.bq-fd .bq-fd-legend-sub {
    font-size: 10.5px;
    color: var(--fd-faint);
    white-space: nowrap;
}

.bq-fd .bq-fd-legend-rail {
    grid-column: 1 / -1;
    height: 3px;
    border-radius: 2px;
    background: var(--fd-line);
    overflow: hidden;
}

.bq-fd .bq-fd-legend-rail span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--fd-swatch, var(--fd-accent));
}

/* =====================================================================
   PROSE  (objective, strategy, risk narrative, how-to-buy, tax)
   Prospectus text. principal_strategy runs to ~16,000 characters and a
   risk_text to ~8,000, so anything long is clamped and expanded rather
   than dumped into the page at full height.
   ===================================================================== */
.bq-fd .bq-fd-prose {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--fd-text);
}

.bq-fd .bq-fd-prose p { margin: 0 0 14px; }
.bq-fd .bq-fd-prose p:last-child { margin-bottom: 0; }

.bq-fd .bq-fd-clamp {
    position: relative;
    max-height: 190px;
    overflow: hidden;
    transition: max-height .25s ease;
}

.bq-fd .bq-fd-clamp.is-open { max-height: none; }

/* The fade is what tells the reader there is more, so it goes when the
   block opens — otherwise an expanded block looks permanently truncated. */
.bq-fd .bq-fd-clamp::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
    pointer-events: none;
}

.bq-fd .bq-fd-clamp.is-open::after { display: none; }

.bq-fd .bq-fd-more {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 0 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fd-accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bq-fd .bq-fd-more:hover { color: var(--fd-ink); }

.bq-fd .bq-fd-more svg {
    width: 12px;
    height: 12px;
    transition: transform .2s ease;
}

.bq-fd .bq-fd-more.is-open svg { transform: rotate(180deg); }

/* =====================================================================
   DEFINITION LIST  (fund details, fund facts)
   ===================================================================== */
.bq-fd .bq-fd-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

.bq-fd .bq-fd-dl > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 18px 13px 0;
    border-bottom: 1px solid var(--fd-line);
    min-width: 0;
}

.bq-fd .bq-fd-dl > div:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--fd-line); }
.bq-fd .bq-fd-dl > div:first-child,
.bq-fd .bq-fd-dl > div:nth-child(2) { padding-top: 0; }

.bq-fd .bq-fd-dl dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--fd-faint);
    line-height: 1.35;
}

.bq-fd .bq-fd-dl dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fd-ink);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.bq-fd .bq-fd-dl dd a { color: var(--fd-accent); text-decoration: none; }
.bq-fd .bq-fd-dl dd a:hover { text-decoration: underline; }

/* An opaque identifier — a CIK, a series id, an accession number — is set
   in a monospace face so it reads as a key rather than as a quantity. */
.bq-fd .bq-fd-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--fd-text);
}

/* =====================================================================
   TABLE HEAD  (the block above a long table)
   ===================================================================== */
.bq-fd .bq-fd-tablehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 15px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--fd-line);
}

.bq-fd .bq-fd-eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fd-faint);
    margin-bottom: 6px;
}

.bq-fd .bq-fd-tablehead h2 {
    font-size: 19px;
    font-weight: 700;
    color: var(--fd-ink);
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.bq-fd .bq-fd-facts {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}

.bq-fd .bq-fd-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
    border-left: 1px solid var(--fd-line);
}

.bq-fd .bq-fd-fact:first-child { padding-left: 0; border-left: 0; }

.bq-fd .bq-fd-fact-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--fd-faint);
}

.bq-fd .bq-fd-fact-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--fd-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   TOOLBAR  (search, row count, export)
   ===================================================================== */
.bq-fd .bq-fd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.bq-fd .bq-fd-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 340px;
    min-width: 0;
}

.bq-fd .bq-fd-search svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--fd-faint);
    pointer-events: none;
}

.bq-fd .bq-fd-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px 8px 33px;
    border: 1px solid var(--fd-line-mid);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--fd-ink);
    line-height: 1.4;
}

.bq-fd .bq-fd-search input::placeholder { color: var(--fd-faint); }

.bq-fd .bq-fd-search input:focus {
    outline: none;
    border-color: var(--fd-accent);
    box-shadow: 0 0 0 3px var(--fd-accent-soft);
}

.bq-fd .bq-fd-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--fd-line-mid);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--fd-text);
    text-decoration: none;
    line-height: 1.4;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.bq-fd .bq-fd-btn svg { width: 14px; height: 14px; flex: none; }

.bq-fd .bq-fd-btn:hover {
    border-color: var(--fd-accent);
    color: var(--fd-accent);
    background: var(--fd-accent-soft);
}

.bq-fd .bq-fd-btn[disabled] {
    opacity: .55;
    cursor: default;
    pointer-events: none;
}

/* =====================================================================
   TABLES
   The wrapper scrolls, not the page. A holdings table is ~820px wide and
   a phone is not, and the alternative to an internal scroller is a body
   that scrolls sideways and takes the site's header with it.
   ===================================================================== */
.bq-fd .bq-fd-tablewrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.bq-fd .bq-fd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 720px;
}

/* COMPACT BY DEFAULT. A 519-row holdings table at 11px of padding a side
   was 46px a row, which is nine rows on a laptop screen and a page that
   scrolls for a minute. 6px/10px gives 32px — dense enough to scan a
   fund's top thirty positions without scrolling, which is what a holdings
   table is for. The hairline between rows does the separating that the
   padding used to. */
.bq-fd .bq-fd-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    text-align: right;
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--fd-faint);
    white-space: nowrap;
    border-bottom: 1px solid var(--fd-line-strong);
}

.bq-fd .bq-fd-table thead th.bq-fd-c-rank { text-align: right; width: 54px; }
.bq-fd .bq-fd-table thead th.bq-fd-c-name { text-align: left; min-width: 200px; }
.bq-fd .bq-fd-table thead th.bq-fd-c-text { text-align: left; }

.bq-fd .bq-fd-table tbody td {
    padding: 6px 10px;
    line-height: 1.45;
    text-align: right;
    color: var(--fd-text);
    border-bottom: 1px solid var(--fd-line);
    white-space: nowrap;
    vertical-align: middle;
}

.bq-fd .bq-fd-table tbody tr:last-child td { border-bottom: 0; }
.bq-fd .bq-fd-table tbody tr { transition: background .12s ease; }
.bq-fd .bq-fd-table tbody tr:hover { background: var(--fd-tint); }

.bq-fd .bq-fd-table td.bq-fd-c-rank {
    color: var(--fd-faint);
    font-size: 11.5px;
    font-weight: 600;
}

.bq-fd .bq-fd-table td.bq-fd-c-name {
    text-align: left;
    color: var(--fd-ink);
    font-weight: 600;
    white-space: normal;
    line-height: 1.4;
}

.bq-fd .bq-fd-table td.bq-fd-c-text {
    text-align: left;
    white-space: normal;
    color: var(--fd-muted);
}

.bq-fd .bq-fd-table td.bq-fd-strong { font-weight: 700; color: var(--fd-ink); }
.bq-fd .bq-fd-table td.bq-fd-up     { color: var(--fd-green); font-weight: 600; }
.bq-fd .bq-fd-table td.bq-fd-down   { color: var(--fd-red);   font-weight: 600; }
.bq-fd .bq-fd-table td.bq-fd-zero   { color: var(--fd-faint); }

.bq-fd .bq-fd-table a {
    color: var(--fd-accent);
    text-decoration: none;
    font-weight: 700;
}

.bq-fd .bq-fd-table a:hover { text-decoration: underline; }

/* The current share class in the classes table. It is the row the reader
   is already on, so it is marked rather than linked. */
.bq-fd .bq-fd-table tr.is-current {
    background: var(--fd-accent-soft);
    box-shadow: inset 3px 0 0 var(--fd-accent);
}

.bq-fd .bq-fd-table tr.is-current:hover { background: var(--fd-accent-soft); }
.bq-fd .bq-fd-table tr.is-current td { font-weight: 700; color: var(--fd-ink); }

/* The weight rail beside a holding's percentage. */
.bq-fd .bq-fd-weight {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.bq-fd .bq-fd-weight-rail {
    width: 54px;
    height: 3px;
    border-radius: 2px;
    background: var(--fd-line);
    overflow: hidden;
    flex: none;
}

.bq-fd .bq-fd-weight-rail span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--fd-teal);
}

.bq-fd .bq-fd-table .bq-fd-empty {
    text-align: center;
    padding: 32px 12px;
    color: var(--fd-faint);
    font-size: 13px;
}

/* "Showing 100 of 519". Rendered only when those two numbers differ. */
.bq-fd .bq-fd-tablefoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 15px;
    margin-top: 4px;
    border-top: 1px solid var(--fd-line);
    font-size: 12px;
    color: var(--fd-muted);
}

.bq-fd .bq-fd-tablefoot strong { color: var(--fd-ink); font-weight: 700; }

/* =====================================================================
   TOOLTIP
   A real DOM node, not Chart.js's canvas-painted one, so it can wear the
   same white / hairline / soft-shadow the cards do. One node serves every
   chart on the page.
   ===================================================================== */
.bq-fd-tip {
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
    background: #fff;
    border: 1px solid var(--fd-line-strong, #cfd9e3);
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(11, 31, 46, .13);
    padding: 10px 12px;
    min-width: 150px;
    max-width: 290px;
    font-family: inherit;
    font-size: 12px;
    color: #37485a;
    font-variant-numeric: tabular-nums;
}

.bq-fd-tip-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: #97a4b2;
    margin-bottom: 7px;
}

.bq-fd-tip-name {
    font-size: 13px;
    font-weight: 700;
    color: #0b1f2e;
    line-height: 1.35;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.bq-fd-tip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.5;
}

.bq-fd-tip-row + .bq-fd-tip-row { margin-top: 4px; }

.bq-fd-tip-row i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
}

.bq-fd-tip-row b { font-weight: 700; color: #0b1f2e; }

.bq-fd-tip-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    line-height: 1.55;
}

.bq-fd-tip-line + .bq-fd-tip-line { margin-top: 3px; }

/* The card is capped at 290px, so neither side can be nowrap: an asset
   class ("U.S. Treasury Repurchase Agreement, if collateralized…") or a
   asset-class series label on /portfolio-history ran straight out of the
   card. Both wrap inside it instead. The value's outsized flex-shrink
   makes it give way first, so a short label ("Category") stays on one
   line beside a long value; a long label only wraps once the value is
   down to its longest word, which for a figure is the whole figure.
   break-word, not anywhere: anywhere zeroes min-content and would let
   either side be crushed to a letter per line. */
.bq-fd-tip-k {
    font-size: 11px;
    color: #97a4b2;
    flex: 0 1 auto;
    overflow-wrap: break-word;
}

.bq-fd-tip-v {
    font-size: 12px;
    font-weight: 700;
    color: #0b1f2e;
    flex: 0 1000 auto;
    text-align: right;
    overflow-wrap: break-word;
}

.bq-fd-tip-v.is-up   { color: #15803d; }
.bq-fd-tip-v.is-down { color: #c5331f; }

/* The line under a padlocked reading. It has to say what to DO — a lock
   glyph on its own tells the reader they cannot have something without
   telling them how to. */
.bq-fd-tip-note {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #ecebe8;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #b0761a;
}

/* =====================================================================
   EMPTY STATES
   ===================================================================== */
.bq-fd .bq-fd-blank {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 46px 20px;
    color: var(--fd-muted);
}

.bq-fd .bq-fd-blank svg {
    width: 34px;
    height: 34px;
    color: var(--fd-line-strong);
    margin-bottom: 16px;
}

.bq-fd .bq-fd-blank strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--fd-ink);
    margin-bottom: 7px;
}

.bq-fd .bq-fd-blank > span {
    font-size: 13px;
    line-height: 1.6;
    max-width: 460px;
}

.bq-fd .bq-fd-blank-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.bq-fd .bq-fd-blank-links a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    text-align: left;
    padding: 10px 15px;
    border: 1px solid var(--fd-line-mid);
    border-radius: 7px;
    text-decoration: none;
    background: #fff;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.bq-fd .bq-fd-blank-links a:hover {
    border-color: var(--fd-accent);
    box-shadow: 0 2px 8px rgba(22, 32, 43, .08);
}

.bq-fd .bq-fd-blank-links strong {
    font-size: 13px;
    margin: 0;
    color: var(--fd-accent);
}

.bq-fd .bq-fd-blank-links span {
    font-size: 11.5px;
    color: var(--fd-muted);
    white-space: nowrap;
}

/* A note under a card — the sector "Other" caveat, the step-line caveat.
   It sits ABOVE the card foot, so no top border of its own: the foot
   brings one and two hairlines 30px apart read as a mistake. */
.bq-fd .bq-fd-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--fd-line-mid);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--fd-faint);
}

.bq-fd .bq-fd-note strong { color: var(--fd-muted); font-weight: 700; }

/* Spans both columns of .bq-four-grid-layout. */
.bq-fd .bq-fd-span-2 { grid-column: 1 / -1; }


/* =====================================================================
   THE AS-OF LINE
   ---------------------------------------------------------------------
   The quiet form of the banner, printed under EVERY chart and EVERY
   table built from the holdings snapshot rather than once at the top of
   the page. Readers do not arrive at the top of a page: they land on a
   sector donut from a search result, or scroll straight past three cards
   to the holdings table. A weight three months old read as today's is
   the one misreading these pages can cause, and a caption per block is
   what prevents it.
   ===================================================================== */
.bq-fd .bq-fd-asof-line {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--fd-faint);
    letter-spacing: .01em;
}

/* =====================================================================
   THE CARD FOOT
   ---------------------------------------------------------------------
   The way onward on the left, the as-of date on the right, ONE ROW.
   They were stacked — link, then date, then nothing — which spent three
   lines of a card on two short strings and left the date looking like a
   caption for the link rather than for the chart above it.

   Left and right is also what each is FOR: the link is an action and
   actions belong where the eye starts a line, the date is provenance and
   provenance belongs where a line ends.
   ===================================================================== */
.bq-fd .bq-fd-cardfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--fd-line);
}

/* The two children lose the borders and margins they carry when either
   is used on its own. */
.bq-fd .bq-fd-cardfoot .bq-fd-cardlink,
.bq-fd .bq-fd-cardfoot .bq-fd-asof-line {
    margin: 0;
    padding: 0;
    border: 0;
    width: auto;
}

.bq-fd .bq-fd-cardfoot .bq-fd-asof-line {
    text-align: right;
    white-space: nowrap;
    flex: none;
}

/* =====================================================================
   THE GATE
   ---------------------------------------------------------------------
   Amber, because amber is what a fee costs on these pages and this is
   the only other thing on them that asks the reader for something.

   IT SITS OUTSIDE THE SCROLLING TABLE, not in a <tr> with a colspan. A
   row is as wide as the TABLE, and on a phone the holdings table is
   460px inside a ~360px wrapper — so scrolling right to reach the later
   columns, the exact gesture the frozen name column invites, would carry
   the gate off to the left with the rest of the row. Out here it belongs
   to the card: it is the card's width at every breakpoint and it does
   not move. The same fix /dividends and /estimates made for their own
   paywall notes.

   The fade above it is what makes the last visible row read as a
   boundary rather than as the end of the data.
   ===================================================================== */
.bq-fd .bq-fd-gate {
    position: relative;
    margin-top: -1px;
    padding-top: 22px;
}

/* The last row dissolves into the gate. -46px pulls the gradient up over
   the final two rows of the table above; pointer-events:none so it does
   not eat a click on the row it is sitting on. */
.bq-fd .bq-fd-gate::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -46px;
    height: 46px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%);
    pointer-events: none;
}

.bq-fd .bq-fd-gate-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(176, 118, 26, .28);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(176, 118, 26, .10), rgba(176, 118, 26, .04));
}

.bq-fd .bq-fd-gate-icon {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(176, 118, 26, .16);
    color: #8a5a10;
}

.bq-fd .bq-fd-gate-icon svg { width: 16px; height: 16px; }

.bq-fd .bq-fd-gate-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin-right: auto;
}

.bq-fd .bq-fd-gate-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #6b4708;
    line-height: 1.35;
}

.bq-fd .bq-fd-gate-text span {
    font-size: 12px;
    color: #8a6a34;
    line-height: 1.45;
}

.bq-fd .bq-fd-gate-cta {
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 9px 18px;
    border-radius: 6px;
    background: #b0761a;
    color: #fff;
    line-height: 1.4;
    transition: background .14s ease, transform .1s ease;
}

.bq-fd .bq-fd-gate-cta:hover { background: #96630f; }
.bq-fd .bq-fd-gate-cta:active { transform: translateY(1px); }
.bq-fd .bq-fd-gate-cta:focus-visible { outline: 2px solid #6b4708; outline-offset: 2px; }

/* A locked cell inside a table or a tooltip: the padlock, and nothing
   where the figure would be. Not a blurred number and not a fake one —
   there is genuinely no value in the payload to show. */
.bq-fd .bq-fd-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--fd-faint);
}

.bq-fd .bq-fd-lock svg { width: 13px; height: 13px; flex: none; }

/* THE CLICKABLE PADLOCK is a soft round badge, not a bare glyph: a grey
   icon floating in a cell reads as a rendering fault, a badge reads as a
   control. Warms to the gate's amber on hover, since that is where a
   click on it leads. */
.bq-fd button.bq-fd-lock {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(22, 32, 43, .055);
    color: #8d98a4;
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s ease, color .15s ease;
}
.bq-fd button.bq-fd-lock svg { width: 11px; height: 11px; }
.bq-fd button.bq-fd-lock:hover { background: rgba(176, 118, 26, .14); color: #8a5a10; }
.bq-fd button.bq-fd-lock:focus-visible { outline: 2px solid rgba(176, 118, 26, .5); outline-offset: 2px; }

/* A padlock inside a tooltip reading is not wrapped in .bq-fd-lock — it
   is inserted straight into the value cell — so it has no width of its
   own and rendered at whatever the SVG's intrinsic size is, which for a
   viewBox with no width attribute is nothing at all. It was there in the
   markup and invisible on screen. */
.bq-fd-tip-v svg,
.bq-fd-tip-row svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }

.bq-fd .bq-fd-table tr.is-locked td { color: var(--fd-faint); }
.bq-fd .bq-fd-table tr.is-locked:hover { background: var(--fd-tint); }

/* =====================================================================
   THE READING SHEET  (.bq-sheet)
   ---------------------------------------------------------------------
   Opens the investment objective, the principal strategy, the risk
   narrative and the disclosure blocks. Markup is bq_render_fund_sheet()
   in includes/funds.php; the controller is BQFunds.sheet in funds.js.

   PORTED FROM /stocks/{ticker}, not reinvented. The geometry, the
   easing, the drag thresholds and the scroll lock are overview.css's and
   overview.js's, which are in turn the main menu's from
   bq-global-layout. Two sheets on one site that answer the same gesture
   differently is worse than one sheet.

   WHY THE FUND PAGES NEEDED IT. principal_strategy runs to ~16,000
   characters and risk_narrative to several thousand. The first draft
   clamped them in place with a "Read more" that expanded the card, which
   pushed everything below it down a screen and a half and left the
   reader hunting for where they had been. A sheet takes the long text
   out of the layout entirely: the card stays four lines tall and the
   prose gets a surface of its own with a measure that suits it.

   THE COLOUR IS A WASH, NOT A PANEL. --sheet-accent is set from the
   card that opened the sheet, so opening the strategy gives a teal
   sheet and opening the risks gives a rose one — the sheet reads as
   that card rising rather than as a dialog arriving on top of it.

   SHAPE: a bottom sheet below 768px, a centred dialog above it.
   ===================================================================== */

/* Exactly the viewport, so it contributes no overflow, and
   overflow:hidden so the sheet parked off-screen below cannot widen the
   initial containing block. visibility:hidden on the closed root takes
   the sheet's controls out of the tab order without needing `inert`; the
   delayed visibility transition lets the slide-out finish first. */
.bq-fd-page .bq-sheet-root {
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s .34s;
}

.bq-fd-page .bq-sheet-root.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}

.bq-fd-page .bq-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(16, 22, 30, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .3s ease;
}

.bq-fd-page .bq-sheet-root.is-open .bq-sheet__scrim { opacity: 1; }

.bq-fd-page .bq-sheet {
    --sheet-accent: #0e8577;
    --sheet-wash:   rgba(14, 133, 119, .09);

    position: absolute;
    display: flex;
    flex-direction: column;
    background: #fff;
    outline: 0;                 /* focused on open; the ring would
                                   otherwise trace the whole sheet */
}

.bq-fd-page .bq-sheet,
.bq-fd-page .bq-sheet * { box-sizing: border-box; }

/* One class per tone, set by whichever control opened the sheet. */
.bq-fd-page .bq-sheet.is-teal   { --sheet-accent: #0e8577; --sheet-wash: rgba(14, 133, 119, .09); }
.bq-fd-page .bq-sheet.is-violet { --sheet-accent: #6455d8; --sheet-wash: rgba(100, 85, 216, .09); }
.bq-fd-page .bq-sheet.is-amber  { --sheet-accent: #b0761a; --sheet-wash: rgba(176, 118, 26, .11); }
.bq-fd-page .bq-sheet.is-rose   { --sheet-accent: #c9456b; --sheet-wash: rgba(201, 69, 107, .09); }
.bq-fd-page .bq-sheet.is-blue   { --sheet-accent: #2f6fd0; --sheet-wash: rgba(47, 111, 208, .09); }
.bq-fd-page .bq-sheet.is-plum   { --sheet-accent: #7c3f7e; --sheet-wash: rgba(124, 63, 126, .09); }

/* The wash. A layer rather than a background on the head, so it runs
   behind the grip, the head AND the first inch of the copy and dies out
   in the middle of the text — which is what makes it read as the card's
   own paint rather than as a coloured title bar. */
.bq-fd-page .bq-sheet::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 260px;
    background: linear-gradient(180deg, var(--sheet-wash) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* The accent at full strength across the top edge, on the sheet rather
   than on the head so it clips to the sheet's own top radius. */
.bq-fd-page .bq-sheet::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--sheet-accent);
    z-index: 2;
}

.bq-fd-page .bq-sheet > * { position: relative; z-index: 1; }

/* touch-action:none because this strip must own the vertical gesture
   outright — leave it to the browser and the first few pixels of every
   drag are eaten trying to scroll the page behind. */
.bq-fd-page .bq-sheet__grip {
    display: none;
    flex-shrink: 0;
    padding: 11px 0 5px;
    justify-content: center;
    cursor: grab;
    touch-action: none;
}

.bq-fd-page .bq-sheet__grip:active { cursor: grabbing; }

.bq-fd-page .bq-sheet__grip span {
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--sheet-accent);
    opacity: .32;
}

.bq-fd-page .bq-sheet__head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 26px 16px;
}

.bq-fd-page .bq-sheet__id {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    margin-right: auto;
}

.bq-fd-page .bq-sheet__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sheet-accent);
    line-height: 1.2;
}

.bq-fd-page .bq-sheet__eyebrow:empty { display: none; }

.bq-fd-page .bq-sheet__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: #16202b;
    line-height: 1.25;
}

/* NO COLOURED BORDER ON THIS BUTTON. Focus goes to the dialog, not here
   — see the controller — so what is left is a quiet glyph that darkens
   on hover, and the keyboard ring only a keyboard can summon. */
.bq-fd-page .bq-sheet__close {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: -4px -6px 0 0;
    background: none;
    border: 0;
    border-radius: 5px;
    color: #98a1ab;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.bq-fd-page .bq-sheet__close svg { width: 17px; height: 17px; display: block; }
.bq-fd-page .bq-sheet__close:hover { background: rgba(22, 32, 43, .06); color: #16202b; }
.bq-fd-page .bq-sheet__close:active { background: rgba(22, 32, 43, .10); }
.bq-fd-page .bq-sheet__close:focus-visible { outline: 2px solid var(--sheet-accent); outline-offset: 1px; }

/* overscroll-behavior:contain stops a flick at the end of the copy from
   chaining into the page underneath and scrolling it out from behind. */
.bq-fd-page .bq-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 26px 26px;
    font-size: 14px;
    line-height: 1.75;
    color: #414c57;
    overflow-wrap: break-word;
}

.bq-fd-page .bq-sheet__body p { margin: 0 0 15px; }
.bq-fd-page .bq-sheet__body p:last-child { margin-bottom: 0; }

/* A definition list inside the sheet — the fund-details sheet uses one. */
.bq-fd-page .bq-sheet__body dl { margin: 0; }
.bq-fd-page .bq-sheet__body dl > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid #ecebe8;
}
.bq-fd-page .bq-sheet__body dl > div:last-child { border-bottom: 0; }
.bq-fd-page .bq-sheet__body dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: #98a1ab;
}
.bq-fd-page .bq-sheet__body dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #16202b;
    overflow-wrap: anywhere;
}
.bq-fd-page .bq-sheet__body dd a { color: var(--sheet-accent); text-decoration: none; }
.bq-fd-page .bq-sheet__body dd a:hover { text-decoration: underline; }

/* ── DESKTOP: a centred dialog ── */
@media (min-width: 769px) {
    .bq-fd-page .bq-sheet-root {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }
    .bq-fd-page .bq-sheet {
        position: relative;
        width: 100%;
        max-width: 760px;
        max-height: min(86vh, 760px);
        border: 1px solid #cfccc7;
        border-radius: 10px;
        overflow: hidden;                /* keeps the wash inside the radius */
        box-shadow: 0 2px 4px rgba(22, 32, 43, .06), 0 24px 60px rgba(16, 22, 30, .26);
        transform: translateY(10px) scale(.985);
        opacity: 0;
        transition: transform .26s cubic-bezier(.32, .72, 0, 1), opacity .2s ease;
    }
    .bq-fd-page .bq-sheet-root.is-open .bq-sheet { transform: none; opacity: 1; }
}

/* ── PHONE: a bottom sheet ──
   92dvh, not 92vh: on iOS Safari `vh` is the LARGE viewport, so a sheet
   sized in vh puts its own head behind the browser's bottom bar. The vh
   line is the fallback and is deliberately shorter. The 8dvh of scrim
   left uncovered is not slack — it is what says this is a sheet over a
   page rather than a new page, and it is a large forgiving dismiss
   target. */
@media (max-width: 768px) {
    .bq-fd-page .bq-sheet {
        left: 0; right: 0; bottom: 0;
        max-height: 92vh;
        max-height: 92dvh;
        border-top: 1px solid rgba(22, 32, 43, .10);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -18px 44px rgba(16, 22, 30, .28);
        transform: translate3d(0, 100%, 0);
        transition: transform .38s cubic-bezier(.32, .72, 0, 1);
        will-change: transform;
        overflow: hidden;
    }
    .bq-fd-page .bq-sheet-root.is-open .bq-sheet { transform: translate3d(0, 0, 0); }
    /* Set by the controller for the duration of a drag, so the sheet
       tracks the finger with no transition fighting it. */
    .bq-fd-page .bq-sheet.is-dragging { transition: none; }
    .bq-fd-page .bq-sheet::before { border-radius: 16px 16px 0 0; }

    .bq-fd-page .bq-sheet__grip { display: flex; }
    .bq-fd-page .bq-sheet__head { padding: 6px 18px 14px; touch-action: none; }
    .bq-fd-page .bq-sheet__title { font-size: 17px; }
    .bq-fd-page .bq-sheet__close { width: 40px; height: 40px; margin: -6px -10px 0 0; }
    .bq-fd-page .bq-sheet__close svg { width: 19px; height: 19px; }
    .bq-fd-page .bq-sheet__body { padding: 2px 18px 26px; touch-action: pan-y; font-size: 13.5px; }
}

/* The scroll lock. overflow:hidden on <body> does not hold on iOS;
   position:fixed does, at the cost of the scroll position — which the
   controller stashes and restores. */
body.bq-sheet-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* The control that opens a sheet. A link, not a button that looks like a
   link: it is the same "there is more of this elsewhere" affordance the
   card links use, so it takes the same shape. */
.bq-fd .bq-fd-open {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fd-accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    text-decoration: none;
}

.bq-fd .bq-fd-open:hover { color: var(--fd-ink); }
.bq-fd .bq-fd-open:focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 3px; border-radius: 2px; }
.bq-fd .bq-fd-open svg { width: 12px; height: 12px; flex: none; }

/* The excerpt a card shows in place of the full text. Three lines, then
   the control. Fixed at three so a row of cards is a row and not a
   staircase — the whole point of moving the prose into a sheet is that
   the card stops being as tall as its longest field. */
/* THE EXCERPT FADES, IT DOES NOT STOP.
   `-webkit-line-clamp` alone cuts the last line off mid-word against a
   hard edge, which reads as a layout fault rather than as an invitation.
   A masked block fades the final line out and says "there is more" in the
   only language a block of text has.

   Eight lines, not three. Three was enough to prove the card had text in
   it and not enough to be worth reading — the point of the card is that a
   reader can get the gist without opening anything, and the sheet is for
   when they want the rest.

   max-height rather than line-clamp, because a mask needs a box with a
   known bottom edge to fade against: 8 lines x 1.7 line-height x 13.5px. */
.bq-fd .bq-fd-excerpt {
    position: relative;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--fd-text);
    margin: 0 0 12px;
    max-height: calc(13.5px * 1.7 * 8);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%);
}

.bq-fd .bq-fd-excerpt--tall { max-height: calc(13.5px * 1.7 * 11); }

/* A block short enough to fit needs no fade — set from JS after layout,
   the same measured test the excerpt fitter makes. Without it a two-line
   objective has its second line greyed out for no reason. */
.bq-fd .bq-fd-excerpt.is-whole {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.bq-fd .bq-fd-excerpt p:last-child { margin-bottom: 0; }

/* A card whose whole job is to open a sheet: the excerpt fills it and
   the control sits on the bottom edge, so three such cards in a row line
   their controls up. */
.bq-fd .bq-fd-textcard { display: flex; flex-direction: column; }
.bq-fd .bq-fd-textcard .bq-fd-excerpt { flex: 1 1 auto; }

/* =====================================================================
   "TAKEN FROM THIS FILING"
   The quiet credit under a block of prospectus prose. It is the fund's
   own language, not ours, and saying so is worth more than a citation.
   A <button> for a logged-out reader (no URL in the markup) and an <a>
   for a registered one — see bq_fund_filing_link().
   ===================================================================== */
/* AT THE RIGHT END OF THE ROW ITS CONTROL STARTS.
   It was on its own line underneath, which put a URL directly below a
   button and read as that button's subtitle rather than as a separate
   thing to click. margin-left:auto pushes it to the far end of the
   card's foot; the primary control keeps the left. */
.bq-fd .bq-fd-filing {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--fd-faint);
    text-decoration: none;
    line-height: 1.4;
    transition: color .14s ease;
}

.bq-fd .bq-fd-filing svg { width: 12px; height: 12px; flex: none; }
.bq-fd .bq-fd-filing:hover { color: var(--fd-amber); }
.bq-fd .bq-fd-filing:focus-visible { outline: 2px solid var(--fd-amber); outline-offset: 3px; border-radius: 2px; }

/* =====================================================================
   THE MARK, AT THE CARD'S BOTTOM RIGHT
   ---------------------------------------------------------------------
   Painted into the canvas it survives a screenshot, which is why every
   chart that has an empty corner keeps it there. But a card whose bottom
   LEFT is already occupied — the history stacks, whose band keys wrap
   across it — has no empty corner inside the plot, and the mark ended up
   stacked on its own line above the keys, spending a row on nine words.

   Here it shares that row: keys left, mark right, one line. Set on the
   row rather than absolutely positioned, so a keys list that wraps to
   three lines pushes the mark down with it rather than under it.
   ===================================================================== */
.bq-fd .bq-fd-mark {
    margin-left: auto;
    align-self: flex-end;
    flex: none;
    font-size: 10px;
    line-height: 1.4;
    color: #9ca3af;
    letter-spacing: .01em;
    white-space: nowrap;
    padding-left: 14px;
}

/* =====================================================================
   THE SOURCE LINE
   "Source: Access this filing" at the right end of a table's footer.
   It replaces "Source: the fund's N-PORT filing for Aug 21, 2026" —
   which named the document without offering it, and repeated a date the
   page had already stated twice.
   ===================================================================== */
.bq-fd .bq-fd-sourceline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--fd-faint);
}

.bq-fd .bq-fd-sourceline a,
.bq-fd .bq-fd-sourcebtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: var(--fd-accent);
    text-decoration: none;
}

.bq-fd .bq-fd-sourceline a:hover,
.bq-fd .bq-fd-sourcebtn:hover { color: var(--fd-ink); text-decoration: underline; }

.bq-fd .bq-fd-sourcebtn svg { width: 12px; height: 12px; flex: none; color: var(--fd-amber); }

.bq-fd .bq-fd-sourceline a:focus-visible,
.bq-fd .bq-fd-sourcebtn:focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 2px; border-radius: 2px; }

/* =====================================================================
   CARD FOOTER LINK
   "See all 519 holdings", "View the full breakdown". The way off a
   summary card and onto the page that owns the subject.
   ===================================================================== */
.bq-fd .bq-fd-cardlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--fd-line);
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--fd-accent);
    text-decoration: none;
    transition: color .14s ease;
}

.bq-fd .bq-fd-cardlink svg { width: 13px; height: 13px; flex: none; transition: transform .16s ease; }
.bq-fd .bq-fd-cardlink:hover { color: var(--fd-ink); }
.bq-fd .bq-fd-cardlink:hover svg { transform: translateX(2px); }
.bq-fd .bq-fd-cardlink .bq-fd-cardlink-note { margin-left: auto; font-weight: 600; color: var(--fd-faint); }

@media (prefers-reduced-motion: reduce) {
    .bq-fd .bq-fd-cardlink svg { transition: none; }
    .bq-fd-page .bq-sheet { transition: none !important; }
}

/* =====================================================================
   RESPONSIVE
   ---------------------------------------------------------------------
   The breakpoints are ownership-pages.css's, so a reader moving between
   a stock page and a fund page on a phone does not cross two different
   sets of them.
   ===================================================================== */
@media (max-width: 1180px) {
    .bq-fd .bq-fd-donut { grid-template-columns: 186px minmax(0, 1fr); gap: 18px; }
    .bq-fd .bq-fd-donut-plot { width: 186px; height: 186px; }
}

@media (max-width: 960px) {
    .bq-fd .bq-fd-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The --4 borders were written for four columns; at two, the 4n rules
       are wrong and the 2n ones are right. */
    .bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-child(4n + 1) { border-left: 1px solid var(--fd-line); padding-left: 18px; }
    .bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
    .bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-last-child(-n + 4) { border-bottom: 1px solid var(--fd-line); padding-bottom: 18px; }
    .bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 4px; }
}

@media (max-width: 768px) {
    /* One column. Two 180px-wide cards side by side on a phone is two
       cards nobody can read, not a grid. */
    .bq-fd .bq-fd-kpis,
    .bq-fd .bq-fd-kpis--2,
    .bq-fd .bq-fd-kpis--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* With the column count changed, every border rule above is reset and
       re-stated for two columns in one place, rather than left to fight
       with its own three-column and four-column versions. */
    .bq-fd .bq-fd-kpis .bq-fd-kpi,
    .bq-fd .bq-fd-kpis--2 .bq-fd-kpi,
    .bq-fd .bq-fd-kpis--4 .bq-fd-kpi {
        border-left: 1px solid var(--fd-line);
        border-bottom: 1px solid var(--fd-line);
        padding: 16px 14px;
    }

    .bq-fd .bq-fd-kpis .bq-fd-kpi:nth-child(2n + 1),
    .bq-fd .bq-fd-kpis--2 .bq-fd-kpi:nth-child(2n + 1),
    .bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-child(2n + 1) {
        border-left: 0;
        padding-left: 0;
    }

    .bq-fd .bq-fd-kpis .bq-fd-kpi:nth-child(-n + 2),
    .bq-fd .bq-fd-kpis--2 .bq-fd-kpi:nth-child(-n + 2),
    .bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-child(-n + 2) {
        padding-top: 0;
    }

    .bq-fd .bq-fd-kpis .bq-fd-kpi:nth-last-child(-n + 2),
    .bq-fd .bq-fd-kpis--2 .bq-fd-kpi:nth-last-child(-n + 2),
    .bq-fd .bq-fd-kpis--4 .bq-fd-kpi:nth-last-child(-n + 2) {
        border-bottom: 0;
        padding-bottom: 4px;
    }

    .bq-fd .bq-fd-kpi-val { font-size: 19px; }
    .bq-fd .bq-fd-kpi-val--sm { font-size: 14.5px; }

    /* The donut goes above its legend rather than beside it: at this width
       a 168px ring plus a legend leaves the legend ~90px, which truncates
       every bucket name to two words. */
    .bq-fd .bq-fd-donut {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 18px;
    }

    /* Stacked, the ring has the row to itself and the legend below it is
       already full width — nothing is traded away here, so the ring can be
       larger than it is on desktop rather than smaller. */
    .bq-fd .bq-fd-donut-plot { width: 220px; height: 220px; }

    .bq-fd .bq-fd-legend { width: 100%; }

    .bq-fd .bq-fd-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .bq-fd .bq-fd-head-side { width: 100%; justify-content: space-between; }

    .bq-fd .bq-fd-tablehead { align-items: flex-start; flex-direction: column; gap: 14px; }

    .bq-fd .bq-fd-facts { width: 100%; }

    .bq-fd .bq-fd-dl { grid-template-columns: minmax(0, 1fr); }
    .bq-fd .bq-fd-dl > div:nth-child(2n) { padding-left: 0; border-left: 0; }
    .bq-fd .bq-fd-dl > div:nth-child(2) { padding-top: 13px; }
    .bq-fd .bq-fd-dl > div:last-child { border-bottom: 0; }

    .bq-fd .bq-fd-plot { height: 220px; }
    .bq-fd .bq-fd-plot--tall { height: 260px; }

    .bq-fd .bq-fd-search { max-width: none; flex-basis: 100%; }
    .bq-fd .bq-fd-toolbar { gap: 10px; }

    .bq-fd .bq-fd-asof { align-items: flex-start; }
    .bq-fd .bq-fd-asof svg { margin-top: 2px; }

    /* The card foot stacks. Side by side at this width the link wraps to
       two lines and the date ends up right-aligned under the middle of
       it, which reads as neither. */
    .bq-fd .bq-fd-cardfoot {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .bq-fd .bq-fd-cardfoot .bq-fd-asof-line { text-align: left; white-space: normal; }

    /* The gate stacks: an icon-and-text row, then a full-width button.
       Side by side at this width the button is squeezed to about 80px and
       the sentence to two words a line. */
    .bq-fd .bq-fd-gate-inner { flex-wrap: wrap; padding: 14px; }
    .bq-fd .bq-fd-gate-text { flex-basis: calc(100% - 46px); }
    .bq-fd .bq-fd-gate-cta { width: 100%; padding: 11px 18px; font-size: 12.5px; }

    /* Rows get a little of their height back on a phone: a 32px row is a
       comfortable scan target with a mouse and a poor one with a thumb. */
    .bq-fd .bq-fd-table tbody td { padding: 8px 10px; }
}

@media (max-width: 520px) {
    /* 220px plus the card's padding leaves no margin on a 360px phone. */
    .bq-fd .bq-fd-donut-plot { width: 188px; height: 188px; }

    .bq-fd .bq-fd-tablehead h2 { font-size: 17px; }
    .bq-fd .bq-fd-fact { padding: 0 12px; }
    .bq-fd .bq-fd-fact-val { font-size: 13px; }
    .bq-fd .bq-fd-seg button { padding: 5px 9px; font-size: 10.5px; }
    .bq-fd .bq-fd-gate-text strong { font-size: 13px; }
    .bq-fd .bq-fd-gate-text span { font-size: 11.5px; }
    .bq-fd .bq-fd-blank-links { flex-direction: column; align-items: stretch; }
    .bq-fd .bq-fd-blank-links a { align-items: center; text-align: center; }
    /* A floor for the narrowest phones, never a raise: on its own this
       let a long reading stretch the card across the whole screen. */
    .bq-fd-tip { max-width: min(290px, calc(100vw - 24px)); }
}


/* =====================================================================
   TOUCH — iOS ZOOM ON FOCUS
   ---------------------------------------------------------------------
   Mobile Safari zooms the viewport whenever a focused form control
   computes to UNDER 16px, and it does not zoom back out afterwards — the
   reader is left on a page they now have to pinch to fix. Sizing the
   focused control at 16px IS the fix; deferring the focus is the
   workaround for when the type size cannot be changed, and it still zooms
   the moment anyone actually types.

   Only the elements iOS measures are listed — the <input>, <select> and
   <textarea> that genuinely take focus. Resting text that merely looks
   like a field (a Tom Select .item, a fake-select trigger) is not
   focusable and is left alone, so the page looks exactly as it does now
   until someone taps into a control.

   `pointer: coarse` rather than a width query: this is about the input
   method, not the viewport. A narrow desktop window has no zoom problem
   and keeps its own type size; a tablet in landscape has the problem at
   1024px wide and gets the fix.

   The canonical version of this note, with the full reasoning and the
   rejected alternatives, is in company-KPI/css/styles.css.
   ===================================================================== */
@media (pointer: coarse) {
    .bq-fd .bq-fd-search input,
    #fd-holdings-search {
        font-size: 16px;
    }
}


/* ── MATURITY SCHEDULE ─────────────────────────────────────────────────
   The peer marker is a TICK ON THE FUND'S OWN RAIL, not a second bar.
   Two stacked bars per row doubles the height of the table and makes the
   reader compare lengths across a gap; a tick sits where the peer average
   falls, so "further right than the tick" reads as "longer than its peers"
   at a glance and the row stays one line tall. */
.bq-fd-mat-table .bq-fd-c-rail { width: 34%; min-width: 120px; }
.bq-fd-mat-rail {
    position: relative; display: block; height: 10px; border-radius: 5px;
    background: var(--bq-fd-rail-bg, rgba(127, 127, 127, .16));
    overflow: visible;
}
.bq-fd-mat-bar {
    position: absolute; inset: 0 auto 0 0; height: 100%;
    border-radius: 5px; background: currentColor; opacity: .55;
}
.bq-fd-mat-peer {
    position: absolute; top: -3px; width: 2px; height: 16px;
    margin-left: -1px; border-radius: 1px;
    background: currentColor; opacity: .95;
}
.bq-fd-c-peer { opacity: .72; font-variant-numeric: tabular-nums; }


/* ── MATURITY DISTRIBUTION (its own card) ──────────────────────────────
   Horizontal, because the categories are words: "10 to 15 Years" reads
   straight down a left-hand axis and would have to be tilted under a
   vertical bar. Two bars per bucket, fund over peer, with the value at the
   end of each — a bar whose number you have to look up in another card is
   half a chart. */
.bq-fd .bq-fd-mat-legend {
    display: flex; gap: 18px; align-items: center;
    margin: 0 0 14px; font-size: 11.5px; color: var(--fd-muted);
}
.bq-fd .bq-fd-mat-key { display: inline-flex; align-items: center; gap: 7px; }
.bq-fd .bq-fd-mat-sw {
    width: 11px; height: 11px; border-radius: 3px; display: inline-block;
}
.bq-fd .bq-fd-mat-sw--fund { background: var(--fd-violet, #7b5cd6); }
.bq-fd .bq-fd-mat-sw--peer { background: rgba(127, 127, 127, .42); }

.bq-fd .bq-fd-mat-chart { display: flex; flex-direction: column; gap: 12px; }

.bq-fd .bq-fd-mat-row {
    display: grid;
    grid-template-columns: 116px 1fr;
    align-items: center;
    gap: 14px;
}
.bq-fd .bq-fd-mat-label {
    font-size: 11.5px; color: var(--fd-muted); text-align: right;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bq-fd .bq-fd-mat-track {
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
    /* ROOM FOR THE LABEL AT THE END OF THE LONGEST BAR. The value sits at
       left:100% of its bar, so a bucket at the top of the scale ran its
       figure off the edge of the card and AGG lost the "28.62%" it most
       needed to show. Bar widths are a percentage of the content box, so
       reserving the padding here shortens every bar by the same amount and
       the scale stays true. */
    padding-right: 58px;
}
.bq-fd .bq-fd-mat-b {
    position: relative; display: block; height: 13px; border-radius: 3px;
    /* A bucket at 0.0% still gets a sliver, so the row does not read as a
       missing category. */
    min-width: 2px;
    transition: width .18s ease;
}
.bq-fd .bq-fd-mat-b--fund { background: var(--fd-violet, #7b5cd6); }
.bq-fd .bq-fd-mat-b--peer { background: rgba(127, 127, 127, .34); height: 9px; }
.bq-fd .bq-fd-mat-v {
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    margin-left: 7px;
    font-size: 10.5px; font-weight: 700; line-height: 1;
    color: var(--fd-muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.bq-fd .bq-fd-mat-b--fund .bq-fd-mat-v { color: var(--fd-ink); }
.bq-fd .bq-fd-mat-b--peer .bq-fd-mat-v { opacity: .8; font-weight: 600; }

@media (max-width: 560px) {
    .bq-fd .bq-fd-mat-row { grid-template-columns: 92px 1fr; gap: 10px; }
    .bq-fd .bq-fd-mat-label { font-size: 10.5px; }
}


/* The bond identity chip: quieter than the share-class chip beside it, and
   tabular so a column of coupons lines up. */
.bq-fd .bq-fd-chip--terms {
    background: transparent;
    color: var(--fd-faint);
    font-weight: 600;
    font-size: 10px;
    padding: 2px 0 2px 2px;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}