/*
 * top-movers.css — /top-gainers and /top-losers
 * Version 1.1.0
 *
 * Loads after homepage.css and content-pages.css and borrows their tokens
 * (--bq-green, --bq-line-strong, --bq-mono, ...) rather than defining a
 * second palette. Everything here is prefixed .bq-tm- and cannot reach
 * another template.
 *
 * ---------------------------------------------------------------------
 * IT IS THE HOMEPAGE DASHBOARD, NOT A CONTENT PAGE
 *  Square corners, hairline borders, a tinted panel head and a 2px ink
 *  rule under the column headers — the same chrome .bq-panel and
 *  .bq-markets__head already wear on the front page. v1.0 rounded every
 *  corner to 10px and floated the cards on a blue-grey wash, which read
 *  as a different site. Nothing here has a border-radius.
 *
 *  The section tint is #fbfcfd, copied from .bq-markets. The earlier
 *  --gray-100 (#f7fafc) is a distinctly blue white, and against it the
 *  white panels looked like they were sitting in a blue haze.
 *
 * COLUMN WIDTHS ARE FROZEN
 *  Both tables are table-layout:fixed and take their geometry from the
 *  .bq-tm__c-* classes below, so gainers and losers lay out identically.
 *  Under auto layout "-102.07" and "+8.77" measure differently, and the
 *  whole grid shifted on every toggle and every refresh. Every column is
 *  sized for its widest realistic value plus padding — including Company,
 *  see the note over the widths themselves for why leaving one auto broke
 *  the table at tablet widths.
 * ---------------------------------------------------------------------
 */

/* =====================================================================
   SECTION
   ===================================================================== */
/*
 * THE TOP GAP.
 *
 * .bq-plain-page .bq-main clears the fixed 54px header EXACTLY, and 54px of
 * clearance leaves nothing between the navy bar and the first thing under it.
 * The 30px this used to add was measured against prose pages, where the first
 * element is a heading floating on the section tint; here it is a bordered
 * white card, and a card's top border 30px under a solid navy bar reads as
 * touching it. 46px is the same optical distance the homepage's first panel
 * sits at once its section padding and the dashboard head are counted.
 */
.bq-tm {
    padding: 46px 0 56px;
    background: #fbfcfd;          /* .bq-markets, not the blue-white --gray-100 */
    border-bottom: 1px solid var(--bq-line);
    min-height: 60vh;
}

/*
 * .bq-plain-page narrows .bq-container to 1120px so prose on the legal and
 * marketing pages sits in one readable column. This page is not prose: it is
 * a nine-column table beside the watchlist, and it wants the same 1600px the
 * homepage dashboard gets. Widened here rather than by dropping
 * .bq-plain-page from the body, because that class is also what pins the
 * header solid.
 */
.bq-tm-page .bq-main .bq-tm .bq-container { max-width: 1600px; }

/* =====================================================================
   HEAD PANE
   -----------------------------------------------------------------
   A white card rather than type sitting straight on the section tint, so
   the page opens on the same surface the table below it is built from.
   ===================================================================== */
.bq-tm-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;

    background: var(--white);
    border: 1px solid var(--bq-line-strong);
    padding: 20px 20px 18px;
    margin-bottom: 16px;
}

.bq-tm-head__text { min-width: 0; }

.bq-tm-crumbs {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--gray-500); margin-bottom: 7px;
}
.bq-tm-crumbs a { color: var(--blue-primary); text-decoration: none; }
.bq-tm-crumbs a:hover { text-decoration: underline; }

/* Names the market and the universe, which the H1 cannot carry without
   turning into a sentence. Same 11/700/uppercase the dashboard panel titles
   wear on the homepage, so it reads as chrome rather than as copy. */
.bq-tm-eyebrow {
    display: block; margin-bottom: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--blue-primary);
}

.bq-tm-head h1 {
    margin: 0;
    font-size: 27px; font-weight: 900; line-height: 1.15;
    letter-spacing: -.5px; color: var(--bq-ink);
}

