/* squeez.in site chrome: the header and the footer, the same on every page (tools/chrome/*.html is the
   markup; tools/check-chrome.mjs fails the build if a page drifts). Loaded by every page, after squeezin.css
   and before home.css. Tokens come from squeezin.css (dark only). Desktop: the links and Claim a name sit at
   the right. Phone: one row (logo, Claim a name, menu) and the links open in a sheet; without script the links
   stay on a second row. The header is in normal flow, not sticky. */

/* Brand: the wordmark and its mark. */
.brand {
  font-family: var(--display);
  display: inline-block; margin: 0; padding: 0; min-height: 44px; gap: 0;
  font-weight: 800; font-stretch: 112%; font-size: 22px; letter-spacing: -0.02em; line-height: 44px;
  color: var(--paper); text-decoration: none; white-space: nowrap;
  background: linear-gradient(var(--paper), var(--paper)) 0 calc(100% - 8px) / 0 2px no-repeat;
  transition: background-size 0.35s cubic-bezier(.2,.7,.2,1);
}
.brand:hover { color: var(--paper); }
@media (hover: hover) { .brand:hover { background-size: 100% 2px; } }
.brand:focus-visible { background-size: 100% 2px; }
.brand .wdot { color: var(--disc); margin: 0 -0.06em; }
.brand .logo-mark { display: inline-block; width: 30px; height: 30px; margin-right: 10px; vertical-align: middle; flex: none; border-radius: 8px; box-shadow: 0 0 0 1px rgba(191, 208, 255, 0.5), 0 0 18px rgba(127, 155, 255, 0.45); }

/* Header row */
.h-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px var(--pad) 0; box-sizing: border-box; width: 100%;
}
.h-top nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.h-top nav a {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 44px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center;
  border: 1px solid rgba(185, 195, 242, 0.36);
  background: rgba(43, 39, 102, 0.3); background-image: none;
  color: var(--paper); font-size: 16px; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(191, 208, 255, 0.06), 0 0 14px rgba(191, 208, 255, 0.14);
  transition: border-color 0.25s, box-shadow 0.3s, background-color 0.25s, color 0.2s;
}
/* The scan: a light band that crosses the pill once on hover or focus. */
.h-top nav a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(233, 238, 255, 0.4) 50%, transparent 70%);
  transform: translateX(-100%);
}
.h-top nav a:hover, .h-top nav a:focus-visible {
  border-color: rgba(191, 208, 255, 0.85); background-color: rgba(43, 39, 102, 0.62); color: var(--paper);
  box-shadow: 0 0 0 1px rgba(191, 208, 255, 0.35), 0 0 22px rgba(191, 208, 255, 0.4);
}
.h-top nav a:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.h-top nav a[aria-current="page"] { border-color: rgba(191, 208, 255, 0.85); background-color: rgba(43, 39, 102, 0.62); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .h-top nav a:hover::before, .h-top nav a:focus-visible::before { animation: h-scan 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1; }
}
@keyframes h-scan { to { transform: translateX(100%); } }
.h-top nav a.gh-link { width: 44px; padding: 0; justify-content: center; color: var(--starlight); }
.h-top nav a.gh-link svg { display: block; width: 20px; height: 20px; }
.h-top nav a.gh-link:hover, .h-top nav a.gh-link:focus-visible { color: var(--paper); }

/* Claim a name: the primary action. A disc pill with a price tag, a halo, and a slow idle shine.
   Its own box for the shine: without it the ::after sizes to the whole header and sweeps a sheet across it. */
