/*
 * bq-timeseries — /timeseries-tables
 * Version 5.0.0
 *
 * ---------------------------------------------------------------------
 * THE SAME OBJECT AS bq-industry-financials
 *  Square corners, hairline borders, a tinted head bar, a 2px ink rule
 *  under the column headings, tabular figures on every number, one fixed
 *  slot for the unit beside each figure. The two tools answer adjacent
 *  questions — "compare this industry now" and "watch it over time" — and
 *  a reader moving between them should not feel they changed sites.
 *
 *  Tokens are restated rather than imported: bq-global-layout does not
 *  load homepage.css, and this file must be readable on its own. They are
 *  the same values, and the prefix is bq-ts- so this stylesheet cannot
 *  reach another template even by accident.
 *
 *  The old stylesheet was 8px radii, drop shadows on every surface and
 *  three CDN icon/UI libraries. It is replaced, not patched.
 * ---------------------------------------------------------------------
 */

.bq-ts {
    --ts-ink:        #0b1f2e;
    --ts-text:       #37485a;
    --ts-muted:      #6b7a89;

    /* Structure — neutral. See the block comment at the top of
       bq-industry-financials/css/styles.css: blue is for state, grey is for
       structure, and #f2f2f2 is the ground the /stocks/{ticker} overview page
       actually stands on (measured, not invented). */
    --ts-line:       #e7e8ea;
    --ts-line-strong:#d3d5d9;
    --ts-head:       #f3f3f4;
    --ts-hover:      #f7f7f8;
    --ts-page:       #f2f2f2;
    --ts-white:      #ffffff;
    --ts-tint:       #f6f6f7;

    --ts-blue:       #00529b;
    --ts-blue-dark:  #002a45;

    /* THE ACTION ACCENT. Blue was doing two jobs at once — it marks a link,
       and it was also marking "this control is on", so a page of blue text
       and blue buttons made neither reading obvious. Amber separates them:
       blue stays the colour of a link, amber is the colour of a control the
       reader has set or can press.

       Always with ink text, never white. Amber against white fails contrast
       badly; against #0b1f2e it is well past AA, which is the arrangement
       that makes a yellow button legible rather than merely loud. */
    --ts-accent:      #ffc629;
    --ts-accent-dark: #f0b400;
    --ts-accent-soft: #fff6dd;
    --ts-green:      #15803d;
    --ts-red:        #c5331f;

    /* The site header is fixed at 54px; every sticky offset is measured from
       this one variable rather than a repeated magic number. */
    --ts-nav:        54px;

    --ts-mono: 'Lato', 'Lato Fallback', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    padding: 46px 0 56px;
    background: var(--ts-page);
    color: var(--ts-text);
    min-height: 60vh;
}

.bq-ts-container { max-width: 1500px; margin: 0 auto; padding: 0 24px; }

.bq-ts__num, .bq-ts-chip__n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* =====================================================================
   HEAD
   ===================================================================== */
.bq-ts-head {
    background: var(--ts-white);
    border: 1px solid var(--ts-line-strong);
    padding: 20px 22px;
    margin-bottom: 16px;
}
.bq-ts-crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    font-size: 12px; color: var(--ts-muted); margin-bottom: 8px;
}
.bq-ts-crumbs a { color: var(--ts-blue); text-decoration: none; }
.bq-ts-crumbs a:hover { text-decoration: underline; }
.bq-ts-head h1 {
    margin: 0;
    font-size: 28px; font-weight: 900; line-height: 1.15;
    letter-spacing: -.5px; color: var(--ts-ink);
}
/* No measure — see the note on .bq-sl-lede. */
.bq-ts-lede {
    margin: 9px 0 0;
    font-size: 14.5px; line-height: 1.6; color: var(--ts-text);
}

/* =====================================================================
   PANEL + BUILDER
   ===================================================================== */
.bq-ts-panel { background: var(--ts-white); border: 1px solid var(--ts-line-strong); }

/* The two pickers side by side: metrics on the left, scope on the right.
   They are the two halves of one sentence ("show me X for Y") and reading
   them as a pair is the point. */
.bq-ts-build {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--ts-line);
}
.bq-ts-field { min-width: 0; }
.bq-ts-field__label {
    display: block; margin-bottom: 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
    color: var(--ts-muted);
}

