/*
 * ownership-pages.css
 *   /stocks/{ticker}/institutional-ownership/
 *   /stocks/{ticker}/insiders/
 * Version 2.0.0
 *
 * CARD CONTENTS ONLY.
 * ---------------------------------------------------------------------
 * The card shells on both pages — .bq-section, .bq-chart-box and the
 * grids that place them — are shared with every other template in this
 * plugin (statements, dividends, peers...). Nothing here touches their
 * border, radius, shadow or padding. Every rule below is scoped to
 * `.bq-io`, a class only those two templates put on
 * #bq-ownership-container, and every new class is prefixed `bq-io-`, so
 * loading this file cannot reach another page even by accident.
 *
 * The two pages answer the same question about two different sets of
 * owners, so they are one design and one stylesheet: same card heads, KPI
 * tiles, segmented controls, chart chrome, tooltip and table. Anything
 * that turns out to be specific to one of them says so at the rule.
 *
 * The vocabulary is the one the rest of the site already speaks:
 *   - 11px/700/uppercase micro-labels for chrome (homepage .bq-panel__title,
 *     overview's "FINANCIAL RATIOS", portfolio's .bq-kpi-label)
 *   - 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 for decoration
 *   - segmented controls instead of native selects wherever the choice is
 *     between three or four fixed things (overview's 1Y/3Y/5Y/All)
 *
 * Lato is untouched: the global stylesheet already forces
 * `font-family: var(--bq-lato) !important` on everything, and nothing here
 * declares a family. Weight, size, tracking and figure style do the work.
 */

.bq-io {
    /* Ink & type */
    --io-ink:        #0b1f2e;
    --io-text:       #37485a;
    --io-muted:      #6b7a89;
    --io-faint:      #97a4b2;

    /* Structure */
    --io-line:       #eaeff4;
    --io-line-mid:   #dfe6ed;
    --io-line-strong:#cfd9e3;
    --io-tint:       #f7fafc;
    --io-tint-2:     #f1f6fa;

    /* State */
    --io-blue:       #00529b;
    /* The history chart's bars. A blue-grey bar under a blue line reads as
       two weights of one series; sand is a different family entirely, still
       light enough to sit behind the line, and it echoes the site's gold
       accent desaturated rather than introducing a new hue. */
    --io-bar:        #e8d9b5;
    --io-bar-hover:  #dcc894;
    --io-blue-soft:  rgba(0, 82, 155, .08);
    --io-navy:       #002a45;
    --io-green:      #15803d;
    --io-green-soft: rgba(21, 128, 61, .10);
    --io-red:        #c5331f;
    --io-red-soft:   rgba(197, 51, 31, .09);
    --io-flat:       #8899a8;
    --io-flat-soft:  rgba(136, 153, 168, .14);
}

/* Tabular figures are the default for anything that is a number. Proportional
   digits make a column of holdings jitter column-to-column as the page pages. */
.bq-io .bq-io-num,
.bq-io .bq-io-kpi-val,
.bq-io .bq-io-table td,
.bq-io .bq-io-legend-val,
.bq-io .bq-io-chip {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* =====================================================================
   CARD HEAD
   -----------------------------------------------------------------
   Replaces the old 18px h2 with a 20px bottom border. That heading was
   sized like page copy and ruled like a section divider, which made four
   cards in a grid read as four small pages. This is chrome: a micro-label
   on the left, the context the card is answering for on the right, and a
   single hairline under both.
   ===================================================================== */
.bq-io .bq-io-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 11px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--io-line-mid);
}

.bq-io .bq-io-head h2,
.bq-io .bq-io-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--io-ink);
    line-height: 1.35;
}

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

/* "As of 31 Mar 2026", "49 quarters", "13F" — the sentence the title would
   otherwise have to carry. */
.bq-io .bq-io-meta {
    font-size: 11.5px;
    color: var(--io-faint);
    letter-spacing: .2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bq-io .bq-io-meta strong {
    font-weight: 600;
    color: var(--io-muted);
}

/* A sentence under a card head. These pages each carried one and each
   lost it in the overhaul: it is the line that tells a reader what the
   card is before they read the chart, and it is the page's indexable
   copy. It sits between the head and the plot, where it was. */
.bq-io .bq-io-say {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--io-text);
    max-width: 118ch;
}
.bq-io .bq-io-say strong { font-weight: 700; color: var(--io-ink); }
.bq-io .bq-io-say + .bq-io-plot { margin-top: 0; }

/* Inline legend keys in a chart card's head, so the chart itself can drop
   Chart.js's own legend and give the plot the height back. */
.bq-io .bq-io-keys {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.bq-io .bq-io-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--io-muted);
    white-space: nowrap;
}
.bq-io .bq-io-key i {
    width: 13px;
    height: 3px;
    flex: none;
    border-radius: 2px;
    background: var(--io-blue);
}
.bq-io .bq-io-key--bar i { height: 9px; width: 9px; border-radius: 1px; }
.bq-io .bq-io-key--shares i { background: var(--io-bar); }
/* Matches the payout bars exactly. There is no "locked" key any more:
   gated bars are the same colour as every other bar and are marked only by
   the padlock in their tooltip. */
.bq-io .bq-io-key--payout i { background: #217ab4; }
.bq-io .bq-io-key--pct i    { background: var(--io-blue); }
.bq-io .bq-io-key--up i     { background: var(--io-green); }
.bq-io .bq-io-key--down i   { background: var(--io-red); }

/* =====================================================================
   SEGMENTED CONTROL
   -----------------------------------------------------------------
   Three fixed choices do not need a dropdown: a select hides two of the
   three and costs a click to read them. Same control the overview page
   uses for 1Y/3Y/5Y/All.
   ===================================================================== */
.bq-io .bq-io-seg {
    display: inline-flex;
    padding: 2px;
    background: var(--io-tint-2);
    border: 1px solid var(--io-line-mid);
    border-radius: 5px;
}

.bq-io .bq-io-seg button {
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 5px 11px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--io-muted);
    line-height: 1.4;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.bq-io .bq-io-seg button:hover { color: var(--io-ink); }
.bq-io .bq-io-seg button.is-active {
    background: #fff;
    color: var(--io-ink);
    box-shadow: 0 1px 2px rgba(0, 42, 69, .14);
}
.bq-io .bq-io-seg button:focus-visible {
    outline: 2px solid var(--io-blue);
    outline-offset: 1px;
}
/* A measure the data cannot support. Offering it and returning a column of
   dashes is worse than not offering it. */
.bq-io .bq-io-seg button:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.bq-io .bq-io-seg button:disabled:hover { color: var(--io-muted); }

/* =====================================================================
   TRADING ACTIVITY — donut + readout
   -----------------------------------------------------------------
   The pie used to carry its numbers on leader-less datalabels pinned
   outside the arcs, which collided at every width under ~1200px and had
   to be swapped for bare percentages on phones. The numbers now live in a
   readout beside the chart where they can be read as a column and
   compared, the donut keeps the shape, and the hole carries the total the
   three rows are shares of.
   ===================================================================== */
.bq-io .bq-io-donut {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
    gap: 26px;
    flex: 1 1 auto;
}

.bq-io .bq-io-donut-plot {
    position: relative;
    width: 190px;
    height: 190px;
}
.bq-io .bq-io-donut-plot canvas { position: relative; z-index: 1; }

/* Sits in the hole. pointer-events:none so it never eats a hover that
   belongs to an arc. */
.bq-io .bq-io-donut-core {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    z-index: 0;
}
.bq-io .bq-io-donut-core-val {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--io-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.bq-io .bq-io-donut-core-lbl {
    margin-top: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--io-faint);
}

/* Capped rather than filling the column. At full width the share rails ran
   most of the card and read as a second chart competing with the donut;
   they are a supporting cue, so they get a supporting size. */
/* Right-aligned in its column, not left: left-aligned it leaned against
   the ring and left a strip of dead space at the card's edge. Capped in
   width so the rails stay a supporting cue rather than a second chart. */
.bq-io .bq-io-legend {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    max-width: 320px;
    justify-self: end;
}

/* No rules between rows. Each row already carries a swatch, a value and
   its own rail; a divider on top of that made a three-line readout look
   like a table that had lost its header. */
.bq-io .bq-io-legend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 12px;
    padding: 7px 0;
}

.bq-io .bq-io-legend-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--io-text);
    white-space: nowrap;
}
.bq-io .bq-io-legend-name i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 1px;
}
.bq-io .bq-io-legend-row--up   .bq-io-legend-name i { background: var(--io-green); }
.bq-io .bq-io-legend-row--flat .bq-io-legend-name i { background: #c9d2da; }
.bq-io .bq-io-legend-row--down .bq-io-legend-name i { background: var(--io-red); }

.bq-io .bq-io-legend-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--io-ink);
    white-space: nowrap;
    letter-spacing: -.2px;
}
.bq-io .bq-io-legend-pct {
    margin-left: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--io-faint);
}

/* The share-of-total rail under each row. Redundant with the arc by design:
   the arcs answer "which is biggest", the rails answer "by how much" without
   making the reader estimate an angle. */
