/*
 * The public header, refreshed on 8 October 2026.
 *
 * The links sit in one pill in the middle, Home first, with the section in view
 * marked. The bar is the page's own colour with a frosted ground, gains a
 * hairline once the page moves, and on narrow screens a menu replaces the links
 * rather than the links simply vanishing.
 *
 * **Every selector starts `html body main.pub`, and that is deliberate.** The
 * old header's rules in shell.css include `html:not([data-theme="dark"])
 * .pub-bar.is-scrolled`, and this file has to outrank them without touching the
 * `<header class="pub-bar">` tag, which `check_routes` splits the page on
 * exactly. The prefix is the cheapest specificity that wins in both themes.
 * Reverting the refresh is deleting this file and its link in `_bar.html`.
 *
 * Nothing here changes weight on hover, so the reserved bold copy shell.css
 * lays under each label (`::after` from `data-label`) is switched off rather
 * than left reserving width for a hover that no longer happens.
 */

/* ------------------------------------------------------------------ bar */

html body main.pub .pub-bar,
html body main.pub .pub-bar.is-scrolled {
  --bar-pad-y: 12px;
  --btn-ghost-line: var(--line-strong);
  --surface-hover: var(--surface-1);
  gap: 16px;
  min-height: 64px;
  padding: var(--bar-pad-y) clamp(16px, 3vw, 32px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}

html body main.pub .pub-bar.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px color-mix(in srgb, var(--ink) 40%, transparent);
}

html body main.pub .pub-bar::after { display: none; }

/* The two spacers centre the pill between the brand and the actions. */
html body main.pub .pub-bar .brand-row { flex: none; }

/* ------------------------------------------------------------ the pill */

html body main.pub .bar-nav {
  align-self: center;
  margin: 0;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

html body main.pub .bar-nav a {
  display: block;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-2);
  background: transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

html body main.pub .bar-nav a::after { display: none; }

html body main.pub .bar-nav a:hover {
  color: var(--ink);
  background: var(--surface-1);
}

/* The section in view. Ink on the page's own ground, the same pairing as the
   landing page's primary button, so it reads as "you are here" in both themes. */
html body main.pub .bar-nav a.is-current,
html body main.pub .bar-nav a.is-current:hover {
  color: var(--bg);
  background: var(--ink);
}

html body main.pub .bar-nav a:focus-visible,
html body main.pub .bar-menu summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ------------------------------------------------------------- actions */

/* Steady weight: the bold hover belonged to the old bar. */
html body main.pub .pub-bar .btn,
html body main.pub .pub-bar .btn:hover { font-weight: 600; }
html body main.pub .pub-bar .btn::after { display: none; }

html body main.pub .pub-bar .btn-sm { padding: 8px 16px; font-size: 13px; }

/* Ink, on every public page, so the bar is the same bar everywhere. The pages
   below it keep their own buttons. */
html body main.pub .pub-bar .btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: none;
}
html body main.pub .pub-bar .btn-primary:hover { background: var(--ink-2); }

html body main.pub .pub-bar .theme-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

/* ---------------------------------------------------------------- menu */

html body main.pub .bar-menu { display: none; position: relative; }

html body main.pub .bar-menu summary {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
html body main.pub .bar-menu summary::-webkit-details-marker { display: none; }
html body main.pub .bar-menu .bar-menu-close { display: none; }
html body main.pub .bar-menu[open] .bar-menu-close { display: inline; }
html body main.pub .bar-menu[open] .bar-menu-open { display: none; }

html body main.pub .bar-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
}
html body main.pub .bar-menu-panel a {
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}
html body main.pub .bar-menu-panel a:hover { background: var(--surface-1); }
html body main.pub .bar-menu-panel .bar-menu-signin {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  color: var(--ink-2);
}

/* ------------------------------------------------------------- narrow */

/* Six links in a pill need about 560px; with the brand and the actions the
   row needs about 1113px of window. This said 1080, which forgot the 32px of
   side padding and a desktop scrollbar, so from 1081 to 1112 Get started ran
   off the right edge. Below 1140 the menu takes over rather than squeezing
   the pill until the wordmark runs into it. */