/* =====================================================================
   PICKERS
   ---------------------------------------------------------------------
   Identical in behaviour to the one in bq-industry-financials; see the long
   note in that file's stylesheet for why the industry list is a tree with
   three redundant signals rather than two flat blocks.

   The popup is wider than its control on purpose. Sized to the input it
   inherited a half-width grid column, and at that width every long metric name
   ("Net Income Common Stock (TTM)") ellipsed to uselessness — a search box
   whose results cannot be told apart is not a search box.
   ===================================================================== */
.bq-ts-picker { position: relative; }

.bq-ts-picker__control {
    display: flex; align-items: center;
    background: var(--ts-white);
    border: 1px solid var(--ts-line-strong);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.bq-ts-picker__control:focus-within {
    border-color: var(--ts-blue);
    box-shadow: 0 0 0 3px rgba(0, 82, 155, .09);
}
.bq-ts-picker__input {
    flex: 1; min-width: 0; height: 36px; padding: 0 10px;
    border: 0; outline: 0; background: none;
    font-family: inherit; font-size: 13.5px; color: var(--ts-ink);
    text-overflow: ellipsis;
}
.bq-ts-picker__input::placeholder { color: var(--ts-muted); }
.bq-ts-picker__chev { display: flex; align-items: center; padding-right: 8px; color: var(--ts-muted); pointer-events: none; }
.bq-ts-picker__chev svg { width: 18px; height: 18px; }

.bq-ts-picker__pop {
    position: absolute; z-index: 60; left: 0; right: auto; top: calc(100% + 3px);
    min-width: 100%; width: max-content; max-width: min(560px, calc(100vw - 40px));
    max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ts-white);
    border: 1px solid var(--ts-line-strong);
    box-shadow: 0 10px 26px rgba(0, 42, 69, .13);
}
.bq-ts-picker__pop[hidden] { display: none; }

.bq-ts-optgroup { border-bottom: 1px solid var(--ts-line-strong); }
.bq-ts-optgroup:last-child { border-bottom: none; }

.bq-ts-opt {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ts-line);
    cursor: pointer;
    position: relative;
}
.bq-ts-opt:last-child { border-bottom: none; }
.bq-ts-opt.is-active, .bq-ts-opt:hover { background: var(--ts-hover); }

/* Group rows: tint plus a left rule. The rule is what carries the distinction
   where the tint does not register, and it becomes the spine the children hang
   from. */