.bq-io .bq-io-legend-rail {
    grid-column: 1 / -1;
    height: 3px;
    margin-top: 8px;
    background: var(--io-line);
    border-radius: 2px;
    overflow: hidden;
}
.bq-io .bq-io-legend-rail span {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width .4s cubic-bezier(.22, .61, .36, 1);
}
.bq-io .bq-io-legend-row--up   .bq-io-legend-rail span { background: var(--io-green); }
.bq-io .bq-io-legend-row--flat .bq-io-legend-rail span { background: #c9d2da; }
.bq-io .bq-io-legend-row--down .bq-io-legend-rail span { background: var(--io-red); }

/* =====================================================================
   CHART TOOLTIP
   -----------------------------------------------------------------
   Chart.js paints its own tooltip inside the canvas, which can only be a
   flat filled rect - no shadow - and the dark fill it shipped with was the
   only dark surface on the page. This is a real DOM node driven by the
   `external` handler, so it gets the page's own card treatment: white, a
   hairline border, and a soft shadow doing the separating.

   NOT scoped to .bq-io: the node is appended to <body>, outside the
   container. The class is unique to this page and this stylesheet only
   loads on this page, so the unscoped selector cannot reach anything else.
   ===================================================================== */
.bq-io-tip {
    position: absolute;
    z-index: 999;
    pointer-events: none;
    max-width: min(300px, calc(100vw - 20px));
    padding: 9px 11px 10px;
    background: #fff;
    border: 1px solid #e1e8ef;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(11, 31, 46, .06), 0 10px 24px rgba(11, 31, 46, .13);
    font-size: 12px;
    line-height: 1.45;
    color: #37485a;
    opacity: 0;
    transition: opacity .12s ease;
    font-variant-numeric: tabular-nums;
}
.bq-io-tip-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #97a4b2;
    margin-bottom: 6px;
}
.bq-io-tip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    min-width: 0;
}
/* Same floor as the readout rows above: a chart tooltip is short by nature,
   but "nowrap" on a flex item that cannot shrink is the exact shape of the
   overflow bug fixed there, and one long series label would reproduce it. */
.bq-io-tip-row > span { min-width: 0; overflow-wrap: anywhere; }
.bq-io-tip-row + .bq-io-tip-row { margin-top: 4px; }
/* Chart tooltips are one short reading per line and must not wrap. A holder's
   full name is prose and has to. */
.bq-io-tip-row.is-wrap { white-space: normal; line-height: 1.4; }
.bq-io-tip-row i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 1px;
}
.bq-io-tip-row b { font-weight: 700; color: #0b1f2e; }

/* The holders table's tooltip is a card for the WHOLE row, not a reading of
   the one cell under the pointer: a holding is seven numbers that only mean
   something together, and the cell the pointer happens to be over is rarely
   the one being compared. Name and CIK head it, then every column as a
   label/value pair with the exact figures the cells had to round. */
.bq-io-tip-name {
    font-size: 13px;
    font-weight: 700;
    color: #0b1f2e;
    line-height: 1.35;
    white-space: normal;
}
.bq-io-tip-sub {
    margin-top: 3px;
    font-size: 10.5px;
    color: #97a4b2;
    letter-spacing: .2px;
}
/* THE ROWS MUST BE ABLE TO FIT THE CARD, NOT THE OTHER WAY ROUND.
   Every part of this readout used to be rigid: the grid track was `auto`,
   the row was `white-space: nowrap`, and neither the key nor the value
   could shrink (a flex item's min-width is `auto`, i.e. its own
   min-content). So the row's floor was key + 22px + value — about 263px
   for "% of outstanding" against a long percentage — and the card simply
   inherited that as its own minimum.

   That went unnoticed until the phone rule at the end of this file caps
   .bq-io-tip at 210px. A max-width cannot shrink a box below the
   min-content of what is inside it, so the card painted at 210px and its
   rows kept drawing at 263 — the readings ran out through the right-hand
   edge of the white background and sat on the page behind it. Reported on
   /institutional-ownership and /insiders, which are the two pages whose
   rows carry long labels next to long figures.

   `minmax(0, 1fr)` lets the track go under min-content, and the key wraps
   and shrinks so it is what gives way — a two-line "% of outstanding" is
   fine, a truncated figure is not. The value stays rigid and right-set,
   with `anywhere` as a floor so even an absurd string breaks rather than
   escaping the card. */
.bq-io-tip-lines {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #eaeff4;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}
.bq-io-tip-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.bq-io-tip-k {
    font-size: 11px;
    color: #97a4b2;
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    line-height: 1.35;
}
.bq-io-tip-v {
    font-size: 12px;
    font-weight: 700;
    color: #0b1f2e;
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}
.bq-io-tip-v.is-up   { color: #15803d; }
.bq-io-tip-v.is-down { color: #c5331f; }
.bq-io-tip-v.is-flat { color: #97a4b2; }

/* =====================================================================
   KPI GRID — Ownership Statistics
   -----------------------------------------------------------------
   Six numbers used to sit in a 2-column grid at 1.5em with a grey caption
   under each and nothing else: no unit, no scale, no direction, and
   14,673,278,000 printed in full so the eye had to count digit groups to
   learn it was ~14.7 billion. Now each tile leads with the reading at
   human scale, keeps the exact figure underneath where it is still
   auditable, and carries its own quarter-on-quarter move.
   ===================================================================== */
.bq-io .bq-io-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 1 1 auto;
    align-content: stretch;
}

/* Dividers, not a frame. The grid carries rules only BETWEEN tiles — an
   outer border here would draw a second box 20px inside the card's own,
   which is the nested-box look the rest of the page avoids. The first
   column and last row opt out with the two rules under this one. */
.bq-io .bq-io-kpi {
    padding: 4px 16px 16px;
    border-left: 1px solid var(--io-line);
    border-bottom: 1px solid var(--io-line);
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* THE 3n BOUNDARIES BELONG TO THE 3-COLUMN GRID ONLY.
   Written unqualified, they also reached .bq-io-kpis--2 on /dividends,
   where the tiles run two abreast: tile 4 is 3n+1 but it sits in the RIGHT
   column, so it lost the 16px indent and the rule that separates it from
   the tile beside it. "Last Paid" has been sitting flush against its own
   left edge while "Latest Yield" directly above it is indented — on every
   width, desktop included. The --2 grid declares its own boundaries in the
   SHARED ADDITIONS block further down; these are not for it. */
.bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-last-child(-n + 3) { border-bottom: 0; padding-bottom: 4px; }
.bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-child(n + 4) { padding-top: 18px; }

.bq-io .bq-io-kpi-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .85px;
    text-transform: uppercase;
    color: var(--io-faint);
    margin-bottom: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bq-io .bq-io-kpi-val {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.05;
    color: var(--io-ink);
    white-space: nowrap;
}
.bq-io .bq-io-kpi-val.is-up   { color: var(--io-green); }
.bq-io .bq-io-kpi-val.is-down { color: var(--io-red); }

.bq-io .bq-io-kpi-sub {
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--io-faint);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.bq-io .bq-io-kpi-foot {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Direction chip. Square-ish, not a pill: the rest of this page's chrome
   has 2–5px corners and a capsule here read as a different toolkit. */
.bq-io .bq-io-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}
.bq-io .bq-io-chip--up   { background: var(--io-green-soft); color: var(--io-green); }
.bq-io .bq-io-chip--down { background: var(--io-red-soft);   color: var(--io-red); }
.bq-io .bq-io-chip--flat { background: var(--io-flat-soft);  color: #5d6b79; }
.bq-io .bq-io-chip em    { font-style: normal; font-size: 8px; line-height: 1; }
.bq-io .bq-io-chip-note  { font-size: 10.5px; color: var(--io-faint); letter-spacing: .2px; }

/* Ownership meter — the one KPI that is a share of a whole gets to show it. */
.bq-io .bq-io-meter {
    margin-top: 10px;
    height: 4px;
    background: var(--io-line);
    border-radius: 2px;
    overflow: hidden;
}
.bq-io .bq-io-meter span {
    display: block;
    height: 100%;
    /* Insider stakes are routinely under 0.01%, which computes to a
       sub-pixel fill and paints as an empty track - indistinguishable from
       missing data. The floor keeps a real stake visible. */
    min-width: 2px;
    background: var(--io-blue);
    border-radius: 2px;
}

/* =====================================================================
   CHART BODIES
   ===================================================================== */
.bq-io .bq-io-plot {
    position: relative;
    width: 100%;
    height: 268px;
    flex: 1 1 auto;
    min-height: 0;
}
.bq-io .bq-io-plot canvas { display: block; }

/* A one-line reading of the series under the plot, so a chart card answers
   its own question before the reader interpolates an axis. */
.bq-io .bq-io-plot-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--io-line);
}
.bq-io .bq-io-foot-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bq-io .bq-io-foot-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--io-faint);
}
.bq-io .bq-io-foot-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--io-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bq-io .bq-io-foot-val.is-up   { color: var(--io-green); }
.bq-io .bq-io-foot-val.is-down { color: var(--io-red); }

/* =====================================================================
   OWNERSHIP SUMMARY
   -----------------------------------------------------------------
   THE MARKUP IS LOAD-BEARING FOR SEARCH. This is the only prose on the
   page - a <p> lede followed by a <ul> of <li> - and it is what the page
   ranks on. Every version of this section has kept those tags and the
   sentences inside them byte-for-byte as the API returns them; only the
   painting has ever changed. Do not turn these into divs, do not truncate
   a sentence, and do not move any of it behind a "read more".

   The painting is now the plainest thing that works: a bullet in the
   gutter, the sentence beside it, nothing between the rows. Two earlier
   attempts got in the way of that - a two-column split that left the
   reader guessing whether to read down or across, and a ruled single
   column that made each sentence look like a failed table row. Both are
   gone. Lines run the full width of the card: a measure cap here stopped
   the text mid-card and wrapped sentences that had room to finish.
   ===================================================================== */
/* The opening line, and nothing more than that. It used to sit in a tinted
   panel with a blue accent edge at 15px, which turned one continuous piece
   of copy into two sections: a callout, and then some bullets that looked
   like they belonged to something else. They are one thought - the sentence
   that opens it and the findings that follow - so it is set at the same size
   and colour as the list under it, separated only by space. */
.bq-io .bq-io-lede {
    margin: 0 0 4px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--io-text);
    font-weight: 400;
}

.bq-io .bq-io-insights {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.bq-io .bq-io-insights li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    padding: 0 0 11px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--io-text);
}
.bq-io .bq-io-insights li:last-child { padding-bottom: 0; }

