/*
 * The homepage (homepage/show and frames/homepage/*): three index cards
 * across the top, the market map under them, then the news.
 *
 *   .home            the page; on the cooler ground, so the white cards lift
 *   .index-cards     the three cards — a sideways-scrolling strip below
 *                    1024px, where three would be too narrow for a level and
 *                    a trend line side by side
 *   .index-card      one index: name and symbol, level, today's chip, trend
 *                    line, and a footer with the year and the future
 *   .change-chip     a change on a tint of its own sign
 *   .trend-line      the SVG from `trend_line_tag`
 *   .market-map      the treemap card: header, range switch, legend, chart
 *   .ramp-legend     the six colour steps and the two ends of the scale
 *   .home__news      the news, its heading outside any card and its days side
 *                    by side
 */
@layer pages {
  .app:has(.home) {
    background-color: var(--color-ground-cool);
  }

  .home {
    /* The finished card's height, which its placeholder reserves. */
    --index-card-height: 8.5625rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  /* Index cards */

  .index-cards {
    display: flex;
    gap: var(--space-sm);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-block-end: var(--space-2xs);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;

    & > .index-card {
      flex: none;
      inline-size: 18.25rem;
      scroll-snap-align: start;
    }

    @media (width >= 1024px) {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-lg);
      margin-inline: 0;
      padding: 0;
      overflow: visible;

      & > .index-card {
        inline-size: auto;
      }
    }
  }

  .index-card {
    padding: var(--space-sm) var(--space-md);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);

    @media (width >= 1024px) {
      padding: var(--space-md) var(--space-lg) var(--space-sm);
    }
  }

  .index-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .index-card__name {
    margin-block-end: 0;
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
    font-weight: var(--weight-semibold);

    & .link {
      color: var(--color-ink);
    }
  }

  .index-card__symbol {
    color: var(--color-ink-subtle);
    font-size: var(--text-table-head);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
  }

  .index-card__body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-block-start: var(--space-xs);
  }

  .index-card__level {
    flex: none;
  }

  .index-card__today {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-xs);
  }

  .index-card__caption {
    color: var(--color-ink-subtle);
    font-size: var(--text-ui-sm);
  }

  .index-card__trend {
    flex: 0 1 11.25rem;
    min-inline-size: 5rem;
    block-size: 3rem;

    @media (width >= 1024px) {
      block-size: 3.5rem;
    }
  }

  .index-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-sm);
    margin-block-start: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-width) solid var(--color-rule);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);

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

    & .index-card__future {
      color: var(--color-ink);
      font-weight: var(--weight-medium);
    }
  }

  /* The chip's tint follows the sign of what is in it; a flat day is
     neutral. */
  .change-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    font-size: var(--text-ui-sm);

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

    &:has(.figure--gain) { background-color: var(--color-gain-tint); }
    &:has(.figure--loss) { background-color: var(--color-loss-tint); }
  }

  /* The path is drawn in a fixed box and stretched to fit; the stroke keeps
     its width however far it is stretched. */
  .trend-line {
    display: block;
    overflow: visible;
  }

  .trend-line__line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .trend-line--gain {
    & .trend-line__line { stroke: var(--color-gain); }
    & .trend-line__area { fill: var(--color-accent-tint); }
  }

  .trend-line--loss {
    & .trend-line__line { stroke: var(--color-loss); }
    & .trend-line__area { fill: var(--color-loss-tint); }
  }

  /* Market map */

  .market-map {
    /* The chart's height, which its placeholder reserves too: 585px from
       768px, what the treemap has always been drawn at. */
    --market-map-height: 22rem;

    @media (width >= 768px) {
      --market-map-height: 36.5625rem;
    }
  }

  .market-map__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-xl);
  }

  .market-map__title {
    margin-block-end: 0;
  }

  .market-map__summary {
    margin-block-start: var(--space-2xs);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
    line-height: var(--leading-ui-sm);
  }

  .market-map__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-xl);

    @media (width < 768px) {
      flex-direction: column;
      align-items: stretch;
      inline-size: 100%;
    }
  }

  .market-map__chart {
    block-size: var(--market-map-height);
    margin-block-start: var(--space-md);
  }

  .ramp-legend {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .ramp-legend__bound {
    color: var(--color-ink-subtle);
    font-size: var(--text-meta-xs);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .ramp-legend__steps {
    display: flex;
    flex: 1;
    gap: var(--space-3xs);
  }

  .ramp-legend__step {
    flex: 1;
    min-inline-size: 1.5rem;
    block-size: 0.8125rem;
    border-radius: var(--radius-xs);
    background-color: var(--swatch);
  }

  /* News */

  .home__news > .heading {
    margin-block: var(--space-md) var(--space-sm);
  }

  /* The filter is a panel of its own on this page, its refresh button at the
     end of the row rather than under it; the days sit side by side, each a
     single column under a small-caps date, rather than one under another. */
  .home__news {
    & .news-filter {
      padding: var(--space-sm) var(--space-md);
      border: var(--rule-width) solid var(--color-rule);
      border-radius: var(--radius-lg);
      background-color: var(--color-surface);

      @media (width >= 1024px) {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: var(--space-lg);
      }
    }

    & .news-filter__group {
      padding: 0;
      border-radius: 0;
      background-color: transparent;

      @media (width >= 768px) {
        & + .news-filter__group {
          padding-inline-start: var(--space-lg);
          border-inline-start: var(--rule-width) solid var(--color-rule);
        }
      }
    }

    & .news-feed__days {
      grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
      column-gap: var(--space-xl);
      align-items: start;
    }

    & .news-day {
      padding-block-end: 0;
      border-block-end: 0;

      & > .heading {
        margin-block-end: var(--space-2xs);
        color: var(--color-ink-muted);
        font-family: var(--font-ui);
        font-size: var(--text-meta);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
      }
    }

    & .news-day__articles {
      columns: auto;
    }

    & .news-item {
      border-block-start: var(--rule-width) solid var(--color-rule);
    }
  }
}