@fluid-theme/core 0.4.3 → 2.0.0

package/src/components/nav.css

@@ -14,10 +14,67 @@
  *     </ul>
  *   </nav>
  *
+ * The bar is the page's other scheme by default (_docs/defaults.md): a dark
+ * bar on a light page, a light bar on a dark one; tokens.css flips every
+ * colour role on it. Content on the .container edges, no hairline unless
+ * sticky. Links: sans 500 in the text colour, underlined on hover; the
+ * current page gets a 2px underline. No pills, no blur, no lift.
+ *
+ * Small screens (a bar under 40rem), every nav without the 1.x .nav__toggle
+ * (that one folds its menu behind the button): the links take their own row
+ * under the brand; the space between them and their tracking tighten first,
+ * then they wrap in balanced rows (4 links: 2 + 2, never 3 + 1). Both only
+ * ever remove orphans. data-nav="fit" is accepted and does nothing extra.
+ *
  * Variants:
- *   data-variant="transparent" - Transparent background
- *   data-variant="elevated" - With shadow
- *   data-sticky - Sticky positioning
+ *   data-sticky - sticky, with a hairline under it
+ *   data-variant="transparent" - no background, the page's colours
+ *   data-bg="plain" - the page's colours on the page's background
+ *   data-bg="inverse" - the default; forces the flipped bar on a transparent nav
+ *
+ * Alignment follows the page (_docs/defaults.md): wrapped link rows inherit
+ * text-align, so <body data-align="center"> centres them; data-align="center"
+ * on the .nav, on the body or header it is a direct child of, or on the body
+ * of that header, also centres the masthead (the brand on its own row, the rest under it). The
+ * nearest setting wins.
+ *
+ * Modes, in the opt-in module nav-modes.css (dist/fluid-nav.min.css; link it
+ * after core, as the TOC module is). Without it each falls back to the plain nav.
+ *   data-sticky="links" - two rows: the brand row scrolls away, the links stick
+ *   data-nav="icon" - the brand shrinks to its .nav__brand-mark; the links
+ *     share its row:  <a class="nav__brand"><span class="nav__brand-mark"
+ *     aria-hidden="true">NE</span><span class="nav__brand-name">Name</span></a>
+ *   data-nav="compact" - a "+" button opens the links in a panel that slides
+ *     over from the end edge; the "+" turns into a close "×". No JS (popover):
+ *       <button class="nav__more" type="button" popovertarget="nav-panel">
+ *         <span class="sr-only">Menu</span></button>
+ *       <div class="nav__panel" id="nav-panel" popover>
+ *         <button class="nav__more" type="button" popovertarget="nav-panel"
+ *           popovertargetaction="hide"><span class="sr-only">Close menu</span></button>
+ *         <ul class="nav__menu" role="list">…</ul>
+ *       </div>
+ *     Without popover support, or on a wide bar, the panel is invisible to
+ *     layout and the links show as usual, so the markup is safe on every nav.
+ *   data-nav="compact drop" - the panel drops under the bar instead
+ *
+ * Tokens (a theme sets them on :root; the fallbacks are the defaults):
+ *   --nav-gap            link side padding, half the space between links (--space-3)
+ *   --nav-gap-min        the squeeze stops here (--space-2, 8px)
+ *   --nav-tracking       link letter-spacing (0em)
+ *   --nav-tracking-min   the squeeze stops here (= --nav-tracking)
+ *   --nav-wrap-align     start | center | end, for wrapped rows (unset: the
+ *                        page's alignment)
+ *   --nav-bg, --nav-ink  a bar colour and the colour of what is on it (text,
+ *                        links, toggles, marks, focus ring; not the CTA,
+ *                        button, badge or logo-mark fills); set both, on
+ *                        :root: --nav-bg: var(--accent-fill);
+ *                        --nav-ink: var(--on-accent-fill) (_docs/defaults.md)
+ *   --nav-glyph          the compact button's glyph ("+")
+ *   --nav-glyph-turn     how far it turns when open (45deg: + to ×)
+ *   --nav-panel-size     width of the compact side panel (min(20rem, 85vw))
+ *   --nav-stick-offset   how far a data-sticky="links" bar hides (set by the module)
+ *   --nav-sticky-size    jump-link clearance under a sticky bar (5rem; 13rem
+ *                        under 64rem, where the links may wrap)
  */
 
 @layer components {
@@ -26,152 +83,155 @@
      ======================================== */
 
   .nav {
-    /* Layout */
     display: flex;
+    /* Wrap here, not in the container query below: an element cannot query
+       its own container. */
+    flex-wrap: wrap;
     align-items: center;
-    gap: var(--space-6);
-    padding-block: var(--space-4);
-    padding-inline: var(--space-5);
-
-    /* Visual */
-    background-color: var(--_nav-bg, var(--color-background));
-    border-block-end: 1px solid var(--_nav-border, var(--color-border-subtle));
-
-    /* Container for responsive behavior */
+    gap: var(--space-2) var(--space-m);
+    padding-block: var(--space-s);
+    padding-inline: max(var(--page-edge), (100% - var(--container-content)) / 2);
+    background-color: var(--_nav-bg, var(--nav-bg, var(--color-background)));
+    border-block-end: var(--border-width) solid var(--_nav-border, transparent);
     container-type: inline-size;
     container-name: nav;
+    --color-focus: var(--nav-ink, var(--accent-ink));
+  }
+
+  /* A nav that is also a .container already sits on the content edges; the
+     edge padding (a % of the body, not of the nav) would take its width. */
+  .nav.container { padding-inline: 0; }
+
+  /* As the page's top bar, its paint still reaches the screen edges: a
+     border image outset paints past the box without adding scroll,
+     hairline included. Paint only, so content scrolled under a sticky
+     bar's sides stays clickable; forced colours keep the system Canvas. */
+  :is(body, body > header) > .nav.container {
+    --_p: var(--_nav-bg, var(--nav-bg, var(--color-background)));
+    border-image: linear-gradient(0deg, var(--_nav-border, var(--_p)) var(--border-width), var(--_p) 0) fill 0 / 0 / 0 100vmax;
+  }
+
+  @media (forced-colors: active) {
+    /* -source: lightningcss minifies the border-image shorthand "none" to
+       an empty, invalid declaration (CLAUDE.md Exceptions). */
+    :is(body, body > header) > .nav.container { border-image-source: none; }
   }
 
-  /* Sticky navigation */
   .nav[data-sticky] {
     position: sticky;
     inset-block-start: 0;
     z-index: var(--z-sticky);
-    backdrop-filter: blur(8px);
-    background-color: oklch(from var(--color-background) l c h / 0.9);
+    --_nav-border: var(--color-border);
+  }
+
+  /* A jump to #section must land below a sticky bar (WCAG 2.4.11). CSS
+     cannot read the bar's height (72px on one row; up to about 210px when
+     the links wrap on a phone), so the clearance is generous: too much
+     leaves a gap, too little hides the heading. A site with a known bar
+     sets --nav-sticky-size. Targets add their own scroll margin on top. */
+  :root:has(.nav[data-sticky]) { scroll-padding-block-start: var(--nav-sticky-size, 5rem); }
+
+  @media (width < 64rem) {
+    :root:has(.nav[data-sticky]) { scroll-padding-block-start: var(--nav-sticky-size, 13rem); }
   }
 
-  /* Transparent variant */
   .nav[data-variant="transparent"] {
     --_nav-bg: transparent;
     --_nav-border: transparent;
   }
 
-  /* Elevated variant */
-  .nav[data-variant="elevated"] {
-    --_nav-border: transparent;
-    box-shadow: var(--shadow-sm);
-  }
+  /* Over a hero, everything on it takes the hero's text colour. */
+  .nav[data-variant="transparent"]:not([data-bg="inverse"]) { --nav-ink: currentColor; }
 
+  /* After transparent on purpose: a forced inverse bar needs its paint. */
+  .nav[data-bg="inverse"] { --_nav-bg: var(--nav-bg, var(--color-background)); }
 
-  /* Brand / Logo - adopts active preset's font */
   .nav__brand {
-    font-family: var(--font-heading, var(--font-body, var(--font-system)));
-    font-size: var(--font-size-lg);
-    font-weight: var(--weight-semibold);
-    color: var(--color-text);
-    text-decoration: none;
     display: flex;
     align-items: center;
     gap: var(--space-2);
     flex-shrink: 0;
-    transition:
-      opacity var(--duration-normal) var(--ease-fluid),
-      font-family var(--duration-normal) var(--ease-fluid);
-  }
-
-  .nav__brand:hover {
-    opacity: 0.8;
+    font-family: var(--font-heading);
+    font-size: var(--step-1);
+    font-weight: calc(500 + var(--_dark-weight));
+    letter-spacing: -0.01em;
+    color: var(--nav-ink, var(--color-text));
+    text-decoration: none;
   }
 
-  .nav__brand img,
-  .nav__brand svg {
+  .nav__brand :is(img, svg) {
     block-size: 2rem;
     inline-size: auto;
   }
 
-  /* Active preset name indicator */
-  .nav__preset-name {
-    font-family: var(--font-heading, var(--font-body, var(--font-system)));
-    font-size: var(--font-size-xs);
-    font-weight: var(--weight-medium);
-    color: var(--accent);
-    letter-spacing: var(--tracking-wide);
-    text-transform: uppercase;
-    white-space: nowrap;
-    flex-shrink: 0;
-    transition:
-      color var(--duration-normal) var(--ease-fluid),
-      font-family var(--duration-normal) var(--ease-fluid);
-  }
-
-  .nav__preset-name:empty {
-    display: none;
-  }
-
-
-  /* Menu container */
   .nav__menu {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: var(--space-1);
+    gap: 0 var(--space-1);
     margin: 0;
-    margin-inline-start: auto; /* Default: push menu to end */
+    margin-inline-start: auto;
     padding: 0;
     list-style: none;
-    overflow: visible; /* Allow dropdowns to overflow */
+    overflow: visible;
   }
 
-  /* Menu items - ensure alignment and reset base styles */
   .nav__menu > li {
     display: flex;
     align-items: center;
-    margin: 0; /* Override base li margin that can cause misalignment */
-    position: relative; /* For dropdown positioning */
-  }
-
-  /* Keep menu at start (next to brand) */
-  .nav__menu[data-align="start"] {
-    margin-inline-start: 0;
+    margin: 0;
+    position: relative;
   }
 
-  /* Center menu */
-  .nav__menu[data-align="center"] {
-    margin-inline: auto;
-  }
+  .nav__menu[data-align="start"] { margin-inline-start: 0; --nav-wrap-align: start; }
+  .nav__menu[data-align="center"] { margin-inline: auto; --nav-wrap-align: center; }
 
+  /* Centred masthead: data-align="center" on the nav, its header or the
+     body (unless a nearer header or the nav sets its own), the brand on
+     its own row. */
+  :is(.nav[data-align="center"], :is(body, header)[data-align="center"] > .nav:not([data-align]), body[data-align="center"] > header:not([data-align]) > .nav:not([data-align])) { justify-content: center; }
+  :is(.nav[data-align="center"], :is(body, header)[data-align="center"] > .nav:not([data-align]), body[data-align="center"] > header:not([data-align]) > .nav:not([data-align])) > .nav__brand { flex-basis: 100%; justify-content: center; }
+  :is(.nav[data-align="center"], :is(body, header)[data-align="center"] > .nav:not([data-align]), body[data-align="center"] > header:not([data-align]) > .nav:not([data-align])) > .nav__actions { margin-inline: 0; }
+  /* :where(): the small-screen menu keeps its own (negative) margins. */
+  :where(.nav[data-align="center"], :is(body, header)[data-align="center"] > .nav:not([data-align]), body[data-align="center"] > header:not([data-align]) > .nav:not([data-align])) > :is(.nav__menu, .nav__panel) { margin-inline: 0; }
 
-  /* Navigation links */
-  .nav__link {
+  /* --_nav-pad and --_nav-track are the small-screen squeeze (below). */
+  :is(.nav__link, .nav__dropdown-trigger, .nav__dropdown-link) {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-medium);
-    line-height: 1; /* Prevent line-height variance affecting alignment */
-    color: var(--color-text-muted);
-    text-decoration: none;
-    border-radius: var(--radius-md);
-    white-space: nowrap; /* Prevent wrapping that can affect height */
-    transition:
-      color var(--duration-normal) var(--ease-fluid),
-      background-color var(--duration-normal) var(--ease-fluid);
+    gap: var(--space-1);
+    min-block-size: 2.75rem;
+    padding-inline: var(--_nav-pad, var(--nav-gap, var(--space-3)));
+    font-family: var(--font-body);
+    font-size: 0.9375rem;
+    font-weight: calc(500 + var(--_dark-weight));
+    line-height: 1;
+    letter-spacing: var(--_nav-track, var(--nav-tracking, 0em));
+    color: var(--nav-ink, var(--color-text));
+    white-space: nowrap;
+    text-decoration-line: none;
+    text-decoration-thickness: 0.06em;
+    text-underline-offset: 0.4em;
+    background: none;
+    border: 0;
+    border-radius: var(--radius-control);
+    cursor: pointer;
   }
 
-  .nav__link:hover {
-    color: var(--color-text);
-    background-color: var(--color-surface);
+  :is(.nav__link, .nav__dropdown-trigger, .nav__dropdown-link):hover {
+    text-decoration-line: underline;
+    text-decoration-color: var(--nav-ink, var(--accent-ink));
   }
 
-  .nav__link[aria-current="page"],
-  .nav__link[data-active] {
-    color: var(--accent);
-    background-color: var(--accent-subtle);
+  /* The accent as ink, not fill: it flips with the scheme, so the mark
+     clears 3:1 on a dark band or an inverse bar too. */
+  :is(.nav__link, .nav__dropdown-link):is([aria-current], [data-active]),
+  .nav__dropdown-trigger[data-active] {
+    text-decoration-line: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--nav-ink, var(--accent-ink));
   }
 
-
-  /* Actions area (buttons, search, etc.) */
   .nav__actions {
     display: flex;
     align-items: center;
@@ -179,198 +239,172 @@
     margin-inline-start: auto;
   }
 
+  /* The links always hang at the end edge: with a CTA after them, the CTA
+     takes the bar's gap, not a second auto margin (the menu may sit in a
+     compact .nav__panel). */
+  :is(.nav__menu, .nav__panel) ~ .nav__actions { margin-inline-start: 0; }
+
 
   /* ========================================
      DROPDOWN MENUS
      ======================================== */
 
-  .nav__dropdown {
-    position: relative;
-  }
-
-  .nav__dropdown-trigger {
-    display: flex;
-    align-items: center;
-    gap: var(--space-1);
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-medium);
-    color: var(--color-text-muted);
-    text-decoration: none;
-    background: none;
-    border: none;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition:
-      color var(--duration-normal) var(--ease-fluid),
-      background-color var(--duration-normal) var(--ease-fluid);
-  }
-
-  .nav__dropdown-trigger:hover,
-  .nav__dropdown:hover .nav__dropdown-trigger,
-  .nav__dropdown:focus-within .nav__dropdown-trigger {
-    color: var(--color-text);
-    background-color: var(--color-surface);
-  }
-
-  .nav__dropdown-trigger[data-active] {
-    color: var(--accent);
-  }
+  .nav__dropdown { position: relative; }
 
   .nav__dropdown-trigger svg {
     inline-size: 1em;
     block-size: 1em;
-    transition: transform var(--duration-normal) var(--ease-fluid);
-  }
-
-  .nav__dropdown:hover .nav__dropdown-trigger svg,
-  .nav__dropdown:focus-within .nav__dropdown-trigger svg {
-    transform: rotate(180deg);
   }
 
   .nav__dropdown-menu {
     position: absolute;
     inset-block-start: 100%;
     inset-inline-start: 0;
+    z-index: var(--z-dropdown);
     min-inline-size: 12rem;
-    padding: var(--space-2);
+    padding: var(--space-1) 0;
     margin: 0;
-    margin-block-start: var(--space-1);
     list-style: none;
-    background-color: var(--color-background);
-    border: 1px solid var(--color-border-subtle);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
+    background-color: var(--nav-bg, var(--color-background));
+    border: var(--border-width) solid var(--color-border-strong);
+    border-radius: var(--radius-card);
     opacity: 0;
     visibility: hidden;
-    transform: translateY(-0.5rem);
     transition:
-      opacity var(--duration-normal) var(--ease-fluid),
-      visibility var(--duration-normal) var(--ease-fluid),
-      transform var(--duration-normal) var(--ease-fluid);
-    z-index: var(--z-dropdown);
+      opacity var(--duration-fast) var(--ease-fluid),
+      visibility var(--duration-fast) var(--ease-fluid);
   }
 
-  .nav__dropdown:hover .nav__dropdown-menu,
-  .nav__dropdown:focus-within .nav__dropdown-menu {
+  .nav__dropdown:is(:hover, :focus-within) .nav__dropdown-menu {
     opacity: 1;
     visibility: visible;
-    transform: translateY(0);
   }
 
-  .nav__dropdown-menu li {
-    margin: 0;
-  }
+  .nav__dropdown-menu li { margin: 0; }
 
-  .nav__dropdown-link {
-    display: block;
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    text-decoration: none;
-    border-radius: var(--radius-md);
-    transition:
-      color var(--duration-normal) var(--ease-fluid),
-      background-color var(--duration-normal) var(--ease-fluid);
-  }
+  /* Inset, so the ring stays on the panel's colour, not the page's. */
+  .nav__dropdown-link:focus-visible { outline-offset: calc(-1 * var(--focus-ring-width)); }
 
-  .nav__dropdown-link:hover {
-    color: var(--color-text);
-    background-color: var(--color-surface);
-  }
 
-  .nav__dropdown-link[aria-current="page"] {
-    color: var(--accent);
-    background-color: var(--accent-subtle);
-  }
-
-  /* CTA Button in nav */
+  /* CTA in the bar: a primary button, no lift. */
   .nav__cta {
     display: inline-flex;
     align-items: center;
     gap: var(--space-2);
-    padding: var(--space-2) var(--space-4);
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-medium);
-    color: var(--white);
+    min-block-size: 2.75rem;
+    padding-inline: 1.2em;
+    font-size: 0.9375rem;
+    font-weight: calc(var(--weight-semibold) + var(--_dark-weight));
+    color: var(--on-accent-fill);
     text-decoration: none;
-    background-color: var(--accent);
-    border-radius: var(--radius-md);
-    transition:
-      background-color var(--duration-normal) var(--ease-fluid),
-      transform var(--duration-fast) var(--ease-settle);
+    background-color: var(--accent-fill);
+    border-radius: var(--radius-control);
+    transition: background-color var(--duration-fast) var(--ease-fluid);
   }
 
-  .nav__cta:hover {
-    background-color: var(--accent-hover);
-    transform: translateY(-1px);
-  }
+  .nav__cta:hover { background-color: var(--accent-fill-hover); }
 
 
   /* ========================================
-     RESPONSIVE NAVIGATION
-     Adapts to container width
+     TOGGLES
+     .nav__toggle is the 1.x JS menu button (aria-expanded, or data-open on
+     the menu), kept so existing markup works. data-nav="compact" (below) is
+     its no-JS successor: use that for new sites.
      ======================================== */
 
-  /* Mobile toggle button */
-  .nav__toggle {
-    display: none;
-    padding: var(--space-2);
-    background: none;
-    border: none;
-    color: var(--color-text);
-    cursor: pointer;
-  }
-
-  .nav__toggle svg {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-  }
-
-  /* Theme Toggle Button */
-  .nav__theme-toggle {
+  :is(.nav__toggle, .nav__theme-toggle) {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
     padding: var(--space-2);
+    color: var(--nav-ink, var(--color-text));
     background: none;
-    border: none;
-    border-radius: var(--radius-md);
-    color: var(--color-text-muted);
+    border: 0;
     cursor: pointer;
-    transition:
-      color var(--duration-normal) var(--ease-fluid),
-      background-color var(--duration-normal) var(--ease-fluid);
   }
 
-  .nav__theme-toggle:hover {
-    color: var(--color-text);
-    background-color: var(--color-surface);
-  }
+  .nav__toggle { display: none; }
 
-  .nav__theme-toggle svg {
-    inline-size: 1.25rem;
-    block-size: 1.25rem;
+  .nav__toggle svg { inline-size: 1.5rem; block-size: 1.5rem; }
+  .nav__theme-toggle svg { inline-size: 1.25rem; block-size: 1.25rem; }
+
+  /* Icon buttons in the bar stay quiet on hover and press (the generic
+     button fill is for calls to action). */
+  .nav :is(.nav__toggle, .nav__theme-toggle, .nav__more, .nav__dropdown-trigger):is(:hover, :active):not(:disabled) {
+    color: var(--nav-ink, var(--color-text));
+    background-color: transparent;
   }
 
-  /* Show appropriate icon based on theme */
   .nav__theme-toggle .icon-sun { display: none; }
   .nav__theme-toggle .icon-moon { display: block; }
-
   [data-theme="dark"] .nav__theme-toggle .icon-sun { display: block; }
   [data-theme="dark"] .nav__theme-toggle .icon-moon { display: none; }
 
 
-  /* Narrow container - stack navigation */
+  /* ========================================
+     NARROW: brand and CTA share the top row. With a .nav__toggle the menu
+     folds under it; without one the links wrap in a row under the brand,
+     so a bar with no toggle never loses its links.
+     ======================================== */
+
   @container nav (max-width: 40rem) {
-    .nav {
-      flex-wrap: wrap;
+    .nav__brand { min-inline-size: 0; }
+
+    .nav > .nav__actions {
+      order: 1;
+      margin-inline-start: auto;
+    }
+
+    .nav__cta {
+      min-block-size: 2.75rem;
+      padding-inline: 1em;
+      font-size: var(--step--1);
     }
 
+    /* The links' own row. First the squeeze: from full at a 40rem bar to the
+       minimum at 20rem, 1px of padding per 80px of bar and 1px of tracking
+       per 300px. Then the balance: inline items in a block, so text-wrap can
+       even the rows (4: 2 + 2, 3: 2 + 1, 5: 3 + 2). The link padding is the
+       gap, so the spaces between items are zeroed (font-size 0). Without
+       text-wrap: balance the links wrap as before. */
+    .nav:not(:has(.nav__toggle)) .nav__menu {
+      --_nav-pad: clamp(var(--nav-gap-min, var(--space-2)),
+        calc(var(--nav-gap-min, var(--space-2)) + (100cqi - 20rem) / 80),
+        var(--nav-gap, var(--space-3)));
+      --_nav-track: clamp(var(--nav-tracking-min, var(--nav-tracking, 0em)),
+        calc(var(--nav-tracking-min, var(--nav-tracking, 0em)) + (100cqi - 20rem) / 300),
+        var(--nav-tracking, 0em));
+      display: block;
+      flex-basis: 100%;
+      order: 3;
+      margin-inline: calc(-1 * var(--_nav-pad));
+      font-size: 0;
+      /* No fallback: unset, the declaration is invalid at computed-value
+         time and text-align inherits, so the rows follow the page. */
+      text-align: var(--nav-wrap-align);
+      text-wrap: balance;
+    }
+
+    .nav:not(:has(.nav__toggle)) .nav__menu > li {
+      display: inline-flex;
+      vertical-align: top;
+    }
+
+    /* With a toggle, the brand takes the row beside it and wraps. */
+    .nav__brand:has(~ .nav__toggle) {
+      flex: 1 1 0;
+      min-inline-size: 0;
+    }
+
+    /* Top row: brand, CTA (order 1), toggle (order 2); the menu is the
+       next row (order 3). */
     .nav__toggle {
       display: flex;
       margin-inline-start: auto;
-      order: 1;
+      order: 2;
     }
 
     .nav__theme-toggle {
@@ -378,15 +412,11 @@
       margin-inline-start: auto;
     }
 
-    /* Mobile menu with smooth reveal animation */
-    .nav__menu {
+    .nav:has(.nav__toggle) .nav__menu {
       flex-basis: 100%;
       flex-direction: column;
       align-items: stretch;
-      gap: var(--space-1);
-      padding-block-start: var(--space-4);
-      order: 2;
-      /* Hidden state */
+      order: 3;
       display: flex;
       visibility: hidden;
       opacity: 0;
@@ -398,79 +428,39 @@
         max-block-size var(--duration-normal) var(--ease-fluid);
     }
 
-    /* Show menu when toggle is open */
-    .nav__menu[data-open],
+    .nav .nav__menu[data-open],
     .nav:has(.nav__toggle[aria-expanded="true"]) .nav__menu {
+      padding-block-start: var(--space-2);
       visibility: visible;
       opacity: 1;
-      max-block-size: 100vh; /* Large enough for any menu */
+      max-block-size: 100vh;
     }
 
-    .nav__menu > li {
-      display: block;
-      opacity: 0;
-      transform: translateY(-0.5rem);
-      transition:
-        opacity var(--duration-fast) var(--ease-fluid),
-        transform var(--duration-fast) var(--ease-settle);
-    }
-
-    /* Animate items in when menu opens */
-    .nav__menu[data-open] > li,
-    .nav:has(.nav__toggle[aria-expanded="true"]) .nav__menu > li {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    /* Stagger the item animations */
-    .nav__menu > li:nth-child(1) { transition-delay: 50ms; }
-    .nav__menu > li:nth-child(2) { transition-delay: 100ms; }
-    .nav__menu > li:nth-child(3) { transition-delay: 150ms; }
-    .nav__menu > li:nth-child(4) { transition-delay: 200ms; }
-    .nav__menu > li:nth-child(5) { transition-delay: 250ms; }
-    .nav__menu > li:nth-child(6) { transition-delay: 300ms; }
-
-    .nav__link {
+    .nav:has(.nav__toggle) .nav__menu > li {
       display: block;
-      padding: var(--space-3);
+      border-block-start: var(--border-width) solid var(--color-border);
     }
 
-    /* Mobile dropdowns - always visible, stacked */
     .nav__dropdown-menu {
       position: static;
       opacity: 1;
       visibility: visible;
-      transform: none;
-      box-shadow: none;
-      border: none;
+      border: 0;
       padding-inline-start: var(--space-4);
-      margin-block-start: 0;
       background-color: transparent;
     }
 
-    .nav__dropdown-trigger svg {
-      display: none;
-    }
+    .nav__dropdown-trigger svg { display: none; }
 
-    .nav__dropdown-trigger {
-      padding: var(--space-3);
-      font-weight: var(--weight-semibold);
-      color: var(--color-text);
-    }
+    .nav:has(.nav__actions) .nav__toggle { margin-inline-start: 0; }
+  }
 
-    .nav__cta {
-      margin-block-start: var(--space-3);
-      justify-content: center;
-    }
 
-    .nav__actions {
-      flex-basis: 100%;
-      padding-block-start: var(--space-4);
-      border-block-start: 1px solid var(--color-border-subtle);
-      margin-block-start: var(--space-4);
-      order: 3;
-    }
-  }
+  /* The data-nav="compact" markup (fluid-nav.min.css) is safe without that
+     file: the panel wrapper is invisible to layout and its buttons hidden,
+     so the links show as usual. */
+  .nav__panel { display: contents; }
+  .nav__more { display: none; }
 
 
   /* ========================================
@@ -485,13 +475,14 @@
     padding: 0;
     margin: 0;
     list-style: none;
-    font-size: var(--font-size-sm);
+    font-size: var(--step--1);
   }
 
   .breadcrumb__item {
     display: inline-flex;
     align-items: center;
     gap: var(--space-2);
+    margin: 0;
     line-height: 1;
   }
 
@@ -500,21 +491,19 @@
     color: var(--color-text-subtle);
   }
 
-  .breadcrumb__item:last-child::after {
-    content: none;
-  }
+  .breadcrumb__item:last-child::after { content: none; }
 
   .breadcrumb__link {
     display: inline-flex;
     align-items: center;
     color: var(--color-text-muted);
-    text-decoration: none;
+    text-decoration-line: none;
     line-height: 1;
-    transition: color var(--duration-normal) var(--ease-fluid);
   }
 
   .breadcrumb__link:hover {
-    color: var(--accent);
+    color: var(--color-text);
+    text-decoration-line: underline;
   }
 
   .breadcrumb__item:last-child .breadcrumb__link,
@@ -525,32 +514,22 @@
 
   /* Mobile: collapse to "← Back to [Parent]" */
   @media (max-width: 40rem) {
-    .breadcrumb .breadcrumb__item {
-      display: none;
-    }
-
-    /* Show only the second-to-last item (parent) as a back link */
-    .breadcrumb .breadcrumb__item:nth-last-child(2) {
-      display: inline-flex;
-    }
+    .breadcrumb .breadcrumb__item { display: none; }
+    .breadcrumb .breadcrumb__item:nth-last-child(2) { display: inline-flex; }
 
     .breadcrumb .breadcrumb__item:nth-last-child(2)::before {
       content: "← ";
       color: var(--color-text-muted);
     }
 
-    .breadcrumb .breadcrumb__item:nth-last-child(2)::after {
-      content: none;
-    }
+    .breadcrumb .breadcrumb__item:nth-last-child(2)::after { content: none; }
 
     .breadcrumb .breadcrumb__item:nth-last-child(2) .breadcrumb__link {
       color: var(--color-text-muted);
       pointer-events: auto;
     }
 
-    .breadcrumb .breadcrumb__item:nth-last-child(2) .breadcrumb__link::before {
-      content: "Back to ";
-    }
+    .breadcrumb .breadcrumb__item:nth-last-child(2) .breadcrumb__link::before { content: "Back to "; }
   }
 
 
@@ -567,32 +546,35 @@
     list-style: none;
   }
 
+  .pagination > li { margin: 0; }
+
   .pagination__link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: 2.5rem;
-    min-block-size: 2.5rem;
+    gap: var(--space-2);
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
     padding: var(--space-2);
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-medium);
+    font-size: var(--step--1);
+    font-weight: calc(500 + var(--_dark-weight));
+    font-variant-numeric: lining-nums tabular-nums;
     color: var(--color-text-muted);
-    text-decoration: none;
-    border-radius: var(--radius-md);
-    transition:
-      color var(--duration-normal) var(--ease-fluid),
-      background-color var(--duration-normal) var(--ease-fluid);
+    text-decoration-line: none;
+    text-underline-offset: 0.4em;
+    border-radius: var(--radius-control);
   }
 
   .pagination__link:hover {
     color: var(--color-text);
-    background-color: var(--color-surface);
+    text-decoration-line: underline;
   }
 
-  .pagination__link[aria-current="page"],
-  .pagination__link[data-active] {
-    color: var(--white);
-    background-color: var(--accent);
+  .pagination__link:is([aria-current="page"], [data-active]) {
+    color: var(--color-text);
+    text-decoration-line: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--accent-ink);
   }
 
   .pagination__link[data-disabled] {
@@ -600,12 +582,6 @@
     pointer-events: none;
   }
 
-  /* Prev/Next buttons */
-  .pagination__link[data-prev],
-  .pagination__link[data-next] {
-    gap: var(--space-2);
-  }
-
   .pagination__ellipsis {
     padding: var(--space-2);
     color: var(--color-text-subtle);
@@ -618,79 +594,59 @@
 
   .tabs {
     display: flex;
-    gap: var(--space-1);
-    border-block-end: 1px solid var(--color-border-subtle);
+    gap: var(--space-m);
+    border-block-end: var(--border-width) solid var(--color-border);
   }
 
   .tabs__tab {
     position: relative;
-    padding: var(--space-3) var(--space-4);
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-medium);
+    min-block-size: 2.75rem;
+    padding: var(--space-2) 0;
+    font-family: var(--font-body);
+    font-size: var(--step--1);
+    font-weight: calc(500 + var(--_dark-weight));
     color: var(--color-text-muted);
     text-decoration: none;
     background: none;
-    border: none;
-    border-radius: var(--radius-md);
+    border: 0;
+    border-radius: 0;
     cursor: pointer;
-    outline: 2px solid transparent;
-    transition:
-      color var(--duration-normal) var(--ease-fluid),
-      background-color var(--duration-normal) var(--ease-fluid);
+    transition: color var(--duration-fast) var(--ease-fluid);
   }
 
-  /* Focus state - subtle ring */
   .tabs__tab:focus-visible {
-    background-color: var(--color-surface);
-    box-shadow: 0 0 0 2px var(--accent-subtle);
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 2px;
   }
 
   .tabs__tab::after {
     content: "";
     position: absolute;
-    inset-inline: var(--space-2); /* Inset from edges for rounded look */
+    inset-inline: 0;
     inset-block-end: -1px;
-    block-size: 3px; /* Slightly thicker for visible rounded ends */
+    block-size: 2px;
     background-color: transparent;
-    border-radius: var(--radius-full);
-    transition: background-color var(--duration-normal) var(--ease-fluid);
   }
 
-  .tabs__tab:hover {
-    color: var(--color-text);
-    background-color: var(--color-surface);
-  }
+  .tabs__tab:hover { color: var(--color-text); background: none; }
 
-  .tabs__tab[aria-selected="true"],
-  .tabs__tab[data-active] {
-    color: var(--accent);
-  }
+  .tabs__tab:is([aria-selected="true"], [data-active]) { color: var(--color-text); }
 
-  .tabs__tab[aria-selected="true"]::after,
-  .tabs__tab[data-active]::after {
-    background-color: var(--accent);
-  }
+  .tabs__tab:is([aria-selected="true"], [data-active])::after { background-color: var(--accent-ink); }
 
-  /* Contained tabs variant */
+  /* Contained: a segmented control on the surface tint. */
   .tabs[data-variant="contained"] {
+    gap: 0;
     background-color: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: none;
+    border: 0;
     padding: var(--space-1);
   }
 
-  .tabs[data-variant="contained"] .tabs__tab {
-    border-radius: var(--radius-sm);
-  }
-
-  .tabs[data-variant="contained"] .tabs__tab::after {
-    display: none;
-  }
+  .tabs[data-variant="contained"] .tabs__tab { padding-inline: var(--space-4); }
+  .tabs[data-variant="contained"] .tabs__tab::after { display: none; }
 
-  .tabs[data-variant="contained"] .tabs__tab[aria-selected="true"],
-  .tabs[data-variant="contained"] .tabs__tab[data-active] {
+  .tabs[data-variant="contained"] .tabs__tab:is([aria-selected="true"], [data-active]) {
     background-color: var(--color-background);
-    box-shadow: var(--shadow-xs);
   }
 
 
@@ -698,29 +654,5 @@
      REDUCED MOTION
      ======================================== */
 
-  @media (prefers-reduced-motion: reduce) {
-    .nav__menu > li {
-      transition: none;
-      opacity: 1;
-      transform: none;
-    }
-
-    .nav__menu > li:nth-child(1),
-    .nav__menu > li:nth-child(2),
-    .nav__menu > li:nth-child(3),
-    .nav__menu > li:nth-child(4),
-    .nav__menu > li:nth-child(5),
-    .nav__menu > li:nth-child(6) {
-      transition-delay: 0ms;
-    }
-
-    .nav__link,
-    .nav__dropdown-menu,
-    .breadcrumb__link,
-    .pagination__link,
-    .tabs__tab,
-    .tabs__tab::after {
-      transition: none;
-    }
-  }
+  /* Reduced motion: the reset shortens every transition. */
 }