/*
 * The tables the site is read through: keystats, the four statements, the
 * screener grid, and the small ratio tables in the keystats panels.
 *
 * Hairline rules between rows, never zebra. A row tints on hover and
 * :focus-within so the eye can follow it across thirteen columns. Subtotal
 * rows are emphasis — tint AND weight. Forecast years are a tinted column AND
 * italic, so either cue survives without the other.
 *
 *   <div class="table-scroll">
 *     <table class="data-table">
 *       <thead><tr><th>2019</th>…<th class="data-table__label data-table__label--pinned-end">…
 *       <tbody><tr class="data-table__row--highlight">
 *         <td class="data-table__cell--forecast data-table__cell--forecast-first">…
 *
 * A long table (the statements) keeps its header row in view with
 * `.table-scroll--bounded` on the wrapper and `.data-table--sticky-head` on the
 * table. The header cannot stick to the viewport: a box that scrolls sideways
 * is a scroll container in both directions, and a sticky cell sticks to its
 * nearest scroll container. So the wrapper is bounded to the viewport less the
 * navbar (--navbar-height, the same token the navbar is sized from) and the
 * header sticks to the top of it.
 */
@layer components {
  /*
   * Horizontal scroll inside the table's own box, never the page's. The two
   * edge shades are the "there is more this way" cue: the `local` layers are
   * surface-coloured covers that scroll with the content and hide the `scroll`
   * shades when the table is already at that edge.
   */
  .table-scroll {
    position: relative;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background:
      linear-gradient(to right, var(--color-surface) 40%, transparent) left / 1.75rem 100% no-repeat local,
      linear-gradient(to left, var(--color-surface) 40%, transparent) right / 1.75rem 100% no-repeat local,
      linear-gradient(to right, color-mix(in srgb, var(--color-ink) 12%, transparent), transparent) left / 0.875rem 100% no-repeat scroll,
      linear-gradient(to left, color-mix(in srgb, var(--color-ink) 12%, transparent), transparent) right / 0.875rem 100% no-repeat scroll;
    background-color: var(--color-surface);
  }

  .data-table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-data);
    font-size: var(--text-data);
    line-height: var(--leading-data);
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* Cells are styled through :where(), at the specificity of a bare element,
     so every modifier below overrides them by being a class. */
  :where(.data-table) {
    & thead th {
      padding: var(--space-xs) var(--space-xs);
      border-block-end: var(--rule-width-strong) solid var(--color-rule-strong);
      background-color: var(--color-surface);
      color: var(--color-ink-muted);
      font-size: var(--text-table-head);
      line-height: var(--leading-table-head);
      font-weight: var(--weight-semibold);
      letter-spacing: 0.04em;
      text-align: end;
      white-space: nowrap;
    }

    & :is(td, tbody th) {
      padding: 0.4375rem var(--space-xs);
      border-block-end: var(--rule-width) solid var(--color-surface-sunken);
      text-align: end;
      white-space: nowrap;
    }

    & tbody tr:is(:hover, :focus-within) > :is(td, th) {
      background-color: var(--color-row-hover);
    }
  }

  /* A subtotal: emphasis, tint and weight. `is-subtotal` is the same state,
     named by the statement payload (FinancialsTables::Values#row_styles). */
  :is(.data-table__row--highlight, .is-subtotal) > :is(td, th) {
    background-color: var(--color-surface-raised);
    font-weight: var(--weight-semibold);
  }

  /* A row that closes a section of a statement. */
  .has-rule > :is(td, th) {
    border-block-end: var(--rule-width-strong) solid var(--color-rule-strong);
  }

  /* A totals row at the foot of a small table. */
  .data-table__row--total > :is(td, th) {
    border-block-start: var(--rule-width) solid var(--color-rule-strong);
    font-weight: var(--weight-semibold);
  }

  /* A totals column: the year at the end of a row of quarters. */
  .data-table__cell--total {
    background-color: var(--color-surface-raised);
    font-weight: var(--weight-medium);
  }

  /* A row that is a component of the one above it. */
  .data-table__label.is-indented {
    padding-inline-start: var(--space-lg);
  }

  /* Tighter cells for the small tables in the keystats panels, and a fixed
     layout where the columns should share the width evenly. */
  :where(.data-table--compact) :is(td, th) {
    padding-inline: var(--space-2xs);
  }

  .data-table--fixed {
    table-layout: fixed;
  }

  .data-table__cell--forecast {
    background-color: var(--color-forecast);
    font-style: italic;
  }

  .data-table__cell--forecast-first {
    border-inline-start: var(--rule-width) solid var(--color-forecast-line);
  }

  /* The row's name. Pinned at the end on keystats (where the label is the
     trailing column) and at the start on the statements, with an opaque
     ground and a shadow on the side the figures scroll under. */
  .data-table__label {
    text-align: start;
    white-space: nowrap;
  }

  /* A label with something beside it — the keystats sparkline — kept on one
     line, so every row stays one row tall. */
  .data-table__label-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
  }

  :where(tbody) .data-table__label {
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-weight: var(--weight-regular);
  }

  .data-table__label--pinned-start,
  .data-table__label--pinned-end {
    position: sticky;
    z-index: 1;
    background-color: var(--color-surface);
  }

  .data-table__label--pinned-start {
    inset-inline-start: 0;
    box-shadow: var(--shadow-pinned-start);
  }

  .data-table__label--pinned-end {
    inset-inline-end: 0;
    border-inline-start: var(--rule-width) solid var(--color-rule);
    box-shadow: var(--shadow-pinned-end);
  }

  .table-scroll--bounded {
    max-block-size: var(--max-height, calc(100dvh - var(--navbar-height)));
    overflow-y: auto;
  }

  .data-table--sticky-head thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
  }

  /* The corner cell sits above both the sticky header and the pinned column. */
  .data-table--sticky-head thead :is(.data-table__label--pinned-start, .data-table__label--pinned-end) {
    z-index: 3;
  }

  /* The grey note under a table: "in millions of $", "predictions in
     italic". From `table_legend_tag`. */
  .table-legend {
    margin-block-start: var(--space-xs);
    color: var(--color-ink-subtle);
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    line-height: var(--leading-meta);
  }

  /* The key above a masked table: the mask bar and the forecast swatch, each
     beside the words it stands for. */
  .table-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-md);
    color: var(--color-ink-muted);
    font-size: var(--text-meta-xs);
    line-height: var(--leading-meta-xs);
  }

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

  .table-key__swatch {
    display: inline-block;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border: var(--rule-width) solid var(--color-forecast-line);
    border-radius: var(--radius-xs);
    background-color: var(--color-forecast);
  }

  /* The ten-bar server-rendered sparkline in a keystats row
     (`ChartsHelper#sparkline`). Bar heights are data, set inline. */
  .sparkline {
    display: flex;
    align-items: flex-end;
    gap: 1px;
  }

  .sparkline__bar {
    inline-size: 2px;
    border-radius: 1px 1px 0 0;
    background-color: var(--color-ink-muted);
  }
}