/*
 * The company page types' own chrome (companies/_chrome; tasks/redesign, D8,
 * from keystats.png), and the keystats report's two-column arrangement.
 *
 *   .company-chrome             the header
 *   .company-chrome__utility    the breadcrumbs, then the date, Excel and
 *                               Print, over a hairline
 *   .company-chrome__title      the company's name in the serif, and the
 *                               ticker in a chip beside it
 *   .company-chrome__identity   the sector and industry in green small caps
 *   .company-chrome__lede       the standfirst — the sentence, the quarter's
 *                               figures, the tags — beside the price block,
 *                               side by side from 1024px
 *   .stat-bar                   seven figures under a double rule, scrolling
 *                               sideways on a phone
 *
 * Then the tab bar at every width, scrolling sideways on a phone
 * (components/tabs.css) — the one company navigation; and the keystats
 * report, one column in reading order below 1280px and two from it (below).
 */
@layer pages {
  .company-chrome {
    /* One line of the price at its hero size, and its "as of" under it: what
       the price frame reserves for its placeholder and keeps when it lands —
       or when a company has no price and the frame comes back empty. */
    --company-price-height: 4.25rem;

    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-sm);
  }

  .company-chrome__utility {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-lg);
    padding-block-end: var(--space-xs);
    border-block-end: var(--rule-hairline);

    & .breadcrumbs {
      margin: 0;
    }
  }

  .company-chrome__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-md);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .company-chrome__date {
    @media (width < 640px) {
      display: none;
    }
  }

  .company-header__export {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  /* The overview's Print button: a word, in the link green; not on a phone,
     where there is rarely a printer, and not on the paper. */
  .company-chrome__print {
    display: none;
    color: var(--color-link);
    font-size: inherit;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }

    @media (width >= 768px) {
      display: inline;
    }
  }

  /* The name and the ticker's chip on one line, the chip wrapping under a
     long name rather than squeezing it. */
  .company-chrome__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-sm);
    margin-block-start: var(--space-sm);
  }

  .company-chrome__name {
    margin: 0;
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    letter-spacing: -0.01em;
  }

  .company-chrome__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-xs);
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-caps);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .company-chrome__ticker {
    padding: var(--space-3xs) var(--space-xs);
    border: var(--rule-width) solid var(--color-rule);
    color: var(--color-ink);
    font-size: var(--text-caps);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
  }

  .company-chrome__segment {
    position: relative;
    color: var(--color-link);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  /* The two links are a line of text, and a 44px target on touch without
     making the line taller: the hit area reaches above and below it. The
     @media is on the outside: Chrome before 130 drops declarations in an
     @media nested inside a nested pseudo-element. */
  @media (pointer: coarse) {
    .company-chrome__segment::after {
      content: "";
      position: absolute;
      inset-block: calc((100% - var(--target-min)) / 2);
      inset-inline: 0;
    }
  }

  .company-chrome__lede {
    display: grid;
    gap: var(--space-md) var(--space-2xl);
    margin-block-start: var(--space-2xs);

    @media (width >= 1024px) {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }
  }

  .company-chrome__summary {
    display: grid;
    grid-row: 1;
    gap: var(--space-sm);
    max-inline-size: 48rem;
  }

  .company-chrome__standfirst {
    max-inline-size: 48rem;
    margin: 0;
    font-family: var(--font-prose);
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
    text-wrap: pretty;
  }

  /* The latest quarter against a year earlier (companies/_quarter_changes,
     M17-D3): caps labels over signed figures, then what they are measured
     against and the quarter's earnings digest. */
  .quarter-changes {
    display: grid;
    gap: var(--space-2xs);
  }

  .quarter-changes__figures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-lg);
    margin: 0;

    & dd {
      margin: 0;
      font-weight: var(--weight-semibold);
    }
  }

  .quarter-changes__figure {
    display: grid;
    gap: var(--space-3xs);
  }

  .quarter-changes__note {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  /* The sets of companies this one belongs to — indexes, then streaks — and
     on the overview its red flags (M12-D11): square tags in one wrapping row,
     each a link. A tag is a word, so a 44px target on touch comes from its
     padding. */
  .company-chrome__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-ui-sm);
  }

  .company-chrome__tag {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-sm);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    text-decoration: none;

    &:hover {
      border-color: var(--color-link);
      color: var(--color-link);
    }

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
      align-items: center;
    }
  }

  .company-chrome__tag-count {
    color: var(--color-gain);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .company-chrome__quote {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-sm) var(--space-xl);

    @media (width >= 1024px) {
      grid-column: 2;
      grid-row: 1;
      justify-content: flex-end;
    }
  }

  .company-chrome__price {
    display: block;
    min-block-size: var(--company-price-height);
  }

  .company-price {
    display: grid;
    align-content: end;
    gap: var(--space-3xs);
    block-size: var(--company-price-height);
  }

  .company-price__figures {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-sm);
  }

  .company-price__change {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2xs);

    & .figure {
      font-weight: var(--weight-semibold);
    }
  }

  /* Follow at the size of the block it ends, Alert beside it. */
  .company-chrome__follow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);

    & .button {
      min-block-size: var(--control-height);
      padding-inline: var(--space-lg);
    }

    /* From a tablet up the buttons sit at the page's right edge, so the
       alert panel and the follow signup open leftward; on a phone they sit at the left and it opens
       rightward, as everywhere else. */
    @media (width >= 768px) {
      & .alert-panel,
      & .follow__signup-form {
        inset-inline: auto 0;
      }
    }
  }

  /* The stat bar: a double rule, then seven cells of a caps label over a
     serif figure, ending on a hairline. It scrolls sideways inside itself on
     a phone. */
  .stat-bar {
    display: grid;
    grid-auto-columns: minmax(7.5rem, 1fr);
    grid-auto-flow: column;
    gap: var(--space-lg);
    margin: var(--space-sm) 0 0;
    padding-block: calc(var(--rule-double-height) + var(--space-sm)) var(--space-sm);
    border-block-end: var(--rule-hairline);
    background: var(--rule-double) top / 100% var(--rule-double-height) no-repeat;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .stat-bar__cell {
    display: grid;
    gap: var(--space-3xs);
  }

  .stat-bar__label {
    white-space: nowrap;
  }

  .stat-bar__value {
    margin: 0;
    white-space: nowrap;
  }

  /* The date a figure is as of, under it: the Stock analysis's snapshot
     (companies/articles/_snapshot), whose figures are not all as fresh. */
  .stat-bar__note {
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
    white-space: nowrap;
  }

  .stat-bar__link {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
    }
  }

  .company-tabs {
    margin-block-end: var(--space-md);
  }

  /*
   * The keystats report. From 1280px: the sidebar in a fixed column to the
   * left, the main column (.keystats__main, a grid) beside it, in source
   * order. Below 1280px: one column in reading order — the annual grid, the
   * chart and target (.keystats__overview), the revenue flow (M23), the
   * sidebar, the peers, the
   * business profile, the commentary, the rating changes, the holders, pay
   * and ownership from the proxy, the news, the metric links. `.keystats__main` is `display: contents` there, so its children are
   * items of this flex column and take their places by `order`. The desktop
   * DOM order and layout are unchanged.
   *
   * The catch: below 1280px `.keystats__main` has no box, so a gap, margin,
   * padding or border set on it silently stops applying there. The spacing
   * between its children is this column's gap at both widths.
   */
  .keystats {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);

    @media (width >= 1280px) {
      flex-direction: row;
      align-items: flex-start;
    }

    /* With the alert drawer open (components/alert-drawer.css) the page is
       a drawer's width narrower than the window says, so the sidebar goes
       under the main column and the price chart keeps the width its alert
       lines are set against. */
    .app:has(.alert-drawer[open]) & {
      @media (width >= 1280px) {
        flex-direction: column;
        align-items: stretch;

        & .keystats__sidebar {
          order: 3;
          inline-size: auto;
        }
      }
    }
  }

  /* One column that never grows past its box: the chart and the tables
     inside scroll within themselves instead of widening the page. */
  /* Ten years at a glance (companies/keystats/_financials; tasks/redesign,
     D9): the group's name and the row's label pinned on the left — the
     group column a fixed width, so the label column knows where to stick —
     ten years, the Trend bars, then the estimates. Below 640px the group
     column gives way to a full-width row above each group. */
  .ten-years {
    padding-block-end: var(--space-sm);
  }

  .ten-years__table {
    --group-width: 6.5rem;
  }

  .ten-years__group-cell {
    inline-size: var(--group-width);
    min-inline-size: var(--group-width);
    max-inline-size: var(--group-width);

    @media (width < 640px) {
      display: none;
    }
  }

  .ten-years__label {
    @media (width >= 640px) {
      inset-inline-start: var(--group-width);
    }
  }

  /* Pinned cells take the paper and no edge shadow: the hairline rows run
     under them, and the shadow fell across a column of labels. */
  :is(.ten-years__group-cell, .ten-years__label).data-table__label--pinned-start {
    box-shadow: none;
  }

  .ten-years__group-row {
    display: none;

    @media (width < 640px) {
      display: table-row;
    }

    & > th {
      padding-block-start: var(--space-sm);
      color: var(--color-ink-muted);
      font-size: var(--text-caps);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-caps);
      text-align: start;
      text-transform: uppercase;
    }
  }

  .ten-years__trend {
    padding-inline: var(--space-sm);
  }

  /* The trailing twelve months after the newest year, ruled off from the
     fiscal years it is not one of, its quarter under "TTM". */
  .ten-years__ttm {
    border-inline-start: var(--rule-hairline);
    white-space: nowrap;
  }

  .ten-years__ttm-period {
    display: block;
    color: var(--color-ink-subtle);
    font-size: var(--text-meta-xs);
    font-weight: var(--weight-regular);
  }

  .ten-years__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-lg);

    & .table-legend {
      margin-block-start: var(--space-xs);
    }
  }

  /* `powerpack_offers`: the row naming the table's two halves, wide screens
     only — a phone keeps neither half — and the two summary columns. */
  .ten-years__column-groups {
    @media (width < 640px) {
      display: none;
    }

    & > td {
      border-block-end: 0;
    }
  }

  .ten-years__column-group {
    padding-block-end: var(--space-2xs);
    border-block-end: var(--rule-hairline);
    color: var(--color-ink-soft);
    font-size: var(--text-caps);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-align: start;
    text-transform: uppercase;

    & .lock {
      margin-inline-start: var(--space-xs);
      letter-spacing: normal;
      text-transform: none;
    }
  }

  .ten-years__column-group--forecast {
    background-color: var(--color-forecast);
  }

  .ten-years__change {
    padding-inline-start: var(--space-md);
    text-align: end;
    white-space: nowrap;
  }

  .ten-years__not-meaningful {
    color: var(--color-ink-muted);
  }

  /* The card's one cell, over every line below the teaser: the card at its
     top, the forecast tint below it. Wide enough for the card whatever the
     figures beside it: a company with short ones would otherwise squeeze it
     into a column of words. */
  .ten-years__offer-cell {
    min-inline-size: 24rem;
    padding: var(--space-sm);
    font-style: normal;
    text-align: start;
    vertical-align: top;
    white-space: normal;
  }

  /* The estimates' offer card (companies/keystats/_estimates_offer; its
     look is components/offer-card.css): centred in the cell over the
     forecast columns. Under the table it is the phone's own, there being no
     columns to sit over. */
  .estimates-offer {
    max-inline-size: 26rem;
    margin-inline: auto;
  }

  .estimates-offer--below {
    max-inline-size: none;
    margin-block: var(--space-md);
    box-shadow: none;

    @media (width >= 640px) {
      display: none;
    }
  }

  /* The overview's three forecast columns as one Powerpack lock, with
     paywall_v2 (M04-D4, G3): a cell spanning every row, still in the
     forecast tint, its lock in the middle. Upright: the italic is the
     forecast figures', and there are none. */
  .keystats__forecast-lock {
    vertical-align: middle;
    font-style: normal;
    white-space: normal;
  }

  /* Capital & Financial Ratios (companies/keystats/_capital_ratios): four
     groups, each a caps label over its rows, a little air between them —
     one column in the wide screen's sidebar, two where the card runs wider
     than two lists of label and figure need. */
  .keystats__ratios {
    container: ratios / inline-size;
  }

  .keystats__ratio-groups {
    display: grid;
    gap: 0 var(--space-xl);

    @container ratios (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
  }

  .keystats__ratio-group {
    display: grid;
    gap: var(--space-2xs);
    padding-block-start: var(--space-sm);
  }

  /* Valuation vs history (companies/keystats/_scores, M13-D7): the EV/Sales
     line, linked, then each valuation percentile's row over its range track. */
  .keystats__score-link {
    text-decoration: none;
  }

  /* The company among its peers (M17-D1): its own row
     bold, the median in the foot over a heavy rule, the figures right. */
  .peer-table {
    & tr[aria-current="true"] {
      font-weight: 600;
    }

    & tfoot th,
    & tfoot td {
      border-block-start: var(--rule-heavy);
      color: var(--color-ink-muted);
    }
  }

  /* EV/Sales over the company's own ten years (M17-D8). */
  .keystats__history {
    padding-block: var(--space-sm);
    border-block-end: var(--rule-hairline);

    & .keystats__score-link {
      display: block;
      color: inherit;
    }
  }

  .keystats__percentile {
    padding-block-end: var(--space-xs);
    border-block-end: var(--rule-hairline);

    & .stat-list__row {
      border-block-end: 0;
    }

  }

  .keystats__sidebar {
    order: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);

    @media (width >= 1280px) {
      order: 1;
      flex: none;
      inline-size: 23.75rem;
    }
  }

  /* The Earnings Trends card (companies/keystats/_earnings_trends) in the
     sidebar's fixed column: the phone's plot and dots, not the tablet's. */
  .keystats__sidebar .earnings-trends {
    @media (width >= 1280px) {
      --earnings-trends-plot-height: 12rem;
      --earnings-trends-dot: 0.875rem;
    }
  }

  .keystats__main {
    display: contents;

    @media (width >= 1280px) {
      order: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-lg);
      flex: 1;
      min-inline-size: 0;
    }
  }

  /* The main column's children, placed in the one-column reading order.
     From 1280px they are grid items of .keystats__main and keep its source
     order. */
  .keystats__financials,
  .keystats__overview,
  .keystats__flow,
  .keystats__peers,
  .keystats__profile,
  .keystats__commentary,
  .keystats__ratings,
  .keystats__holders,
  .keystats__proxy,
  .keystats__news,
  .keystats__metrics {
    min-inline-size: 0;
  }

  @media (width < 1280px) {
    .keystats__overview { order: 1; }
    .keystats__financials { order: 2; }
    .keystats__profile { order: 2; }
    .keystats__flow { order: 2; }
    .keystats__peers { order: 4; }
    .keystats__commentary { order: 4; }
    .keystats__ratings { order: 4; }
    .keystats__holders { order: 4; }
    .keystats__proxy { order: 4; }
    .keystats__news { order: 5; }
    .keystats__metrics { order: 6; }
  }

  .keystats__overview {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    @media (width >= 768px) {
      flex-direction: row;
    }
  }

  /* The price chart's height, read by the chart (.company-chart) and by the
     placeholder it replaces, so the page does not jump when it lands. 570px
     from 768px is `Companies::PriceChart::HEIGHT`; change both together. */
  .keystats__chart {
    --company-chart-height: 20rem;

    flex: 1;
    min-inline-size: 0;

    @media (width >= 768px) {
      --company-chart-height: 570px;
    }
  }

  /* Highcharts sizes a chart from its container when it is given no height,
     and the `stock-chart` controller draws into a div of its own inside the
     canvas, which has to fill it. The interval menu sits above the canvas
     inside the same height, so the placeholder's height still holds. */
  .company-chart {
    container: company-chart / inline-size;
    display: flex;
    flex-direction: column;
    block-size: var(--company-chart-height);
  }

  /* Two rows over the chart: the candle widths on the left and the spans on
     the right, every one a button, wrapping under each other where the
     chart is too narrow for both; then, under a hairline, what the chart
     flags. The buttons sit tighter than a segmented control's own gap, so
     eleven of them fit a phone in two lines. */
  .company-chart__head {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0 var(--space-lg);

    & .segmented {
      gap: 0 var(--space-sm);
    }
  }

  .company-chart__ranges {
    justify-content: flex-end;
  }

  .company-chart__intervals {
    flex: none;
  }

  .company-chart__layers {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-sm);
    margin-block-end: var(--space-xs);
    border-block-start: var(--rule-hairline);

    & .segmented {
      gap: 0 var(--space-sm);
    }
  }

  .company-chart__canvas {
    flex: 1;
    min-block-size: 0;

    & > div {
      block-size: 100%;
    }
  }

  .keystats__aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-md);

    @media (width >= 768px) {
      flex: none;
      inline-size: 14.375rem;
    }
  }
}

