/* The header, in three tiers (build_view.py, dev/adr/036): a lens switcher, the
   current lens's own navigation, and an inert legend. One header on every page;
   only the tier-2 contents change with the lens. The active marker is never a
   weight change, so a row keeps its width and nothing shifts when the selection
   moves. */
header { position:sticky; top:0; z-index:5; background:var(--bg);
  border-bottom:1px solid var(--line); padding:14px 20px; }

/* --- Tier 1: the lens switcher --- */
/* The wordmark is the one collection (home); the lenses are the ways of seeing
   it. The active lens is a soft accent-tinted pill: you are inside that mode.
   A shape, deliberately unlike the tier-2 underline below, so the two rows never
   read as the same kind of control. */
.tier1 { display:flex; align-items:center; gap:26px; margin-bottom:12px; }
.wordmark { font-size:20px; font-weight:750; letter-spacing:-.02em;
  color:var(--fg); text-decoration:none; }
.wordmark:hover { color:var(--accent); }
.lenses { display:flex; align-items:center; gap:5px; }
.lens { font-size:15.5px; font-weight:550; color:var(--muted); text-decoration:none;
  white-space:nowrap; padding:5px 12px; border-radius:8px; }
.lens:hover { color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent); }
.lens.on { color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent); }

/* --- Tier 2 + tier 3 share one row: navigation left, legend/count right --- */
.row2 { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }

/* Tier 2, the Library: category filter chips (a glyph, the kind, its count).
   Buttons, driven by library.js through data-cat; active by colour + underline,
   the light in-place marker. A kind the search empties greys out in place, so
   the row never reflows. */
.catnav { display:flex; gap:2px; flex-wrap:wrap; align-items:baseline; }
.catbtn { cursor:pointer; user-select:none; border:none; background:transparent;
  color:var(--fg); font:inherit; font-size:14px; font-weight:550;
  text-decoration:none; padding:3px 9px; border-radius:6px;
  display:inline-flex; align-items:center; gap:6px; }
.cico { width:15px; height:15px; opacity:.8; flex:none; }
.catbtn.on .cico { opacity:1; }
.catbtn:hover { color:var(--accent); }
.catbtn.on { color:var(--accent); text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:4px; }
/* The number sits in a fixed slot (widest count in the collection, tabular
   figures) so a chip is the same width whatever its count, and the row never
   reflows as the search changes what each kind holds. */
.catbtn .n { min-width:var(--count-ch); font-size:12px; font-weight:400;
  color:var(--muted); font-variant-numeric:tabular-nums; }
.catbtn[disabled] { color:var(--muted); opacity:.4; cursor:default; }
.catbtn[disabled] .cico { opacity:.4; }
.catbtn[disabled]:hover { color:var(--muted); }

/* Tier 2, the other lenses: plain link rows (Shelves places, 3D boxes, Timeline
   years), dot-separated, active by the same underline as a category. */
.lensnav { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px; }
.lensnav a { font-size:14px; font-weight:550; color:var(--fg); text-decoration:none;
  padding:3px 9px; border-radius:6px; white-space:nowrap; }
.lensnav a:hover { color:var(--accent); }
.lensnav a.on { color:var(--accent); text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:4px; }
.sep { color:var(--muted); opacity:.4; align-self:center; }

.lens:focus-visible, .wordmark:focus-visible, .catbtn:focus-visible,
.lensnav a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Tier 3, the legend (and the Library's live count in the same slot): quiet by
   design, a caption not a control. No hover, no box, muted, tabular figures;
   its silence is what says it describes rather than acts. */
#count { color:var(--muted); font-weight:400; font-size:13px; opacity:.7;
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.legend { font-size:12.5px; color:var(--muted); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.legend .lead { opacity:.65; margin-right:8px; }
.legend .k + .k::before { content:"\00b7"; margin:0 7px; opacity:.5; }

@media (max-width:600px) {
  header { padding:10px 12px; }
  /* The lens row may wrap under the wordmark rather than push the header wider
     than the screen. */
  .tier1 { gap:10px 16px; margin-bottom:10px; flex-wrap:wrap; }
  .lenses { gap:3px; }
  .lens { font-size:14px; padding:4px 10px; }
  .row2 { flex-wrap:wrap; }
  /* min-width:0 lets a long tier-2 row shrink to the viewport and scroll its own
     overflow instead of widening the header and dragging the right slot off
     screen. */
  .catnav, .lensnav { flex-wrap:nowrap; overflow-x:auto; min-width:0;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .catnav::-webkit-scrollbar, .lensnav::-webkit-scrollbar { display:none; }
  /* The count/legend take their own full-width line, right-aligned, so they stay
     on screen however wide the navigation runs. */
  #count, .legend { width:100%; text-align:right; }
}