/*
 * nav.css
 * Navigation patterns: breadcrumbs, pagination, and the sidebar nav list.
 *
 * All three take their active state from `[aria-current]` rather than a
 * class, for the reason spelled out in tabs.css — a class lets the visual
 * state and the announced state drift apart. `aria-current="page"` is the
 * correct attribute for "this is the thing you are looking at", and it is
 * what a screen reader announces, so it is also what the CSS keys off.
 *
 * Every pattern here expects a landmark with a label, because a page with
 * three unlabelled <nav>s is three identical entries in a screen reader's
 * landmark list:
 *
 *   <nav class="breadcrumb" aria-label="Breadcrumb">
 *   <nav class="pagination" aria-label="Pagination">
 *   <nav class="sidebar"    aria-label="Main">
 */

/*
 * ── Breadcrumb ──────────────────────────────────────────────────────
 *
 *   <nav class="breadcrumb" aria-label="Breadcrumb">
 *     <ol>
 *       <li><a class="link" href="/">Home</a></li>
 *       <li><a class="link" href="/invoices">Invoices</a></li>
 *       <li><a aria-current="page">INV-1042</a></li>
 *     </ol>
 *   </nav>
 *
 * <ol> because the order is the hierarchy. The last crumb keeps its <a>
 * without an href — it is the current page, so it is not a link, but
 * staying an <a> keeps it in the same visual and semantic run.
 */
.breadcrumb > ol {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-xs);
  list-style:  none;
  margin:      0;
  padding:     0;
  font-size:   var(--text-md);
}

.breadcrumb li {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-xs);
}

/*
 * The separator is decoration, so it gets empty alternative text — the
 * `/ ""` half of the content shorthand — and is not announced. Without
 * that, some screen readers read "slash" between every crumb.
 */
.breadcrumb li + li::before {
  content: var(--breadcrumb-separator, "/") / "";
  color:   var(--ink-mute);
}

.breadcrumb [aria-current="page"] {
  color:           var(--ink);
  font-weight:     600;
  text-decoration: none;
  cursor:          default;
}

/*
 * ── Pagination ──────────────────────────────────────────────────────
 *
 *   <nav class="pagination" aria-label="Pagination">
 *     <a class="pagination-link" href="?p=1" rel="prev">Previous</a>
 *     <a class="pagination-link" href="?p=1">1</a>
 *     <a class="pagination-link" href="?p=2" aria-current="page">2</a>
 *     <span class="pagination-gap" aria-hidden="true">…</span>
 *     <a class="pagination-link" href="?p=9">9</a>
 *     <a class="pagination-link" href="?p=3" rel="next">Next</a>
 *   </nav>
 *
 * The control is a link, not a page. Shortening the class to `.page` puts
 * one word on two subjects: `Page` is a tier in the vocabulary (Screen,
 * Pane, View, Tabs), and `Previous`/`Next` carry this class while being
 * neither a page nor numbered.
 *
 * `.pagination-link` is in the chip lineage (chip.css), so it gets
 * inline-flex centering and the auto-contrast machinery for free — the
 * current page is a solid fill, and its text color is derived from that
 * fill's luminance like any other filled thing in the system.
 */
.pagination {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-2xs);
}

.pagination-link {
  min-inline-size: 2rem;
  padding:         var(--space-xs) var(--space-md);
  border-radius:   var(--btn-radius);
  font-size:       var(--text-md);
  font-weight:     600;
  color:           var(--ink-soft);
  text-decoration: none;
  cursor:          pointer;
  transition:      background var(--motion-fast), color var(--motion-fast);
}

.pagination-link:hover:not([aria-current="page"]):not([aria-disabled="true"]) {
  background: var(--surface-sunken);
  color:      var(--ink);
}

/* Focus ring: focus.css. */

.pagination-link[aria-current="page"] {
  --tone-fill: var(--bg-mix, var(--color-primary));
  background:  var(--fill, var(--tone-fill));
  color:       var(--on-fill, white);
  cursor:      default;
}

.pagination-link[aria-disabled="true"] {
  opacity: 0.45;
  cursor:  not-allowed;
}

.pagination-gap {
  padding:     var(--space-xs) var(--space-2xs);
  color:       var(--ink-mute);
  user-select: none;
}

/*
 * ── Nav list — the sidebar's links ──────────────────────────────────
 *
 *   <nav class="sidebar" aria-label="Main">
 *     <div class="navlist-label">Workspace</div>
 *     <ul class="navlist">
 *       <li><a class="navlink" href="/dash" aria-current="page">Dashboard</a></li>
 *       <li><a class="navlink" href="/inv">Invoices <span class="pill muted">7</span></a></li>
 *     </ul>
 *   </nav>
 *
 * Use this, not `.items.menu`, for anything navigable. `.items.menu .item`
 * styles an <li> to look clickable, but an <li> is not focusable and takes
 * no keyboard input — the hover state writes a check the markup cannot
 * cash. `.navlink` goes on a real <a>, so it is focusable, activatable and
 * announced as a link.
 */
.navlist {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3xs);
  list-style:     none;
  margin:         0;
  padding:        0;
}

.navlink {
  display:         flex;
  align-items:     center;
  gap:             var(--space-sm);
  padding:         0.4375rem var(--space-md);
  border-radius:   var(--btn-radius);
  font-size:       var(--text-md);
  font-weight:     500;
  color:           var(--ink-soft);
  text-decoration: none;
  transition:      background var(--motion-fast), color var(--motion-fast);
}

.navlink:hover {
  background: var(--surface-sunken);
  color:      var(--ink);
}

/* Focus ring: focus.css, in the inset set — the sidebar's edge would
   otherwise clip an outward ring. */

.navlink[aria-current="page"] {
  background:  color-mix(in srgb, var(--bg-mix, var(--color-primary)) 12%, var(--surface));
  color:       var(--bg-mix, var(--color-primary));
  font-weight: 600;
}

/* A trailing count or badge sits at the far end. */
.navlink > .pill,
.navlink > .badge {
  margin-inline-start: auto;
}

/*
 * A Kicker, placed in a navlist. bars.css owns what it LOOKS like — one owner
 * for a shape that had drifted across three copies (`FJS-D253`) — and what
 * stays here is the only part that is nav's: where it sits between groups.
 */
.navlist-label {
  padding: var(--space-lg) var(--space-md) var(--space-2xs);
}