/*
 * The analyst recommendation rating (companies/keystats/_recommendation_rating):
 * a 1–5 track in the gain → loss ramp and a marker at the rating. Its position
 * is data (--position, from `recommendation_position`), and its fill is one of
 * five bands (`recommendation_marker_classes`).
 */
@layer pages {
  .rating-scale {
    position: relative;
    margin-block: var(--space-3xl) var(--space-xs);
  }

  .rating-scale__track {
    block-size: 0.375rem;
    background: linear-gradient(
      to right,
      var(--color-ramp-gain-3),
      var(--color-ramp-gain-1) 50%,
      var(--color-ramp-loss-1) 75%,
      var(--color-ramp-loss-2)
    );
  }

  .rating-scale__marker {
    --marker: var(--color-ink);
    --marker-ink: var(--color-ink-inverse);

    position: absolute;
    inset-block-end: calc(100% + var(--space-2xs));
    inset-inline-start: var(--position);
    translate: -50% 0;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-md);
    background-color: var(--marker);
    color: var(--marker-ink);
    font-size: var(--text-meta-xs);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums lining-nums;

    &::after {
      content: "";
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 50%;
      translate: -50% 0;
      border: 4px solid transparent;
      border-block-start-color: var(--marker);
    }
  }

  .rating-scale__marker--1 { --marker: var(--color-ramp-gain-3); --marker-ink: var(--color-ramp-gain-3-ink); }
  .rating-scale__marker--2 { --marker: var(--color-ramp-gain-2); --marker-ink: var(--color-ramp-gain-2-ink); }
  .rating-scale__marker--3 { --marker: var(--color-ink-muted); --marker-ink: var(--color-ink-inverse); }
  .rating-scale__marker--4 { --marker: var(--color-ramp-loss-1); --marker-ink: var(--color-ramp-loss-1-ink); }
  .rating-scale__marker--5 { --marker: var(--color-ramp-loss-2); --marker-ink: var(--color-ramp-loss-2-ink); }

  /* Five ticks, each number over its caption, spread so the first sits under
     the start of the track and the last under its end. */
  .rating-scale__labels {
    display: flex;
    justify-content: space-between;
    margin-block-start: var(--space-xs);
    color: var(--color-ink-muted);
    font-size: var(--text-meta-xs);
    line-height: var(--leading-meta-xs);
    text-align: center;

    & > span {
      display: grid;
      min-inline-size: 1.5rem;
    }

    & > :first-child {
      text-align: start;
    }

    & > :last-child {
      text-align: end;
    }
  }
}

