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

  .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);
    font-style: italic;
  }

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

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

  /* A table read from its end: below 640px it opens scrolled to its last
     column instead of its first — the keystats grid, whose newest years are
     at the end, beside the pinned label. 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. */
  .table-scroll--from-end {
    @media (width < 640px) {
      direction: rtl;

      & > * {
        direction: ltr;
      }
    }
  }

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

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