/*
 * fund-history.css
 *   /etf/{ticker}/portfolio-history  ·  /funds/{ticker}/portfolio-history
 * Version 2.0.0
 *
 * Only what is specific to the history page. The palette, card heads,
 * tables, gate and tooltip are in funds.css, which this file is enqueued
 * as a dependency of; the two-abreast card grid is .bq-fd-breakdowns,
 * shared with /portfolio.
 */

/* The two-abreast card grid, shared with /portfolio — declared here too
   because fund-portfolio.css is not loaded on this route. */
.bq-fd .bq-fd-breakdowns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 22px;
    align-items: start;
}

.bq-fd .bq-fd-breakdowns > .bq-section { margin-bottom: 0; }

@media (max-width: 960px) {
    .bq-fd .bq-fd-breakdowns { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
}

/* A stacked area needs more height than a donut: nine bands in 200px is
   nine 22px stripes, and the small ones — which are the ones whose
   movement is the point — disappear. */
.bq-fd .bq-fd-plot--hist { height: 250px; }

/* =====================================================================
   THE BAND KEYS
   Under the chart rather than beside it. A stacked area is already as
   wide as its card and a legend in a column beside it would take a third
   of the plot; wrapped underneath, the keys cost two lines.

   They are BUTTONS, because they toggle their band — the one control a
   nine-band stack genuinely needs, and the reason the keys are not just
   painted into the canvas.
   ===================================================================== */
.bq-fd .bq-fd-histkeys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--fd-line);
}

.bq-fd .bq-fd-histkey {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 2px 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--fd-text);
    line-height: 1.4;
    transition: color .14s ease, opacity .14s ease;
}

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

.bq-fd .bq-fd-histkey:hover { color: var(--fd-ink); }
.bq-fd .bq-fd-histkey:focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 2px; border-radius: 3px; }

/* A band the reader has switched off. The swatch hollows out rather than
   greying, so the key still says which colour it controls. */
.bq-fd .bq-fd-histkey.is-off { color: var(--fd-faint); }
.bq-fd .bq-fd-histkey.is-off i {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--fd-swatch, var(--fd-line-strong));
    opacity: .55;
}

/* =====================================================================
   THE POSITIONS MATRIX
   ---------------------------------------------------------------------
   Rows are holdings, columns are filings, and the holding column is
   frozen while the quarters scroll under it. That is the whole design:
   a position is read ACROSS, and without a frozen name column eight
   columns of percentages belong to nobody the moment you scroll.

   position:sticky on the cell, not a second overlaid table. A cloned
   column has to be kept in sync on every resize, every row-height change
   and every font swap, and it is always one of those out of date.
   ===================================================================== */
.bq-fd .bq-fd-matrix {
    /* FILLS THE CARD, THEN SCROLLS.
       `width: auto` sized the table to its columns, which left a fund
       with eight filings sitting in 920px of a 1400px card with 480px of
       white beside it. 100% plus a min-width on each cell gets both
       behaviours from one rule: few columns stretch to fill the card,
       many hit their floor and the wrapper scrolls. */
    width: 100%;
    min-width: 0;
    /* AUTO, NOT FIXED. The paragraph above says what this block is for and
       it is right; `fixed` is what stopped it working. Under fixed layout
       the browser splits the declared width between the columns and a
       per-cell min-width cannot push the table wider -- so QQQ's 28 filings
       were squeezed to ~45px each and every header clipped to "SEP '1".
       Under auto the min-width is a real floor: few columns still stretch to
       fill the card, many overflow it, and .bq-fd-matrixwrap scrolls. */
    table-layout: auto;
}

.bq-fd .bq-fd-matrixwrap { overflow-x: auto; }

/* THE FROZEN COLUMN.
   z-index 1 over the body cells and 3 in the head, so the head's own
   sticky-top corner cell wins against both. The box-shadow is the seam —
   a border would scroll away with the cell it belongs to. */