.h-top .h-claim-link {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 46px; margin-left: 0; padding: 0 20px 0 22px; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(135deg, #F2F5FF 0%, var(--disc) 55%, #A9BEFF 100%);
  color: #10102A; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(233, 238, 255, 0.7), 0 0 18px rgba(191, 208, 255, 0.55), 0 0 42px rgba(127, 155, 255, 0.32);
  display: inline-flex; align-items: center;
}
.h-top .h-claim-link:hover, .h-top .h-claim-link:focus-visible {
  background: linear-gradient(135deg, #FFFFFF 0%, #D2DEFF 55%, #B4C8FF 100%); color: #10102A;
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 26px rgba(191, 208, 255, 0.8), 0 0 60px rgba(127, 155, 255, 0.45);
}
.h-top .h-claim-link:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.h-claim-tag {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; height: 24px; min-width: 34px; padding: 0 8px;
  border-radius: 999px; background: #10102A; color: #F4EEE2; font: 700 13px/1 'Instrument Sans', system-ui, sans-serif;
}
.h-top .h-claim-link::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .h-top .h-claim-link::after { animation: h-shine 4.8s ease-in-out infinite; }
}
@keyframes h-shine { 0%, 62% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }

/* The menu button: shown on a phone only, once the script runs (chrome.js sets html.menu-ready). */
.h-menu {
  display: none; position: relative; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(185, 195, 242, 0.42); background: rgba(43, 39, 102, 0.3); color: var(--paper);
}
.h-menu:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.h-menu-bars, .h-menu-bars::before, .h-menu-bars::after {
  position: absolute; left: 50%; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: currentColor;
  transition: transform 0.25s, top 0.25s, opacity 0.2s;
}
.h-menu-bars { top: 50%; margin-top: -1px; }
.h-menu-bars::before, .h-menu-bars::after { content: ""; left: 0; margin: 0; }
.h-menu-bars::before { top: -6px; }
.h-menu-bars::after { top: 6px; }
.h-menu[aria-expanded="true"] .h-menu-bars { background: transparent; }
.h-menu[aria-expanded="true"] .h-menu-bars::before { top: 0; transform: rotate(45deg); }
.h-menu[aria-expanded="true"] .h-menu-bars::after { top: 0; transform: rotate(-45deg); }

/* Desktop: the nav group sits on the right, directly before Claim a name. */
@media (min-width: 900px) {
  .h-top { gap: 0; }
  .h-top nav { margin-left: auto; gap: 10px; }
  .h-top .h-claim-link { margin-left: 10px; }
}

/* Phone: one header row (logo, Claim a name, menu); the links open in a sheet. */
@media (max-width: 899px) {
  :root { --head: 64px; }
  .h-top {
    height: var(--head); flex-wrap: nowrap; gap: 10px; padding-top: 0; padding-bottom: 0;
    padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right));
  }
  .brand { font-size: 17px; min-height: 40px; line-height: 40px; flex: none; }
  .brand .logo-mark { width: 24px; height: 24px; margin-right: 8px; }
  .h-top .h-claim-link { order: 2; margin-left: auto; min-height: 40px; padding: 0 12px 0 14px; font-size: 15px; flex: none; }
  .h-claim-tag { margin-left: 6px; height: 22px; min-width: 30px; font-size: 12px; }
  .h-menu { order: 3; }
  /* Without script the links stay visible on a second row. */
  html:not(.menu-ready) .h-top { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 10px; row-gap: 8px; }
  html:not(.menu-ready) .h-top nav { order: 4; width: 100%; justify-content: space-between; }
  html.menu-ready .h-top nav { display: none; }
  html.menu-ready .h-menu { display: inline-flex; align-items: center; justify-content: center; }
  html.menu-ready .h-top nav.open {
    display: flex; flex-direction: column; gap: 8px; position: fixed; left: 0; right: 0; top: var(--head); z-index: 6;
    padding: 14px max(var(--pad), env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom));
    background: #1B1846; border-bottom: 1px solid rgba(185, 195, 242, 0.28); border-radius: 0 0 22px 22px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  }
  .h-top nav a { min-height: 40px; padding: 0 16px; font-size: 15px; white-space: nowrap; justify-content: center; }
  html.menu-ready .h-top nav a { width: 100%; }
  html.menu-ready .h-top nav a.gh-link { width: 100%; gap: 8px; }
  html.menu-ready .h-top nav a.gh-link::after { content: "GitHub"; font-size: 15px; font-weight: 600; }
  .h-top .h-claim-link { min-height: 40px; }
}

/* Footer: one nav row and the venture line, the same on every page. In normal flow, below the content. */
.h-foot {
  position: relative; z-index: 1; box-sizing: border-box; width: 100%;
  padding: 28px var(--pad) calc(28px + env(safe-area-inset-bottom));
  margin-top: 40px;
}
.h-foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.h-foot nav a {
  color: var(--starlight); text-decoration: none; font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s cubic-bezier(.2,.7,.2,1), color 0.2s;
}
.h-foot nav a:hover, .h-foot nav a:focus-visible { color: var(--paper); background-size: 100% 1px; }
.h-foot nav a.gh-foot { min-height: 44px; }
.h-foot nav a.gh-foot svg { display: block; flex: none; }
.h-venture { margin: 10px 0 0; font: 500 11px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--starlight); }
.h-venture a { color: var(--starlight); text-underline-offset: 3px; }
.h-venture a:hover, .h-venture a:focus-visible { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .h-top nav a, .h-foot nav a, .brand { transition: none; }
  .h-top nav a::before, .h-top .h-claim-link::after { display: none; }
}

/* Very narrow phones (320 px): the logo, Claim a name and the menu button must fit one row without
   pushing the page wider than the screen. The $2 tag goes; the header tightens. */
@media (max-width: 359px) {
  .h-top { gap: 8px; padding-inline: 12px; }
  .h-top .h-claim-tag, .h-claim-tag { display: none; }
}