/*
 * The daily fundamentals signals (tasks/growth/milestones/29): the homepage
 * section, "Today in the filings" (homepage/_signals), and the week pages at
 * /signals (signals/show), which share homepage/_signal_column.
 *
 *   .signals                 the section, a .card: a heavy rule on top
 *   .signals--brief          the homepage's: three rows a list on a phone
 *   .signals__head           its heading and the date
 *   .signals__grid           the columns, deliberately ragged: each as long
 *                            as its list, packed densely, the lead wider
 *   .signal-column           one signal: heading, note, list or empty state
 *   .signal-column--lead     "Filed today" on the homepage, two tracks wide
 *   .signal-column--followed a signed-in reader's own companies, first, on
 *                            the accent tint
 *   .signal-list             the ranked rows: ticker, name, one figure
 *   .is-followed             a followed company's row in any other column
 *   .signals-week            a week page; .signals-week__nav its week links
 */
@layer components {
  .signals {
    display: grid;
    gap: var(--space-md);
  }

  .signals--brief .signal-list__row:nth-child(n + 4) {
    @media (width < 640px) {
      display: none;
    }
  }

  .signals__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);

    & > .heading {
      margin: 0;
    }
  }

  .signals__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row dense;
    align-items: start;
    gap: var(--space-lg) var(--space-xl);

    @media (width >= 640px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (width >= 1024px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    @media (width >= 1280px) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  .signal-column {
    display: grid;
    gap: var(--space-2xs);
    min-inline-size: 0;
    padding-block-start: var(--space-xs);
    border-block-start: var(--rule-hairline);
  }

  .signal-column--lead {
    @media (width >= 1024px) {
      grid-column: span 2;
      grid-row: span 2;
      border-block-start: var(--rule-heavy);
    }
  }

  .signal-column--followed {
    padding-inline: var(--space-xs);
    padding-block-end: var(--space-xs);
    border-block-start: var(--rule-heavy);
    background-color: var(--color-accent-tint);

    @media (width >= 640px) {
      grid-column: span 2;
    }
  }

  .signal-column__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
    font-size: var(--text-ui-sm);
    white-space: nowrap;

    & > .heading {
      margin: 0;
      white-space: normal;
    }
  }

  .signal-column__note,
  .signal-column__empty {
    margin: 0;
    color: var(--color-ink-muted);
    font-family: var(--font-prose);
    font-size: var(--text-meta);
    font-style: italic;
    line-height: var(--leading-meta);
  }

  .signal-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .signal-list__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-xs);
    padding-block: var(--space-3xs);
    border-block-end: var(--rule-hairline);
    font-size: var(--text-data);
    line-height: var(--leading-data);

    &.is-followed {
      background-color: var(--color-accent-tint);
    }

    @media (pointer: coarse) {
      min-block-size: 44px;
    }
  }

  .signal-list__ticker {
    color: var(--color-link);
    font-weight: var(--weight-semibold);
    text-decoration: none;

    &:hover {
      color: var(--color-link-hover);
      text-decoration: underline;
    }
  }

  .signal-list__name {
    overflow: hidden;
    color: var(--color-ink-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .signal-list__label {
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
    white-space: nowrap;
  }

  .signals-week {
    display: grid;
    gap: var(--space-lg);
  }

  .signals-week__head {
    display: grid;
    gap: var(--space-xs);

    & > .heading {
      margin: 0;
    }
  }

  .signals-week__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: var(--text-ui-sm);
  }
}