/* RadianVector — shared site header.
   One header for every page, stamped from partials/site-header.html by
   tools/site_header.py. Pages are built on three different stylesheets
   (rv.css, study.css, inline tutorial CSS), so everything here is namespaced
   under .rvh and carries its own colour tokens instead of reading the page's.
   Values match the original rv.css + header.css nav exactly. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600&display=swap');

/* ---------- Tokens: dark by default, light on request or by system ---------- */
.rvh, .rvh-sub {
  --rvh-bg: #08090A; --rvh-surface: #0F1113;
  --rvh-fg: #F4F5F7; --rvh-fg-2: #B2B7BE; --rvh-fg-3: #8D939B; --rvh-fg-4: #767D86;
  --rvh-line: rgba(255,255,255,.09); --rvh-line-strong: rgba(255,255,255,.17); --rvh-hover: rgba(255,255,255,.06);
  --rvh-red: #F5453C; --rvh-red-deep: #B81D1D;
  --rvh-red-wash: rgba(245,69,60,.09); --rvh-red-edge: rgba(245,69,60,.36); --rvh-red-glow: rgba(245,69,60,.34);
  --rvh-blue: #5FA0FF;
  --rvh-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* data-rvh-light: pages whose content is always light (the tutorials). */
:root[data-theme="light"] :is(.rvh, .rvh-sub), .rvh[data-rvh-light] {
  --rvh-bg: #FBFBFC; --rvh-surface: #FFFFFF;
  --rvh-fg: #0D0F12; --rvh-fg-2: #474D55; --rvh-fg-3: #616871; --rvh-fg-4: #6C737C;
  --rvh-line: rgba(13,15,18,.11); --rvh-line-strong: rgba(13,15,18,.20); --rvh-hover: rgba(13,15,18,.04);
  --rvh-red: #DE2B26; --rvh-red-deep: #8E1616;
  --rvh-red-wash: rgba(222,43,38,.07); --rvh-red-edge: rgba(222,43,38,.32); --rvh-red-glow: rgba(222,43,38,.25);
  --rvh-blue: #1B62D4;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.rvh, .rvh-sub) {
    --rvh-bg: #FBFBFC; --rvh-surface: #FFFFFF;
    --rvh-fg: #0D0F12; --rvh-fg-2: #474D55; --rvh-fg-3: #616871; --rvh-fg-4: #6C737C;
    --rvh-line: rgba(13,15,18,.11); --rvh-line-strong: rgba(13,15,18,.20); --rvh-hover: rgba(13,15,18,.04);
    --rvh-red: #DE2B26; --rvh-red-deep: #8E1616;
    --rvh-red-wash: rgba(222,43,38,.07); --rvh-red-edge: rgba(222,43,38,.32); --rvh-red-glow: rgba(222,43,38,.25);
    --rvh-blue: #1B62D4;
  }
}

/* ---------- Reset inside the header, so host-page rules cannot leak in ---------- */
.rvh, .rvh *, .rvh *::before, .rvh *::after,
.rvh-sub, .rvh-sub *, .rvh-sub *::before, .rvh-sub *::after { box-sizing: border-box; }
.rvh :where(a, button), .rvh-sub :where(a) {
  margin: 0; font: inherit; color: inherit; text-decoration: none; letter-spacing: normal; text-transform: none;
}
.rvh :where(button) { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Bar ---------- */
.rvh {
  position: relative; z-index: 90; display: block;
  background: var(--rvh-bg); color: var(--rvh-fg);
  border-bottom: 1px solid var(--rvh-line);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.rvh__in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; max-width: 1480px; height: 82px; margin: 0 auto; padding: 0 24px;
}

/* ---------- Brand ---------- */
.rvh__brand { display: inline-flex; align-items: center; gap: 11px; flex: none; color: var(--rvh-fg); }
.rvh__mark { width: 34px; height: 34px; flex: none; }
.rvh__mark .m-ring { stroke: var(--rvh-line-strong); }
.rvh__mark .m-arc { stroke: var(--rvh-fg); }
.rvh__mark .m-axis { stroke: var(--rvh-fg-4); }
.rvh__mark .m-tip { stroke: var(--rvh-red); }
.rvh__mark .m-dot { fill: var(--rvh-red); }
.rvh__mark .m-a { stop-color: var(--rvh-red-deep); }
.rvh__mark .m-b { stop-color: var(--rvh-red); }
.rvh__name {
  font-family: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.24rem; font-weight: 600; letter-spacing: -0.035em; white-space: nowrap;
}
.rvh__name i { font-style: normal; color: var(--rvh-red); }

/* ---------- Desktop links ---------- */
.rvh__links {
  display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0;
  gap: clamp(16px, 1.7vw, 28px); font-size: .8rem; font-weight: 500; color: var(--rvh-fg-2);
}
.rvh__links a {
  position: relative; padding: 12px 0; line-height: 1.4; white-space: nowrap;
  transition: color .2s var(--rvh-ease);
}
.rvh__links a::after {
  content: ""; position: absolute; left: 0; bottom: 5px; width: 100%; height: 2px;
  background: var(--rvh-red); transform: scaleX(0); transform-origin: left;
  transition: transform .2s var(--rvh-ease);
}
.rvh__links a:is(:hover, :focus-visible) { color: var(--rvh-fg); }
.rvh__links a:is(:hover, :focus-visible, [aria-current])::after { transform: scaleX(1); }
.rvh__links a[aria-current] { color: var(--rvh-fg); }

/* ---------- Actions ---------- */
.rvh__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.rvh__icon {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 10px; color: var(--rvh-fg-2);
  transition: all .22s var(--rvh-ease);
}
.rvh__icon:hover { background: var(--rvh-hover); color: var(--rvh-fg); border-color: var(--rvh-line-strong); }
.rvh__icon svg { width: 17px; height: 17px; }
.rvh__sun { display: none; }
:root[data-theme="light"] .rvh .rvh__sun { display: block; }
:root[data-theme="light"] .rvh .rvh__moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rvh .rvh__sun { display: block; }
  :root:not([data-theme="dark"]) .rvh .rvh__moon { display: none; }
}

