/* hq99 - shared foundation. Tokens, reset, chrome. Loaded before every page stylesheet. */

:root {
  /* Native widgets (select popups, scrollbars, pickers) are drawn by the
     browser, not by our CSS. This is what makes them dark. */
  color-scheme: dark;

  /* Surface ramp - true black base, each step a real elevation not a tint for decoration */
  --bg:      #000000;
  --bg-1:    #0a0a0a;
  --bg-2:    #121212;
  --line:    #242424;
  --line-2:  #3a3a3a;

  /* Text ramp */
  --fg:      #ffffff;
  --fg-2:    #9a9a9a;
  --fg-3:    #7c7c7c;   /* AA-safe for small text on --bg-1 and --bg-2 */

  /* State only. Never decoration. */
  --ok:      #34d399;
  --bad:     #f87171;
  --warn:    #fbbf24;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale, ~1.33 modular */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   18px;
  --t-lg:   24px;
  --t-xl:   34px;
  --t-2xl:  46px;

  /* 4px base spacing */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  --shell: 1440px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--fg); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* ── Shell: the two vertical hairline rails that frame every page ───────────── */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  border-inline: 1px solid var(--line);
}

/* ── Hatch: diagonal stripe marker used to flag a section, never as filler ──── */
.hatch {
  --hatch-w: 28px;
  width: var(--hatch-w);
  height: 10px;
  flex: none;
  background-image: repeating-linear-gradient(
    -45deg, var(--fg-2) 0 1.5px, transparent 1.5px 5px
  );
}

/* ── Mono label. Reference-spec: uppercase, tracked, tiny. ─────────────────── */
.label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-line: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 13px 22px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { --btn-line: var(--fg); }

.btn-solid { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-line: var(--fg); }
.btn-solid:hover { --btn-bg: var(--fg-2); --btn-line: var(--fg-2); }

.btn-block { width: 100%; }

/* ── Masthead ───────────────────────────────────────────────────────────────
   One navbar for the whole site. Every page uses this markup:

     header.masthead > .masthead-in > [ a.brand, .mh-sep, .mh-label, .mh-actions ]

   The brand and the page label sit together on the left so a visitor always
   knows which surface they are on; page-specific controls go in .mh-actions. */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.masthead-in {
  display: flex;
  align-items: center;
  gap: 0;
  height: 60px;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.brand-mark, .logo-svg { display: block; width: 26px; height: 26px; flex: none; }

.brand-name, .logo-name {
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fg);
}

/* Hairline between the brand and the page label */
.mh-sep {
  width: 1px;
  height: 16px;
  flex: none;
  margin-inline: 14px;
  background: var(--line-2);
}

.mh-label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-left: auto;
  padding-left: var(--s4);
  flex: none;
}

/* Plain text actions (the marketing pages) read as mono links. */
.mh-actions > a:not([class]),
.mh-actions .mh-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color .16s ease;
}
.mh-actions > a:not([class]):hover,
.mh-actions .mh-link:hover { color: var(--fg); }

.nav-toggle { display: none; }

@media (max-width: 720px) {
  .masthead-in { height: 56px; }
  .mh-sep { margin-inline: 10px; }
  .mh-actions { padding-left: var(--s2); gap: 6px; }
}

/* Below this the page label competes with the controls for room. */
@media (max-width: 720px) {
  /* Icon-bearing actions drop their text so a row of them still fits a phone.
     Anything without an icon keeps its label. */
  .mh-actions .nl-label,
  .mh-actions .label-sm { display: none; }
  .mh-actions > a:not([class]) { padding: 8px; }
  .mh-actions > a:not([class]):not(:has(svg)) { padding: 6px 10px; }
}

@media (max-width: 560px) {
  .mh-sep, .mh-label { display: none; }
}

/* ── Collapsible link set, used where there are several nav links ──────────
   Opt in by adding .mh-collapse to .mh-actions and rendering a .nav-toggle. */
@media (max-width: 860px) {
  .masthead .mh-collapse {
    position: fixed;
    inset: 56px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--s2) var(--gutter) var(--s5);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  }
  .masthead .mh-collapse[data-open="true"] { transform: translateY(0); }
  .masthead .mh-collapse > a { width: 100%; padding-block: 14px; text-align: left; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    margin-left: auto;
    flex: none;
  }
  .nav-toggle span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--fg);
    transition: transform .22s ease, opacity .22s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}


/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); margin-top: var(--s10); }
.footer-in {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  align-items: center; justify-content: space-between;
  max-width: var(--shell); margin-inline: auto;
  padding: var(--s6) var(--gutter);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s5); }
.footer-links a { font-family: var(--mono); font-size: var(--t-sm); color: var(--fg-2); }
.footer-links a:hover { color: var(--fg); }
.footer-note { font-family: var(--mono); font-size: var(--t-xs); color: var(--fg-3); }

/* ── Status pill. Pill radius is reserved for live status only. ────────────── */
.status {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2);
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Page grain ─────────────────────────────────────────────────────────────
   The dithered plume from the landing hero, reused as a page backdrop. It is
   fixed and non-interactive; content sits above it via .page / main z-index. */

.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .42;
  pointer-events: none;
}

/* Keeps the type legible over the texture without flattening it */
.grain-scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, transparent 0%, var(--bg) 72%);
}

@media (prefers-reduced-motion: reduce) { .grain { opacity: .3; } }


/* ── Native form controls ───────────────────────────────────────────────────
   The <select> popup is rendered by the OS and ignores most of our styling, so
   the options carry their own colours. Without this the list draws on white
   while the text inherits white from the select, i.e. invisible. */

select {
  color-scheme: dark;
  background-color: var(--bg-2);
  color: var(--fg);
}

select option,
select optgroup,
datalist option {
  background-color: #121212;   /* literal (= --bg-2): the popup is composited
                                  outside the page, so it cannot rely on var() */
  color: #ffffff;
}

select option:checked,
select option:hover {
  background-color: #2a2a2a;
  color: #ffffff;
}

select option:disabled { color: #7c7c7c; }

/* Same reasoning for the other browser-drawn widgets */
input, textarea { color-scheme: dark; }
input::placeholder, textarea::placeholder { color: var(--fg-3); opacity: 1; }