/* The site-wide header bar. See nav.js for how an app opts in.
 *
 * It follows the site-wide theme on <html> (Kit's theme-boot.js sets
 * data-theme and data-scheme), not the app's own look: it is the site's
 * chrome.
 *
 *   - Clean, under html[data-theme="clean"][data-scheme], at the end of this
 *     file. It reads Kit's tokens (/theme/css/clean-tokens.css and
 *     motion.css), which the page is responsible for loading; light and dark
 *     come from the tokens, so there is no scheme selector beyond presence.
 *   - Retro, the house style (WORKSPACE.md), for everything else, under the
 *     exact complement html:not([data-theme="clean"][data-scheme]): a page
 *     with no attribute, and an app that still sets
 *     data-theme="clean" from its own old theme switch without Kit's boot
 *     script (so without data-scheme, and without the tokens the clean bar
 *     reads). These rules are the bar as it always was.
 *
 * data-scheme is the marker that Kit's tokens are on the page. A page that
 * renders the attributes on the server instead of running theme-boot.js
 * (Private) must emit data-scheme as well as data-theme, or it gets the
 * retro bar.
 *
 * Everything is scoped under #wp-site-nav and every class starts wp-nav-, so
 * it cannot reach into an app's own styles, and the rules are specific
 * enough that an app's element selectors (`a`, `ul`, `summary`) don't reach
 * into it either. The bar is 44px tall when closed in both (--wp-site-nav-h),
 * at 700px and below and above 1120px; in between it is two rows, 78px in
 * Clean and 76px in Retro, and --wp-site-nav-h says so (RFX2-17).
 *
 * The retro font is declared under its own family name and loaded from this
 * directory, so it works on any page whatever fonts it serves, and
 * never collides with an app's own @font-face. It needs `font-src 'self'`;
 * without it the bar falls back to the next font in the stack. Clean uses
 * the system font and downloads nothing. */
@font-face {
  font-family: "WP Nav Comic Relief";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/comic-relief-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "WP Nav Comic Relief";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/comic-relief-latin-700-normal.woff2") format("woff2");
}

@keyframes wp-nav-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* The bar's height when closed, for an app whose shell fills the viewport
   (`min-height: calc(100dvh - var(--wp-site-nav-h, 0px))`). Only defined
   when this file loads, so the fallback 0 is right exactly when the bar is
   absent, e.g. an app run locally. The phone menu grows the bar when opened;
   that is content pushing the page down, and nothing needs to subtract it.
   It is also the bar's min-height, so the empty placeholder (before nav.js
   runs) is already the drawn bar's height: from 701 to 1120px, where the
   list has its own row, it is that two-row height in each theme (RFX2-17;
   tests/site-nav-height.test.mjs). Every row's height comes from
   line-height and padding, not the font, so these hold on any system. */
:root { --wp-site-nav-h: 44px; }
@media (min-width: 701px) and (max-width: 1120px) {
  /* Retro: the 44px brand row (38px inner + the two 3px rules) plus a
     27.5px list row and the 4px gap between them, rounded up. */
  :root { --wp-site-nav-h: 76px; }
  /* Clean: the 43px brand row plus a 33.5px list row and the hairline. */
  html[data-theme="clean"][data-scheme] { --wp-site-nav-h: 78px; }
}

/* The bar takes the landing page's old marquee slot: black, a ridged purple
   rule above and below. Its height is reserved before the script fills it
   (the placeholder is empty until then), so the page does not jump. */
html:not([data-theme="clean"][data-scheme]) #wp-site-nav {
  display: block;
  position: relative;
  z-index: 900;
  box-sizing: border-box;
  min-height: var(--wp-site-nav-h);
  margin: 0;
  padding: 0;
  background: #000;
  border-top: 3px ridge #cc00ff;
  border-bottom: 3px ridge #cc00ff;
  color: #eaeaea;
  font-family: "Comic Sans MS", "WP Nav Comic Relief", "Comic Sans", sans-serif;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav *,
