---
// TopBar — the three-cell topbar shared by /models/, /agents/, /skills/,
// /summary/. Each slot is independent; the layout is a flex row with
// `justify-content: space-between`.
//
// The chapter pages use:
//   <a>← ROUTE MAP</a> | <span>01 / MODELS</span> | <a>field guide ↗</a>
//
// The brief's watch-for: callers that mark a link as the current page
// should set `aria-current="page"` on that link. The component does not
// impose it — slot content is preserved verbatim. This is the only
// indication of location for assistive tech on these pages, so losing
// it would be a real regression.

interface Props {
  /** Optional HTML id for the topbar. */
  id?: string;
}

const { id } = Astro.props;
---

<header class="top" id={id}>
  <div class="cell"><slot name="previous" /></div>
  <div class="cell"><slot name="center" /></div>
  <div class="cell"><slot name="next" /></div>
</header>

<style>
  .top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    font: 700 var(--step-0) monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cell {
    /* Each cell is a flex item; content is preserved verbatim from the
       slot. Callers can put anchors, spans, navs, or anything else here. */
  }

  .top :global(a) {
    color: var(--ink);
    text-decoration: none;
  }

  .top :global(a:focus-visible) {
    outline: 3px solid var(--red);
    outline-offset: 2px;
  }

  /* The middle cell collapses on phones — the chapter number span is the
     least informative piece at narrow widths. */
  @media (max-width: 560px) {
    .cell:nth-child(2) {
      display: none;
    }
  }
</style>