.bq-io .bq-io-insights li::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: 9px;
    border-radius: 50%;
    background: #b3c1cf;
}

/* =====================================================================
   HOLDERS TABLE
   ===================================================================== */
.bq-io .bq-io-tablehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--io-line-mid);
}

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

.bq-io .bq-io-tablehead h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--io-ink);
    line-height: 1.2;
}

/* Report period / total held / filing type, as three facts separated by
   hairline dividers rather than a second sentence under the title. */
.bq-io .bq-io-facts {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
    flex-wrap: wrap;
    margin-top: 0;
    /* Its own baseline sits with the H2's, not under it. The 3px lifts the
       label/value pair so the value's baseline lands on the heading's rather
       than a hair below it. */
    padding-bottom: 3px;
}
.bq-io .bq-io-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 16px;
    border-left: 1px solid var(--io-line-mid);
}
.bq-io .bq-io-fact:first-child { padding-left: 0; border-left: 0; }
.bq-io .bq-io-fact-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--io-faint);
}
.bq-io .bq-io-fact-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--io-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Toolbar ── */
.bq-io .bq-io-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 0 14px;
}

.bq-io .bq-io-rows {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bq-io .bq-io-rows label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--io-faint);
}
.bq-io .bq-io-rows select {
    height: 32px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--io-line-strong);
    border-radius: 4px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a89' d='M6 8.2 2.1 4.3l.9-.9L6 6.4l3-3 .9.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    appearance: none;
    -webkit-appearance: none;
    /* 11.5px, not 12.5: this sits beside a 10px uppercase label and a 12px
       button, and at 12.5 it was the largest type in the toolbar. The
       option rule below carries the size into the open list too - Chrome
       sizes the popup from the <option>, not the <select>. */
    font-size: 11.5px;
    font-weight: 600;
    color: var(--io-ink);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bq-io .bq-io-rows select option {
    font-size: 12px;
    font-weight: 400;
    color: var(--io-ink);
}
.bq-io .bq-io-rows select:hover { border-color: #b6c4d1; }
.bq-io .bq-io-rows select:focus-visible {
    outline: none;
    border-color: var(--io-blue);
    box-shadow: 0 0 0 3px rgba(0, 82, 155, .12);
}

.bq-io .bq-io-download {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--io-line-strong);
    border-radius: 4px;
    background: #fff;
    color: var(--io-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bq-io .bq-io-download svg { width: 14px; height: 14px; flex: none; }
.bq-io .bq-io-download:hover {
    background: var(--io-tint-2);
    border-color: #b6c4d1;
    color: var(--io-navy);
}
.bq-io .bq-io-download.locked { color: var(--io-muted); }
.bq-io .bq-io-download.locked svg { color: var(--io-faint); }

/* ── The table ── */
.bq-io #institutional-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--io-line-mid);
    border-radius: 5px;
    min-height: 220px;
}

/* ONE SIZE FOR EVERY CELL. The tables used to run 13px for most columns
   and 11.5px for the "secondary" ones (rank, CIK, position), which did not
   read as a hierarchy - it read as a table whose columns had been styled by
   different people. Secondary columns are still secondary; they say so in
   grey, at the same size as everything beside them. */
.bq-io .bq-io-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
    min-width: 960px;
    table-layout: fixed;
}

.bq-io .bq-io-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--io-tint);
    padding: 8px 14px;
    border-bottom: 1px solid var(--io-line-mid);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .75px;
    text-transform: uppercase;
    color: var(--io-faint);
    white-space: nowrap;
    text-align: right;
}
.bq-io .bq-io-table thead th.bq-io-c-rank { text-align: right; width: 52px; }
.bq-io .bq-io-table thead th.bq-io-c-name { text-align: left; }

.bq-io .bq-io-table tbody td {
    /* Leading, not padding, was what made these rows tall: the cells were
       inheriting the body's 1.5 and a 12.5px row came out at ~35px against
       the ~28px these tables used to run at. */
    padding: 6px 14px;
    line-height: 1.35;
    border-bottom: 1px solid var(--io-line);
    color: var(--io-text);
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}
.bq-io .bq-io-table tbody tr:last-child td { border-bottom: 0; }
.bq-io .bq-io-table tbody tr { transition: background .12s ease; }
.bq-io .bq-io-table tbody td > * { vertical-align: middle; }
.bq-io .bq-io-table tbody tr:hover { background: var(--io-tint); }

.bq-io .bq-io-table td.bq-io-c-rank {
    width: 52px;
    color: var(--io-faint);
    font-weight: 600;
}
/* One line per holder. The name and its CIK used to stack inside a single
   cell, which bought a second line of height on every row - twenty rows of
   it before the reader reached the pagination. The CIK is a column now. */
.bq-io .bq-io-table td.bq-io-c-name {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
    font-weight: 600;
    color: var(--io-ink);
}
.bq-io .bq-io-table thead th.bq-io-c-cik { text-align: left; width: 104px; }
.bq-io .bq-io-table td.bq-io-c-cik {
    text-align: left;
    color: var(--io-faint);
    letter-spacing: .2px;
}

/* Written against `tbody td` rather than as bare classes: the base cell rule
   above is two classes and two elements deep, so `.bq-io .bq-io-up` alone
   loses the colour to it and every change column painted body grey. */
.bq-io .bq-io-table tbody td.bq-io-strong { font-weight: 600; color: var(--io-ink); }
.bq-io .bq-io-table tbody td.bq-io-up     { color: var(--io-green); font-weight: 600; }
.bq-io .bq-io-table tbody td.bq-io-down   { color: var(--io-red);   font-weight: 600; }
.bq-io .bq-io-table tbody td.bq-io-zero   { color: var(--io-faint); }
.bq-io .bq-io-arrow  { font-size: 8px; margin-right: 3px; vertical-align: 1px; }

/* Column geometry. Without it the browser hands the slack to whichever
   numeric column happens to hold the widest string on the page, and the grid
   shifts every time the reader pages. The institution name takes the slack
   instead — it is the only column whose content is genuinely variable. */
.bq-io .bq-io-table thead th.bq-io-c-shares { width: 132px; }
.bq-io .bq-io-table thead th.bq-io-c-stake  { width: 132px; }
.bq-io .bq-io-table thead th.bq-io-c-chg    { width: 140px; }
.bq-io .bq-io-table thead th.bq-io-c-chgpct { width: 100px; }
.bq-io .bq-io-table thead th.bq-io-c-value  { width: 120px; }

/* Stake column: rail then number, on one line. Stacked, it was the other
   half of the row-height problem the CIK column above fixed. */
.bq-io .bq-io-stake { display: inline-flex; align-items: center; justify-content: flex-end; gap: 9px; }
.bq-io .bq-io-stake-rail {
    width: 42px;
    height: 3px;
    background: var(--io-line);
    border-radius: 2px;
    overflow: hidden;
}
.bq-io .bq-io-stake-rail span {
    display: block;
    height: 100%;
    /* A 0.18% holder against a 7.8% top holder computes to 1.3px of a 56px
       rail, which renders as nothing and reads as missing data rather than
       as a small position. The floor keeps the smallest real stake visible. */
    min-width: 2px;
    background: #7ea8cd;
    border-radius: 2px;
}

.bq-io .bq-io-table .bq-io-empty {
    text-align: center;
    padding: 42px 14px;
    color: var(--io-muted);
    white-space: normal;
}

/* ── Footer / pagination ── */
.bq-io .bq-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 14px;
    margin-top: 0;
    border-top: 0;
}
.bq-io .pagination-info {
    font-size: 12px;
    color: var(--io-faint);
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
}
.bq-io .bq-pagination {
    display: inline-flex;
    gap: 4px;
    border-radius: 0;
    overflow: visible;
}
.bq-io .bq-pagination .page-numbers {
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--io-line-mid);
    border-radius: 4px;
    background: #fff;
    color: var(--io-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.bq-io .bq-pagination a.page-numbers:hover {
    background: var(--io-tint-2);
    border-color: #b6c4d1;
    color: var(--io-ink);
}
.bq-io .bq-pagination .page-numbers.current {
    background: var(--io-navy);
    border-color: var(--io-navy);
    color: #fff;
}
.bq-io .bq-pagination .dots {
    border-color: transparent;
    background: none;
    color: var(--io-faint);
}

/* The shared spinner is a 4px blue ring on a light track; at this card's
   density it reads as a loading *page*. Softened to the page's own palette
   and shrunk, and the wash is now near-opaque white so half-swapped rows
   are never legible under it. */
.bq-io #institutional-table-wrapper.bq-loading::after {
    background-color: rgba(255, 255, 255, .82);
    border-radius: 5px;
}
.bq-io #institutional-table-wrapper.bq-loading::before {
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--io-line-mid);
    border-top-color: var(--io-blue);
}

/* =====================================================================
   TRANSACTION BADGES  (/insiders)
   -----------------------------------------------------------------
   The Form 4 feed reports direction as a bare "A" or "D" and the nature
   of the trade as a bare letter code, and the old table printed both
   raw. A column of unexplained single letters is not data a reader can
   use: "A"/"D" become words with direction colour, and the code keeps
   its letter - it is the SEC's own vocabulary and worth learning - but
   carries its meaning in the row tooltip.
   ===================================================================== */