.bq-tm-lede {
    margin: 8px 0 0;
    max-width: 66ch;
    font-size: 14px; line-height: 1.6; color: var(--gray-700);
}

/* ── Gainers / Losers switch ──
   A segmented control: one border, one background, and the active half
   lifted onto white so the pair reads as one switch with a position rather
   than as two competing buttons. Square, like everything else here. */
.bq-tm-switch {
    display: inline-flex;
    flex-shrink: 0;
    padding: 3px;
    background: #eef3f7;
    border: 1px solid var(--bq-line-strong);
}

.bq-tm-switch__btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 20px;
    font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    color: var(--gray-700);
    text-decoration: none; white-space: nowrap;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.bq-tm-switch__btn:hover { color: var(--bq-ink); }
.bq-tm-switch__btn.is-active {
    background: var(--white);
    color: var(--bq-ink);
    box-shadow: 0 1px 2px rgba(0,42,69,.16);
}

.bq-tm-dot { width: 7px; height: 7px; flex-shrink: 0; opacity: .4; transition: opacity .16s ease; }
.bq-tm-dot--up   { background: var(--bq-green); }
.bq-tm-dot--down { background: var(--bq-red); }
.bq-tm-switch__btn.is-active .bq-tm-dot { opacity: 1; }

/* =====================================================================
   LAYOUT  —  table + watchlist
   -----------------------------------------------------------------
   350px and a 16px gutter, both taken from .bq-dashboard-sidebar /
   .bq-dashboard-wrap on the homepage. The width is not cosmetic: the
   watchlist widget's column geometry is worked out against a ~348px table
   (see the COLUMN GEOMETRY note in bq-watchlist/assets/css/widget.css),
   and at the 320px this page used to give it, Chg% ran into the panel edge
   and the delete button had no room left to appear in. The table gave the
   30px back.
   ===================================================================== */
.bq-tm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 16px;
    align-items: start;
}

.bq-tm-main { min-width: 0; }

.bq-tm-panel {
    background: var(--white);
    border: 1px solid var(--bq-line-strong);
}

/* The widget ships its own .bq-panel chrome; this only places it. */
.bq-tm-side { position: sticky; top: 70px; }

/* =====================================================================
   STATUS BAR
   ===================================================================== */
.bq-tm-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--bq-panel-head);
    border-bottom: 1px solid var(--bq-line-strong);
}

.bq-tm-status { display: flex; align-items: center; gap: 12px; min-width: 0; }

.bq-tm-live {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--gray-500);
}
.bq-tm-live__pip { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-500); flex-shrink: 0; }
.bq-tm-live.is-open { color: var(--gray-700); }
.bq-tm-live.is-open .bq-tm-live__pip { background: var(--bq-green); animation: bq-tm-pulse 2.2s infinite; }

/* Same pulse as .bq-live on the homepage. */
@keyframes bq-tm-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(21,128,61,.55); }
    70%  { box-shadow: 0 0 0 6px rgba(21,128,61,0); }
    100% { box-shadow: 0 0 0 0 rgba(21,128,61,0); }
}

.bq-tm-asof {
    font-size: 11.5px; color: var(--gray-700);
    font-family: var(--bq-mono); font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bq-tm-bar__right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.bq-tm-next {
    font-size: 11px; color: var(--gray-500);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

.bq-tm-error {
    margin: 0; padding: 10px 14px;
    background: var(--bq-red-soft);
    border-bottom: 1px solid var(--bq-line-strong);
    font-size: 12.5px; color: var(--bq-red); font-weight: 600;
}

/* =====================================================================
   STATS STRIP
   -----------------------------------------------------------------
   Four figures between the status bar and the table: how many names, how
   broad the move, the biggest single move, and whether anyone is actually
   trading it. A fifty-row ranking answers none of those at a glance.

   A four-column grid, not a flex row: equal columns cannot be pushed out
   of alignment by a long ticker or a nine-character volume, and the labels
   under them stay on one baseline. The hairlines between cells are borders
   on the cells rather than dividers in the markup, so the count of columns
   is a CSS concern only.
   ===================================================================== */
.bq-tm-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--bq-line-strong);
    background: #fcfdfe;
}
.bq-tm-stats[hidden] { display: none; }