.rvh__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 20px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--rvh-line-strong);
  background: color-mix(in srgb, var(--rvh-surface) 72%, transparent); color: var(--rvh-fg);
  font-size: .88rem; font-weight: 600; line-height: 1.5;
  box-shadow: 0 8px 20px -18px rgba(0,0,0,.55);
  transition: all .25s var(--rvh-ease);
}
.rvh__cta:hover {
  border-color: var(--rvh-red-edge); background: var(--rvh-red-wash); color: var(--rvh-fg);
  box-shadow: 0 10px 24px -18px var(--rvh-red-glow); transform: translateY(-1px);
}
.rvh__cta em { font-style: normal; color: var(--rvh-red); }
.rvh__cta svg { width: 15px; height: 15px; flex: none; transition: transform .25s var(--rvh-ease); }
.rvh__cta:hover svg { transform: translateX(3px); }
.rvh :is(a, button):focus-visible { outline: 2px solid var(--rvh-blue); outline-offset: 5px; }

/* ---------- Mobile menu ---------- */
.rvh__menu-btn { display: none; }
.rvh__menu-btn .rvh__close { display: none; }
.rvh__menu-btn.is-open .rvh__lines { display: none; }
.rvh__menu-btn.is-open .rvh__close { display: block; }
.rvh__drawer {
  display: none; max-height: calc(100vh - 82px); overflow-y: auto;
  border-top: 1px solid var(--rvh-line); background: color-mix(in srgb, var(--rvh-bg) 97%, transparent);
  box-shadow: 0 28px 48px -36px rgba(0,0,0,.8);
}
.rvh__drawer.is-open { display: block; }
.rvh__drawer-in {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px;
  max-width: 920px; margin: 0 auto; padding: 18px 24px 24px;
}
.rvh__drawer a:not(.rvh__cta) {
  display: block; padding: 12px 14px; border-radius: 10px;
  color: var(--rvh-fg-2); font-size: .92rem; font-weight: 500;
}
.rvh__drawer a:not(.rvh__cta):hover { background: var(--rvh-hover); color: var(--rvh-fg); }
.rvh__drawer a[aria-current] { color: var(--rvh-fg); background: var(--rvh-hover); }
.rvh__drawer .rvh__cta { grid-column: 1 / -1; width: fit-content; margin: 12px 14px 0; }

@media (max-width: 1300px) {
  .rvh__in { max-width: 1240px; }
  .rvh__links { display: none; }
  .rvh__menu-btn { display: flex; }
}
@media (max-width: 720px) {
  .rvh__actions > .rvh__cta { display: none; }
}
@media (max-width: 560px) {
  .rvh__in { height: 72px; gap: 10px; padding: 0 18px; }
  .rvh__brand { gap: 8px; }
  .rvh__mark { width: 31px; height: 31px; }
  .rvh__name { font-size: 1.12rem; }
  .rvh__icon { width: 38px; height: 38px; }
  .rvh__drawer { max-height: calc(100vh - 72px); }
  .rvh__drawer-in { grid-template-columns: 1fr; gap: 2px; padding: 14px 14px 20px; }
  .rvh__drawer .rvh__cta { width: calc(100% - 28px); }
}

/* ---------- "On this page" bar for long pages ----------
   Sits under the site header and sticks while reading, so the section links
   the long pages always had stay one tap away. The crumb names the section
   the page belongs to and links to its index. */
.rvh-sub {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--rvh-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rvh-line); color: var(--rvh-fg-3);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .8rem; line-height: 1.4;
}
.rvh-sub__in {
  display: flex; align-items: center; gap: 18px;
  width: 100%; max-width: 1480px; height: 48px; margin: 0 auto; padding: 0 24px;
}
.rvh-sub__crumb { display: flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; color: var(--rvh-fg-2); font-weight: 600; }
.rvh-sub__crumb a { color: var(--rvh-fg-2); }
.rvh-sub__crumb a:hover { color: var(--rvh-red); }
.rvh-sub__crumb span[aria-hidden] { color: var(--rvh-fg-4); font-weight: 400; }
.rvh-sub__crumb [aria-current] { color: var(--rvh-fg); }
.rvh-sub__links {
  display: flex; align-items: center; gap: 4px; margin-left: auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.rvh-sub__links::-webkit-scrollbar { display: none; }
.rvh-sub__links a { flex: none; padding: 6px 10px; border-radius: 8px; color: var(--rvh-fg-3); font-weight: 500; white-space: nowrap; }
.rvh-sub__links a:hover, .rvh-sub__links a.active { color: var(--rvh-fg); background: var(--rvh-hover); }
.rvh-sub a:focus-visible { outline: 2px solid var(--rvh-blue); outline-offset: 2px; }
/* Narrow screens scroll the section links sideways; fade the edge to show it. */
@media (max-width: 1000px) {
  .rvh-sub__links { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
}
@media (max-width: 760px) {
  .rvh-sub__in { padding: 0 14px; gap: 12px; }
  .rvh-sub__crumb .rvh-sub__page { display: none; }
  .rvh-sub__crumb span[aria-hidden] { display: none; }
}
@media print { .rvh, .rvh-sub { display: none; } }