/*
 * revenue-breakdown.css
 *   /stocks/{ticker}/revenue-breakdown
 * Version 2.0.0
 *
 * Only the deltas from fund-history.css. The frozen column, period
 * columns, keys and plot come from .bq-fd-matrix / .bq-fd-plot--hist.
 */

/* Row labels are <th scope="row"> here; give them the frozen td treatment. */
.bq-fd .bq-revbreak-table tbody th.bq-fd-c-name {
    position: sticky;
    left: 0;
    z-index: 1;
    /* The label column reads as its own band: tinted, darker ink and a
       firm divider, so it never blends into the figures scrolling under it. */
    background: #fff;
    box-shadow: inset -1px 0 0 var(--fd-line-strong);
    text-align: left;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--fd-ink);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
    white-space: normal;
    border-bottom: 1px solid var(--fd-line);
    vertical-align: middle;
}

/* ONE neutral fill, on the label column only, in every row (retired and
   Total included). Figures and padlocks stay white. Every cell carries the
   same row divider, so lines run unbroken across label and figures. */
.bq-fd .bq-revbreak-table tbody th.bq-fd-c-name,
.bq-fd .bq-revbreak-table tbody tr:hover th.bq-fd-c-name,
.bq-fd .bq-revbreak-table tr.is-retired th.bq-fd-c-name,
.bq-fd .bq-revbreak-table tr.bq-revbreak-total th.bq-fd-c-name,
.bq-fd .bq-revbreak-table thead th.bq-fd-c-name {
    background: #f4f6f8;
    box-shadow: inset -1px 0 0 #d5dbe1;
}
.bq-fd .bq-revbreak-table tbody th,
.bq-fd .bq-revbreak-table tbody td {
    border-bottom: 1px solid #e3e7ec;
}
.bq-fd .bq-revbreak-table tbody tr:last-child th,
.bq-fd .bq-revbreak-table tbody tr:last-child td { border-bottom: 0; }
.bq-fd .bq-revbreak-table td.bq-fd-mx-locked { background: #fff; }
.bq-fd .bq-revbreak-table thead th {
    border-bottom: 1px solid #d5dbe1;
}
.bq-fd .bq-revbreak-table thead th.bq-fd-c-name {
    color: var(--fd-ink);
}
.bq-fd .bq-revbreak-table tbody tr:last-child th.bq-fd-c-name { border-bottom: 0; }

/* Segment names are short; the fund-name width wastes the card. */
.bq-fd .bq-revbreak-table thead th.bq-fd-c-name,
.bq-fd .bq-revbreak-table tbody th.bq-fd-c-name {
    width: 220px;
    min-width: 200px;
    max-width: 260px;
}

.bq-fd .bq-revbreak-table thead th:not(.bq-fd-c-name),
.bq-fd .bq-revbreak-table tbody td {
    min-width: 88px;
}

.bq-fd .bq-revbreak-table tbody td:last-child { color: var(--fd-ink); font-weight: 700; }

/* Lines from an older reporting structure: below the current ones, muted. */
.bq-fd .bq-revbreak-table tr.is-retired th.bq-fd-c-name { color: var(--fd-muted); font-weight: 500; }
.bq-fd .bq-revbreak-table tr.is-retired td { color: var(--fd-muted); }
.bq-fd .bq-revbreak-table tr[hidden] { display: none; }

.bq-fd .bq-revbreak-table tr.bq-revbreak-total th.bq-fd-c-name,
.bq-fd .bq-revbreak-table tr.bq-revbreak-total td {
    border-top: 1px solid var(--fd-line-strong);
    color: var(--fd-ink);
    font-weight: 700;
    background: #fff;
}

.bq-fd.bq-revbreak .bq-revbreak-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fd-faint);
}

/* One card: facts header, summary, chart, legend, then the table. */
.bq-fd.bq-revbreak .bq-revbreak-cardhead { align-items: center; }
/* Clear air between the chart legend and the table under it. */
.bq-fd.bq-revbreak .bq-revbreak-tablewrap { margin-top: 32px; }

@media (max-width: 768px) {
    .bq-fd.bq-revbreak .bq-revbreak-cardhead { align-items: flex-start; gap: 12px; }
    .bq-fd.bq-revbreak .bq-revbreak-cardhead .bq-fd-fact { padding: 0 12px; }
    .bq-fd.bq-revbreak .bq-revbreak-cardhead .bq-fd-fact:first-child { padding-left: 0; }
}
.bq-fd.bq-revbreak .bq-fd-tablefoot { align-items: center; }

.bq-fd .bq-revbreak-table caption.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.bq-fd .bq-revbreak-plot { height: 300px; }