html:not([data-theme="clean"][data-scheme]) #wp-site-nav *::before,
html:not([data-theme="clean"][data-scheme]) #wp-site-nav *::after {
  box-sizing: border-box;
  border-radius: 0;
  font-family: inherit;
}

html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 12px;
  min-height: 38px;
}

/* The brand is a 44px tap target. The bar is 44px tall in all, so the link's
   negative margins let it reach across the bar's 3px rules and the inner
   padding without making the bar taller. */
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-brand {
  display: inline-block;
  line-height: 44px;
  margin: -7px 0;
  color: #ffee00;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-brand:hover { text-decoration: underline; }
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-star {
  display: inline-block;
  animation: wp-nav-twinkle 2.5s ease-in-out infinite;
}

html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-list,
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-panel {
  list-style: none;
  margin: 0;
  padding: 0;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item {
  position: relative;
  margin: 0;
  padding: 0;
}
/* The "|" between items, as on the landing page's old link grid. */
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item + .wp-nav-item::before {
  content: "|";
  color: #00ffcc;
  font-weight: bold;
  padding: 0 4px;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item { display: flex; align-items: center; }

html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-link {
  display: inline-block;
  padding: 4px 6px;
  margin: 0;
  color: #00ff00;
  background: none;
  border: 0;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-link:hover { text-decoration: underline; }
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-link:focus-visible,
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-brand:focus-visible,
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-burger:focus-visible {
  outline: 2px solid #ffee00;
  outline-offset: 1px;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-link[aria-current="page"],
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-current {
  color: #ffee00;
  font-weight: bold;
}

/* Dropdown groups. <summary> loses its disclosure triangle for a ▾ that
   flips when open. */
html:not([data-theme="clean"][data-scheme]) #wp-site-nav summary.wp-nav-link { list-style: none; }
html:not([data-theme="clean"][data-scheme]) #wp-site-nav summary.wp-nav-link::-webkit-details-marker { display: none; }
html:not([data-theme="clean"][data-scheme]) #wp-site-nav summary.wp-nav-link::after {
  content: " \25BE";
  color: #cc00ff;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav details[open] > summary.wp-nav-link::after { content: " \25B4"; }

html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  margin-top: 6px;
  padding: 6px 0;
  background: #1a002a;
  border: 3px outset #cc00ff;
  outline: 4px double #00ccff;
  box-shadow: 4px 4px 0 #000;
}
/* The last group sits at the right end of the bar, so its panel opens
   leftwards from its right edge instead of running off the screen. Above
   1120px the bar is on one row; below it see the 701–1120px block. */
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item:last-child .wp-nav-panel {
  left: auto;
  right: 0;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-panel li { margin: 0; padding: 0; }
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-panel .wp-nav-link {
  display: block;
  padding: 6px 14px;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-panel .wp-nav-link::before {
  content: "\2726";
  margin-right: 6px;
  color: #cc00ff;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-panel .wp-nav-link:hover {
  background: #000010;
}
/* A sub-group inside a dropdown (Mods > Slay the Spire 2): a heading that is
   not a link, with its links indented under it. */
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-subhead {
  display: block;
  padding: 6px 14px 2px;
  color: #00ccff;
  font-size: 0.85em;
  white-space: nowrap;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-subpanel {
  list-style: none;
  margin: 0 0 0 12px;
  padding: 0;
}

/* The checkbox that drives the phone menu is visually hidden but stays
   focusable, so a keyboard can open the menu without the script. */
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-burger { display: none; }
/* Above the burger breakpoint the list always shows and the checkbox would
   toggle nothing, so it leaves the tab order (UX-landing-5). At 700px and
   below it stays visually hidden but focusable, for the no-script menu. */
@media (min-width: 701px) {
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-toggle { display: none; }
}

@media (max-width: 700px) {
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-inner {
    justify-content: space-between;
  }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-burger {
    display: inline-block;
    padding: 1px 10px;
    line-height: 1.3;
    color: #000;
    background: #00ff00;
    border: 3px outset #00ff00;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
  }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-toggle:focus-visible + .wp-nav-burger {
    outline: 2px solid #ffee00;
    outline-offset: 2px;
  }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-toggle:checked + .wp-nav-burger {
    border-style: inset;
  }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-list {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0 8px;
    border-top: 1px dashed #cc00ff;
  }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-toggle:checked ~ .wp-nav-list { display: flex; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item { display: block; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item + .wp-nav-item::before { content: none; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-list .wp-nav-link { display: block; padding: 8px 6px; }
  /* On a phone the menu's groups open in place instead of floating (the
     end strip's two dropdowns still float, from the right edge). */
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-list .wp-nav-panel {
    position: static;
    margin: 0 0 4px 12px;
    outline: 0;
    box-shadow: none;
    border: 0;
    border-left: 3px ridge #cc00ff;
    background: transparent;
    padding: 0;
  }
}

/* Between the burger and the width at which the bar fits on one row
   (926px in clean, 981px in retro, measured with the menu of 2026-10-01;
   with the end of the bar and a name at its 12ch cut, 1040px in clean and
   1084px in retro, measured 2026-10-13; 1120 leaves a margin), the list has
   its own row and no item's own edge is a safe anchor. So in that range
   every panel hangs from the bar itself, under its full width at its left
   padding. Pure CSS, so Private's script-free bar gets it. */
@media (min-width: 701px) and (max-width: 1120px) {
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-inner { position: relative; }
  /* The list starts its own row under the brand, so the end of the bar
     (drawn by nav.js after the page shows) sits on the brand's row and never
     pushes an item down: the bar is the same height before and after
     (RWL1-1), with nav.js or without (Private). */
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-list { order: 1; flex-basis: 100%; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item { position: static; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item .wp-nav-panel,
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item:last-child .wp-nav-panel {
    left: 12px;
    right: auto;
  }
}
/* At the narrow end of that range the list (679px wide) would wrap onto a
   third row at 701px; tighter separators and links keep it on one row
   (about 620px) with room for a wider system font. */
@media (min-width: 701px) and (max-width: 800px) {
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item + .wp-nav-item::before { padding: 0 2px; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item > .wp-nav-link,
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-item > .wp-nav-group > summary.wp-nav-link { padding-left: 4px; padding-right: 4px; }
}

/* The end of the bar (nav.js only, on willperlak.com: Private's nav.html has
   none): the Appearance switch, then who is signed in. Pushed to the right
   end of the row; empty, it takes no room. Its panels open leftwards from its
   right edge at every width. On a phone it stays on the bar's first row,
   between the burger and the right edge, and the opened menu goes under it. */
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-end {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 2px;
  margin-left: auto;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-end:empty { display: none; }
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-end .wp-nav-panel {
  left: auto;
  right: 0;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-appearance > summary.wp-nav-link::after,
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-appearance[open] > summary.wp-nav-link::after { content: none; }
/* The ◐ is the bar's one single-glyph control: a target of at least 24px
   (WCAG 2.2 SC 2.5.8; RWL1-3) with the glyph centred, a size up, and fonts
   that draw U+25D0 at full size where the bar's own font lacks it. */
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-appearance > summary.wp-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif;
  font-size: 1.15em;
  line-height: 1;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-appearance-panel {
  min-width: 260px;
  padding: 10px 12px;
}
/* A long first name is cut here, never in the script. */
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-name {
  display: inline-block;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-signout {
  width: 100%;
  font: inherit;
  text-align: left;
}
@media (max-width: 700px) {
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-list { order: 1; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-burger { margin-left: auto; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-end { margin-left: 0; }
  /* To keep a 360px bar on one row (44px) with something at its end, the
     burger shows only its ☰ (the checkbox is named "Site menu" either way),
     the row's gaps tighten and the name is cut sooner. A bar with nothing
     at its end, Private's included, is unchanged. */
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-inner:has(> .wp-nav-end:not(:empty)) { column-gap: 8px; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-inner:has(> .wp-nav-end:not(:empty)) .wp-nav-brand { letter-spacing: 0; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-inner:has(> .wp-nav-end:not(:empty)) .wp-nav-burger { font-size: 0; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-inner:has(> .wp-nav-end:not(:empty)) .wp-nav-burger::before { content: "\2630"; font-size: 15px; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-end .wp-nav-name { max-width: 7ch; }
}
/* Below 360px (down to 320) the same row needs about 40px more: smaller
   side padding and gaps, no brand stars, and the name cut at 4ch, so the
   end of the bar never wraps it onto a second row (RFX2-17). */
@media (max-width: 359px) {
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-inner:has(> .wp-nav-end:not(:empty)) { column-gap: 4px; padding-left: 8px; padding-right: 8px; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-inner:has(> .wp-nav-end:not(:empty)) .wp-nav-star { display: none; }
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-end .wp-nav-name { max-width: 4ch; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="clean"][data-scheme]) #wp-site-nav .wp-nav-star { animation: none; }
}

@media print {
  #wp-site-nav { display: none; }
}

/* ---- Clean -------------------------------------------------------------
   A --surface bar with a bottom hairline, the system font, --text links,
   the current page in an --accent-soft pill, dropdown panels as raised
   cards that pop in (Kit motion.css wp-pop), and on a phone the menu as a
   raised sheet that slides down 6px. Nothing moves on its own: the brand's
   twinkling stars are hidden. 43px + the 1px hairline = 44px. */
html[data-theme="clean"][data-scheme] #wp-site-nav {
  display: block;
  position: relative;
  z-index: 900;
  box-sizing: border-box;
  min-height: var(--wp-site-nav-h);
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: normal;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html[data-theme="clean"][data-scheme] #wp-site-nav *,
html[data-theme="clean"][data-scheme] #wp-site-nav *::before,
html[data-theme="clean"][data-scheme] #wp-site-nav *::after {
  box-sizing: border-box;
  font-family: inherit;
}

html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-4);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-3);
  min-height: 43px;
}

/* A 44px tap target in a 43px row: the 1px negative top margin keeps the
   bar at 44px (43px + the hairline). */
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -1px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-star { display: none; }

html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-list,
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-panel {
  list-style: none;
  margin: 0;
  padding: 0;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-link {
  display: inline-block;
  margin: 0;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
@media (hover: hover) {
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-link:hover,
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-brand:hover {
    background: var(--surface-alt);
  }
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-link:focus-visible,
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-brand:focus-visible,
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-toggle:focus-visible + .wp-nav-burger {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-link[aria-current="page"],
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-current {
  background: var(--accent-soft);
  color: var(--accent-soft-text);
}

html[data-theme="clean"][data-scheme] #wp-site-nav summary.wp-nav-link { list-style: none; }
html[data-theme="clean"][data-scheme] #wp-site-nav summary.wp-nav-link::-webkit-details-marker { display: none; }
html[data-theme="clean"][data-scheme] #wp-site-nav summary.wp-nav-link::after {
  content: " \25BE";
  color: var(--text-muted);
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-current::after { color: inherit; }
html[data-theme="clean"][data-scheme] #wp-site-nav details[open] > summary.wp-nav-link { background: var(--surface-alt); }
html[data-theme="clean"][data-scheme] #wp-site-nav details[open] > summary.wp-nav-current { background: var(--accent-soft); }
html[data-theme="clean"][data-scheme] #wp-site-nav details[open] > summary.wp-nav-link::after { content: " \25B4"; }

html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin-top: 6px;
  padding: var(--space-1);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  transform-origin: top;
  animation: wp-pop var(--duration-fast) var(--ease-out);
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-item:last-child .wp-nav-panel {
  left: auto;
  right: 0;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-panel li { margin: 0; padding: 0; }
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-panel .wp-nav-link {
  display: block;
  padding: 9px 12px;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-subhead {
  display: block;
  padding: 9px 12px 3px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-subpanel {
  list-style: none;
  margin: 0 0 0 var(--space-3);
  padding: 0;
}

html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-burger { display: none; }
/* Above the burger breakpoint the list always shows and the checkbox would
   toggle nothing, so it leaves the tab order (UX-landing-5). At 700px and
   below it stays visually hidden but focusable, for the no-script menu. */
@media (min-width: 701px) {
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-toggle { display: none; }
}

/* The wrapped range: panels hang from the bar, as in retro above. */
@media (min-width: 701px) and (max-width: 1120px) {
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-inner { position: relative; }
  /* The list on its own row, the end on the brand's (RWL1-1, as retro). */
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-list { order: 1; flex-basis: 100%; }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-item { position: static; }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-item .wp-nav-panel,
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-item:last-child .wp-nav-panel {
    left: var(--space-3);
    right: auto;
  }
}
/* One list row from 701px, as in retro (the list is 662px wide, about 614px
   with these links). */
@media (min-width: 701px) and (max-width: 800px) {
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-item > .wp-nav-link,
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-item > .wp-nav-group > summary.wp-nav-link { padding-left: 7px; padding-right: 7px; }
}

@media (max-width: 700px) {
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-inner {
    justify-content: space-between;
  }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-burger {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border-alt);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: var(--weight-medium);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-toggle:checked + .wp-nav-burger {
    background: var(--surface-alt);
  }
  /* The open menu: a raised sheet under the bar, in the page's flow. */
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-list {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0 0 var(--space-2);
    padding: var(--space-1);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3);
    animation: wp-slide-down var(--duration-fast) var(--ease-out);
  }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-toggle:checked ~ .wp-nav-list { display: flex; }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-item { display: block; }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-list .wp-nav-link { display: block; padding: 11px 12px; }
  /* On a phone the menu's groups open in place instead of floating (the
     end strip's two dropdowns still float, from the right edge). */
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-list .wp-nav-panel {
    position: static;
    min-width: 0;
    margin: 0 0 var(--space-1) var(--space-3);
    padding: 0;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
}

/* The end of the bar (nav.js only, on willperlak.com: Private's nav.html has
   none): the Appearance switch, then who is signed in. Pushed to the right
   end of the row; empty, it takes no room. Its panels open leftwards from its
   right edge at every width. On a phone it stays on the bar's first row,
   between the burger and the right edge, and the opened menu goes under it. */
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-end {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-end:empty { display: none; }
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-end .wp-nav-panel {
  left: auto;
  right: 0;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-appearance > summary.wp-nav-link::after,
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-appearance[open] > summary.wp-nav-link::after { content: none; }
/* The ◐ is the bar's one single-glyph control: a target of at least 24px
   (WCAG 2.2 SC 2.5.8; RWL1-3) with the glyph centred, a size up, and fonts
   that draw U+25D0 at full size where the bar's own font lacks it. */
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-appearance > summary.wp-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif;
  font-size: 1.15em;
  line-height: 1;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-appearance-panel {
  min-width: 260px;
  padding: var(--space-3);
}
/* A long first name is cut here, never in the script. */
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-name {
  display: inline-block;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-signout {
  width: 100%;
  font: inherit;
  text-align: left;
}
@media (max-width: 700px) {
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-list { order: 1; }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-burger { margin-left: auto; }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-end { margin-left: 0; }
  /* To keep a 360px bar on one row (44px) with something at its end, the
     burger shows only its ☰ (the checkbox is named "Site menu" either way),
     the row's gaps tighten and the name is cut sooner. A bar with nothing
     at its end, Private's included, is unchanged. */
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-inner:has(> .wp-nav-end:not(:empty)) { column-gap: 8px; }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-inner:has(> .wp-nav-end:not(:empty)) .wp-nav-burger { font-size: 0; }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-inner:has(> .wp-nav-end:not(:empty)) .wp-nav-burger::before { content: "\2630"; font-size: 17px; }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-end .wp-nav-name { max-width: 7ch; }
}
/* Below 360px, as in retro: smaller side padding and gaps, the name cut at
   4ch (RFX2-17). */
@media (max-width: 359px) {
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-inner:has(> .wp-nav-end:not(:empty)) { column-gap: 4px; padding-left: 8px; padding-right: 8px; }
  html[data-theme="clean"][data-scheme] #wp-site-nav .wp-nav-end .wp-nav-name { max-width: 4ch; }
}

/* ---- Quick jump ---------------------------------------------------------
   The "Jump to a page" box nav.js opens on `/` or Ctrl/Cmd+K: a modal
   <dialog> appended to <body>, outside #wp-site-nav, so every class starts
   wp-jump-. Retro by default, clean under the same rule as the bar. No
   script sets a style: everything is here. */
dialog.wp-jump {
  box-sizing: border-box;
  width: min(32rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(90vh - 1rem);
  margin: 10vh auto auto;
  padding: 12px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
}
dialog.wp-jump[open] { display: flex; flex-direction: column; gap: 8px; }
dialog.wp-jump *, dialog.wp-jump *::before, dialog.wp-jump *::after { box-sizing: border-box; font-family: inherit; }
dialog.wp-jump .wp-jump-label { display: block; margin: 0; font-weight: bold; font-size: 0.9em; }
dialog.wp-jump .wp-jump-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  font-size: 16px;
}
dialog.wp-jump .wp-jump-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog.wp-jump .wp-jump-option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin: 0;
  padding: 8px 10px;
  cursor: pointer;
}
dialog.wp-jump .wp-jump-where { font-size: 0.85em; }
dialog.wp-jump .wp-jump-where:empty { display: none; }
dialog.wp-jump .wp-jump-empty { margin: 0; padding: 4px 2px; }
dialog.wp-jump .wp-jump-empty:empty { display: none; }

html:not([data-theme="clean"][data-scheme]) dialog.wp-jump {
  background: #000;
  color: #00ff00;
  border: 4px ridge #cc00ff;
  border-radius: 0;
  box-shadow: 4px 4px 0 #000;
  font-family: "Comic Sans MS", "WP Nav Comic Relief", "Comic Sans", sans-serif;
}
html:not([data-theme="clean"][data-scheme]) dialog.wp-jump::backdrop { background: rgba(0, 0, 0, 0.6); }
html:not([data-theme="clean"][data-scheme]) dialog.wp-jump .wp-jump-label { color: #ffee00; }
html:not([data-theme="clean"][data-scheme]) dialog.wp-jump .wp-jump-input {
  background: #1a002a;
  color: #00ff00;
  border: 2px inset #cc00ff;
  border-radius: 0;
}
html:not([data-theme="clean"][data-scheme]) dialog.wp-jump .wp-jump-input::placeholder { color: #00cc88; }
html:not([data-theme="clean"][data-scheme]) dialog.wp-jump .wp-jump-input:focus-visible { outline: 2px solid #ffee00; outline-offset: 1px; }
html:not([data-theme="clean"][data-scheme]) dialog.wp-jump .wp-jump-where { color: #00ccff; }
html:not([data-theme="clean"][data-scheme]) dialog.wp-jump .wp-jump-option[aria-selected="true"] {
  background: #1a002a;
  color: #ffee00;
  outline: 2px dashed #ffee00;
  outline-offset: -2px;
}
html:not([data-theme="clean"][data-scheme]) dialog.wp-jump .wp-jump-empty { color: #ffee00; }

html[data-theme="clean"][data-scheme] dialog.wp-jump {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  font-family: var(--font-body);
}
html[data-theme="clean"][data-scheme] dialog.wp-jump::backdrop { background: var(--scrim, rgba(0, 0, 0, 0.4)); }
html[data-theme="clean"][data-scheme] dialog.wp-jump .wp-jump-label { color: var(--text-muted); font-weight: var(--weight-semibold); }
html[data-theme="clean"][data-scheme] dialog.wp-jump .wp-jump-input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
}
html[data-theme="clean"][data-scheme] dialog.wp-jump .wp-jump-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
html[data-theme="clean"][data-scheme] dialog.wp-jump .wp-jump-option {
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
}
html[data-theme="clean"][data-scheme] dialog.wp-jump .wp-jump-where { color: var(--text-muted); }
html[data-theme="clean"][data-scheme] dialog.wp-jump .wp-jump-option[aria-selected="true"] {
  background: var(--surface-alt);
  border-left-color: var(--focus);
}
html[data-theme="clean"][data-scheme] dialog.wp-jump .wp-jump-empty { color: var(--text-muted); }