/* Adam Blue Plugins: the site header in the Hairline look (2026-09-15)
   Loaded on every page after css/hairline.css (and css/tm-core.css on the
   Text Maker page), scoped to body.hl-site and body.tm-page.

   The bar: full width, sticky, solid deep ground rgba(4,6,20,.88), no blur,
   no glow, no rounded island. One hairline closes it at the bottom and the
   one soft ice light runs along that rule (quiet at the top of the page,
   full once the page has scrolled under it: header.scrolled from main.js).
   Inside the page column: the brand on the left, the five pages as tracked
   uppercase text links (the current one bright with a 1px light bar sitting
   on the bottom rule), a vertical hairline divider, the command palette as a
   small text button ("Ctrl K" or "⌘ K", from the data-tip main.js sets),
   and the white purchase pill on the right.

   Markup (the same block on every page, only the .active link moves):
     header > .wrap > nav[aria-label=Site]
       a.brand
       .hd-links > a.link(.active[aria-current=page]) x5 (the last one .yt)
       a.link.icon.pal   (injected by main.js before .navbuy; hooks kept)
       a.navbuy
   Phones and tablets (980px and below): two rows, the brand and the pill
   first, the links in a second hairline row that wraps if it must. */

:is(.hl-site, .tm-page) header {
  --hd-line: var(--line, rgba(143, 208, 255, 0.16));
  --hd-rule: var(--hl-rule, var(--tm-rule, rgba(143, 208, 255, 0.12)));
  --hd-ice: var(--hl-ice, var(--tm-ice, #cdd8ff));
  --hd-label: var(--hl-eyebrow, var(--tm-eyebrow, #9fb6ff));
  --hd-soft: var(--hl-soft, var(--tm-soft, #b9c4ee));
  --hd-bright: var(--hl-bright, var(--tm-bright, #f4f7ff));
  --hd-light: linear-gradient(90deg, transparent, rgba(205, 216, 255, 0.75) 22%, rgba(205, 216, 255, 0.2) 60%, transparent);
  --hd-bar: linear-gradient(90deg, rgba(205, 216, 255, 0.35), rgba(205, 216, 255, 0.95) 50%, rgba(205, 216, 255, 0.35));
  --hd-h: 64px;
  --hd-pad: 15px;
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0;
  padding: 0;
  background: rgb(4, 6, 20);
  border-bottom: 1px solid var(--hd-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
html.low-fx :is(.hl-site, .tm-page) header { background: rgb(4, 6, 20); }
/* the one light, along the bottom rule */
:is(.hl-site, .tm-page) header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--hd-light);
  opacity: 0.45;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
:is(.hl-site, .tm-page) header.scrolled::after { opacity: 1; }

/* the bar sits in the page column: the brand lines up with the page text */
:is(.hl-site, .tm-page) header .wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
:is(.hl-site, .tm-page) header nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-height: var(--hd-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important; /* the header is the band; beats html.low-fx nav */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* brand */
:is(.hl-site, .tm-page) header .brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 auto 0 0;
  padding: 0;
  font: 700 16px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.01em;
  color: var(--hd-bright);
  text-decoration: none;
  white-space: nowrap;
}
:is(.hl-site, .tm-page) header .brand .spark { color: var(--hd-ice); font-size: 14px; }
:is(.hl-site, .tm-page) header .brand:focus-visible { outline: 1px solid var(--hd-ice); outline-offset: 6px; }

/* the five pages: tracked uppercase text links, full bar height so the
   active bar lands on the bottom rule */
:is(.hl-site, .tm-page) header .hd-links {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-right: 8px;
  margin: 0 8px 0 24px;
}
/* vertical hairline divider between the pages and the tools, inset from the rules */
:is(.hl-site, .tm-page) header .hd-links::after {
  content: "";
  position: absolute;
  right: 0;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--hd-line);
  pointer-events: none;
}
:is(.hl-site, .tm-page) header nav a.link,
:is(.hl-site, .tm-page) header nav a.link:hover,
:is(.hl-site, .tm-page) header nav a.link.active {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding: 0 var(--hd-pad);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 600 12.5px/1 "Inter", sans-serif;
  font-variation-settings: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--hd-label);
  transition: color 0.15s ease;
}
:is(.hl-site, .tm-page) header nav a.link:hover,
:is(.hl-site, .tm-page) header nav a.link.active { color: #fff; }
/* the 1px light bar under the current page, on the bottom rule */
:is(.hl-site, .tm-page) header nav .hd-links a.link::after {
  content: "";
  position: absolute;
  left: var(--hd-pad);
  right: var(--hd-pad);
  bottom: -1px;
  height: 1px;
  background: var(--hd-bar);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
:is(.hl-site, .tm-page) header nav .hd-links a.link:hover::after { opacity: 0.35; }
:is(.hl-site, .tm-page) header nav .hd-links a.link.active::after,
:is(.hl-site, .tm-page) header nav .hd-links a.link.active:hover::after { opacity: 1; }
/* keyboard focus: a hairline ring around the label, not the whole bar height */
:is(.hl-site, .tm-page) header nav .hd-links a.link:focus-visible { outline: none; }
:is(.hl-site, .tm-page) header nav .hd-links a.link::before {
  content: "";
  position: absolute;
  left: calc(var(--hd-pad) - 6px);
  right: calc(var(--hd-pad) - 6px);
  top: 50%;
  height: 28px;
  translate: 0 -50%;
  border: 1px solid var(--hd-ice);
  opacity: 0;
  pointer-events: none;
}
:is(.hl-site, .tm-page) header nav .hd-links a.link:focus-visible::before { opacity: 1; }
/* the external mark on YouTube */
:is(.hl-site, .tm-page) header nav a.link .hd-ext {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  letter-spacing: 0;
  opacity: 0.75;
}

/* the command palette: main.js injects a.link.icon.pal (an svg with the
   platform key in data-tip); here it is a small text button showing that key */
:is(.hl-site, .tm-page) header nav a.link.icon.pal,
:is(.hl-site, .tm-page) header nav a.link.icon.pal:hover {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0 16px 0 4px;
  padding: 6px 4px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 600 11.5px/1 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--hd-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}
:is(.hl-site, .tm-page) header nav a.link.icon.pal:hover { color: #fff; }
:is(.hl-site, .tm-page) header nav a.link.icon.pal svg { display: none; }
:is(.hl-site, .tm-page) header nav a.link.icon.pal::before { content: attr(data-tip); }
:is(.hl-site, .tm-page) header nav a.link.icon.pal::after { content: none; } /* no tooltip: the label is the key */
:is(.hl-site, .tm-page) header nav a.link.icon.pal:focus-visible { outline: 1px solid var(--hd-ice); outline-offset: 3px; }

/* the white purchase pill: the one pill on the site */
:is(.hl-site, .tm-page) header nav .navbuy,
:is(.hl-site, .tm-page) header nav .navbuy:hover {
  display: inline-flex !important; /* stays on phones (style.css hides it under 600px) */
  align-items: center;
  align-self: center;
  gap: 5px;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #d9e1ff);
  color: #101a56;
  font: 700 13px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff;
  transform: none;
  transition: transform 0.15s ease;
}
:is(.hl-site, .tm-page) header nav .navbuy:hover { transform: translateY(-1px); }
:is(.hl-site, .tm-page) header nav .navbuy b { font-weight: 700; opacity: 0.7; }
:is(.hl-site, .tm-page) header nav .navbuy:focus-visible { outline: 1px solid var(--hd-ice); outline-offset: 4px; }

/* tighter tracking of the pages on a small desktop or landscape tablet */
@media (max-width: 1120px) {
  :is(.hl-site, .tm-page) header { --hd-pad: 11px; }
  :is(.hl-site, .tm-page) header nav a.link.icon.pal { margin-right: 12px; }
}

/* phones and tablets: two rows. The brand and the pill on the first,
   the five pages in a second hairline row (it wraps when it must). */
@media (max-width: 980px) {
  :is(.hl-site, .tm-page) header { --hd-h: 54px; --hd-pad: 0px; }
  :is(.hl-site, .tm-page) header nav { flex-wrap: wrap; }
  :is(.hl-site, .tm-page) header .brand { order: 0; min-height: var(--hd-h); }
  :is(.hl-site, .tm-page) header nav a.link.icon.pal { order: 1; margin: 0 14px 0 0; }
  :is(.hl-site, .tm-page) header nav .navbuy { order: 2; }
  :is(.hl-site, .tm-page) header .hd-links {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 26px;
    row-gap: 0;
    min-height: 42px;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hd-rule);
  }
  :is(.hl-site, .tm-page) header .hd-links::after { content: none; }
  :is(.hl-site, .tm-page) header nav .hd-links a.link { min-height: 42px; align-self: auto; }
  :is(.hl-site, .tm-page) header nav .hd-links a.link::after { left: 0; right: 0; }
  :is(.hl-site, .tm-page) header nav .hd-links a.link::before { left: -5px; right: -5px; }
}
@media (max-width: 640px) {
  :is(.hl-site, .tm-page) header .wrap { padding: 0 24px !important; } /* the page gutter (style.css forces 16px) */
  :is(.hl-site, .tm-page) header { --hd-h: 52px; }
  :is(.hl-site, .tm-page) header .brand { font-size: 15px; }
  :is(.hl-site, .tm-page) header nav a.link.icon.pal { display: none; } /* no keyboard on a phone */
  :is(.hl-site, .tm-page) header nav .navbuy { padding: 8px 14px; font-size: 12.5px; }
  /* the five pages on one line at 375px (they wrap on anything narrower) */
  :is(.hl-site, .tm-page) header .hd-links { justify-content: space-between; column-gap: 10px; min-height: 40px; }
  :is(.hl-site, .tm-page) header nav .hd-links a.link { min-height: 40px; font-size: 11px; letter-spacing: 0.1em; }
  :is(.hl-site, .tm-page) header nav a.link .hd-ext { display: none; }
}
/* very narrow phones: the brand and the pill still share the first row */
@media (max-width: 360px) {
  :is(.hl-site, .tm-page) header .wrap { padding: 0 18px !important; }
  :is(.hl-site, .tm-page) header .brand { font-size: 14px; gap: 5px; }
  :is(.hl-site, .tm-page) header nav .navbuy { padding: 7px 10px; font-size: 12px; }
  /* the five links keep one row down to 349px (they wrapped YouTube onto a third row at 360) */
  :is(.hl-site, .tm-page) header .hd-links { column-gap: 10px; }
  :is(.hl-site, .tm-page) header nav .hd-links a.link { letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.hl-site, .tm-page) header::after,
  :is(.hl-site, .tm-page) header nav a.link,
  :is(.hl-site, .tm-page) header nav .hd-links a.link::after,
  :is(.hl-site, .tm-page) header nav .navbuy { transition: none; }
}