/*
 * The overview's Earnings Trends card (companies/keystats/_earnings_trends,
 * EarningsTrendsHelper): a column a quarter, the consensus a hollow dot and
 * the reported figure a filled one, gain-green on a beat and brick on a miss,
 * over dashed gridlines with their values to the left; under each column its
 * quarter, the result and by how much.
 *
 * HTML on a grid rather than SVG, so a dot is round at every width. Each dot,
 * gridline and tick is placed by `--position`, a share of the plot's height
 * from its foot, which the helper works out. The reported dot follows the
 * estimate in the markup, so where they overlap it is the one on top.
 */
@layer components {
  .earnings-trends {
    --earnings-trends-plot-height: 12rem;
    --earnings-trends-dot: 0.875rem;

    margin: 0;

    @media (width >= 768px) {
      --earnings-trends-plot-height: 14rem;
      --earnings-trends-dot: 1.125rem;
    }
  }

  .earnings-trends__key {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-md);
    margin: 0 0 var(--space-md);
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
    line-height: var(--leading-ui-sm);
    color: var(--color-ink-muted);
  }

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

    & .figure {
      color: var(--color-ink);
    }
  }

  .earnings-trends__swatch {
    align-self: center;
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border: 2px solid var(--color-ink-muted);
    border-radius: var(--radius-pill);
    background: var(--color-ground);
  }

  .earnings-trends__chart {
    display: grid;
    grid-template-columns: auto repeat(var(--quarters), minmax(0, 1fr));
    grid-template-rows: var(--earnings-trends-plot-height) auto;
    column-gap: var(--space-xs);
  }

  .earnings-trends__axis {
    position: relative;
    min-inline-size: 2.25rem;
  }

  .earnings-trends__tick {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: var(--position);
    transform: translateY(50%);
    font-family: var(--font-data);
    font-size: var(--text-meta);
    line-height: 1;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .earnings-trends__plot {
    position: relative;
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: subgrid;
    border-block-end: var(--rule-hairline);
  }

  .earnings-trends__gridline {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--position);
    border-block-start: var(--rule-width) dashed var(--color-rule);
  }

  .earnings-trends__column {
    position: relative;
  }

  .earnings-trends__dot {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: var(--position);
    inline-size: var(--earnings-trends-dot);
    block-size: var(--earnings-trends-dot);
    border: 2px solid var(--color-ink-muted);
    border-radius: var(--radius-pill);
    background: var(--color-ground);
    transform: translate(-50%, 50%);
  }

  .earnings-trends__dot--beat {
    border-color: var(--color-gain);
    background: var(--color-gain);
  }

  .earnings-trends__dot--missed {
    border-color: var(--color-loss);
    background: var(--color-loss);
  }

  .earnings-trends__dot--met {
    border-color: var(--color-ink);
    background: var(--color-ink);
  }

  /* The labels' row starts under the plot, not the axis. */
  .earnings-trends__plot + .earnings-trends__quarter {
    grid-column-start: 2;
  }

  .earnings-trends__quarter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3xs);
    padding-block-start: var(--space-xs);
    font-family: var(--font-data);
    font-size: var(--text-data);
    line-height: var(--leading-data);
    text-align: center;
  }

  .earnings-trends__label {
    color: var(--color-ink-muted);
    white-space: nowrap;
  }

  .earnings-trends__result {
    font-weight: 600;
  }

  .earnings-trends__result--beat {
    color: var(--color-gain);
  }

  .earnings-trends__result--missed {
    color: var(--color-loss);
  }

  .earnings-trends__result--met {
    color: var(--color-ink);
  }

  .earnings-trends__date {
    font-weight: 600;
  }
}