/* The floating pill header (.hd-*), the same markup on /home, the blog and the five legal pages
   (tests/_landing_build.mjs keeps the copies identical). Loaded after landing.css.

   Shape: a fixed, click-through wrapper centres the pill; the pill itself takes the clicks. At the
   top of the page the pill is wide and tall; once the page has scrolled past 24px landing.js adds
   .is-scrolled and it narrows, lowers its height and turns more opaque. Under 1000px the links,
   Log in fold into a menu panel that the pill grows to hold. */

.hd-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; justify-content: center; padding-inline: 16px;
  pointer-events: none;
}
.hd-spacer { height: 92px }

.hd {
  pointer-events: auto;
  position: relative;
  width: min(1280px, 100%); margin-top: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
  min-height: 64px; padding: 0 10px 0 18px;
  border-radius: 999px; border: 1px solid var(--hd-bd);
  background: var(--hd-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: var(--hd-in), 0 8px 30px rgba(14, 24, 22, .08);
  transition: width .35s cubic-bezier(.2, .7, .3, 1), margin-top .35s cubic-bezier(.2, .7, .3, 1),
    height .35s cubic-bezier(.2, .7, .3, 1), background .35s ease, box-shadow .35s ease,
    border-radius .25s ease;
}
#app.dark .hd { box-shadow: var(--hd-in) }
.hd.is-scrolled { background: var(--hd-bg2); box-shadow: var(--hd-in), var(--hd-sh) }
/* No backdrop blur (an old browser): the glass would show the page text through it unsoftened,
   so the fill goes nearly opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hd { background: var(--hd-open) }
}

.hd-brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  color: var(--text); font-weight: 760; letter-spacing: -.03em;
}
.hd-brand:hover { text-decoration: none }
.hd-brand img {
  width: 38px; height: 38px; border-radius: 11px;
  transition: width .35s cubic-bezier(.2, .7, .3, 1), height .35s cubic-bezier(.2, .7, .3, 1);
}
.hd-name { font-size: 21px; line-height: 1.05; white-space: nowrap; transition: font-size .35s cubic-bezier(.2, .7, .3, 1) }
.hd-sub { display: block; font-size: 11px; font-weight: 520; letter-spacing: 0; color: var(--muted); margin-top: 2px }

.hd-menu {
  display: none;                /* only with JavaScript: landing.js adds .js-menu to <html> */
  appearance: none; flex: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--hd-fillb); background: var(--hd-fill); color: var(--text);
}
html.js-menu .hd-menu { display: flex }
.hd-menu:hover, .theme-toggle:hover { background: var(--tint); border-color: var(--accent) }

/* The theme button: one round glass button, the same 40px as the menu button. It sits in the pill
   (not in the panel) so it is reachable with the menu closed; landing.js sets data-mode and the
   CSS shows the one icon for it. Hidden without JavaScript, where there is nothing to press. */
.theme-toggle {
  display: none; appearance: none; flex: none; cursor: pointer; margin-left: auto;
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--hd-fillb); background: var(--hd-fill); color: var(--text);
}
html.js-menu .theme-toggle { display: flex }
.theme-toggle svg { display: none; width: 19px; height: 19px }
.theme-toggle[data-mode="light"] .ti-light, .theme-toggle[data-mode="dark"] .ti-dark,
.theme-toggle[data-mode="auto"] .ti-auto { display: block }
.hd-menu:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.hd-menu svg { width: 20px; height: 20px }
.hd-menu .ic-close { display: none }
.hd.is-open .hd-menu .ic-open { display: none }
.hd.is-open .hd-menu .ic-close { display: block }

/* Closed menu: the panel is gone. Open: the pill becomes a panel with the links stacked. */
.hd-panel { display: block; width: 100%; flex-basis: 100%; padding: 6px 0 14px }
html.js-menu .hd-panel { display: none }
.hd.is-open { border-radius: 28px; background: var(--hd-open); padding-top: 10px }
html.js-menu .hd.is-open .hd-panel { display: block }
.hd-nav { display: grid; gap: 2px }
.hd-nav a {
  display: block; padding: 13px 14px; border-radius: 16px;
  color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}
.hd-nav a:hover { background: var(--tint); text-decoration: none }
.hd-nav a[aria-current="page"] { background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); font-weight: 650 }

/* An open menu (under 1000px): the page behind it is dimmed and cannot scroll. The scrim is a
   pseudo-element of <body>, under the header (z-index 70) and over everything else; a tap on it
   is a tap outside the header, which landing.js treats as "close". */
@media (max-width: 999px) {
  html.menu-open, html.menu-open body { overflow: hidden }
  html.menu-open body::after {
    content: ""; position: fixed; inset: 0; z-index: 60; background: rgba(8, 12, 12, .32);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
}
.hd-tools { display: flex; align-items: center; gap: 12px; padding: 12px 6px 0 }
.hd-tools .hd-cta { flex: 1 1 auto }

.hd-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 20px; border-radius: 999px; flex: none;
  background: var(--btn-bg); color: var(--btn-fg); font-size: 14.5px; font-weight: 650;
  white-space: nowrap; transition: transform .2s ease, opacity .2s ease;
}
.hd-cta:hover { text-decoration: none; background: var(--btn-hover); color: var(--btn-fg); transform: translateY(-1px) }

@media (min-width: 1000px) {
  .hd-spacer { height: 108px }
  .hd {
    margin-top: 20px; height: 70px; flex-wrap: nowrap; gap: 8px; padding: 0 16px 0 22px;
  }
  .hd.is-scrolled { width: min(1080px, 100%); margin-top: 12px; height: 56px }
  .hd-brand img { width: 40px; height: 40px; border-radius: 12px }
  .hd-name { font-size: 22px }
  .hd.is-scrolled .hd-brand img { width: 34px; height: 34px }
  .hd.is-scrolled .hd-name { font-size: 19px }
  .hd.is-scrolled .hd-sub { display: none }
  html.js-menu .hd-menu { display: none }
  /* The panel dissolves so the nav, the theme button and Log in are the pill's own flex items:
     the theme button (a child of the pill, for the phone) lands between the links and Log in. */
  .hd-panel, html.js-menu .hd-panel, html.js-menu .hd.is-open .hd-panel { display: contents }
  .hd-nav { display: flex; gap: 0; order: 1; flex: 1 1 auto; min-width: 0; justify-content: center }
  .theme-toggle { order: 2; margin-left: 0 }
  .hd-tools { order: 3 }
  .hd-tools .hd-cta { flex: none }
  .hd-nav a {
    padding: 9px 12px; border-radius: 999px; font-size: 14px; font-weight: 560;
    color: var(--muted); white-space: nowrap;
  }
  .hd-nav a:hover { color: var(--text) }
  .hd-nav a[aria-current="page"] { color: var(--ink) }
  .hd-nav a[aria-current="page"] { font-weight: 560 }
  .hd-tools { padding: 0; gap: 12px; flex: none }
  .hd.is-open { border-radius: 999px; background: var(--hd-bg); padding-top: 0 }
  .hd.is-open.is-scrolled { background: var(--hd-bg2) }
}
@media (min-width: 1000px) and (max-width: 1379px) {
  .hd-nav a { padding: 9px 9px }
}
/* The tightest desktop band: the pill is under ~1100px wide, so the links give up a little more
   padding and size and the gaps close up. */
@media (min-width: 1000px) and (max-width: 1099px) {
  .hd { gap: 4px; padding: 0 12px 0 16px }
  .hd-nav a { padding: 9px 7px; font-size: 14px }
  .hd-tools { gap: 6px }
  .hd-cta { padding: 0 16px }
}