.bq-io .bq-io-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}
.bq-io .bq-io-badge i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: none;
}
.bq-io .bq-io-badge--buy  { background: var(--io-green-soft); color: var(--io-green); }
.bq-io .bq-io-badge--buy i  { background: var(--io-green); }
.bq-io .bq-io-badge--sell { background: var(--io-red-soft); color: var(--io-red); }
.bq-io .bq-io-badge--sell i { background: var(--io-red); }
.bq-io .bq-io-badge--flat { background: var(--io-flat-soft); color: #5d6b79; }
.bq-io .bq-io-badge--flat i { background: var(--io-flat); }

/* The letter code, beside the badge. Bordered rather than filled so it
   reads as a reference key and never competes with the direction colour
   sitting next to it. */
.bq-io .bq-io-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    margin-left: 7px;
    padding: 0 5px;
    border: 1px solid var(--io-line-strong);
    border-radius: 3px;
    background: #fff;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--io-muted);
    letter-spacing: .3px;
}

/* Role under a name would be a second line per row - the thing the
   holders table just got rid of. It is its own column, in the same grey
   the CIK column uses. */
.bq-io .bq-io-table td.bq-io-c-role {
    text-align: left;
    color: var(--io-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}
.bq-io .bq-io-table thead th.bq-io-c-role { text-align: left; }
.bq-io .bq-io-table thead th.bq-io-c-date { text-align: left; width: 108px; }
.bq-io .bq-io-table td.bq-io-c-date { text-align: left; white-space: nowrap; }
.bq-io .bq-io-table thead th.bq-io-c-type { text-align: left; width: 150px; }
.bq-io .bq-io-table td.bq-io-c-type { text-align: left; }
.bq-io .bq-io-table thead th.bq-io-c-own { text-align: left; width: 88px; }
.bq-io .bq-io-table td.bq-io-c-own { text-align: left; color: var(--io-muted); }
.bq-io .bq-io-table thead th.bq-io-c-price { width: 96px; }
.bq-io .bq-io-table thead th.bq-io-c-remaining { width: 122px; }
.bq-io .bq-io-table thead th.bq-io-c-total { width: 122px; }

/* A note under a card - the Form 4 caveat on the holders table. */
.bq-io .bq-io-note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--io-line);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--io-faint);
}

/* Donut legend on /insiders lists people rather than three fixed states,
   so its swatch colour is set per row from the chart's own palette. */
.bq-io .bq-io-legend-row--series .bq-io-legend-name i,
.bq-io .bq-io-legend-row--series .bq-io-legend-rail span { background: var(--io-swatch, #00529b); }
.bq-io .bq-io-legend-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================================
   SHARED ADDITIONS  (/peers, /dividends, /sec-filings)
   -----------------------------------------------------------------
   The three pages below reuse the card head, KPI tile, segmented
   control, chart chrome, tooltip and table wholesale. What follows is
   only what none of them could express with what was already here.
   ===================================================================== */

/* A card that takes the full width of the 2-up grid. */
.bq-io .bq-io-span-2 { grid-column: 1 / -1; }

/* A KPI whose reading is a date or a phrase rather than a figure. At 23px
   "Aug 13, 2026" runs past the tile; this is the same tile, sized for
   words. */
.bq-io .bq-io-kpi-val--sm { font-size: 17px; letter-spacing: -.2px; }

/* Two-column KPI grid, for cards with four tiles rather than six. The
   3-column boundaries have to be reset before the 2-column ones are
   declared or a tile keeps a rule it should have dropped. */
.bq-io .bq-io-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bq-io .bq-io-kpis--2 .bq-io-kpi { border-left: 1px solid var(--io-line); border-bottom: 1px solid var(--io-line); padding-left: 16px; }
.bq-io .bq-io-kpis--2 .bq-io-kpi:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
.bq-io .bq-io-kpis--2 .bq-io-kpi:nth-child(n + 3) { padding-top: 18px; }
.bq-io .bq-io-kpis--2 .bq-io-kpi:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 4px; }

/* Taller plot for a card that spans the full grid. */
.bq-io .bq-io-plot--tall { height: 320px; }

/* ── Paywall row inside a table ───────────────────────────────────────
   Sits in the tbody where the next row would be, so it reads as the
   table stopping rather than as a banner bolted underneath it. */
.bq-io .bq-io-table tbody tr.bq-io-paywall:hover { background: none; }
.bq-io .bq-io-table td.bq-io-paywall-cell {
    padding: 0;
    border-bottom: 0;
    text-align: left;
    white-space: normal;
}
.bq-io .bq-io-paywall-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-top: 6px;
    background: var(--io-tint);
    border-top: 1px solid var(--io-line-mid);
    font-size: 12.5px;
    color: var(--io-muted);
}
.bq-io .bq-io-paywall-inner svg { width: 15px; height: 15px; flex: none; color: var(--io-faint); }
.bq-io .bq-io-paywall-inner strong { color: var(--io-ink); font-weight: 700; }
.bq-io .bq-io-paywall-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 4px;
    background: var(--io-navy);
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s ease;
}
.bq-io .bq-io-paywall-cta:hover { background: #013a5e; }

/* The same banner when it sits UNDER the scroller rather than inside the
   tbody — /dividends. It is the card's width, so it cannot be scrolled
   away by the table beside it, and it needs the top rule the tbody row
   used to get from the cell above it. */
.bq-io .bq-io-paywall-note {
    margin-top: 10px;
    border-top: 0;
}
.bq-io .bq-io-paywall-note .bq-io-paywall-inner {
    margin-top: 0;
    border: 1px solid var(--io-line-mid);
    border-radius: 5px;
}

/* ── Filter bar (/sec-filings) ────────────────────────────────────────
   A row of labelled selects above a table. Same select treatment as the
   rows-per-page control, just laid out as a set. */
.bq-io .bq-io-filters {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 0 16px;
}
.bq-io .bq-io-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bq-io .bq-io-filter > label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--io-faint);
}
.bq-io .bq-io-filter select,
.bq-io .bq-io-filter .ts-control {
    height: 34px;
    min-width: 168px;
    padding: 0 28px 0 11px;
    border: 1px solid var(--io-line-strong);
    border-radius: 4px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a89' d='M6 8.2 2.1 4.3l.9-.9L6 6.4l3-3 .9.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px;
    appearance: none;
    -webkit-appearance: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--io-ink);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bq-io .bq-io-filter select option { font-size: 12px; font-weight: 400; }
.bq-io .bq-io-filter select:hover { border-color: #b6c4d1; }
.bq-io .bq-io-filter select:focus-visible {
    outline: none;
    border-color: var(--io-blue);
    box-shadow: 0 0 0 3px rgba(0, 82, 155, .12);
}
.bq-io .bq-io-filters .bq-io-filter--grow { flex: 1 1 200px; }

/* ── External-link cell (/sec-filings) ───────────────────────────── */
.bq-io .bq-io-extlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    color: var(--io-muted);
    transition: background .14s ease, color .14s ease;
}
.bq-io .bq-io-extlink svg { width: 14px; height: 14px; }
.bq-io .bq-io-extlink:hover { background: var(--io-tint-2); color: var(--io-blue); }

/* ── Ticker cell (/peers) ─────────────────────────────────────────── */
.bq-io .bq-io-ticker {
    font-weight: 700;
    color: var(--io-blue);
    letter-spacing: .2px;
    text-decoration: none;
}
.bq-io .bq-io-ticker:hover { text-decoration: underline; }
.bq-io .bq-io-table tbody tr.is-self { background: var(--io-blue-soft); }
.bq-io .bq-io-table tbody tr.is-self:hover { background: rgba(0, 82, 155, .12); }
.bq-io .bq-io-table tbody tr.is-self td { font-weight: 600; }

/* Sortable header. The caret only exists once a column is actually
   sorted - a row of idle arrows is noise on a twelve-column table. */
.bq-io .bq-io-table thead th.is-sortable { cursor: pointer; user-select: none; }
.bq-io .bq-io-table thead th.is-sortable:hover { color: var(--io-muted); background: var(--io-tint-2); }
.bq-io .bq-io-table thead th.is-sorted { color: var(--io-blue); }
.bq-io .bq-io-table thead th.is-sorted::after {
    content: " \25B2";
    font-size: 7px;
    vertical-align: 1px;
}
.bq-io .bq-io-table thead th.is-sorted.is-desc::after { content: " \25BC"; }

/* An empty page state, for a filter combination that matches nothing. */
.bq-io .bq-io-blank {
    padding: 46px 20px;
    text-align: center;
    color: var(--io-muted);
    font-size: 13px;
}
.bq-io .bq-io-blank strong { display: block; color: var(--io-ink); font-size: 14px; margin-bottom: 5px; }

/* =====================================================================
   PEERS  (/peers)
   -----------------------------------------------------------------
   The markup hooks below are peers.js's, not this stylesheet's. That
   script clones the header into a floating bar and clones the ticker
   column into a frozen one, and it finds both by these exact class
   names. They are kept and restyled rather than renamed.
   ===================================================================== */

/* The Mn/Bn vs Raw switch, wearing the segmented control's clothes. */
.bq-io .bq-value-toggle {
    display: inline-flex;
    padding: 2px;
    background: var(--io-tint-2);
    border: 1px solid var(--io-line-mid);
    border-radius: 5px;
}
.bq-io .bq-value-toggle .toggle-btn {
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 5px 11px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--io-muted);
    line-height: 1.4;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.bq-io .bq-value-toggle .toggle-btn:hover { color: var(--io-ink); background: none; }
.bq-io .bq-value-toggle .toggle-btn.active {
    background: #fff;
    color: var(--io-ink);
    box-shadow: 0 1px 2px rgba(0, 42, 69, .14);
}

