/*
 * The four company page types' own chrome (companies/_chrome): the name and
 * ticker, the sector line, the live price, the flags and their legend, and
 * the tab bar — and the keystats report's two-column arrangement.
 *
 * Name and price above flags on a phone, side by side from 1024px; the tab
 * bar at every width, scrolling sideways on a phone (components/tabs.css) —
 * it is the only way to a statement for a signed-out reader there, since the
 * sidebar's copy of it is in the signed-in account hub; and the keystats
 * report, one column in reading order below 1280px and two from it (below).
 */
@layer pages {
  .company-header {
    /* One line of the price at its stat size: 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: calc(var(--text-stat) * var(--leading-stat));

    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-block-end: var(--space-sm);

    @media (width >= 1024px) {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--space-3xl);
    }
  }

  .company-header__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-sm);
    margin: 0;
  }

  .company-header__sector {
    margin-block: var(--space-2xs) var(--space-sm);
    color: var(--color-ink-subtle);
    font-size: var(--text-ui);

    & a {
      position: relative;
    }
  }

  /* 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-header__sector a::after {
      content: "";
      position: absolute;
      inset-block: calc((100% - var(--target-min)) / 2);
      inset-inline: 0;
    }
  }

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

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

  .company-price__as-of {
    color: var(--color-ink-subtle);
    font-size: var(--text-meta);
  }

  /* The overview's Print button, at the end of the header row; not on a
     phone, where there is rarely a printer, and not on the paper. */
  .company-header__print {
    display: none;

    @media (width >= 768px) {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      margin-inline-start: auto;
      font-size: var(--text-ui-sm);
    }

    @media (width >= 768px) and (pointer: coarse) {
      min-block-size: var(--target-min);
    }
  }

  .company-flags {
    display: grid;
    gap: var(--space-xs);
  }

  .company-flags__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .company-flags__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
    color: var(--color-ink-subtle);
    font-size: var(--text-meta);
    line-height: var(--leading-meta);
  }

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

  .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 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. */
  .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__commentary,
  .keystats__news {
    min-inline-size: 0;
  }

  @media (width < 1280px) {
    .keystats__financials { order: 1; }
    .keystats__overview { order: 2; }
    .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.5rem;
    border-radius: var(--radius-pill);
    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. Alternate months are shaded so a column can be followed; a month
     with nothing is a quiet dash, quieter than any count. */
  .insider-grid td {
    padding-inline: 0;
    text-align: center;

    &:nth-child(even) {
      background-color: var(--color-surface-raised);
    }
  }

  .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, each over a rule in its own
     colour — the same gain, warning and loss colours used everywhere. */
  .target-price__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding-block: var(--space-xs);
    border-block-start: 2px solid var(--color-rule);
    font-size: var(--text-ui-sm);

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

  .target-price__row--high { border-block-start-color: var(--color-gain); }
  .target-price__row--mean { border-block-start-style: dotted; border-block-start-color: var(--color-warn); }
  .target-price__row--low { border-block-start-color: var(--color-loss); }

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

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

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

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

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