.bq-fd .bq-fd-matrix thead th.bq-fd-c-name,
.bq-fd .bq-fd-matrix tbody td.bq-fd-c-name {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 1px 0 0 var(--fd-line-mid);
    text-align: left;
    /* Stated outright rather than left to the content: it is the widest
       thing here and a frozen column that changes width between funds
       makes the whole table look unstable. Widened from 260px because bond
       names — "TREASURY NOTE (2OLD)" plus its coupon and maturity — were
       wrapping to three lines while the quarter columns sat half empty.
       The width comes straight out of those columns; the table is no
       wider than before. */
    width: 330px;
    min-width: 300px;
    max-width: 380px;
    white-space: normal;
}

.bq-fd .bq-fd-matrix thead th.bq-fd-c-name { z-index: 3; }
.bq-fd .bq-fd-matrix tbody tr:hover td.bq-fd-c-name { background: var(--fd-tint); }

/* The name IS the link. There is no ticker column — a column of
   four-letter codes beside a column of names says the same thing twice. */
.bq-fd .bq-fd-matrix td.bq-fd-c-name a {
    color: var(--fd-ink);
    font-weight: 600;
    text-decoration: none;
}

.bq-fd .bq-fd-matrix td.bq-fd-c-name a:hover {
    color: var(--fd-accent);
    text-decoration: underline;
}

/* Every period column is the same width, so a row of weights reads as a
   series rather than as a ragged list. 86px fits "<0.01%". */
/* Every period column is the same width, so a row of weights reads as a
   series rather than as a ragged list. 86px is the FLOOR — enough for
   "<0.01%" — and table-layout:fixed shares whatever is left over them
   equally when the card is wider than the columns need. */
.bq-fd .bq-fd-matrix thead th:not(.bq-fd-c-name),
.bq-fd .bq-fd-matrix tbody td:not(.bq-fd-c-name) {
    /* A quarter label is seven characters ("SEP '19") and nothing else in
       the column is wider than a percentage, so 78px with 9px of side
       padding is the honest floor — 92px/13px was set when
       table-layout:fixed made the value decorative and no one had to live
       with the whitespace. The room saved goes to the holding column,
       which was wrapping. Still comfortably clear of two figures touching:
       the widest cell here is "0.969%" at ~38px. */
    min-width: 78px;
    padding-left: 9px;
    padding-right: 9px;
    text-align: right;
    white-space: nowrap;
}

/* A gated column, header and cells. Dimmed rather than hidden: the
   reader should see how many filings exist behind the four they have. */
.bq-fd .bq-fd-matrix thead th.is-locked { color: var(--fd-line-strong); }
.bq-fd .bq-fd-matrix td.bq-fd-mx-locked { background: var(--fd-tint); }
.bq-fd .bq-fd-matrix td.bq-fd-mx-locked .bq-fd-lock {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
}

/* The most recent filing is the one the table is sorted by, so it gets
   the weight. It is the LAST column now that time runs left to right. */
.bq-fd .bq-fd-matrix tbody td:last-child { color: var(--fd-ink); font-weight: 700; }

@media (max-width: 768px) {
    .bq-fd .bq-fd-plot--hist { height: 220px; }
    .bq-fd .bq-fd-histkeys { gap: 5px 12px; }

    /* The frozen column narrows but stays: it is the one thing on this
       table a phone cannot do without, because the whole table is
       horizontal scrolling by design. */
    .bq-fd .bq-fd-matrix thead th.bq-fd-c-name,
    .bq-fd .bq-fd-matrix tbody td.bq-fd-c-name { width: 150px; min-width: 150px; font-size: 12px; }
    .bq-fd .bq-fd-matrix thead th:not(.bq-fd-c-name),
    .bq-fd .bq-fd-matrix tbody td:not(.bq-fd-c-name) { min-width: 72px; }
}

@media (max-width: 520px) {
    .bq-fd .bq-fd-histkey { font-size: 10.5px; }
    .bq-fd .bq-fd-matrix thead th.bq-fd-c-name,
    .bq-fd .bq-fd-matrix tbody td.bq-fd-c-name { width: 124px; min-width: 124px; }
}