/*
 * Librarium Militaris: the cross-reference.
 *
 * Tabs of related games under one report. Every panel ships with the page and
 * the report controller decides which one shows, so switching costs nothing.
 */

@layer components {
  .crossref {
    max-width: var(--shell);
    margin: var(--space-16) auto 0;
    padding: var(--space-32) var(--gutter);
    position: relative;
    z-index: var(--z-raised);
    border-top: 1px solid var(--color-border-soft);
  }

  .crossref__title {
    margin-bottom: var(--space-24);
    color: var(--color-ink-bright);
    font-family: var(--font-heading);
    font-size: var(--text-20);
    line-height: var(--leading-28);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
  }

  /* The strip scrolls sideways on a phone rather than wrapping: a tab row that
     wraps stops reading as one row of choices. Its own scrollbar is hidden,
     because the overflowing tab is the affordance. */
  .crossref__tabs {
    display: flex;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;

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

  .crossref__tab {
    --crossref-tab-color: var(--color-ink-dim);
    --crossref-tab-edge: transparent;

    flex: none;
    padding: 0 var(--space-4) var(--space-8);
    border-bottom: 2px solid var(--crossref-tab-edge);
    color: var(--crossref-tab-color);
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-sm);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);

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

    &.is-on {
      --crossref-tab-color: var(--color-ink-bright);
      --crossref-tab-edge: var(--color-accent);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }
}