/*
 * The keystats report's own panels.
 */
@layer pages {
  /* Insider decisions (companies/keystats/_insider_decisions): three
     figures in a row, each a caps label over a serif figure, wrapping when
     the sidebar is narrow. */
  .insider-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-xl);
    margin: 0;
    padding-block-start: var(--space-sm);

    & dd {
      margin: 0;
    }
  }

  .insider-summary__figure {
    display: grid;
    gap: var(--space-3xs);
  }

  .insider-summary__trades {
    font-size: var(--text-ui);
    line-height: var(--leading-stat);
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* The Dividends card (companies/keystats/_dividends): four figures in two
     columns, then a bar a year — what was paid in the series colour, a
     forecast outlined on the forecast tint, a forecast year's paid part
     filled from the foot — its total over it, its year and change under. */
  .dividend-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md);
    margin: 0;
    padding-block: var(--space-sm);
    border-block-end: var(--rule-hairline);

    & dd {
      margin: 0;
      font-weight: var(--weight-semibold);
    }
  }

  .dividend-stats__cell {
    display: grid;
    gap: var(--space-3xs);
  }

  .dividend-chart {
    --dividend-chart-height: 7rem;

    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    align-items: end;
    gap: var(--space-2xs);
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* One column, held to the year's width: an auto column grew to a label's,
     and took the bar with it. */
  .dividend-chart__year {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-3xs);
    min-inline-size: 0;
  }

  .dividend-chart__total,
  .dividend-chart__change {
    color: var(--color-ink-subtle);
    font-size: var(--text-meta-xs);
    white-space: nowrap;
  }

  /* A line even with no change to show, or that year's foot drops below the
     others': the first year, and the year after one of no dividend. */
  .dividend-chart__change {
    min-block-size: 1lh;
  }

  .dividend-chart__bar {
    inline-size: 100%;
    block-size: calc(var(--share) * var(--dividend-chart-height));
    background: linear-gradient(to top, var(--color-series-1) calc(var(--paid) * 100%), transparent 0);
  }

  .is-forecast .dividend-chart__bar {
    border: var(--rule-width) dashed var(--color-rule-control);
    background-color: var(--color-forecast);
  }

  .dividend-chart__label {
    padding-block-start: var(--space-3xs);
    border-block-start: var(--rule-hairline);
    inline-size: 100%;
    color: var(--color-ink-muted);
    font-size: var(--text-meta-xs);
    text-align: center;
  }

  .dividend-key {
    display: inline-block;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    vertical-align: middle;
  }

  .dividend-key--paid {
    background-color: var(--color-series-1);
  }

  .dividend-key--forecast {
    border: var(--rule-width) dashed var(--color-rule-control);
    background-color: var(--color-forecast);
  }

  /* Target price range: high, average and low on hairlines, the average —
     the one a reader quotes — set bold (tasks/redesign, D10). */
  .target-price__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding-block: var(--space-xs);
    border-block-end: var(--rule-hairline);
    font-size: var(--text-ui-sm);

    & > :first-child {
      flex: 1;
      color: var(--color-ink-muted);
    }
  }

  .target-price__row--mean {
    font-weight: var(--weight-semibold);

    & > :first-child {
      color: var(--color-ink);
    }
  }

  .target-price__figure {
    min-inline-size: 4rem;
    text-align: end;
  }

  /* The excerpts on the overview (the earnings call, the business profile):
     the prose, and the link to the full article beside it from 1024px. The
     prose takes what the link leaves, so its own measure is what stops it. */
  .commentary {
    display: grid;
    gap: var(--space-md);

    @media (width >= 1024px) {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  /* Under the annual grid on a phone, where it shows four years of ten: the
     way to the rest. */
  .keystats__all-years {
    margin: 0;
    padding-inline: var(--space-md);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-semibold);

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--target-min);
    }

    @media (width >= 640px) {
      display: none;
    }
  }

  .commentary__more {
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
  }
}