/* Edit Columns / Download, matched to .bq-io-download. */
.bq-io .btn-edit-ratios {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--io-line-strong);
    border-radius: 4px;
    background: #fff;
    color: var(--io-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bq-io .btn-edit-ratios:hover {
    background: var(--io-tint-2);
    border-color: #b6c4d1;
    color: var(--io-navy);
}
.bq-io .btn-edit-ratios svg { width: 14px; height: 14px; display: block; flex: none; }

/* Sorting. The caret exists only on the sorted column - a row of idle
   arrows across a twelve-column table is noise. */
.bq-io .bq-io-table thead th.sortable { cursor: pointer; user-select: none; }
.bq-io .bq-io-table thead th.sortable:hover { color: var(--io-muted); background: var(--io-tint-2); }
.bq-io .bq-io-table thead th.sorted-asc,
.bq-io .bq-io-table thead th.sorted-desc { color: var(--io-blue); }
.bq-io .bq-io-table thead th.sorted-asc::after { content: " \25B2"; font-size: 7px; vertical-align: 1px; }
.bq-io .bq-io-table thead th.sorted-desc::after { content: " \25BC"; font-size: 7px; vertical-align: 1px; }

.bq-io .bq-io-table th.peer-sno-col,
.bq-io .bq-io-table td.peer-sno-col {
    width: 52px;
    text-align: right;
    color: var(--io-faint);
    font-weight: 600;
}

/* The row for the company whose page this is. */
.bq-io .bq-io-table tbody tr.highlight-row { background: var(--io-blue-soft); }
.bq-io .bq-io-table tbody tr.highlight-row:hover { background: rgba(0, 82, 155, .12); }
.bq-io .bq-io-table tbody tr.highlight-row td { font-weight: 600; color: var(--io-ink); }

.bq-io .peer-company-link {
    font-weight: 700;
    color: var(--io-blue);
    letter-spacing: .2px;
    text-decoration: none;
}
.bq-io .peer-company-link:hover { text-decoration: underline; }

/* THE LEDE RUNS THE CARD'S WIDTH.
   .bq-io-say caps at 118ch, which is a sane measure for a sentence set
   under a 620px chart card. Under a full-width table card on a 1250px
   grid it breaks the line about two thirds across and leaves a short
   second line hanging in the middle of a lot of white, which reads as a
   layout fault rather than as a measure. Opt-in, so the chart cards that
   want the tighter measure keep it. */
.bq-io .bq-io-say--wide { max-width: none; }

/* ── The frozen Ticker column's highlight ─────────────────────────────
   THE STICKY CELL CANNOT INHERIT THE ROW'S BACKGROUND. It has to paint
   its own or the columns scrolling underneath show through it, and the
   colour it was painting came from style.css, written before this design
   existed: #f1f8ff on hover and #e9f5ff for the highlighted row, against
   the row's own #f7fafc and blue-soft. Hovering a row lit the whole row
   one colour and the Ticker cell a different one.

   The two values below are the row's colours, flattened against white —
   --io-blue-soft is rgba(0,82,155,.08) and a translucent fill on a sticky
   cell is a hole, not a tint. Written against #peers-table to match the
   specificity of the rules in style.css they replace; this file loads
   after it, so source order settles the tie. */
.bq-io #peers-table tbody tr:hover td:nth-child(2) { background-color: var(--io-tint); }
#peers-table tr.highlight-row td:nth-child(2) { background-color: #ebf1f7; }
#peers-table tbody tr.highlight-row:hover td:nth-child(2) { background-color: #e0eaf3; }

/* A peers table is as wide as the reader's column preferences make it, so
   it sizes to content and scrolls rather than being forced into a fixed
   grid like the ownership tables. */
.bq-io .bq-io-table--peers { table-layout: auto; min-width: 0; }
.bq-io .bq-io-table--peers td { white-space: nowrap; }
.bq-io .bq-io-table--peers thead th.peer-company-head { text-align: left; }

/* THE TICKER COLUMN SIZES TO ITS LONGEST TICKER.
   td.bq-io-c-name carries max-width:0 + overflow:hidden, which is the right
   treatment for the institution-name column it was written for — a long
   name should ellipsise rather than push the table wider. A ticker is not a
   name: it is four or five characters that identify the row, it is the
   column this table freezes on horizontal scroll, and a frozen identifier
   reading "BRK..." is worse than useless. The table is table-layout:auto,
   so releasing the cap lets the column take exactly the width of the
   longest ticker in it and no more — and the sticky clone in peers.js
   measures that column with getBoundingClientRect(), so the frozen header
   follows the same dynamic width without a number written anywhere. */
.bq-io .bq-io-table--peers th.bq-io-c-name,
.bq-io .bq-io-table--peers td.bq-io-c-name {
    max-width: none;
    width: auto;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}
.bq-io .bq-io-table--peers td.peer-company {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* ── The floating header and frozen ticker column ──────────────────────
   DELIBERATELY UNSCOPED. peers.js appends .fixed-header-wrapper to
   document.body, outside #bq-ownership-container, so a `.bq-io ` prefix
   never matches it. position:fixed is the load-bearing declaration: the
   script sets top/left/width/opacity inline on scroll and expects the
   element to already be taken out of flow.

   z-index 890 puts it under the sticky ticker bar at 900 and over the
   table, which is the same stacking the SEC filings page uses. */
.fixed-header-wrapper {
    position: fixed;
    z-index: 890;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background: #f7fafc;
    border-bottom: 1px solid #cfd9e3;
    transition: opacity .12s ease;
}
.fixed-header-wrapper table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
    margin: 0;
}
.fixed-header-wrapper thead th {
    padding: 8px 14px;
    background: #f7fafc;
    border-bottom: 1px solid #dfe6ed;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .75px;
    text-transform: uppercase;
    color: #97a4b2;
    white-space: nowrap;
    text-align: right;
    box-sizing: border-box;
}
/* PEERS ONLY. These two columns are left-aligned because on /peers they are
   Ticker and Company; the clone is a shared component now (see
   BQOwnershipUI.floatingHeader) and on /dividends the same positions hold a
   rank and a date, both of which the live table sets flush right. Unscoped,
   the floating header disagreed with the table underneath it. */
/* PEERS ONLY. Column 2 is Ticker there and is left-aligned; the clone is a
   shared component now (BQOwnershipUI.floatingHeader) and on /dividends the
   same position holds a date the live table sets flush right, so unscoped
   this made the floating header disagree with the table under it.

   Column 1 is NOT listed. It used to be — left-aligned here and then pushed
   back to the right by .peer-sno-col below, two rules cancelling each other
   at equal weight and settled only by source order. Qualifying this one with
   a class made it heavier than its own correction and the "#" heading
   flipped left. It is simply left to .peer-sno-col now. */
.fixed-header-wrapper .bq-io-table--peers thead th:nth-child(2),
.fixed-header-wrapper thead th.peer-company-head { text-align: left; }
.fixed-header-wrapper thead th.peer-sno-col { text-align: right; }

/* THE CLONE LIVES ON <body>, OUTSIDE .bq-io.
   Every column rule in this stylesheet is scoped to that class, so none of
   them reach the clone and it falls back to the blanket right-alignment
   above — which is why the floating header showed "Ex-Date" flush right
   over a column that is flush left. The class-based alignments are
   restated here for the columns the shared header is actually used on. A
   clone that disagrees with the table beneath it is worse than no clone. */
.fixed-header-wrapper thead th.bq-io-c-date,
.fixed-header-wrapper thead th.bq-io-c-type,
.fixed-header-wrapper thead th.bq-io-c-own,
.fixed-header-wrapper thead th.bq-io-c-name { text-align: left; }
.fixed-header-wrapper thead th.bq-io-c-rank { text-align: right; }
.fixed-header-wrapper th.sortable { cursor: pointer; user-select: none; }
.fixed-header-wrapper th.sorted-asc,
.fixed-header-wrapper th.sorted-desc { color: #00529b; }
.fixed-header-wrapper th.sorted-asc::after { content: " \25B2"; font-size: 7px; vertical-align: 1px; }
.fixed-header-wrapper th.sorted-desc::after { content: " \25BC"; font-size: 7px; vertical-align: 1px; }

/* The scrolling half. peers.js drives it with translateX to match the
   table's own horizontal scroll. */
.fixed-header-wrapper .cloned-table { will-change: transform; }

/* The Ticker column, which peers.js fades in once the reader has scrolled
   past S.No so the identifier never leaves the screen. Absolute inside the
   wrapper, over the scrolling clone. */
.fixed-header-wrapper .frozen-column {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    background: #f7fafc;
    border-right: 1px solid #dfe6ed;
    box-shadow: 2px 0 5px -2px rgba(11, 31, 46, .18);
    transition: opacity .12s ease;
}

/* Back-to-top, which this page alone shows. */
.bq-io #bq-scroll-to-top,
#bq-scroll-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 38px;
    height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfd9e3;
    border-radius: 50%;
    background: #fff;
    color: #37485a;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(11, 31, 46, .06), 0 10px 24px rgba(11, 31, 46, .13);
    transition: color .15s ease, border-color .15s ease;
    z-index: 900;
}
#bq-scroll-to-top.visible { display: flex; }
#bq-scroll-to-top:hover { color: #00529b; border-color: #b6c4d1; }
#bq-scroll-to-top svg { width: 17px; height: 17px; }

/* =====================================================================
   SEC FILINGS  (/sec-filings)
   ===================================================================== */

/* The table is .bq-data-table because sec-filings.js and the sticky-header
   clone both key on it. Brought up to the same treatment as .bq-io-table
   rather than renamed.

   THE CLONE SELECTOR CARRIES .bq-data-table ON PURPOSE. The statement pages
   are on .bq-io too now, and their own header clone is a bare
   .bq-sticky-header-table — a fixed-layout grid of date columns that JS sizes
   cell by cell, nothing like this one. Qualifying with .bq-data-table matches
   only the clone this template prints (`class="bq-data-table
   bq-sticky-header-table"`) and leaves the statements clone to
   statements.css. */
.bq-io #bq-sec-filings-table,
.bq-io .bq-data-table.bq-sticky-header-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
    table-layout: auto;
}
.bq-io #bq-sec-filings-table thead th,
.bq-io .bq-data-table.bq-sticky-header-table thead th {
    background: var(--io-tint);
    padding: 8px 14px;
    border-bottom: 1px solid var(--io-line-mid);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .75px;
    text-transform: uppercase;
    color: var(--io-faint);
    white-space: nowrap;
    text-align: left;
}
.bq-io #bq-sec-filings-table tbody td {
    padding: 6px 14px;
    line-height: 1.35;
    border-bottom: 1px solid var(--io-line);
    color: var(--io-text);
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.bq-io #bq-sec-filings-table tbody tr { transition: background .12s ease; }
.bq-io #bq-sec-filings-table tbody tr:hover { background: var(--io-tint); }
.bq-io #bq-sec-filings-table tbody tr:last-child td { border-bottom: 0; }