@media (max-width: 768px) {
    .bq-fd .bq-revbreak-plot { height: 240px; }
    .bq-fd.bq-revbreak .bq-fd-tablehead { align-items: flex-start; }
    .bq-fd .bq-revbreak-table thead th.bq-fd-c-name,
    .bq-fd .bq-revbreak-table tbody th.bq-fd-c-name { width: 140px; min-width: 140px; font-size: 12px; }
    .bq-fd .bq-revbreak-table thead th:not(.bq-fd-c-name),
    .bq-fd .bq-revbreak-table tbody td { min-width: 76px; }
}

@media (max-width: 520px) {
    .bq-fd .bq-revbreak-plot { height: 220px; }
    .bq-fd .bq-revbreak-table thead th.bq-fd-c-name,
    .bq-fd .bq-revbreak-table tbody th.bq-fd-c-name { width: 118px; min-width: 118px; }
}

/* TABLE SKIN — last in the file so nothing above overrides it.
   Label column: one neutral fill in every row. Figures and padlocks: white.
   One row divider on every cell, so lines run unbroken across the row. */
.bq-fd.bq-revbreak .bq-revbreak-table thead th.bq-fd-c-name,
.bq-fd.bq-revbreak .bq-revbreak-table tbody tr th.bq-fd-c-name,
.bq-fd.bq-revbreak .bq-revbreak-table tbody tr:hover th.bq-fd-c-name {
    background: #f4f6f8;
    box-shadow: inset -1px 0 0 #d5dbe1;
}
.bq-fd.bq-revbreak .bq-revbreak-table tbody tr td,
.bq-fd.bq-revbreak .bq-revbreak-table tbody tr td.bq-fd-mx-locked { background: #fff; }
.bq-fd.bq-revbreak .bq-revbreak-table tbody tr th,
.bq-fd.bq-revbreak .bq-revbreak-table tbody tr td { border-bottom: 1px solid #e3e7ec; }
.bq-fd.bq-revbreak .bq-revbreak-table thead tr th { border-bottom: 1px solid #d5dbe1; }
.bq-fd.bq-revbreak .bq-revbreak-table tbody tr.bq-revbreak-total th,
.bq-fd.bq-revbreak .bq-revbreak-table tbody tr.bq-revbreak-total td {
    border-top: 1px solid #c5cdd6;
    border-bottom: 0;
}

/* TOOLTIP — segment names run far longer than fund sectors ("Microsoft 365
   Commercial Products & Cloud Services"). The fund card keeps labels on one
   line, which pushed them out of the card; here they wrap inside it and the
   figure keeps its own column. */
.bq-fd-tip.bq-revbreak-tip { max-width: 340px; }
.bq-fd-tip.bq-revbreak-tip .bq-fd-tip-line { align-items: flex-start; }
.bq-fd-tip.bq-revbreak-tip .bq-fd-tip-k {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.4;
}
.bq-fd-tip.bq-revbreak-tip .bq-fd-tip-v { flex: none; line-height: 1.4; }

/* WRITTEN ANALYSIS — under each table, set off by a hairline. */
.bq-fd.bq-revbreak .bq-revbreak-analysis {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--fd-line);
}
.bq-fd.bq-revbreak .bq-revbreak-analysis h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--fd-ink);
}
/* Plain paragraphs across the full card width — no cap, no columns. */
.bq-fd.bq-revbreak .bq-revbreak-analysis .bq-fd-prose { max-width: none; }

/* Phones: style.css drops .bq-section to 9px of padding, which puts
   headings, keys and prose against the card edge. */
@media (max-width: 768px) {
    .bq-fd.bq-revbreak .bq-section { padding: 18px 14px; }
    .bq-fd.bq-revbreak .bq-fd-asof { margin-left: 0; margin-right: 0; }
}

/* FAQ — the peers page's closing questions, in this page's tokens. */
.bq-fd.bq-revbreak .bq-revbreak-faq .bq-fd-tablehead { margin-bottom: 6px; }
.bq-fd.bq-revbreak .bq-revbreak-faq-item { border-top: 1px solid var(--fd-line); }
.bq-fd.bq-revbreak .bq-revbreak-faq-item summary {
    position: relative;
    display: block;
    list-style: none;
    cursor: pointer;
    padding: 14px 28px 14px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--fd-ink);
}
.bq-fd.bq-revbreak .bq-revbreak-faq-item summary::-webkit-details-marker { display: none; }
.bq-fd.bq-revbreak .bq-revbreak-faq-item summary:hover { color: var(--fd-accent); }
.bq-fd.bq-revbreak .bq-revbreak-faq-item summary:focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 2px; border-radius: 3px; }
.bq-fd.bq-revbreak .bq-revbreak-faq-item summary::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -6px;
    border-right: 1.5px solid var(--fd-muted);
    border-bottom: 1.5px solid var(--fd-muted);
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.bq-fd.bq-revbreak .bq-revbreak-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.bq-fd.bq-revbreak .bq-revbreak-faq-item p {
    margin: 0 0 16px;
    padding-right: 28px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--fd-text);
}
@media (max-width: 520px) {
    .bq-fd.bq-revbreak .bq-revbreak-faq-item p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .bq-fd.bq-revbreak .bq-revbreak-faq-item summary::after { transition: none; }
}

