/*
 * 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__name       the company's name in the serif, large
 *   .company-chrome__identity   the ticker in ink, the sector and industry
 *                               in green small caps
 *   .company-chrome__lede       the standfirst 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;
    }
  }

  .company-chrome__name {
    margin: var(--space-sm) 0 0;
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: -0.02em;
  }

  .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 {
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
  }

  .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__standfirst {
    grid-row: 1;
    max-inline-size: 48rem;
    margin: 0;
    font-family: var(--font-prose);
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
    text-wrap: pretty;
  }

  /* A phrase that stands for a set of companies, linking to it (A12): the
     sentence is prose, so the link keeps a faint underline (WCAG 1.4.1). */
  .company-chrome__flag {
    color: var(--color-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 0.2em;

    &:hover {
      text-decoration-color: currentColor;
    }
  }

  .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);
    }
  }

  /* 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;
  }

  .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 sidebar, the peers, the key
   * facts, the commentary, the news. `.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;
    }
  }

  /* 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);
  }

  .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);
    }
  }

  /* 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;
  }

  /* The F-8 panel (companies/keystats/_scores, M13-D7): the four score
     badges in a wrapping row, each a link to its metric page while those are
     on, then each valuation percentile's row over its range track. */
  .keystats__score-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md);
    padding-block: var(--space-sm);
    border-block-end: var(--rule-hairline);
  }

  .keystats__score-link {
    text-decoration: none;
  }

  .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;
    }
  }

  .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__peers,
  .keystats__facts,
  .keystats__commentary,
  .keystats__news {
    min-inline-size: 0;
  }

  @media (width < 1280px) {
    .keystats__financials { order: 1; }
    .keystats__overview { order: 2; }
    .keystats__peers { order: 4; }
    .keystats__facts { order: 4; }
    .keystats__commentary { order: 4; }
    .keystats__news { order: 5; }
  }

  .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 this
     one, which has to fill it. */
  .company-chart {
    block-size: var(--company-chart-height);

    & > 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: twelve months, four quarters labelled, a count per
     month. A month with nothing is a quiet dash, quieter than any count. */
  .insider-grid td {
    padding-inline: 0;
    text-align: center;
  }

  .insider-grid__empty {
    color: var(--color-ink-subtle);
  }

  .insider-grid th {
    text-align: center;
  }

  .insider-grid__row-label {
    inline-size: 2.5rem;
  }

  /* Assets vs liabilities: two tables stacked, whose columns have to line
     up, so the layout is fixed and the label column is set rather than sized
     to "Receivables" in one table and "Payables" in the other. The minimum
     width is where the figures would start to overprint; below it the table
     scrolls in its .table-scroll instead. */
  .balance-table {
    min-inline-size: 20rem;

    & thead .data-table__label {
      inline-size: 5.5rem;
    }
  }

  /* Dividends: a year's payouts on a grid as wide as the busiest year, the
     count arriving as --columns. A special payout is tinted, and the key
     below says so with the same tint. */
  .dividend-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr));
    gap: var(--space-2xs);
    text-align: center;
  }

  .dividend-grid__special,
  .dividend-key {
    border-radius: var(--radius-xs);
    background-color: var(--color-warn-tint);
  }

  .dividend-key {
    padding: 0 var(--space-2xs);
    color: var(--color-ink-soft);
  }

  /* 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 Financial Analysis excerpt: the prose, and the link to the full
     article beside it from 1024px. */
  .commentary {
    display: grid;
    gap: var(--space-md);

    @media (width >= 1024px) {
      grid-template-columns: 2fr 1fr;
    }
  }

  /* 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;
    }
  }

  /* 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. */
  .statement-table {
    & th.statement-table__lock-head,
    & td.statement-table__lock {
      inline-size: 12rem;
    }
  }

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

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

  .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);
  }

  /* The link from a statement row to its wiki page: a quiet glyph that comes
     forward on hover. */
  .statement-table__wiki {
    display: inline-grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: var(--radius-md);

    & .icon {
      fill: var(--color-rule-control);
    }

    &:hover .icon {
      fill: var(--color-link);
    }
  }

  /* The company's red flags and latest earnings digest, one line above the
     overview (companies/keystats/_filing_strip; M12-D11). Drawn only when
     there is one, so it moves nothing on most pages. A ruled band
     (tasks/redesign, D10). */
  .filing-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    margin-block-end: var(--space-md);
    padding-block: var(--space-xs);
    border-block: var(--rule-hairline);
    font-size: var(--text-ui);
  }

  .filing-strip__flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
}