/* COLUMN GEOMETRY, PORTED FROM sec-filings.css.
   min-width matters as much as width here: style.css gives the first column
   of every .bq-data-table `width: 180px; min-width: 180px` - sized for the
   statements pages, where column 1 is a line-item label. Overriding only
   `width` leaves the 180px min-width in force and wins, which is why the "#"
   column opened 180px wide on a 355px phone before any scrolling. */
.bq-io #bq-sec-filings-table th.sno-col,
.bq-io #bq-sec-filings-table td.sno-col,
.bq-io .bq-sticky-header-table th.sno-col {
    width: 50px;
    min-width: 50px;
    text-align: center;
    color: var(--io-faint);
    font-weight: 600;
}
.bq-io #bq-sec-filings-table th.form-type-col,
.bq-io #bq-sec-filings-table td.form-type-col,
.bq-io .bq-sticky-header-table th.form-type-col {
    width: 100px;
    min-width: 100px;
}
/* The form type is the column a reader scans for. */
.bq-io #bq-sec-filings-table td.form-type-col { font-weight: 700; color: var(--io-ink); }
.bq-io #bq-sec-filings-table td.accession-col { color: var(--io-faint); letter-spacing: .2px; }
.bq-io #bq-sec-filings-table th.url-col,
.bq-io #bq-sec-filings-table td.url-col,
.bq-io .bq-sticky-header-table th.url-col { width: 70px; min-width: 70px; text-align: center; }
.bq-io #bq-sec-filings-table td.url-col { text-align: center; }
.bq-io #bq-sec-filings-table td.url-col { padding-top: 1px; padding-bottom: 1px; }
.bq-io #bq-sec-filings-table td.url-col a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--io-muted);
    transition: background .14s ease, color .14s ease;
}
.bq-io #bq-sec-filings-table td.url-col a:hover { background: var(--io-tint-2); color: var(--io-blue); }
.bq-io #bq-sec-filings-table td.url-col svg { width: 14px; height: 14px; }

.bq-io #dividends-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── /insiders: the two tables' scrollers ─────────────────────────────
   THESE WRAPPERS HAD NO overflow-x AT ALL. Both tables carry an 800/900px
   floor on a phone and #bq-ownership-container is overflow-x:hidden, so
   every column past the fold was simply clipped away with no way to reach
   it — the tables did not scroll, they were cut off. Same treatment as
   #institutional-table-wrapper, which had it all along. */
.bq-io #insider-holders-table-wrapper,
.bq-io #insider-transactions-table-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--io-line-mid);
    border-radius: 5px;
}

.bq-io .bq-historic-data-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--io-line-mid);
    border-left: 1px solid var(--io-line-mid);
    border-right: 1px solid var(--io-line-mid);
    border-radius: 5px;
}
/* ── Frozen "Form Type" column in the live table ──────────────────────
   THE FIRST COLUMN MUST BE RELEASED FIRST. style.css makes column 1 of
   every .bq-data-table sticky, and this table still carries that class
   because sec-filings.js and the header clone key on it. sec-filings.css
   used to cancel it so that column 2 could be the frozen one; that
   override was not ported when the file stopped being enqueued, so the
   page froze "#" instead of Form Type. */
.bq-io #bq-sec-filings-table th:first-child,
.bq-io #bq-sec-filings-table td:first-child {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    border-right: none !important;
    box-shadow: none !important;
}

.bq-io #bq-sec-filings-table th:nth-child(2),
.bq-io #bq-sec-filings-table td:nth-child(2) {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    border-right: 1px solid var(--io-line-mid);
    box-shadow: 2px 0 5px -2px rgba(11, 31, 46, .12);
}
.bq-io #bq-sec-filings-table thead th:nth-child(2) { background: var(--io-tint); z-index: 3; }
.bq-io #bq-sec-filings-table tbody tr:hover td:nth-child(2) { background: var(--io-tint); }

/* ── The cloned header bar ─────────────────────────────────────────────
   position:fixed is what makes this a floating header rather than a
   stranded div; sec-filings.js sets top/left/width inline as you scroll.
   The rules came back from sec-filings.css when that file stopped being
   enqueued and the header quietly stopped appearing. 890 sits under the
   sticky ticker at 900. */
.bq-io .bq-sticky-header-wrapper {
    position: fixed;
    z-index: 890;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--io-line-mid);
    border-bottom: 0;
}
.bq-io .bq-sticky-header-wrapper table { position: relative; margin: 0; }

/* ADDRESSED BY CLASS, NOT BY POSITION. These two rules used to read
   `th:nth-child(2)` and `th:first-child`, which is only "Form Type" and "#"
   on this page — on the statement pages, which are on .bq-io as well now,
   the same selectors are the line-item column and would have released the
   one column that has to stay frozen, and absolutely positioned a date
   column over it. The classes below exist only in this template's clone
   (sec-filings.js never rewrites that thead), so the statements clone,
   whose header cells carry no column classes at all, is left alone. */

/* IN FLOW, NOT ABSOLUTE. This was position:absolute, and absolute takes the
   cell OUT of the row - so the clone's remaining six cells reflowed into the
   seven column widths the script had just measured, and every heading after
   "Form Type" sat one column to the left of the data under it. Sticky keeps
   it in the row (nothing scrolls this wrapper, so sticky resolves to its
   static position); the translateX() sec-filings.js writes each frame is
   what actually holds it against the left edge, exactly as the live table's
   own sticky column does. */
.bq-io .bq-sticky-header-wrapper th.form-type-col {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 11;
    background: var(--io-tint);
    border-right: 1px solid var(--io-line-mid);
    box-shadow: 2px 0 5px -2px rgba(11, 31, 46, .12);
}
.bq-io .bq-sticky-header-wrapper th.sno-col {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* ── The form-type multi-select ─────────────────────────────────────── */
.bq-io .custom-dropdown { position: relative; }
.bq-io .custom-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 34px;
    min-width: 168px;
    padding: 0 11px;
    border: 1px solid var(--io-line-strong);
    border-radius: 4px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--io-ink);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bq-io .custom-dropdown-trigger::after {
    content: "";
    width: 10px;
    height: 10px;
    flex: none;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a89' d='M6 8.2 2.1 4.3l.9-.9L6 6.4l3-3 .9.9z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.bq-io .custom-dropdown-trigger:hover { border-color: #b6c4d1; }
.bq-io .custom-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 60;
    min-width: 250px;
    background: #fff;
    border: 1px solid var(--io-line-mid);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(11, 31, 46, .06), 0 10px 24px rgba(11, 31, 46, .13);
    overflow: hidden;
}
.bq-io .custom-dropdown.open .custom-dropdown-content,
.bq-io .custom-dropdown-content.show { display: block; }
.bq-io .custom-dropdown-actions {
    display: flex;
    gap: 14px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--io-line);
    background: var(--io-tint);
}
.bq-io .custom-dropdown-actions .text-btn {
    border: 0;
    background: none;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--io-blue);
    cursor: pointer;
}
.bq-io .custom-dropdown-actions .text-btn:hover { text-decoration: underline; }
.bq-io .checkbox-list { max-height: 268px; overflow-y: auto; padding: 6px 0; }
.bq-io .checkbox-list label,
.bq-io .checkbox-list > div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--io-text);
    cursor: pointer;
}
.bq-io .checkbox-list label:hover,
.bq-io .checkbox-list > div:hover { background: var(--io-tint); }
.bq-io .checkbox-list input[type="checkbox"] { accent-color: var(--io-blue); margin: 0; }
.bq-io .apply-btn-wrapper { padding: 9px 12px; border-top: 1px solid var(--io-line); }
.bq-io .apply-btn-wrapper #ft-apply {
    width: 100%;
    height: 30px;
    border: 0;
    border-radius: 4px;
    background: var(--io-navy);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .15s ease;
}
.bq-io .apply-btn-wrapper #ft-apply:hover { background: #013a5e; }

/* ── Skeletons, loader, pager ───────────────────────────────────────── */
.bq-io .bq-skeleton {
    display: inline-block;
    height: 11px;
    width: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #eef2f6 25%, #e3e9ef 37%, #eef2f6 63%);
    background-size: 400% 100%;
    animation: bq-io-shimmer 1.3s ease-in-out infinite;
}
@keyframes bq-io-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.bq-io .bq-loader-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .82);
    z-index: 20;
}
.bq-io .bq-loader-spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--io-line-mid);
    border-top-color: var(--io-blue);
    border-radius: 50%;
    animation: bq-io-spin .9s linear infinite;
}
@keyframes bq-io-spin { to { transform: rotate(360deg); } }