/* KEYS — while a slice is hovered, every other key fades with its band.
   A held touch opens the key menu, so no text selection or iOS callout. */
.bq-fd.bq-revbreak .bq-fd-histkey {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.bq-fd.bq-revbreak .bq-fd-histkey.is-dim { opacity: .4; }

/* PHONE LEGEND — cut to three rows by revenue-breakdown.js, fading into
   the toggle under it. */
.bq-fd.bq-revbreak .bq-fd-histkeys { position: relative; }
.bq-fd.bq-revbreak .bq-fd-histkeys.is-collapsed {
    box-sizing: border-box;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
}
.bq-fd.bq-revbreak .bq-revbreak-keys-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 8px;
    padding: 4px 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--fd-accent);
    cursor: pointer;
}
.bq-fd.bq-revbreak .bq-revbreak-keys-more::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
.bq-fd.bq-revbreak .bq-revbreak-keys-more[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.bq-fd.bq-revbreak .bq-revbreak-keys-more:focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 2px; border-radius: 3px; }
.bq-fd.bq-revbreak .bq-revbreak-keys-more[hidden] { display: none; }
/* The toggle, not the legend, now sits above the table. */
@media (max-width: 768px) {
    .bq-fd.bq-revbreak .bq-revbreak-tablewrap { margin-top: 22px; }
    /* Keys and the toggle are 19px and 26px tall at desktop spacing; on a
       touch screen they get a finger-sized hit area. */
    .bq-fd.bq-revbreak .bq-fd-histkeys { gap: 0 14px; }
    .bq-fd.bq-revbreak .bq-fd-histkey { padding: 6px 0; }
    .bq-fd.bq-revbreak .bq-revbreak-keys-more { padding: 9px 0; margin-top: 2px; }
}
/* Phones: a 132px label column still leaves room for three year columns,
   and long names ("Microsoft 365 Consumer Products & Cloud Services") wrap
   to three lines instead of four. */
@media (max-width: 520px) {
    .bq-fd.bq-revbreak .bq-revbreak-table thead th.bq-fd-c-name,
    .bq-fd.bq-revbreak .bq-revbreak-table tbody th.bq-fd-c-name { width: 132px; min-width: 132px; max-width: 132px; }
    /* 132 + 3 x 71 fills a 390px screen's card, so the newest three years
       sit whole beside the label instead of the oldest one half under it. */
    .bq-fd.bq-revbreak .bq-revbreak-table thead th:not(.bq-fd-c-name),
    .bq-fd.bq-revbreak .bq-revbreak-table tbody td { min-width: 71px; }
}

/* Every line switched off: a note and the way back, over the bare axes. */
.bq-fd.bq-revbreak .bq-revbreak-plot { position: relative; }
.bq-fd.bq-revbreak .bq-revbreak-empty {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--fd-muted);
    text-align: center;
}
.bq-fd.bq-revbreak .bq-revbreak-empty[hidden] { display: none; }

/* KEY MENU — right-click / long-press on a legend key. */
.bq-revbreak-menu {
    position: fixed;
    z-index: 10001;
    min-width: 190px;
    max-width: min(300px, calc(100vw - 16px));
    padding: 5px;
    background: #fff;
    border: 1px solid #cfccc7;
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(11, 31, 46, .13);
    font-size: 12.5px;
    color: #414c57;
}
.bq-revbreak-menu[hidden] { display: none; }
.bq-revbreak-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 5px;
    background: transparent;
    padding: 7px 10px;
    font: inherit;
    color: inherit;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.bq-revbreak-menu-item:hover,
.bq-revbreak-menu-item:focus-visible {
    background: #f2f4f6;
    color: #16202b;
    outline: none;
}
.bq-revbreak-menu-item[aria-disabled="true"] {
    color: #b3bac2;
    background: transparent;
    cursor: default;
}
.bq-revbreak-menu-item i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
}
.bq-revbreak-menu-item i.is-blank { background: transparent; }
.bq-revbreak-menu-item strong { font-weight: 700; overflow-wrap: anywhere; }
.bq-revbreak-menu-sep { height: 1px; margin: 4px 2px; background: #ecebe8; }