.bq-tm-stat {
    padding: 11px 14px 12px;
    border-left: 1px solid var(--bq-line);
    min-width: 0;
}
.bq-tm-stat:first-child { border-left: none; }

.bq-tm-stat__label {
    display: block; margin-bottom: 3px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
    color: var(--gray-500);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-tm-stat__val {
    display: block;
    font-family: var(--bq-mono); font-variant-numeric: tabular-nums;
    font-size: 16px; font-weight: 700; color: var(--bq-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-tm-stat__val a { color: var(--blue-primary); text-decoration: none; }
.bq-tm-stat__val a:hover { text-decoration: underline; }
.bq-tm-stat__val--up   { color: var(--bq-green); }
.bq-tm-stat__val--down { color: var(--bq-red); }
/* The biggest mover's percentage rides beside its ticker rather than under
   it — a two-line cell here would set the strip's height off the one stat
   that has two parts. */
.bq-tm-stat__sub { font-size: 12px; font-weight: 700; margin-left: 6px; }

/* =====================================================================
   TABLE
   ===================================================================== */
/* NOT A SCROLL CONTAINER.
   overflow-x:auto here made this element the scrollport that position:sticky
   on the header rows resolved against — and since it never scrolls
   vertically, the header never pinned at all. The `top: 0` below it was dead
   CSS.

   Nothing is lost: .bq-tm-table is table-layout:fixed with every column
   declared in PERCENT and no min-width, so it is mathematically incapable of
   exceeding this element's width at any viewport. The horizontal scrollbar
   this was providing could never appear. */
.bq-tm-tablewrap { -webkit-overflow-scrolling: touch; }

.bq-tm-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;   /* see the note at the top of this file */
    font-size: 13px;
}

/* ── Frozen column geometry ──
   THESE LIVE ON <col>, AND THEY HAVE TO.
   -----------------------------------------------------------------
   They were on `th` and every one of them was dead. Under
   table-layout:fixed the column widths are taken from the FIRST row of the
   table, and the first row here is the sticky title band — a single cell with
   colspan="8". So the browser had one cell to divide into eight columns and
   did the only thing it could: eight equal ones. MEASURED at 1385px: every
   column exactly 121px, Symbol as wide as Company. Every percentage below,
   and every re-declaration of them at every breakpoint, was being discarded.

   Worse on a phone, because `display:none` does not remove a column under
   fixed layout — the column keeps its equal share and just draws nothing in
   it. At 375px that left the four visible columns crammed into 188px with
   half the row blank, each cell ellipsed to "NE...", "Nat...", "+49...". That
   is the broken mobile table.

   <col> is the one place fixed layout looks BEFORE the first row, so the
   declarations work again — and a <col> that is display:none really does
   collapse its column. The colgroup is emitted in page-top-movers.php and
   each <col> carries the same class string as its th, which is what lets the
   existing `.bq-tm__ytd { display: none }` rules hide the column and the
   cells together without a second set of selectors.

   PERCENTAGES, NOT PIXELS, and every visible column declared so each set
   sums to 100.

   Two goes at this were wrong. Leaving Company auto let the browser hand
   the surplus to the sized columns and squeeze Company to 0px. Sizing all
   nine in pixels was worse: under table-layout:fixed a pixel width is a
   floor, not a target, so once the sum passed the wrapper — around 760px,
   with Sector and 1M already dropped — the table simply grew past it and
   scrolled sideways.

   A percentage always resolves against the table's own width, so the grid
   can never outgrow its wrapper at any viewport, and gainers and losers
   stay pixel-identical because neither table's geometry depends on the
   digits inside it. Each breakpoint below re-declares the columns still
   visible so the set continues to total 100. */
/* Eight columns now that Volume has gone; the set sums to 100 again. Company
   took most of the freed width, because it is the only column here that
   truncates. */
.bq-tm-table col.bq-tm__c-sym  { width: 9%;    }   /* "BRK.B"                */
.bq-tm-table col.bq-tm__c-co   { width: 25%;   }   /* long names ellipse     */
.bq-tm-table col.bq-tm__c-px   { width: 10.5%; }   /* "12,345.67"            */
.bq-tm-table col.bq-tm__c-chg  { width: 11%;   }   /* "-1,234.56"            */
.bq-tm-table col.bq-tm__c-pct  { width: 12.5%; }   /* "-100.00%" plus caret  */
.bq-tm-table col.bq-tm__c-mcap { width: 12%;   }   /* "1,234.56B"            */
.bq-tm-table col.bq-tm__c-perf { width: 10%;   }   /* "-100.00%"             */
.bq-tm-table col.bq-tm__c-ytd  { width: 10%;   }   /* "-100.00%"             */

/* =====================================================================
   STICKY HEADER — two rows, matching the stock lists

   top was 0, which pinned the labels underneath the site's fixed 54px
   header: present in the DOM, invisible to the reader. Both rows are
   offset from --tm-nav instead.

   Both rows share one tint and one bottom rule so the stuck header reads
   as a single object with a heading line and a label line inside it,
   rather than as two bars stacked.

   background is not optional on a sticky th — with border-collapse
   :collapse a transparent header lets the rows show straight through it.
   ===================================================================== */
.bq-tm-page {
    --tm-nav: 54px;   /* #bq-main-header */
    --tm-ttl: 0px;    /* title band height; set below only while stuck */
}

.bq-tm-table thead th {
    position: sticky; top: calc(var(--tm-nav) + var(--tm-ttl)); z-index: 2;
    padding: 8px 12px;
    background: var(--white);
    border-bottom: 2px solid var(--blue-darkest);
    font-size: 10px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
    color: var(--gray-500); text-align: left; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.bq-tm-table thead th.bq-tm__num { text-align: right; }

/* ── Row one: revealed only when stuck ── */
.bq-tm-table thead .bq-tm-thead-title th {
    top: var(--tm-nav);
    z-index: 3;
    padding: 0 12px;
    border-bottom: 0;
    overflow: hidden;
}
.bq-tm-tt__inner {
    display: flex; align-items: center;
    height: 0; overflow: hidden;
    opacity: 0;
    transition: height .18s ease, opacity .14s ease;
}
.bq-tm-table.is-stuck .bq-tm-tt__inner { height: var(--tm-ttl); opacity: 1; }

.bq-tm-tt__name {
    font-size: 12.5px; font-weight: 700; letter-spacing: -.1px;
    text-transform: none; color: var(--bq-ink, #0b1f2e);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-tm-tt__meta {
    margin-left: 12px; flex-shrink: 0;
    font-size: 11px; font-weight: 400; letter-spacing: .2px;
    text-transform: none; color: var(--gray-500);
}
.bq-tm-tt__sep { margin: 0 7px; opacity: .55; }

/* One variable drives the band's collapse AND the column row's offset, so
   the two cannot disagree mid-transition.

   Scoped to a table that is NOT hidden. Both sides are in the document at
   all times — the toggle is a DOM swap, not a fetch — and a hidden table
   measures 0x0, which reads as "above the navbar" and would light this up
   from the wrong side of the page. */
.bq-tm-page:has(.bq-tm-tablewrap:not([hidden]) .bq-tm-table.is-stuck) { --tm-ttl: 40px; }

/* :has() is not universal. Without it the band never expands and the column
   row stays flush under the navbar — the page loses a nicety, not a feature. */
@supports not selector(:has(*)) {
    .bq-tm-table.is-stuck .bq-tm-tt__inner { height: 0; opacity: 0; }
}

.bq-tm-table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--bq-line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.bq-tm-table tbody tr:last-child td { border-bottom: none; }
.bq-tm-table tbody tr { transition: background-color .12s; }
.bq-tm-table tbody tr:hover { background: var(--bq-row-hover); }

/* ── Symbol ──
   One line, accent blue, and the whole cell is the link. The exchange is
   the anchor's title rather than a second line: stacking it doubled the
   row height for a field nobody scans a movers table for. */
.bq-tm__sym a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    font-family: var(--bq-mono);
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--blue-primary);
    text-decoration: none;
}
.bq-tm__sym a:hover { color: var(--blue-darkest); text-decoration: underline; }

.bq-tm__co a { color: var(--gray-700); text-decoration: none; }
.bq-tm__co a:hover { color: var(--blue-primary); }

.bq-tm__num { text-align: right; font-family: var(--bq-mono); font-variant-numeric: tabular-nums; }
.bq-tm__px { color: var(--bq-ink); font-weight: 700; }
.bq-tm__mcap { color: var(--gray-700); }

/* 1M and YTD are trailing performance, not today's move, and they are
   coloured by their OWN sign — see the dir_1m / dir_ytd note in
   bq_movers_row(). Set a notch smaller and lighter than the live figures so
   the eye still lands on Chg% first: this is context beside the number the
   page is about, not a second headline. */
.bq-tm__perf, .bq-tm__ytd { font-size: 12.5px; color: var(--gray-700); }
.bq-tm__perf.is-up,  .bq-tm__ytd.is-up   { color: #1a8a4e; }
.bq-tm__perf.is-down, .bq-tm__ytd.is-down { color: #cf5a4a; }

/* Direction colour carries the meaning; weight is reserved for the flash,
   so a permanently bold Chg% column has nothing left to say when a value
   actually changes. */
.is-up   { color: var(--bq-green); }
.is-down { color: var(--bq-red); }

.bq-tm__empty { margin: 0; padding: 40px 14px; text-align: center; color: var(--gray-500); font-size: 14px; }

.bq-tm-note {
    margin: 0;
    padding: 11px 14px 13px;
    border-top: 1px solid var(--bq-line);
    background: #fcfdfe;
    font-size: 11px; line-height: 1.6; color: var(--gray-500);
}

/* ── Sort control ──
   Every figure column carries one now, so the affordance has to be quiet:
   nine headers each showing a permanent arrow is nine arrows saying nothing.
   The caret appears only on the column actually sorted; the rest advertise
   themselves on hover alone. */
.bq-tm__th--sort { cursor: pointer; user-select: none; transition: color .12s; }
.bq-tm__th--sort:hover { color: var(--blue-primary); }
.bq-tm__th--sort:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: -2px; }
.bq-tm__th--sort.is-sorted { color: var(--blue-primary); }
.bq-tm__caret { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; opacity: 0; transition: opacity .12s; }
.bq-tm__th--sort.is-desc .bq-tm__caret { opacity: 1; border-top: 4px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.bq-tm__th--sort.is-asc  .bq-tm__caret { opacity: 1; border-bottom: 4px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent; }

/* =====================================================================
   REFRESH FEEDBACK
   -----------------------------------------------------------------
   The flash is the whole point of polling in place rather than reloading:
   it is what tells you which numbers moved while you were looking. Only
   cells whose text actually changed flash — a table where everything
   flashes every two minutes says nothing at all.

   IT COVERS THE DIGITS AND IT LASTS HALF A SECOND.
   The first version was a 1.1s fade from a pale tint, which read as a
   slow wash somewhere behind the number rather than as the number itself
   changing — long enough to be ambiguous and faint enough to miss. Now
   the colour comes up solid over the whole cell, holds while the eye
   lands on it, and clears: 500ms, with the first 40% of that at full
   strength rather than fading from the first frame.

   The cell is the unit, not the text, so the block covers the digits from
   the column's left edge to its right one and reads as one event.

   position:relative + a ::after overlay rather than background-color: a
   background sits UNDER the text and gets washed out by it, while an
   overlay above the digits is what actually "covers" them. It is
   pointer-events:none so it never intercepts a click, and mix-blend-mode
   keeps the figure legible through it instead of hiding it outright.
   ===================================================================== */
.bq-tm-table td.is-flash-up,
.bq-tm-table td.is-flash-down { position: relative; font-weight: 800; }

.bq-tm-table td.is-flash-up::after,
.bq-tm-table td.is-flash-down::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    animation: bq-tm-flash 500ms ease-out forwards;
}
.bq-tm-table td.is-flash-up::after   { background: rgba(21, 128, 61, .42); }
.bq-tm-table td.is-flash-down::after { background: rgba(197, 51, 31, .38); }

@keyframes bq-tm-flash {
    0%   { opacity: 1; }
    40%  { opacity: 1; }
    100% { opacity: 0; }
}

/* A ticker that has just entered the ranking, so a new name is never
   silently inserted into a table someone is halfway through reading. */
.bq-tm-table tbody tr.is-new { animation: bq-tm-enter 1.6s ease-out; }
@keyframes bq-tm-enter {
    0%   { background-color: rgba(0,82,155,.14); }
    100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .bq-tm-table td.is-flash-up::after,
    .bq-tm-table td.is-flash-down::after,
    .bq-tm-table tbody tr.is-new,
    .bq-tm-live.is-open .bq-tm-live__pip { animation: none; }
    .bq-tm-table td.is-flash-up::after,
    .bq-tm-table td.is-flash-down::after { opacity: 0; }
}

/* =====================================================================
   FAQ
   -----------------------------------------------------------------
   Native <details>, no JS. Open-by-default on the first item so the band
   is not a row of closed boxes, and a crawler reads every answer whether
   or not it is expanded — which is what makes the FAQPage entry in the
   page's JSON-LD graph honest rather than decorative.

   Sits OUTSIDE .bq-tm-panel and carries its own card, so the table's
   sticky header and horizontal scroll never have to reason about it.
   ===================================================================== */
.bq-tm-faq {
    margin-top: 16px;
    background: var(--white);
    border: 1px solid var(--bq-line-strong);
    padding: 18px 20px 8px;
}
.bq-tm-faq[hidden] { display: none; }

.bq-tm-faq__h {
    margin: 0 0 6px;
    font-size: 13px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
    color: var(--gray-500);
}

.bq-tm-faq__item { border-top: 1px solid var(--bq-line); }
.bq-tm-faq__item summary {
    list-style: none; cursor: pointer;
    padding: 13px 26px 13px 0; position: relative;
    font-size: 14.5px; font-weight: 700; color: var(--bq-ink);
    transition: color .14s;
}
.bq-tm-faq__item summary::-webkit-details-marker { display: none; }
.bq-tm-faq__item summary:hover { color: var(--blue-primary); }
.bq-tm-faq__item summary:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; }
/* A CSS chevron rather than an entity, so it can rotate rather than swap
   glyph — a +/− that changes character redraws; this one moves. */
.bq-tm-faq__item summary::after {
    content: ""; position: absolute; right: 4px; top: 50%;
    width: 7px; height: 7px; margin-top: -5px;
    border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500);
    transform: rotate(45deg); transform-origin: center;
    transition: transform .16s ease;
}
.bq-tm-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.bq-tm-faq__item p {
    margin: 0 0 15px; padding-right: 26px;
    max-width: 78ch;
    font-size: 14px; line-height: 1.65; color: var(--gray-700);
}

/* =====================================================================
   RELATED
   -----------------------------------------------------------------
   Three cards. Without them this page links to fifty ticker pages and
   nothing else — the opposite ranking leads, because it is far and away
   the most likely next click.
   ===================================================================== */
.bq-tm-related {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 16px;
}
.bq-tm-related__card {
    display: block; padding: 16px 18px;
    background: var(--white);
    border: 1px solid var(--bq-line-strong);
    text-decoration: none;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.bq-tm-related__card:hover {
    border-color: var(--blue-primary);
    box-shadow: 0 2px 10px rgba(0,42,69,.08);
    transform: translateY(-1px);
}
.bq-tm-related__title {
    display: block; margin-bottom: 5px;
    font-size: 14.5px; font-weight: 700; color: var(--bq-ink);
}
.bq-tm-related__card:hover .bq-tm-related__title { color: var(--blue-primary); }
.bq-tm-related__title::after { content: " \2192"; color: var(--blue-primary); }
.bq-tm-related__desc { display: block; font-size: 12.5px; line-height: 1.55; color: var(--gray-500); }

/* =====================================================================
   RESPONSIVE
   -----------------------------------------------------------------
   Columns are dropped in order of how much they earn their width on a
   narrow screen. Symbol, Price and Chg % never drop: that trio is the
   whole reason someone opened this page on a phone.

   Every breakpoint RE-DECLARES the columns still visible so the set
   continues to total 100. Percentages, never pixels — under
   table-layout:fixed a pixel width is a floor, not a target, so once the
   sum passes the wrapper the table simply grows past it and scrolls
   sideways. A percentage always resolves against the table's own width,
   so the grid can never outgrow its wrapper at any viewport, and gainers
   and losers stay pixel-identical because neither table's geometry depends
   on the digits inside it.
   ===================================================================== */
/* HIDING A COLUMN MEANS HIDING THREE THINGS: its <col>, its th and its tds.
   The <col> is named explicitly rather than by sharing the cells' class,
   because "hide" and "show" are not the same value for the two: a cell goes
   back to `table-cell` and a column to `table-column`, and one bare class
   matching both would restore the <col> as a cell and destroy the geometry it
   exists to carry. */
@media (max-width: 1300px) {
    /* YTD out first: it is the longest lookback on the page and the one 1M
       already half-answers. The seven that remain sum to 100 again. */
    .bq-tm__ytd, .bq-tm-table thead th.bq-tm__ytd,
    .bq-tm-table col.bq-tm__c-ytd { display: none; }
    .bq-tm-table col.bq-tm__c-sym  { width: 10%;   }
    .bq-tm-table col.bq-tm__c-co   { width: 27%;   }
    .bq-tm-table col.bq-tm__c-px   { width: 12%;   }
    .bq-tm-table col.bq-tm__c-chg  { width: 12.5%; }
    .bq-tm-table col.bq-tm__c-pct  { width: 14%;   }
    .bq-tm-table col.bq-tm__c-mcap { width: 13%;   }
    .bq-tm-table col.bq-tm__c-perf { width: 11.5%; }
}

@media (max-width: 1060px) {
    /* The watchlist moves BELOW the table, so a phone gets the ranking first
       and the watchlist after it rather than a screen of watchlist before any
       movers. The table has the full width to itself again, so YTD comes back
       and the nine-column set is restored. */
    .bq-tm-layout { grid-template-columns: 1fr; }
    .bq-tm-side { position: static; }
    .bq-tm__ytd, .bq-tm-table thead th.bq-tm__ytd { display: table-cell; }
    .bq-tm-table col.bq-tm__c-ytd { display: table-column; }
    .bq-tm-table col.bq-tm__c-sym  { width: 9%;    }
    .bq-tm-table col.bq-tm__c-co   { width: 25%;   }
    .bq-tm-table col.bq-tm__c-px   { width: 10.5%; }
    .bq-tm-table col.bq-tm__c-chg  { width: 11%;   }
    .bq-tm-table col.bq-tm__c-pct  { width: 12.5%; }
    .bq-tm-table col.bq-tm__c-mcap { width: 12%;   }
    .bq-tm-table col.bq-tm__c-perf { width: 10%;   }
    .bq-tm-table col.bq-tm__c-ytd  { width: 10%;   }

    .bq-tm-related { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .bq-tm__ytd,  .bq-tm-table thead th.bq-tm__ytd,
    .bq-tm__perf, .bq-tm-table thead th.bq-tm__perf,
    .bq-tm-table col.bq-tm__c-ytd,
    .bq-tm-table col.bq-tm__c-perf { display: none; }
    .bq-tm-table col.bq-tm__c-sym  { width: 12%;   }
    .bq-tm-table col.bq-tm__c-co   { width: 30%;   }
    .bq-tm-table col.bq-tm__c-px   { width: 14%;   }
    .bq-tm-table col.bq-tm__c-chg  { width: 14.5%; }
    .bq-tm-table col.bq-tm__c-pct  { width: 15%;   }
    .bq-tm-table col.bq-tm__c-mcap { width: 14.5%; }

    /* Two stats a row rather than four squeezed columns. The labels are the
       part that breaks first — "Combined volume" in a 90px column wraps or
       ellipses, and a truncated label is worse than a taller strip. */
    .bq-tm-stats { grid-template-columns: 1fr 1fr; }
    .bq-tm-stat:nth-child(3) { border-left: none; }
    .bq-tm-stat:nth-child(n+3) { border-top: 1px solid var(--bq-line); }
}

@media (max-width: 680px) {
    .bq-tm { padding: 30px 0 40px; }
    .bq-tm-head {
        align-items: stretch; gap: 16px;
        padding: 16px 14px 14px; margin-bottom: 10px;
    }
    .bq-tm-head h1 { font-size: 22px; }
    .bq-tm-lede { font-size: 13px; }
    .bq-tm-eyebrow { font-size: 10px; }

    /* Full-width switch: on a phone this is the page's primary control and
       a 200px pill floating at the end of the heading is a small target. */
    .bq-tm-switch { display: flex; width: 100%; }
    .bq-tm-switch__btn { flex: 1; justify-content: center; padding: 11px 12px; }

    .bq-tm-bar { padding: 9px 12px; gap: 8px; }
    .bq-tm-asof { font-size: 11px; }
    .bq-tm-next { display: none; }      /* The pip already says it is live. */

    .bq-tm-stat { padding: 9px 12px 10px; }
    .bq-tm-stat__val { font-size: 14.5px; }
    .bq-tm-stat__sub { font-size: 11px; margin-left: 4px; }

    .bq-tm__mcap, .bq-tm-table thead th.bq-tm__mcap,
    .bq-tm-table col.bq-tm__c-mcap { display: none; }

    .bq-tm-table thead th { padding: 8px 10px; }
    .bq-tm-table td { padding: 8px 10px; }
    .bq-tm-table col.bq-tm__c-sym { width: 15%; }
    .bq-tm-table col.bq-tm__c-co  { width: 30%; }
    .bq-tm-table col.bq-tm__c-px  { width: 17%; }
    .bq-tm-table col.bq-tm__c-chg { width: 18%; }
    .bq-tm-table col.bq-tm__c-pct { width: 20%; }
    .bq-tm-note { padding: 10px 12px 12px; }

    .bq-tm-faq { padding: 16px 14px 6px; }
    .bq-tm-faq__item summary { font-size: 14px; padding: 12px 24px 12px 0; }
    .bq-tm-faq__item p { font-size: 13.5px; }
    .bq-tm-related { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 520px) {
    /* Change and Chg % say the same thing in different units; at this width
       the percentage is the one worth the column.

       BY CLASS, NOT BY POSITION. nth-child(4) hid the two CELLS and left the
       <col> behind, so the column kept its share of the table and drew nothing
       in it -- blank pixels taken from the four columns still trying to show
       something on a 375px screen. Position selectors also go wrong the first
       time a column is inserted; the class cannot. */
    .bq-tm__chg, .bq-tm-table thead th.bq-tm__chg,
    .bq-tm-table col.bq-tm__c-chg { display: none; }

    /*
     * Edge to edge. With three columns of nowrap numerics there is no width
     * left to spend on a 24px gutter either side of the card — keeping it
     * pushed Chg %, the one column nobody opened this page to not see, off
     * the right edge and into a horizontal scroll. The panels give up their
     * side borders for the same reason .bq-section does on the ticker pages
     * at this width.
     */
    .bq-tm-page .bq-main .bq-tm .bq-container { padding: 0 12px; }
    .bq-tm-panel, .bq-tm-head, .bq-tm-faq {
        margin-left: -12px;
        margin-right: -12px;
        border-left: none;
        border-right: none;
    }

    .bq-tm-table { font-size: 12.5px; }
    .bq-tm-table thead th { padding: 8px; }
    .bq-tm-table td { padding: 8px; }
    .bq-tm-table col.bq-tm__c-sym { width: 18%; }
    .bq-tm-table col.bq-tm__c-co  { width: 34%; }
    .bq-tm-table col.bq-tm__c-px  { width: 22%; }
    .bq-tm-table col.bq-tm__c-pct { width: 26%; }
}