/*
 * The statement pages: the period switcher, the chart beside the statement's
 * description, and the table.
 */
@layer pages {
  .periods {
    margin-block: calc(var(--space-xs) * -1) var(--space-lg);
  }

  /* The period switcher and "Download Excel" on one row (paywall_v2). The
     tabs keep their own sideways scroll on a phone, so the row never grows
     wider than the page; the link drops under them when there is no room. */
  .statement-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    margin-block: calc(var(--space-xs) * -1) var(--space-lg);

    & > .tabs {
      flex: 1 1 20rem;
      min-inline-size: 0;
      margin-block: 0;
    }
  }

  /* "Download Excel": a caps text link in the green, not a button
     (tasks/redesign, D11). */
  .statement-toolbar__download {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-min);
    color: var(--color-link);
    font-size: var(--text-meta-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-decoration: none;
    text-transform: uppercase;

    &:hover {
      text-decoration: underline;
    }
  }

  .statement-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    margin-block-end: var(--space-lg);

    @media (width >= 768px) {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    @media (width >= 1024px) {
      grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    }
  }

  /* The locked chart cell for a reader without Powerpack: not on a phone,
     where it would be a 300px panel between the reader and the table. */
  .statement-overview__locked-chart {
    @media (width < 768px) {
      display: none;
    }
  }

  /* A statement with no chart (Metrics & Ratios): the description alone, one
     full-width track at every width. */
  .statement-overview--no-chart {
    @media (width >= 768px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .statement-description {
    display: grid;
    gap: var(--space-xs);
    align-content: start;
    font-size: var(--text-ui-sm);
    line-height: 1.55;
    color: var(--color-ink-soft);
  }

  .statement-table {
    & .data-table__label {
      inline-size: clamp(9rem, 40vw, 18rem);
      white-space: normal;
    }

    & th:not(.data-table__label),
    & td:not(.data-table__label) {
      inline-size: 6rem;
    }
  }

  /* Under a column's date, while its figures are the filing's rather than
     Zacks' (tasks/growth/milestones/28, D8). */
  .statement-table__filed {
    display: block;
    font-weight: var(--weight-regular);
    font-size: var(--text-meta-xs);
    line-height: var(--leading-meta-xs);
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
  }

  /* The one lock column a statement carries with paywall_v2 (M04-D4, G2):
     a cell spanning every row at the older end of the periods, its lock held
     near the top where the sticky header leaves it in view. Wider than a
     period column, because it holds a sentence; wider again when it holds
     Powerpack's offer card (shared/_powerpack_offer). */
  .statement-table {
    & th.statement-table__lock-head,
    & td.statement-table__lock {
      inline-size: 12rem;
    }

    &:has(td.statement-table__lock .offer-card) :is(th.statement-table__lock-head, td.statement-table__lock) {
      inline-size: 20rem;
    }
  }

  .statement-table__lock {
    vertical-align: top;
    white-space: normal;
    background-color: var(--color-surface-sunken);

    & :is(.lock-panel, .offer-card) {
      position: sticky;
      inset-block-start: var(--space-2xl);
    }

    /* A table's cells set their figures to the end; the card reads as text. */
    & .offer-card {
      text-align: start;
    }
  }

  .statement-table__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  /* The name takes the room between the chevron and the wiki glyph. */
  .statement-table__name {
    flex: 1;
  }

  /* A row's definition (M09-D6) opens in the row rather than over the rows
     below it: the table scrolls inside its own box, which would clip a
     popover, and the pinned label cells stack over one another. */
  .statement-table .definition {
    display: block;

    /* The chevron, drawn rather than inlined a hundred times: two sides of
       a small square, turned to point down, and up once open. */
    & > .disclosure__summary::after {
      content: "";
      inline-size: 0.3125rem;
      block-size: 0.3125rem;
      margin-block-start: calc(-1 * var(--space-2xs));
      border-inline-end: var(--rule-width-strong) solid var(--color-ink-subtle);
      border-block-end: var(--rule-width-strong) solid var(--color-ink-subtle);
      rotate: 45deg;
      transition: rotate var(--duration-fast);
    }

    &[open] > .disclosure__summary::after {
      margin-block-start: var(--space-2xs);
      rotate: 225deg;
    }

    & > .disclosure__body {
      position: static;
      inline-size: auto;
      margin-block: var(--space-2xs);
      box-shadow: none;
      white-space: normal;
    }
  }

  /* The chevron that shows the Advanced lines folded under a line (M09-D5).
     It points right while they are hidden and down once they are shown —
     the state is the button's aria-expanded, which the row-group controller
     keeps. */
  .statement-table__toggle {
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;

    @media (pointer: coarse) {
      inline-size: var(--target-min);
      block-size: var(--target-min);
    }

    & .icon {
      transition: rotate var(--duration-fast);
    }

    &[aria-expanded="true"] .icon {
      rotate: 90deg;
    }
  }

  /* "Show all line items": the same table unfolded on the server. */
  .statement-table__fold {
    padding: var(--space-sm) var(--space-md);
    border-block-start: var(--rule-width) solid var(--color-rule);
    font-size: var(--text-ui-sm);
  }
}