/*
 * 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, and a heavy ink rule under the
 * header (tasks/redesign, D2). A row tints on hover and :focus-within so the
 * eye can follow it across thirteen columns. Subtotal rows are bold; a group
 * closes on an ink rule; the newest period's header is bold. Forecast years
 * are a paper-tinted column headed "e" (2026e), so the cue survives a
 * monochrome print.
 *
 *   <div class="table-scroll">
 *     <table class="data-table">
 *       <thead><tr><th class="data-table__label data-table__label--pinned-start">…<th>2019</th>…
 *       <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 — the
 * masthead does not stick, so nothing else holds the top — 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-2xs) var(--space-xs);
      border-block-end: var(--rule-width) 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-regular);
      text-align: end;
      white-space: nowrap;
    }

    & :is(td, tbody th) {
      padding: 0.3125rem var(--space-xs);
      border-block-end: var(--rule-hairline);
      text-align: end;
      white-space: nowrap;
    }

    /* Flush with the section's heading at both ends, as the sketch sets a
       table; :where() keeps this at the base cell rule's weight (two
       elements, from `tbody th`), so it beats that rule by coming after it
       and a modifier's padding still wins. */
    & :is(td, tbody th, thead th):where(:first-child) {
      padding-inline-start: 0;
    }

    & :is(td, tbody th, thead th):where(:last-child) {
      padding-inline-end: 0;
    }

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

  /* The newest period: the column the reader came for, its header and its
     figures bold (tasks/redesign, D9, D11). */
  .data-table__head--latest {
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
  }

  .data-table__cell--latest .figure {
    font-weight: var(--weight-semibold);
  }

  /* A subtotal: bold. `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) {
    font-weight: var(--weight-semibold);

    & .figure {
      font-weight: var(--weight-semibold);
    }
  }

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

  /* The group's name, in the first column of the group's first row: PRICE, $
     and INCOME, $M down the side of the ten-year table. */
  .data-table__group {
    color: var(--color-ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-caps);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-align: start;
    text-transform: uppercase;
    vertical-align: top;
  }

  /* 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 {
    font-weight: var(--weight-semibold);
  }

  /* 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. The compact rule
     carries its class's weight on purpose: under :where() it lost to the base
     cell rule, whose `tbody th` gives the :is() two elements' specificity. */
  .data-table--compact :is(td, th) {
    padding-inline: var(--space-2xs);

    &:first-child {
      padding-inline-start: 0;
    }

    &:last-child {
      padding-inline-end: 0;
    }
  }

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

  /* A notch smaller, for a table that has to fit the keystats sidebar. It
     resets the token rather than the property, because each figure inside
     (.figure) sets its own size from --text-data. */
  .data-table--dense {
    --text-data: var(--text-data-dense);
    --leading-data: var(--leading-data-dense);
  }

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

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

  /* A column a phone does without: the keystats grid keeps only its four
     newest actual years below 640px. The cells stay in the document. */
  .data-table__cell--wide-only {
    @media (width < 640px) {
      display: none;
    }
  }

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

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

  /* No shadow of its own: on paper a shadow beside a column reads as a
     smudge, and the scroll box's edge shadows already say there is more to
     scroll (tasks/redesign, D2). */
  .data-table__label--pinned-start {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background-color: var(--color-surface);
  }


  /* A table read from its end: wherever it is wider than its box, it opens
     scrolled to its last column instead of its first — the ten-year table,
     whose newest years and estimates are at the end (tasks/redesign, D9). A
     right-to-left scroll box starts at its right edge; the table inside is
     set back to left-to-right, so only where the scroll starts changes. A
     table that fits is not moved. */
  .table-scroll--from-end {
    direction: rtl;

    & > * {
      direction: ltr;
    }
  }

  .table-scroll--bounded {
    max-block-size: var(--max-height, 100dvh);
    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 .data-table__label--pinned-start {
    z-index: 3;
  }

  /* A sortable column's header (shared/_sort_header): the whole cell is the
     control, a link or a submit button, the chevron beside the name. A column
     of figures sets both at the end. */
  .sort-button {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding: var(--space-xs);
    color: var(--color-ink-muted);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-align: start;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--color-ink);
    }

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
    }
  }

  .sort-button--value {
    justify-content: flex-end;
    text-align: end;
  }

  .sort-button__label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Companies side by side (shared/_comparison_table): the best figure in a
     row is set heavier. Weight, not colour, so a figure's sign colour still
     reads, and so the emphasis survives without colour at all. */
  .comparison-table thead th:not(.data-table__label) {
    text-align: end;
  }

  .comparison-table__best {
    font-weight: var(--weight-semibold);

    & .figure {
      font-weight: var(--weight-semibold);
    }
  }

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

  /* The forecast entry names columns a phone does not show. */
  .table-key__item--forecast {
    @media (width < 640px) {
      display: none;
    }
  }

  .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-year table's Trend column (`ChartsHelper#trend_bars_tag`): ten
     bars in ink, the newest the darkest. */
  .trend-bars {
    display: block;
    inline-size: 3.25rem;
    block-size: 0.875rem;
  }

  .trend-bars__bar {
    fill: color-mix(in srgb, var(--color-ink) 45%, transparent);
  }

  .trend-bars__bar--latest {
    fill: var(--color-ink);
  }
}