/* Compact header shared across Lineup / My picks / Crew tabs.
 * Three rows — crew strip, primary tabs, day picker — totalling ~95px.
 * Spec §3.1. Replaces .lineup-header + .lineup-tabs in
 * lineup_tabs.css once the old partials are retired.
 */

@layer components {
  .compact-header {
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: 0.375rem;
    padding: 0.375rem var(--inline-space) var(--block-space-s);
    background: var(--color-canvas);
    /* Stick just below the sticky top nav so the header isn't partially
       hidden behind it when scrolling. --top-nav-inset is 4rem on web,
       0 in the native shell (no web top nav there). */
    position: sticky;
    inset-block-start: var(--top-nav-inset);
    z-index: 10;
  }

  /* ── Row 1: crew strip ───────────────────────────────────────────── */

  .compact-header__crew-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    min-height: 1.75rem;
  }

  .compact-header__crew-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-ink-muted);
    letter-spacing: 0.01em;

    /* Truncate long crew names so the avatar strip stays pinned right. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* ── Row 2: primary tabs ─────────────────────────────────────────── */

  .primary-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    min-height: var(--touch-min);
  }

  /* 2-tab variant — used by Maps (Live / Festival map). */
  .primary-tabs--two {
    grid-template-columns: repeat(2, 1fr);
    padding: 0.375rem var(--inline-space);
  }

  .primary-tabs__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 0.625rem;
    min-block-size: var(--touch-min);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background 150ms ease, color 150ms ease;

    &:hover { color: var(--color-ink); }
  }

  .primary-tabs__tab--active {
    background: var(--color-ink);
    color: var(--color-canvas);

    &:hover { color: var(--color-canvas); }
  }

  /* ── Row 3: day picker ───────────────────────────────────────────── */

  .day-picker {
    display: flex;
    gap: var(--inline-space-l);
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 1.75rem;

    &::-webkit-scrollbar { display: none; }
  }

  .day-picker__pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    padding-block: 0.5rem;
    min-block-size: var(--touch-min);
    font-size: 0.8125rem;
    font-weight: 500;
    /* Slightly tinted muted ink keeps the visual hierarchy readable
     * (6.0:1 over canvas, AA for small text) without the opacity
     * blend that previously dropped the effective ratio to 4.30:1. */
    color: color-mix(in oklch, var(--color-ink-muted) 88%, var(--color-canvas));
    text-decoration: none;
    white-space: nowrap;
    border-block-end: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;

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

  .day-picker__pill--active {
    color: var(--color-ink);
    border-block-end-color: oklch(var(--lch-flare));
  }

  /* 3px dot under inactive days that have at least one starred act. */
  .day-picker__dot {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: oklch(var(--lch-flare));
  }

  /* ── Entry stagger (respects reduced-motion) ─────────────────────── */

  @media (prefers-reduced-motion: no-preference) {
    .compact-header__crew-strip,
    .primary-tabs,
    .day-picker {
      @starting-style { opacity: 0; translate: 0 -4px; }
      transition: opacity 180ms ease, translate 180ms ease;
    }
  }
}