.bq-io .bq-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
    padding-top: 14px;
}
.bq-io .bq-pagination-controls button,
.bq-io .bq-pagination-controls .page-numbers {
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--io-line-mid);
    border-radius: 4px;
    background: #fff;
    color: var(--io-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.bq-io .bq-pagination-controls button:hover:not(:disabled) {
    background: var(--io-tint-2);
    border-color: #b6c4d1;
    color: var(--io-ink);
}
.bq-io .bq-pagination-controls button.active,
.bq-io .bq-pagination-controls button[aria-current="page"] {
    background: var(--io-navy);
    border-color: var(--io-navy);
    color: #fff;
}
.bq-io .bq-pagination-controls button:disabled { opacity: .45; cursor: default; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
    .bq-io .bq-io-donut { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
    .bq-io .bq-io-donut-plot { width: 160px; height: 160px; }
    .bq-io .bq-io-kpi-val { font-size: 21px; }
}

@media (max-width: 960px) {
    /* The donut card is full width once the 2-up grid collapses, so the
       readout gets the room back rather than staying pinned at 300px. */
    .bq-io .bq-io-legend { max-width: 420px; }
}

@media (max-width: 768px) {
    .bq-io .bq-io-head { align-items: flex-start; }
    .bq-io .bq-io-head-side { width: 100%; justify-content: space-between; }
    .bq-io .bq-io-donut {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 18px;
    }
    .bq-io .bq-io-donut-plot { width: 172px; height: 172px; }
    .bq-io .bq-io-legend { width: 100%; max-width: none; }

    .bq-io .bq-io-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-io .bq-io-kpi { padding: 4px 14px 14px; }
    /* The 3-column boundaries above are wrong at two columns: reset them all,
       then re-declare for a 2-wide grid. */
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi { border-left: 1px solid var(--io-line); border-bottom: 1px solid var(--io-line); }
    /* :not(--2) IS LOAD-BEARING. This undoes the 3-column rule at line 488,
       and it was written unqualified — so it also reached the 2-up grid on
       /dividends, where tile 4 is 3n+1 but sits in the RIGHT column. Below
       520px, where that grid collapsed to one column and everything else was
       flush left, tile 4 alone kept a 14px indent. A rule that exists to
       cancel a 3-column layout has no business matching a grid that never
       had three columns. */
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-child(3n + 1) { padding-left: 14px; }
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-child(n + 3) { padding-top: 16px; }
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 4px; }
    .bq-io .bq-io-kpi-val { font-size: 19px; }

    .bq-io .bq-io-plot { height: 240px; }
    .bq-io .bq-io-plot-foot { gap: 14px; }

    .bq-io .bq-io-tablehead { align-items: flex-start; }
    .bq-io .bq-io-tablehead h2 { font-size: 17px; }
    /* No right half to sit in at this width: the facts take their own full
       line under the title and read left to right like everything else. */
    .bq-io .bq-io-facts {
        width: 100%;
        justify-content: flex-start;
        margin-top: 12px;
        padding-bottom: 0;
    }
    .bq-io .bq-io-toolbar { justify-content: space-between; }
    .bq-io .bq-table-footer { justify-content: center; }

    /* The table keeps its shape and scrolls inside its own wrapper - a
       financial table stacked into cards stops being a table. What it does
       drop is the CIK: it is a lookup key, not something anyone reads on a
       phone, and at this width its 104px is the difference between seeing
       an institution's name and seeing the first third of it. The name
       column takes the width back and still truncates when it has to. */
    /* table-layout is fixed, so the name column is whatever the numeric
       columns leave behind. At the desktop widths that was 560px; inside a
       740px table it was 64px, and every institution rendered as "Blac...".
       The numeric columns give back what they can spare and the table's
       floor rises to cover the rest - it is already in a scroller. */
    .bq-io .bq-io-table { min-width: 800px; }
    .bq-io .bq-io-table thead th.bq-io-c-rank   { width: 40px; }
    .bq-io .bq-io-table thead th.bq-io-c-shares { width: 112px; }
    .bq-io .bq-io-table thead th.bq-io-c-stake  { width: 106px; }
    .bq-io .bq-io-table thead th.bq-io-c-chg    { width: 118px; }
    .bq-io .bq-io-table thead th.bq-io-c-chgpct { width: 84px; }
    .bq-io .bq-io-table thead th.bq-io-c-value  { width: 104px; }
    .bq-io .bq-io-table thead th,
    .bq-io .bq-io-table tbody td { padding-left: 11px; padding-right: 11px; }
    .bq-io .bq-io-table td.bq-io-c-rank { width: 40px; }
    .bq-io .bq-io-stake-rail { width: 32px; }
    .bq-io .bq-io-stake { gap: 7px; }

    .bq-io .bq-io-table thead th.bq-io-c-cik,
    .bq-io .bq-io-table tbody td.bq-io-c-cik { display: none; }

    /* THE INSIDER TABLES NEED THEIR OWN NUMBERS HERE.
       Both are table-layout:fixed, so a column with no declared width gets
       whatever the declared ones leave. The widths above are the
       institutional table's, and against the insider tables' column set they
       summed to within 2px of the whole table — which left the Insider and
       Position columns nothing at all and rendered them as empty slivers.
       Position drops out (it is in the row tooltip), the rest give back what
       they can spare, and the table's floor rises to cover the name. */
    .bq-io .bq-io-table thead th.bq-io-c-role,
    .bq-io .bq-io-table tbody td.bq-io-c-role { display: none; }

    .bq-io .bq-io-table--tx { min-width: 900px; }
    .bq-io .bq-io-table--tx thead th.bq-io-c-date      { width: 96px; }
    .bq-io .bq-io-table--tx thead th.bq-io-c-type      { width: 132px; }
    .bq-io .bq-io-table--tx thead th.bq-io-c-shares    { width: 104px; }
    .bq-io .bq-io-table--tx thead th.bq-io-c-price     { width: 88px; }
    .bq-io .bq-io-table--tx thead th.bq-io-c-total     { width: 104px; }
    .bq-io .bq-io-table--tx thead th.bq-io-c-remaining { width: 112px; }
    .bq-io .bq-io-table--tx thead th.bq-io-c-own       { width: 80px; }

    /* ── /dividends: freeze the Ex-Date column ────────────────────────
       The distribution table is 800px inside a ~357px wrapper on a phone,
       so it scrolls — and once it does, every column but the first two
       scrolls away from the only thing that identifies the row. The rank
       is not that thing: "31" tells a reader nothing about which payment
       they are looking at. The ex-date is.

       Same arrangement /peers uses for its Ticker column: release column
       one so it scrolls off, and pin column two at the wrapper's edge. The
       cell has to paint an opaque background of its own or the columns
       passing underneath show straight through it. */
    .bq-io .bq-io-table--div th:nth-child(2),
    .bq-io .bq-io-table--div td:nth-child(2) {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        border-right: 1px solid var(--io-line-mid);
        box-shadow: 2px 0 5px -2px rgba(11, 31, 46, .12);
    }
    .bq-io .bq-io-table--div thead th:nth-child(2) { background: var(--io-tint); z-index: 3; }
    .bq-io .bq-io-table--div tbody tr:hover td:nth-child(2) { background: var(--io-tint); }

    /* COLUMN WIDTHS, SET TO THEIR CONTENTS.
       .bq-io-table is table-layout:fixed with a 800px floor at this width,
       and this table has only five columns — so the browser handed each of
       them 160px whether it needed it or not. "Aug 10, 2026" needs about
       82, "$0.26" about 52 and "Cash" about 40, which left roughly half the
       scroll width carrying nothing. Sized here, the whole table comes in
       under 400px and barely scrolls at all; the freeze below is then a
       safety net rather than the only thing making the table usable.

       The frozen column needs a declared width for a second reason: without
       one it is sized by its content and the pinned edge shifts as the
       reader scrolls. */
    .bq-io .bq-io-table--div { min-width: 0; }
    .bq-io .bq-io-table--div thead th.bq-io-c-rank,
    .bq-io .bq-io-table--div tbody td.bq-io-c-rank { width: 30px; }
    .bq-io .bq-io-table--div th:nth-child(2),
    .bq-io .bq-io-table--div td:nth-child(2) { width: 92px; min-width: 92px; }
    .bq-io .bq-io-table--div thead th.bq-io-c-shares,
    .bq-io .bq-io-table--div tbody td.bq-io-c-shares { width: 62px; }
    .bq-io .bq-io-table--div thead th.bq-io-c-own,
    .bq-io .bq-io-table--div tbody td.bq-io-c-own { width: 46px; }
    .bq-io .bq-io-table--div th,
    .bq-io .bq-io-table--div td { padding-left: 8px; padding-right: 8px; }

    /* ── Freeze the identifying column ────────────────────────────────
       Same arrangement /peers and /dividends use. These tables are 800px
       inside a ~357px wrapper on a phone, so the moment a reader scrolls
       to the numbers the only thing naming the row — the institution, the
       insider — has gone off the left edge. Column 1 is the rank, which
       identifies nothing; column 2 is released from the scroll and pinned
       at the wrapper's edge instead.

       A sticky cell paints its own background or the columns passing
       underneath show straight through it, and it needs a declared width
       or the pinned edge shifts as the reader scrolls. Both tables are
       table-layout:fixed with every other column declared above, so the
       name column already resolves to a stable width. */
    /* /institutional-ownership is NOT in this list, deliberately. It had the
       same freeze and it was taken out again: the institution column is the
       widest on the table, and pinned it left roughly a third of a phone
       screen showing the same names while the six numeric columns fought
       over what was left. The sticky header stays; the frozen column does
       not. The insider table keeps it — its name column is a person's name
       at half the width. */
    .bq-io .bq-io-table--holders th:nth-child(2),
    .bq-io .bq-io-table--holders td:nth-child(2) {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        border-right: 1px solid var(--io-line-mid);
        box-shadow: 2px 0 5px -2px rgba(11, 31, 46, .12);
    }
    .bq-io .bq-io-table--holders thead th:nth-child(2) { background: var(--io-tint); z-index: 3; }
    .bq-io .bq-io-table--holders tbody tr:hover td:nth-child(2) { background: var(--io-tint); }

    .bq-io .bq-io-table--holders { min-width: 800px; }
    .bq-io .bq-io-table--holders thead th.bq-io-c-shares { width: 108px; }
    .bq-io .bq-io-table--holders thead th.bq-io-c-stake  { width: 104px; }
    .bq-io .bq-io-table--holders thead th.bq-io-c-filed  { width: 100px; }

    .bq-io .bq-io-insights li { font-size: 13px; }
    .bq-io .bq-io-lede { font-size: 13px; }
    .bq-io .bq-io-filters { gap: 10px 12px; }
    .bq-io .bq-io-filter { flex: 1 1 calc(50% - 6px); }
    .bq-io .custom-dropdown-trigger { min-width: 0; }
    .bq-io .custom-dropdown-content { min-width: 0; width: 100%; }
    /* The peers toolbar: the units switch reads as a sentence and takes the
       full first line, the two actions take half each below it. Wrapping
       alone put them at three different widths on three different lines. */
    .bq-io .bq-io-toolbar--peers {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: center;
    }
    /* "Values in" is the toggle's label, not a heading for the row. Pushed
       to opposite edges by space-between it read as two unrelated controls
       with 200px of nothing between them. The toggle keeps the right edge;
       the label sits against it. */
    .bq-io .bq-io-toolbar--peers .bq-io-rows { grid-column: 1 / -1; justify-content: flex-end; width: 100%; }
    .bq-io .bq-io-toolbar--peers .btn-edit-ratios { width: 100%; justify-content: center; }
    .bq-io .bq-io-filter select { width: 100%; min-width: 0; }
    .bq-io .bq-io-plot--tall { height: 260px; }
}

@media (max-width: 520px) {
    /* SIX TILES STAY TWO ABREAST ON A PHONE.
       This grid used to collapse to a single column here, which turned the
       dividend statistics card into a 470px wall: six readings, one under
       another, each using about a third of a 390px screen and leaving the
       rest empty. The readings are the shortest things on the page —
       "$1.06", "0.35%", "15" — and the longest, "Aug 13, 2026", is already
       set at the smaller --sm size for exactly that reason. Two columns
       halves the height of the card and costs no legibility at all.

       Written with :nth-child(n) so it carries the same weight as the
       3n-boundary rules in the 768px block above and settles them by source
       order; without it tile 4 keeps a 14px indent nothing else has. */
    .bq-io .bq-io-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-io .bq-io-kpis--2 .bq-io-kpi:nth-child(n) {
        border-left: 1px solid var(--io-line);
        border-bottom: 1px solid var(--io-line);
        padding: 14px 10px 14px 12px;
    }
    /* Left column: no rule to its left, and flush with the card's edge. */
    .bq-io .bq-io-kpis--2 .bq-io-kpi:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
    /* Top row has the card head above it, last row has nothing below it. */
    .bq-io .bq-io-kpis--2 .bq-io-kpi:nth-child(-n + 2) { padding-top: 4px; }
    .bq-io .bq-io-kpis--2 .bq-io-kpi:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 4px; }

    /* At half the width the reading can give a little back — it is still the
       largest thing in its tile, which is all it has to be. */
    .bq-io .bq-io-kpis--2 .bq-io-kpi-val { font-size: 17.5px; }
    .bq-io .bq-io-kpis--2 .bq-io-kpi-val--sm { font-size: 14.5px; }
    .bq-io .bq-io-kpis--2 .bq-io-kpi-label { font-size: 9px; letter-spacing: .6px; }
    .bq-io .bq-io-kpis--2 .bq-io-kpi-sub { font-size: 10px; line-height: 1.35; }
    .bq-io .bq-io-filter { width: 100%; }
    .bq-io .bq-io-filter select { width: 100%; min-width: 0; }
    .bq-io .bq-io-plot--tall { height: 240px; }
    .bq-io .bq-io-paywall-cta { margin-left: 0; width: 100%; justify-content: center; }
    /* THE SIX-TILE GRID COLLAPSES TO ONE COLUMN; THE FOUR-TILE ONE DOES NOT.
       :not(--2) again, and for the same reason as in the 768px block: these
       rules are one class deep and so is .bq-io-kpis--2, so without it they
       simply won on source order and the two-abreast layout declared above
       never applied at all. The tiles took its padding and the grid kept
       this one column — which is the state the dividends card was in. */
    /* THE SIX-TILE GRID STAYS TWO ABREAST TOO — /insiders and
       /institutional-ownership.
       It used to collapse to one column here, which is the state
       /dividends was fixed out of above and for the same reasons: six
       readings stacked one per line turned the summary card into a wall
       roughly 500px tall, each reading using a third of a 390px screen and
       leaving the rest empty, and it pushed the chart below it off the
       first two screens entirely. The readings are short — "$3.6 Tn",
       "62.4%", "1,204" — and the labels above them already wrap to two
       lines at full width, so nothing is lost at half of it. This is the
       /dividends grid, applied to the grid that has two more tiles in it.

       :nth-child(n) is carried over from the rules this replaces: it
       matches everything and adds only weight, which is what settles these
       against the 3n-boundary rules in the 768px block. */
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-child(n) {
        border-left: 1px solid var(--io-line);
        border-bottom: 1px solid var(--io-line);
        padding: 14px 10px 14px 12px;
    }
    /* Left column: no rule to its left, and flush with the card's edge. */
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
    /* Top row has the card head above it, last row has nothing below it. */
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-child(-n + 2) { padding-top: 4px; }
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 4px; }
    /* At half the width the reading gives a little back — it is still the
       largest thing in its tile, which is all it has to be. */
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi-val { font-size: 17.5px; }
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi-val--sm { font-size: 14.5px; }
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi-label { font-size: 9px; letter-spacing: .6px; }
    .bq-io .bq-io-kpis:not(.bq-io-kpis--2) .bq-io-kpi-sub { font-size: 10px; line-height: 1.35; }
    .bq-io .bq-io-facts { gap: 10px 0; }
    .bq-io .bq-io-fact { padding: 0 12px; }
    .bq-io .bq-io-seg button { padding: 5px 9px; font-size: 11px; }
    .bq-io .bq-io-keys { gap: 10px; }
    .bq-io .bq-io-key { font-size: 11px; }
    .bq-io .bq-io-plot { height: 220px; }
    .bq-io .bq-io-plot-foot { gap: 12px 16px; }
    .bq-io .bq-io-foot-val { font-size: 12.5px; }
    /* Phone: the toolbar's two controls each take a half rather than the
       select hugging the button on one line with the label wrapping. */
    .bq-io .bq-io-toolbar { gap: 10px; }
    .bq-io .bq-io-rows, .bq-io .bq-io-download { flex: 1 1 auto; }
    .bq-io .bq-io-rows select { flex: 1 1 auto; }
    .bq-io .bq-io-download { justify-content: center; }
    .bq-io-tip { max-width: min(240px, calc(100vw - 20px)); font-size: 11.5px; }
}


