/*
 * 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-days             the homepage's last seven trading days, one
 *                            band of equal cells between hairlines, the day
 *                            drawn inverted (aria-current); on a phone the
 *                            number sits over the weekday and counts go
 *   .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
 *   .signal-timeline           its weeks as a strip of tiles (signals/_timeline),
 *                            newest on the right and anchored there, the
 *                            page's week
 *                            aria-current, scrolling sideways once it is
 *                            wider than the page
 */
@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-days {
    min-inline-size: 0;
  }

  .signal-days__list {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-block: var(--rule-hairline);
    list-style: none;
  }

  .signal-days__item + .signal-days__item {
    border-inline-start: var(--rule-hairline);
  }

  .signal-days__link {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      background-color: var(--color-row-hover);
    }

    &[aria-current="page"] {
      background-color: var(--color-ink);
      color: var(--color-ink-inverse);
    }

    @media (width < 768px) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      gap: 0;
      min-block-size: 44px;
      padding-inline: 0;
    }
  }

  .signal-days__weekday {
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);

    [aria-current="page"] > & {
      color: inherit;
    }
  }

  .signal-days__date {
    font-family: var(--font-prose);
    font-weight: var(--weight-semibold);
  }

  .signal-days__count {
    color: var(--color-ink-muted);
    font-size: var(--text-meta-xs);

    [aria-current="page"] > & {
      color: inherit;
    }

    @media (width < 768px) {
      display: none;
    }
  }

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

    /* First in its card (a week page, which has no heading row), the card's
       own heavy rule is its top; a second would draw a double line. */
    .signals > .signals__top:first-child > & {
      border-block-start: 0;
    }
  }

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

  .signal-timeline {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .signal-timeline__list {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--space-sm);
    margin: 0;
    padding: 0 0 var(--space-xs);
    list-style: none;
  }

  .signal-timeline__item {
    flex: 0 0 auto;
    scroll-snap-align: end;
  }

  .signal-timeline__tile {
    display: grid;
    gap: var(--space-3xs);
    min-inline-size: 9rem;
    padding: var(--space-xs) var(--space-sm);
    border-block-start: var(--rule-hairline);
    color: var(--color-ink);
    text-decoration: none;

    &:hover {
      background-color: var(--color-row-hover);
    }

    &[aria-current="page"] {
      border-block-start: var(--rule-heavy);
      background-color: var(--color-accent-tint);
    }
  }

  .signal-timeline__span {
    font-family: var(--font-prose);
    font-size: var(--text-prose);
    font-weight: var(--weight-semibold);
  }

  .signal-timeline__meta {
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);

    [aria-current="page"] > & {
      color: var(--color-accent-strong);
    }
  }
}