@media (max-width: 1140px) {
  html body main.pub .bar-nav { display: none; }
  html body main.pub .bar-menu { display: block; }
  /* The two spacers flank the links; with the links gone the first is an
     empty item still costing a full gap, which on a phone is the difference
     between fitting and not. The second keeps pushing the actions right. */
  html body main.pub .pub-bar > .spacer:first-of-type { display: none; }
}

/* shell.css hides Sign in under 560px; the menu carries it there. Above that
   the button is on the bar, so the menu's copy would be a duplicate. */
@media (min-width: 561px) {
  html body main.pub .bar-menu-panel .bar-menu-signin { display: none; }
}

/* The theme control inside the menu, shown only on the smallest phones, where
   the bar has given it up (below). Styled as one of the menu's links. Which
   label shows follows the theme, so it always names the one it switches to. */
html body main.pub .bar-menu-panel .bar-menu-theme {
  display: none;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
html body main.pub .bar-menu-panel .bar-menu-theme:hover { background: var(--surface-1); }
html body main.pub .bar-menu-panel .bar-menu-theme:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
html body main.pub .bar-menu-theme-light { display: none; }
html[data-theme="dark"] body main.pub .bar-menu-theme-dark { display: none; }
html[data-theme="dark"] body main.pub .bar-menu-theme-light { display: inline; }

/* A phone. The bar holds the wordmark, the theme control, the action and the
   menu, none of which can shrink, so the padding and the gaps come down as
   the screen narrows instead. Measured across every width from 320 to 480,
   signed in and out.

   **The theme control stays on the bar on a phone.** For a few hours on
   15 October 2026 it moved into the menu below 480px to make room, and on a
   real phone nobody found it there: a theme control is looked for as a
   button, not read for as a menu item. Below 360px there is genuinely no
   room for it beside the wordmark and Get started, so only there it goes
   into the menu. The rule hiding `.theme-btn` has to be at least as specific
   as the one sizing it above, or it loses: the `.bar-signin` lesson again. */
@media (max-width: 480px) {
  html body main.pub .pub-bar,
  html body main.pub .pub-bar.is-scrolled { gap: 8px; padding: var(--bar-pad-y) 14px; }
}

@media (max-width: 420px) {
  html body main.pub .pub-bar,
  html body main.pub .pub-bar.is-scrolled { gap: 6px; padding: var(--bar-pad-y) 12px; }
  html body main.pub .pub-bar .theme-btn { width: 32px; height: 32px; }
  html body main.pub .pub-bar .btn-sm { padding: 8px 13px; }
  html body main.pub .bar-menu summary { width: 34px; height: 34px; }
}

/* Signed in, the action is "Open workspace", about 20px wider than "Get
   started", and spilled 19px at 421. It reads "Workspace" up to 500. */
@media (max-width: 500px) {
  html body main.pub .pub-bar .bar-workspace-open { display: none; }
  html body main.pub .pub-bar .bar-workspace { text-transform: capitalize; }
}

/* 360 to 374 is the commonest Android width, and with the theme control on
   the bar the row fitted it with nothing to spare: a fallback font a pixel
   wider and the menu button would leave the screen. The gaps and the action
   give back ten pixels here. */
@media (max-width: 374px) {
  html body main.pub .pub-bar,
  html body main.pub .pub-bar.is-scrolled { gap: 4px; }
  html body main.pub .pub-bar .btn-sm { padding: 8px 12px; }
}

/* The smallest phones. The theme control goes into the menu, as "Dark mode"
   or "Light mode", because the bar cannot hold it here. */
@media (max-width: 359px) {
  html body main.pub .pub-bar,
  html body main.pub .pub-bar.is-scrolled { gap: 6px; padding: var(--bar-pad-y) 10px; }
  html body main.pub .pub-bar .theme-btn { display: none; }
  html body main.pub .bar-menu-panel .bar-menu-theme { display: block; }
}