/* docs-nav.css — one bar across every document in docs/.
 *
 * WHY A SHARED FILE RATHER THAN A BLOCK PASTED INTO NINETEEN PAGES. The pasted
 * version is the one that goes stale: a document added next month gets the bar
 * from whichever page was copied, and the bar on the oldest page keeps pointing
 * at a file that moved. One file, linked, is the only version that can be
 * corrected once.
 *
 * WHY IT CARRIES ITS OWN NAMESPACE. Every document here has its own inline
 * <style> with its own h1, its own table, its own .note. Some are light-only,
 * some follow the system theme, and the palettes disagree. So every rule below
 * is scoped under .dnav and every value is stated outright rather than inherited
 * -- a bar that picked up the host page's colours would be unreadable on about
 * half of them.
 *
 * The bar does not stick. These are long documents read top to bottom, and a
 * strip held over the text costs more than it saves on a phone.
 */

.dnav {
  font: 500 13px/1.4 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0 0 2rem;
  padding: 0 0 .85rem;
  border-bottom: 1px solid #e2e8f0;
}

/* Horizontal scroll rather than a wrap to three lines on a narrow screen, and
 * the scroll is INSIDE the bar so the page body never moves sideways. Two live
 * pages once scrolled sideways at 390px because a nowrap rule reached prose
 * through a descendant selector; the fix is the same shape as the lesson. */
.dnav__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .55rem;
  max-width: 100%;
}

.dnav__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #64748b;
  margin-right: .15rem;
  white-space: nowrap;
}

.dnav__row + .dnav__row { margin-top: .5rem; }

.dnav a {
  color: #1d4ed8;
  text-decoration: none;
  padding: .2rem .45rem;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.dnav a:hover { background: #eff6ff; border-color: #bfdbfe; }

/* Focus is drawn, not assumed. Several of these pages set no :focus style at
 * all, so without this the bar is invisible to a keyboard. */
.dnav a:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

/* The page you are on is a plain span, not a link to itself. A link that
 * reloads the same document tells the reader nothing and costs a click. */
.dnav__here {
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: .2rem .45rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .dnav { border-bottom-color: #242a35; }
  .dnav__label { color: #98a1b2; }
  .dnav a { color: #8fa9e8; }
  .dnav a:hover { background: #131822; border-color: #2e3a52; }
  .dnav a:focus-visible { outline-color: #8fa9e8; }
  .dnav__here { color: #e6e8ec; background: #1a212e; border-color: #39435a; }
}

@media print { .dnav { display: none; } }