.bq-ts-opt--group {
    background: var(--ts-tint);
    border-left: 3px solid var(--ts-blue-dark);
    padding-left: 9px;
}
.bq-ts-opt--group.is-active, .bq-ts-opt--group:hover { background: #eeeef0; }
.bq-ts-opt--group.is-context { cursor: default; opacity: .78; }
.bq-ts-opt--group.is-context:hover { background: var(--ts-tint); }

.bq-ts-opt--child {
    padding-left: 34px;
    border-left: 3px solid var(--ts-blue-dark);
    background: var(--ts-white);
}
.bq-ts-opt--child::before {
    content: ""; position: absolute; left: 20px;
    width: 7px; height: 1px; background: var(--ts-line-strong);
}

.bq-ts-opt__name {
    flex: 1 0 auto; min-width: 0;
    font-size: 13.5px; color: var(--ts-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bq-ts-opt--group .bq-ts-opt__name { font-weight: 700; }
.bq-ts-opt--child .bq-ts-opt__name { font-size: 13px; }
.bq-ts-opt__name mark { background: #fff3c4; color: inherit; padding: 0; }

.bq-ts-opt__ctx {
    flex: 0 1 auto; min-width: 0; margin-left: auto;
    font-size: 11px; color: var(--ts-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bq-ts-opt__chip {
    flex-shrink: 0;
    font-size: 8.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    padding: 1px 5px; border: 1px solid var(--ts-line-strong);
    color: var(--ts-muted); background: var(--ts-white);
}
.bq-ts-opt--group .bq-ts-opt__chip { color: var(--ts-blue); border-color: #b9d3e8; }
.bq-ts-opt__n {
    flex-shrink: 0; min-width: 34px; text-align: right;
    font-family: var(--ts-mono); font-size: 11px; color: var(--ts-muted);
    font-variant-numeric: tabular-nums;
}
.bq-ts-opt--empty { padding: 18px 12px; text-align: center; color: var(--ts-muted); font-size: 13px; cursor: default; }
.bq-ts-opt__head {
    padding: 7px 12px 6px;
    background: var(--ts-head);
    border-bottom: 1px solid var(--ts-line-strong);
    font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--ts-muted);
}

/* =====================================================================
   CHIPS — what is currently selected
   ===================================================================== */
.bq-ts-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.bq-ts-chips:empty { display: none; }

.bq-ts-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 5px 3px 8px;
    background: #f0f0f1; border: 1px solid #d8d9dc;
    font-size: 11.5px; font-weight: 700; color: var(--ts-ink);
    max-width: 100%;
}
.bq-ts-chip button {
    background: none; border: 0; cursor: pointer; padding: 0;
    font-size: 14px; line-height: 1; color: var(--ts-muted); flex-shrink: 0;
}
.bq-ts-chip button:hover { color: var(--ts-red); }

/* A ticker and an industry are different KINDS of selection, not two values of
   one — picking an industry replaces any tickers and vice versa. Colouring
   them apart is what makes that swap legible when it happens. */
/* A ticker and an industry are different KINDS of selection, not two values
   of one — picking an industry replaces any tickers and vice versa. They stay
   distinguishable, but by a single left marker rather than by three competing
   background colours. */
.bq-ts-chip--ticker   { font-family: var(--ts-mono); border-left: 3px solid var(--ts-green, #15803d); }
.bq-ts-chip--group    { border-left: 3px solid var(--ts-blue-dark); }
.bq-ts-chip--industry { border-left: 3px solid var(--ts-muted); }

/* =====================================================================
   OPTIONS BAR
   ===================================================================== */
.bq-ts-bar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 11px 16px;
    background: var(--ts-head);
    border-bottom: 1px solid var(--ts-line-strong);
}
/* An author-level `display` beats the UA stylesheet's [hidden]{display:none},
   so the options bar rendered in full on the empty state despite carrying the
   attribute. Any element here given a display value needs this companion rule
   or `hidden` is decorative. */
.bq-ts-bar[hidden] { display: none; }

.bq-ts-bar__left  { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.bq-ts-bar__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bq-ts-seg__label {
    display: block; margin-bottom: 4px;
    font-size: 9px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
    color: var(--ts-muted);
}

/* Segmented controls, not <select>s, wherever the choice is between two or
   three fixed things — the same call bq-ownership makes. Hiding one of two
   options behind a click buys nothing. */
.bq-ts-seg__opts { display: inline-flex; border: 1px solid var(--ts-line-strong); background: var(--ts-tint); }
.bq-ts-seg__btn {
    padding: 0 10px; height: 30px;
    background: none; border: 0; border-right: 1px solid var(--ts-line-strong);
    font-family: inherit; font-size: 11.5px; font-weight: 700;
    color: var(--ts-muted); cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.bq-ts-seg__btn:last-child { border-right: 0; }
.bq-ts-seg__btn:hover { background: var(--ts-hover); color: var(--ts-ink); }
.bq-ts-seg__btn.is-on {
    background: var(--ts-accent-soft);
    color: var(--ts-ink);
    box-shadow: inset 0 -2px 0 var(--ts-accent-dark);
}
.bq-ts-seg__btn:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: -2px; }

/* ── CUSTOM RANGE ──
   Our field, with the native date input laid invisibly over it (see the
   template). Same height, border and ground as the segmented controls
   beside it; amber once a date is set, like a pressed segment, because a
   set range is the period in force. */
.bq-ts-dates { display: inline-flex; align-items: center; gap: 6px; }
.bq-ts-dates__sep { font-size: 12px; color: var(--ts-muted); }

.bq-ts-date {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; min-width: 128px; padding: 0 10px;
    background: var(--ts-tint);
    border: 1px solid var(--ts-line-strong);
    font-size: 11.5px; font-weight: 700; color: var(--ts-muted);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bq-ts-date svg { width: 13px; height: 13px; flex: none; }
.bq-ts-date__txt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bq-ts-date:hover { background: var(--ts-hover); color: var(--ts-ink); }

.bq-ts-date.has-value {
    background: var(--ts-accent-soft);
    color: var(--ts-ink);
    box-shadow: inset 0 -2px 0 var(--ts-accent-dark);
}

/* Keyboard focus lands on the invisible input; show it on the field. */
.bq-ts-date:focus-within { border-color: var(--ts-blue); box-shadow: 0 0 0 3px rgba(0, 82, 155, .09); }
.bq-ts-date.has-value:focus-within { box-shadow: inset 0 -2px 0 var(--ts-accent-dark), 0 0 0 3px rgba(0, 82, 155, .09); }

.bq-ts-date__input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;   /* iOS zooms into any focused field under 16px */
}
/* Chrome's picker icon is the only part of the input that opens the
   calendar on its own; stretched over the whole field, any click opens it
   even where showPicker() is unavailable. */
.bq-ts-date__input::-webkit-calendar-picker-indicator {
    position: absolute; inset: 0;
    width: auto; height: auto;
    margin: 0; padding: 0;
    cursor: pointer;
}

.bq-ts-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .3px;
    color: var(--ts-ink); background: var(--ts-white);
    border: 1px solid var(--ts-line-strong); cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
.bq-ts-btn svg { width: 13px; height: 13px; }
.bq-ts-btn:hover { border-color: var(--ts-accent-dark); background: var(--ts-accent-soft); }
.bq-ts-btn:focus-visible { outline: 2px solid var(--ts-accent-dark); outline-offset: 1px; }

/* =====================================================================
   TABLE
   ---------------------------------------------------------------------
   A TIME SERIES ALWAYS SCROLLS, unlike the industry table. Its column count
   is the number of reporting periods in the window — forty columns over ten
   years — so there is no width at which it fits, and no version of this table
   that is not a scroll container.

   That decides the header question outright: `position: sticky` resolves `top`
   against the nearest scrollport, so a viewport-sticky header inside this
   wrapper would render 54px down inside its own tbody and cover the first two
   rows. There is no sticky header here. What there is instead is three frozen
   identity columns, which is the thing a reader actually needs while scrolling
   sideways — the row labels, not the column ones.
   ===================================================================== */
/* ── THE WHOLE TABLE, AND A HEADER THAT FOLLOWS THE PAGE ──
   The table is shown at its full height, with no inner vertical scrollbar,
   and the PAGE is the vertical scroller. For readers without a plan that
   height is capped server-side at 30 rows (BQ_Time_Series::FREE_ROWS) and
   the gate below takes over.

   The wrapper still has to scroll sideways, because a time series has one
   column per period and always outgrows the card. Per the overflow spec a
   non-visible value on one axis promotes the other to `auto`, so the wrapper
   is a scrollport on both axes, and a CSS `position: sticky; top` header
   would stick to IT rather than to the page, i.e. never. /stock-lists
   sidesteps this by dropping the overflow; it cannot be dropped here.

   So the header follows the page from script.js (initStickyHead): every head
   cell gets the same translateY, clamped to the table's own box. The real
   <thead> never leaves the table, so it still scrolls sideways with the
   periods, its frozen corner cells still stick left, and there is no clone
   and no width syncing: the /statements pages' result, minus both. */
.bq-ts-tablewrap {
    overflow-x: auto;
    min-height: 320px;
    -webkit-overflow-scrolling: touch;
}

.bq-ts-table {
    border-collapse: separate;   /* frozen columns need real backgrounds; see below */
    border-spacing: 0;
    font-size: 13px;
    /* Auto layout and max-content: the table is as wide as its periods need
       and the wrapper scrolls it. Fixed layout with width:100% would crush
       forty columns into the viewport instead of scrolling them. */
    table-layout: auto;
    min-width: max-content;
}

.bq-ts-table thead th {
    position: relative; z-index: 4;   /* moved by initStickyHead(); see above */
    padding: 9px 12px;
    background: var(--ts-head);
    border-bottom: 2px solid var(--ts-line-strong);
    font-size: 10px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
    color: var(--ts-muted); text-align: left; white-space: nowrap;
}

/* THE FOUR-WAY CORNER. The three identity columns are sticky on `left` and the
   whole header is sticky on `top`, so their header cells are sticky on both and
   must outrank each separately — otherwise the frozen columns slide over their
   own headings, or the period headings slide over the frozen ones. Ranked:
   corner 6, header 4, frozen body cells 3, ordinary cells default. */
.bq-ts-table thead th.bq-ts__c-sym,
.bq-ts-table thead th.bq-ts__c-co,
.bq-ts-table thead th.bq-ts__c-metric { z-index: 6; }
.bq-ts-table thead th.bq-ts__num { text-align: right; }

/* Lifted off the rows while it follows the page, so the numbers sliding
   under it read as passing BENEATH the header, not into it. */
.bq-ts-table.is-stuck thead th { box-shadow: 0 6px 10px -6px rgba(11, 31, 46, .18); }

/* The cell under the pointer, so the tooltip has an obvious owner. */
.bq-ts-table tbody td.bq-ts__num.is-tip { background: var(--ts-accent-soft); }

.bq-ts-table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--ts-line);
    white-space: nowrap; vertical-align: middle;
    background: var(--ts-white);
}
.bq-ts-table tbody tr:hover td { background: var(--ts-hover); }
.bq-ts-table tbody tr[hidden] { display: none; }

/* ── THE FROZEN IDENTITY COLUMNS ──
   Ticker, Company and Metric stay put while the periods scroll under them.
   Without this, scrolling to 2019 leaves forty anonymous numbers with nothing
   saying which company or metric any row is.

   border-collapse is `separate` above precisely for this: under `collapse` a
   sticky cell's background does not paint reliably over the cells sliding
   beneath it, and the frozen columns show the scrolling numbers through
   themselves. The cost is that borders are written per-cell below.

   The `left` offsets are hard numbers because the three columns have hard
   min-widths — they must agree, and they are set together here. */
.bq-ts-table th.bq-ts__c-sym,    .bq-ts-table td.bq-ts__sym    { position: sticky; left: 0;     z-index: 3; min-width: 78px; }
.bq-ts-table th.bq-ts__c-co,     .bq-ts-table td.bq-ts__co     { position: sticky; left: 78px;  z-index: 3; min-width: 168px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.bq-ts-table th.bq-ts__c-metric, .bq-ts-table td.bq-ts__metric { position: sticky; left: 246px; z-index: 3; min-width: 150px; }

/* The rule that separates the frozen block from the scrolling one. On the
   frozen side, so it travels with them. */
.bq-ts-table th.bq-ts__c-metric, .bq-ts-table td.bq-ts__metric { border-right: 2px solid var(--ts-line-strong); }


.bq-ts__sym a { font-family: var(--ts-mono); font-weight: 700; letter-spacing: .3px; color: var(--ts-blue); text-decoration: none; }
.bq-ts__sym a:hover { color: var(--ts-blue-dark); text-decoration: underline; }
.bq-ts__co a { color: var(--ts-text); text-decoration: none; }
.bq-ts__co a:hover { color: var(--ts-blue); text-decoration: underline; }
.bq-ts__metric { color: var(--ts-ink); font-weight: 700; font-size: 12.5px; }

.bq-ts__num { text-align: right; font-family: var(--ts-mono); color: var(--ts-text); }

/* The unit slot — the same device the industry table uses, and for the same
   reason. Across a row of periods a figure can cross from Mn to Bn, and set as
   one string in a right-aligned cell the decimal points scatter. A fixed slot
   pins the digits to the same x in every column. */
.bq-ts__u {
    display: inline-block; width: 1.55em; margin-left: .3em;
    text-align: left; font-weight: 400; color: var(--ts-muted);
}

.bq-ts-empty {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    margin: 0; padding: 40px 20px 48px; text-align: center;
}
.bq-ts-empty strong { font-size: 16px; color: var(--ts-ink); }
.bq-ts-empty span { font-size: 13.5px; color: var(--ts-muted); max-width: 58ch; }

/* Points back at the two pickers. The empty state's whole job is to send the
   reader up to the controls, and an arrow does that in less space and less
   time than a sentence describing where they are. */
.bq-ts-empty__arrow {
    display: block; margin-bottom: 2px;
    font-size: 22px; line-height: 1; color: var(--ts-line-strong);
}

/* =====================================================================
   FIRST RUN
   ---------------------------------------------------------------------
   Nothing selected yet. The two pickers are the only thing on the page
   that matters, so they get the room and the contrast, and everything
   that acts on a table the reader does not have yet gets out of the way —
   the options bar is hidden outright (in the template) and the FAQ drops
   below the fold of the panel with its answers closed.
   ===================================================================== */
.bq-ts-panel.is-empty .bq-ts-build {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding: 26px 22px 24px;
    background: var(--ts-tint);
    border-bottom: 1px solid var(--ts-line-strong);
}
.bq-ts-panel.is-empty .bq-ts-field__label {
    font-size: 11px; letter-spacing: .6px;
    color: var(--ts-ink);
}
/* A taller control with a real border reads as a field waiting for input;
   the 36px hairline version read as a label. */
.bq-ts-panel.is-empty .bq-ts-picker__input { height: 46px; font-size: 14.5px; }
.bq-ts-panel.is-empty .bq-ts-picker__control { border-color: #bfc2c7; }
.bq-ts-panel.is-empty .bq-ts-picker__control:focus-within { border-color: var(--ts-blue); }

.bq-ts-tablewrap.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }

/* =====================================================================
   FAQ
   ===================================================================== */
/* A clear gap, and a rule to sit under. The FAQ was reading as part of the
   tool rather than as a footnote to it, which is most of why it distracted
   from the controls on an empty page. */
/* ── FAQ + BQ-MICS ──
   Two halves on desktop, like the stock-list pages' foot: the FAQ on the
   left, the BQ-MICS card on the right. One column below 900px. */
.bq-ts-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    margin-top: 44px;
}
.bq-ts-panel.is-empty ~ .bq-ts-foot { margin-top: 56px; }
/* One card with the heading inside, like .bq-sl-faq, so its top edge lines
   up with the BQ-MICS card beside it. */
.bq-ts-faq {
    background: var(--ts-white);
    border: 1px solid var(--ts-line-strong);
    padding: 18px 20px 6px;
}
.bq-ts-faq h2 {
    margin: 0 0 6px;
    font-size: 13px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
    color: var(--ts-muted);
}
.bq-ts-faq__item { border-top: 1px solid var(--ts-line); }
.bq-ts-faq__item summary {
    padding: 13px 0;
    font-size: 14px; font-weight: 700; color: var(--ts-ink);
    cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bq-ts-faq__item summary::-webkit-details-marker { display: none; }
.bq-ts-faq__item summary::after { content: "+"; flex-shrink: 0; font-size: 17px; font-weight: 400; color: var(--ts-muted); }
.bq-ts-faq__item[open] summary::after { content: "\2212"; }
.bq-ts-faq__item summary:hover { color: var(--ts-blue); }
.bq-ts-faq__a { padding: 0 26px 15px 0; font-size: 13.5px; line-height: 1.65; color: var(--ts-text); }

/* The BQ-MICS card. Same object as .bq-sl-mics on the stock-list pages. */
.bq-ts-mics {
    padding: 22px 24px 24px;
    background: var(--ts-white);
    border: 1px solid var(--ts-line-strong);
    border-top: 3px solid var(--ts-blue);
}
.bq-ts-mics__eyebrow {
    display: block; margin-bottom: 9px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ts-blue);
}
.bq-ts-mics__h {
    margin: 0 0 10px;
    font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.3px;
    color: var(--ts-ink);
}
.bq-ts-mics__p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--ts-text); }
.bq-ts-mics__stats {
    display: flex;
    margin-bottom: 20px; padding: 14px 0;
    border-top: 1px solid var(--ts-line);
    border-bottom: 1px solid var(--ts-line);
}
.bq-ts-mics__stats > div {
    flex: 1; min-width: 0;
    padding-right: 20px; margin-right: 20px;
    border-right: 1px solid var(--ts-line);
}
.bq-ts-mics__stats > div:last-child { padding-right: 0; margin-right: 0; border-right: none; }
.bq-ts-mics__num {
    display: block;
    font-family: var(--ts-mono); font-size: 21px; font-weight: 700; line-height: 1.1;
    color: var(--ts-ink); font-variant-numeric: tabular-nums;
}
.bq-ts-mics__lbl {
    display: block; margin-top: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    color: var(--ts-muted);
}
.bq-ts-mics__cta {
    display: inline-block;
    padding: 10px 20px;
    background: var(--ts-blue); color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: .2px;
    text-decoration: none;
    transition: background .14s ease, transform .14s ease;
}
.bq-ts-mics__cta::after { content: " \2192"; }
.bq-ts-mics__cta:hover { background: var(--ts-blue-dark); color: #fff; transform: translateX(2px); }
.bq-ts-mics__cta:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
.bq-ts-mics__legal { margin: 18px 0 0; font-size: 12px; line-height: 1.65; color: var(--ts-muted); }
.bq-ts-mics__legal a { color: var(--ts-blue); text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   THE GATE
   Same object as the fund pages' .bq-fd-gate: an amber strip under the
   table, outside the horizontal scroller so it stays the card's width while
   the periods scroll sideways. The fade above it dissolves the last visible
   rows, so row 30 reads as a boundary rather than the end of the data.
   ===================================================================== */
.bq-ts-gate {
    position: relative;
    margin-top: -1px;
    padding-top: 22px;
}
/* z-index 5: over the frozen columns (3) and the header (4), which the
   clamp in initStickyHead() keeps clear of the last rows anyway. */
.bq-ts-gate::before {
    content: "";
    position: absolute; left: 0; right: 0;
    top: -96px; height: 96px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%);
    pointer-events: none;
    z-index: 5;
}
.bq-ts-gate__inner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(176, 118, 26, .28);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(176, 118, 26, .10), rgba(176, 118, 26, .04));
}
.bq-ts-gate__icon {
    flex: none;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(176, 118, 26, .16);
    color: #8a5a10;
}
.bq-ts-gate__icon svg { width: 16px; height: 16px; }
.bq-ts-gate__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.bq-ts-gate__text strong { font-size: 13.5px; font-weight: 700; color: #6b4708; line-height: 1.35; }
.bq-ts-gate__text span { font-size: 12px; color: #8a6a34; line-height: 1.45; }
.bq-ts-gate__cta {
    flex: none;
    appearance: none; -webkit-appearance: none;
    border: 0; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em;
    padding: 9px 18px;
    border-radius: 6px;
    background: #b0761a; color: #fff;
    line-height: 1.4;
    transition: background .14s ease, transform .1s ease;
}
.bq-ts-gate__cta:hover { background: #96630f; }
.bq-ts-gate__cta:active { transform: translateY(1px); }
.bq-ts-gate__cta:focus-visible { outline: 2px solid #6b4708; outline-offset: 2px; }

/* =====================================================================
   TOOLTIP
   Same card as the fund pages' .bq-fd-tip: white, hairline, soft shadow.
   One node on <body>, placed by script.js against the hovered cell.
   ===================================================================== */
.bq-ts-tip {
    position: absolute; z-index: 9999; top: 0; left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
    background: #fff;
    border: 1px solid #cfd9e3;
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(11, 31, 46, .13);
    padding: 10px 12px;
    min-width: 170px; max-width: 290px;
    font-family: inherit; font-size: 12px;
    color: #37485a;
    font-variant-numeric: tabular-nums;
}
.bq-ts-tip__title {
    font-size: 10.5px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase;
    color: #97a4b2;
    margin-bottom: 7px;
}
.bq-ts-tip__name {
    font-size: 13px; font-weight: 700; color: #0b1f2e;
    line-height: 1.35; margin-bottom: 8px;
    overflow-wrap: anywhere;
}
.bq-ts-tip__line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    line-height: 1.55;
}
.bq-ts-tip__line + .bq-ts-tip__line { margin-top: 3px; }
.bq-ts-tip__k { font-size: 11px; color: #97a4b2; white-space: nowrap; }
.bq-ts-tip__v { font-size: 12px; font-weight: 700; color: #0b1f2e; white-space: nowrap; }
.bq-ts-tip__v.is-up   { color: #15803d; }   /* literal: the node is on <body>, outside .bq-ts and its tokens */
.bq-ts-tip__v.is-down { color: #c5331f; }

/* =====================================================================
   TOAST
   ===================================================================== */
.bq-ts-toast {
    position: fixed; left: 50%; bottom: 26px; z-index: 1200;
    transform: translate(-50%, 12px);
    padding: 10px 18px;
    background: var(--ts-blue-dark); color: #fff;
    font-size: 13px; font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 42, 69, .28);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.bq-ts-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
    /* The two pickers stack: at half width each, neither has room for a metric
       name, and they are read in sequence anyway. */
    .bq-ts-build { grid-template-columns: 1fr; gap: 14px; }
    .bq-ts-foot { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .bq-ts { padding: 30px 0 40px; }
    .bq-ts-container { padding: 0 16px; }
    .bq-ts-head { padding: 16px 14px 15px; }
    .bq-ts-head h1 { font-size: 22px; }
    .bq-ts-lede { font-size: 13.5px; }

    .bq-ts-bar { flex-direction: column; align-items: stretch; gap: 12px; }
    .bq-ts-bar__right .bq-ts-btn { flex: 1; justify-content: center; }
    .bq-ts-seg__opts { width: 100%; }
    .bq-ts-seg__btn { flex: 1; }
    .bq-ts-dates { width: 100%; }
    .bq-ts-date { flex: 1; min-width: 0; }

    /* The gate stacks: icon-and-text, then a full-width button. */
    .bq-ts-gate__inner { flex-wrap: wrap; padding: 14px; }
    .bq-ts-gate__text { flex-basis: calc(100% - 46px); }
    .bq-ts-gate__cta { width: 100%; padding: 11px 18px; font-size: 12.5px; }

    .bq-ts-mics { padding: 20px 18px 22px; }
    .bq-ts-mics__h { font-size: 18px; }
    .bq-ts-mics__stats > div { padding-right: 14px; margin-right: 14px; }
    .bq-ts-tip { max-width: calc(100vw - 24px); }

    /* ── COMPANY GOES, TICKER STAYS ──
       The opposite call from the industry table, and for a reason particular
       to this one: a time series row is identified by TWO things, the company
       AND the metric, and the metric name cannot be abbreviated away. Three
       frozen columns do not fit a phone, so one has to go.

       Here that is Company, not Ticker. "NVDA" is four characters against
       "Nvidia Corporation"'s eighteen, and the width it frees goes to the
       metric label and to showing two or three periods beside it. On a table
       where every row already repeats the same company down the Metric column,
       the ticker is enough to hold on to. It stays a link to the stock page,
       so nothing is lost but the long form of the name.

       The frozen block re-flows: Ticker stays leftmost at left:0 and Metric
       follows at the width Ticker occupies. These offsets and the min-widths
       below have to be edited together — a stale `left` is a frozen column
       overlapping its neighbour. */
    .bq-ts-table th.bq-ts__c-co, .bq-ts-table td.bq-ts__co { display: none; }

    .bq-ts-table th.bq-ts__c-sym,    .bq-ts-table td.bq-ts__sym    { left: 0;    min-width: 74px; }
    .bq-ts-table th.bq-ts__c-metric, .bq-ts-table td.bq-ts__metric { left: 74px; min-width: 132px; }

    .bq-ts-table { font-size: 12.5px; }
    .bq-ts-table td, .bq-ts-table thead th { padding: 8px 9px; }
    .bq-ts__metric { font-size: 11.5px; }
}

@media (max-width: 520px) {
    .bq-ts-container { padding: 0 12px; }
    .bq-ts-panel, .bq-ts-head {
        margin-left: -12px; margin-right: -12px;
        border-left: none; border-right: none;
    }
    /* Tighter still: two or three periods must stay visible beside the labels,
       or the frozen block is the whole screen and nothing scrolls into view. */
    .bq-ts-table th.bq-ts__c-sym,    .bq-ts-table td.bq-ts__sym    { min-width: 62px; }
    .bq-ts-table th.bq-ts__c-metric, .bq-ts-table td.bq-ts__metric { left: 62px; min-width: 108px; }
    .bq-ts-table td, .bq-ts-table thead th { padding: 7px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .bq-ts-toast, .bq-ts-tablewrap, .bq-ts-seg__btn { transition: none; }
}


/* =====================================================================
   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-ts-dates input,
    #bq-ts-from,
    #bq-ts-to,
    .bq-ts-picker__input,
    .bq-ts-panel.is-empty .bq-ts-picker__input {
        font-size: 16px;
    }
}