/*
 * 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__top            the homepage's band: the reader's companies and
 *                            "Filed today", two equal halves; --alone when
 *                            the reader follows nothing, the lead's list
 *                            then set in two columns
 *   .signals__grid           the other signals as masonry (multi-column):
 *                            each as long as its list, no row to hold open;
 *                            on a week page, the same at full length
 *   .signal-column           one signal: heading, note, list or empty state
 *   .signal-column--lead     "Filed today" on the homepage, on a heavy rule
 *   .signal-column--followed a signed-in reader's own companies, 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__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2xl) var(--space-xl);
    margin-block-end: var(--space-lg);

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

  .signals__top--alone {
    grid-template-columns: minmax(0, 1fr);

    & .signal-list {
      @media (width >= 1024px) {
        columns: 2;
        column-gap: var(--space-xl);
      }
    }

    & .signal-list__row {
      break-inside: avoid;
    }
  }

  .signals__grid {
    columns: 17rem 5;
    column-gap: var(--space-xl);

    & > .signal-column {
      break-inside: avoid;
      margin-block-end: var(--space-2xl);
    }
  }

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

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