/*
 * The masthead, and the tokens under it, for the pages that have no bundle.
 *
 * The guide and the landing page are hand-written HTML served straight out of
 * public/ -- no vite, no imports -- so they cannot reach the app's stylesheet.
 * Arriving at either one from a search result should still feel like arriving
 * at the same product, and the top rail is what carries that.
 *
 * The `.topbar` and `.brand-mark` blocks here are the same declarations
 * src/style.css builds the app's own rail from. `site.test.ts` compares the two
 * and fails when they drift, because the failure is otherwise invisible: both
 * pages look fine on their own, and only somebody who clicks between them sees
 * two different products.
 */

:root {
  --bg: #08090b;
  --rail: #101216;
  --rail-line: #1b1f25;
  --ink: #e2e7ee;
  --ink-dim: #8b95a2;
  --ink-faint: #5a6470;

  /* What a cable carries, and the only four hues on the site that mean
     anything: every accent below is one of them rather than a fifth colour
     invented for decoration. */
  --sig-audio: #ff9b45;
  --sig-cv: #4bb6ff;
  --sig-gate: #9de661;
  --sig-clock: #d986ff;

  --font-display: "Chakra Petch", "Segoe UI", sans-serif;
  --font-label: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, monospace;
  color-scheme: dark;
}

/* ---------- top bar (mirrors src/style.css) -------------------------- */

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 7px 18px;
  min-height: 62px;
  background: linear-gradient(180deg, #191d23, #101317 70%, #0a0c0f);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 6px 22px -14px #000;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: conic-gradient(from 210deg, var(--sig-audio), var(--sig-clock), var(--sig-cv), var(--sig-gate), var(--sig-audio));
  box-shadow: 0 0 16px -4px var(--sig-audio), inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #0c0e11;
  box-shadow: inset 0 1px 2px #000;
}

.brand-text {
  display: grid;
  line-height: 1.05;
}
/* The app's rail carries the site's <h1>; these pages spend theirs on the
   heading that says what the page is, so the wordmark is a span here. */
.brand-text .brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.22em;
  color: var(--ink);
}
.brand-text i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.brand:hover .brand-name {
  color: #fff;
}

/* ---------- masthead navigation --------------------------------------- */

.topbar a {
  text-decoration: none;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.top-nav a {
  color: var(--ink-dim);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.14s, border-color 0.14s;
}
.top-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--sig-cv);
}
.top-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--rail-line);
}

/* The one button on the rail, in the hue of the thing it opens: audio out. */
.top-nav .go {
  color: #0b0d10;
  background: var(--sig-audio);
  border: 0;
  border-radius: 3px;
  padding: 7px 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  box-shadow: 0 0 18px -8px var(--sig-audio);
}
.top-nav .go:hover {
  color: #0b0d10;
  background: #ffb066;
}

/* One row at phone widths, which takes losing the tagline and tightening the
   wordmark: wrapped, the rail is 90px of chrome before the page has said
   anything, and on a short screen that is most of what there is. */
@media (max-width: 560px) {
  .topbar {
    min-height: 52px;
    padding: 6px 12px;
    gap: 8px 10px;
    flex-wrap: nowrap;
  }
  .brand {
    gap: 8px;
  }
  .brand-text .brand-name {
    font-size: 14px;
    letter-spacing: 0.14em;
  }
  .brand-text i {
    display: none;
  }
  .top-nav {
    gap: 12px;
    font-size: 12px;
  }
  .top-nav .go {
    padding: 6px 10px;
    letter-spacing: 0.1em;
  }
}

:where(a, button):focus-visible {
  outline: 2px solid var(--sig-cv);
  outline-offset: 3px;
  border-radius: 2px;
}