/*
 * 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.
 *
 * Arrangement is exactly today's: name and price above flags on a phone, side
 * by side from 1024px; the tab bar from 768px; the keystats sidebar after the
 * chart on a phone and to its left from 1280px.
 */
@layer pages {
  .company-header {
    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);
  }

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

  .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 {
    display: none;
    margin-block-end: var(--space-md);

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

  .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: 2;
    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 {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    min-inline-size: 0;

    @media (width >= 1280px) {
      order: 2;
      flex: 1;
    }
  }

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

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

  .keystats__chart {
    flex: 1;
    min-inline-size: 0;
  }

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

  .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 {
    display: none;
    margin-block: calc(var(--space-xs) * -1) var(--space-lg);

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

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

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

  /* A financials chart a free reader does not get: the mask colour and a lock,
     at the chart's own height, rather than a blurred blank. */
  .chart-locked {
    display: grid;
    place-items: center;
    block-size: var(--height, 300px);
    border: var(--rule-width) solid var(--color-mask-line);
    border-radius: var(--radius-lg);
    background-color: var(--color-mask);
  }
}