/*
 * The following strip (shared/_following; tasks/redesign, D4): a signed-in
 * reader's follows as heat tiles inside the masthead — under its double
 * rule, over the section row — on every page, then the [+] that edits them
 * and the watchlist's export.
 *
 *   .heat-tile             one company: the ticker over the day's change, on
 *                          its band's ramp step (WatchlistEntry::HEAT_CLASSES)
 *   .heat-tile--none       no change or no price yet: the paper, a muted dash
 *   .heat-tile__tip        the name, price and change, on hover and focus
 *
 * The tiles are one line that scrolls sideways inside the strip, never the
 * page, so the strip is one fixed height however many companies a reader
 * follows. A scroll box clips anything that leaves it, so the tooltip is
 * anchored to its tile and positioned against the viewport (CSS anchor
 * positioning); a browser without it shows no tooltip, and the tile's
 * accessible name still says everything the tooltip would.
 */
@layer components {
  .heat-tile {
    position: relative;
    display: inline-grid;
    flex: none;
    align-content: center;
    justify-items: center;
    min-inline-size: 3.75rem;
    min-block-size: 2.5rem;
    padding: var(--space-3xs) var(--space-xs);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-ui);
    line-height: 1.15;
    text-decoration: none;

    &:hover {
      box-shadow: inset 0 0 0 1px var(--color-ink);
    }

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
    }
  }

  .heat-tile__ticker {
    font-size: var(--text-caps);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
  }

  .heat-tile__change {
    font-size: var(--text-meta-xs);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .heat-tile--gain-3 { background-color: var(--color-ramp-gain-3); color: var(--color-ramp-gain-3-ink); }
  .heat-tile--gain-2 { background-color: var(--color-ramp-gain-2); color: var(--color-ramp-gain-2-ink); }
  .heat-tile--gain-1 { background-color: var(--color-ramp-gain-1); color: var(--color-ramp-gain-1-ink); }
  .heat-tile--loss-1 { background-color: var(--color-ramp-loss-1); color: var(--color-ramp-loss-1-ink); }
  .heat-tile--loss-2 { background-color: var(--color-ramp-loss-2); color: var(--color-ramp-loss-2-ink); }
  .heat-tile--loss-3 { background-color: var(--color-ramp-loss-3); color: var(--color-ramp-loss-3-ink); }

  .heat-tile--none {
    box-shadow: inset 0 0 0 1px var(--color-rule);

    & .heat-tile__change {
      color: var(--color-ink-muted);
    }
  }

  .heat-tile__tip {
    display: none;
  }

  @supports (anchor-name: --heat-tile) {
    .heat-tile:is(:hover, :focus-visible) {
      anchor-name: --heat-tile;

      & .heat-tile__tip {
        position: fixed;
        position-anchor: --heat-tile;
        inset-block-start: calc(anchor(bottom) + var(--space-2xs));
        inset-inline-start: anchor(left);
        z-index: 70;
        display: grid;
        gap: var(--space-3xs);
        padding: var(--space-xs) var(--space-sm);
        border: var(--rule-width) solid var(--color-ink);
        background-color: var(--color-field);
        box-shadow: 3px 3px 0 var(--color-ink);
        color: var(--color-ink);
        text-align: start;
        white-space: nowrap;
        position-try-fallbacks: flip-inline;
      }
    }
  }

  .heat-tile__name {
    font-family: var(--font-prose);
    font-size: var(--text-input);
    font-weight: var(--weight-semibold);
  }

  .heat-tile__quote {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-semibold);
  }

  /* The strip sits inside the masthead, under its double rule and over the
     section row (owner, 2026-10-04): a band of the raised paper one tile
     tall. Its text lines up with the masthead's above and below it; the
     band itself hangs past that edge on both ends, as far as the double
     rule above it does (`--masthead-bleed`, components/masthead.css). */
  .following__row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: 3rem;
    margin-inline: calc(-1 * var(--masthead-bleed));
    padding-inline: var(--masthead-bleed);
    border-block-end: var(--rule-hairline);
    background-color: var(--color-surface-raised);
  }

  .following__label {
    flex: none;
  }

  /* The frame holds the tiles and the [+]; the tiles scroll, the [+] stays. */
  .following__frame {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: var(--space-xs);
    min-inline-size: 0;
  }

  .following__tiles {
    display: flex;
    flex: 0 1 auto;
    gap: 1px;
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .following__empty {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  /* Not positioned: the panel it opens hangs from the strip's row. */
  .following__add {
    flex: none;
  }

  .following__add-summary {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: var(--rule-width) solid var(--color-ink);
    color: var(--color-ink);
    font-size: var(--text-h3);
    line-height: 1;
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }

    &:hover,
    [open] > & {
      background-color: var(--color-field);
    }

    @media (pointer: coarse) {
      inline-size: var(--target-min);
      block-size: var(--target-min);
    }
  }

  /* The panel drops from the strip's right edge, over the page. */
  .following__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2xs));
    inset-inline-end: 0;
    z-index: 60;
    display: grid;
    gap: var(--space-sm);
    inline-size: min(22rem, calc(100vw - 2 * var(--gutter)));
    padding: var(--space-md);
    border: var(--rule-width) solid var(--color-ink);
    background-color: var(--color-field);
    box-shadow: var(--shadow-overlay);
  }

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

  /* The close sits in the head's far corner, the counter beside the label. */
  .following__close {
    margin-inline-start: auto;
  }

  .following__note {
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-ui-sm);
  }

  .following__entries {
    display: grid;
    max-block-size: 16rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
  }

  .following__entry {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    border-block-end: var(--rule-hairline);
    font-size: var(--text-ui-sm);
  }

  .following__entry-ticker {
    flex: none;
    inline-size: 3.5rem;
    color: var(--color-link);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

  .following__entry-name {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    color: var(--color-ink-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
   * "Export watchlist" after the [+]: a link, or the words and the lock. The
   * link's underline is dashed, as the company chrome's export is: a trigger's
   * border would sit at the foot of this 2.5rem box, not under the words.
   */
  .following__export {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: 2.5rem;
    font-size: var(--text-ui-sm);
    white-space: nowrap;

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
    }

    &:is(a) {
      text-decoration-style: dashed;
    }

    &:is(span) {
      color: var(--color-ink-muted);
    }
  }
}