/* ── The cloned header on a phone ──────────────────────────────────────
   style.css carries a 768px block written for the statements clone -
   `.bq-sticky-header-wrapper { padding: 5px 0; background: #f8f9fa
   !important }` and `.bq-sticky-header-wrapper th { padding: 2px 4px
   !important; font-size: 13px !important; white-space: normal !important
   }`. statements.css answers it with a block of its own; /sec-filings had
   none, so on a phone its floating header alone came out at 13px roman
   against the 9.5px uppercase of the header it is a copy OF, in a grey
   band 10px taller than the row it replaced, with headings wrapping to two
   lines and pulling the frozen column out of line. Same weights, same
   !important, so it lands. */
@media (max-width: 768px) {
    .bq-io .bq-sticky-header-wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: var(--io-tint) !important;
        border-bottom: 1px solid var(--io-line-strong);
        box-shadow: 0 4px 12px rgba(11, 31, 46, .10);
    }

    /* The live thead's own metrics, restated where the !important can
       reach them - 8px/14px is what #bq-sec-filings-table thead th uses at
       every width, and the clone has to agree with it to the pixel or the
       headings sit off their columns. */
    .bq-io .bq-sticky-header-wrapper .bq-sticky-header-table th {
        padding: 8px 14px !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        letter-spacing: .75px !important;
        text-transform: uppercase !important;
        color: var(--io-faint) !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        background: var(--io-tint) !important;
    }
    .bq-io .bq-sticky-header-wrapper .bq-sticky-header-table th.form-type-col {
        background: var(--io-tint) !important;
    }
}


/* =====================================================================
   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-io .bq-io-filter select,
    .bq-io .bq-io-rows select,
    .js-rows-selector,
    #institutional-rows-per-page,
    #insider-rows-per-page,
    #bq-formgroup-filter,
    #bq-limit-filter,
    #bq-period-filter {
        font-size: 16px;
    }
}