/* The Bond Enterprises look: deep night, white type, one quiet color glow.
   Shared by the QR app, its pages and the member pages. To reuse it elsewhere,
   keep the tokens and change --glow for a brand under Bond, like Sol Rising. */
@font-face { font-family: "Michroma"; font-display: swap; src: url("/fonts/michroma.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-700.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --night: #05040c;
  --raised: #100d22;
  --text: #ffffff;
  --text-soft: #bdb9d0;
  --line: #2e2a45;
  --field-line: #716c8f;
  --action: #ffffff;
  --action-text: #05040c;
  --good: #5fe3d3;
  --warn: #ffd166;
  --bad: #ff8fb0;
  --track: #2e2a45;
  --glow: rgba(123, 47, 191, .18);
  --glow-2: rgba(46, 196, 182, .10);
  --spectrum: linear-gradient(90deg, #2ec4b6, #7b6cff, #ff4fa0, #ffd166);
  --sheen: linear-gradient(135deg, #fff 33%, #2ec4b6 42%, #7b6cff 48%, #ff4fa0 54%, #ffd166 60%, #fff 67%);
  --display: "Michroma", "Atkinson Hyperlegible", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --text-size: 1.0625rem;
  --letter: 0;
}
* { box-sizing: border-box; }
html { font-size: 100%; background: var(--night); }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  /* No background here: the page color is on html, so the backdrop below shows. */
  color: var(--text); background: none;
  font: 400 var(--text-size)/1.55 var(--body);
  letter-spacing: var(--letter); word-spacing: calc(var(--letter) * 2);
}
/* A calm, darkened copy of the bond.enterprises nebula, held still so it
   never competes with what's on the page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55vw 70vh at 78% 30%, var(--glow), transparent 70%),
    linear-gradient(rgba(5, 4, 12, .25), rgba(5, 4, 12, .55)),
    url("/backdrop.jpg") center / cover no-repeat,
    var(--night);
}
a { color: inherit; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; inset-inline-start: -999px; z-index: 50; background: #fff; color: var(--night); padding: .5em 1em; border-radius: 6px; }
.skip:focus { inset-inline-start: 1em; top: .75em; }

/* The page: a sidebar under the logo with the sections and what each is for.
   On narrow screens it becomes a slide-in menu with a bar of shortcuts. */
.shell { display: grid; grid-template-columns: 18.5rem minmax(0, 1fr); min-height: 100dvh; }
.content { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; container: content / inline-size; }
.topbar, .tabbar, .scrim, .side-close { display: none; }
.sidebar {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 1.75em; padding: 1.75em .9em 1.25em;
  border-inline-end: 1px solid var(--line); background: rgba(5, 4, 12, .55);
}
.sidebar > .brand { align-self: stretch; margin-inline: .85em; }
.sidebar > .brand svg { width: 100%; max-width: 15rem; height: auto; }
.brand { position: relative; display: block; flex: none; color: #fff; line-height: 0; }
/* The padding keeps the border away from the edge of the tilted layer, where
   browsers don't smooth lines, so it stays clean in 3D. */
.brand svg { height: 62px; width: auto; max-width: 100%; display: block; padding: 8px; margin: -8px; overflow: visible; backface-visibility: hidden; }
.nav-group { margin: 0 0 .35em .85em; color: var(--text-soft); font-size: .85em; }
.side-nav ul { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: .15em; }
.side-link {
  position: relative; display: flex; gap: .8em; align-items: flex-start;
  padding: .65em .85em; border-radius: 10px; color: var(--text-soft); text-decoration: none;
}
.side-link strong { display: block; color: #fff; font-weight: 700; line-height: 1.3; }
.side-link small { display: block; margin-block-start: .2em; font-size: .86em; line-height: 1.4; }
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side-link .icon { margin-block-start: .05em; color: #fff; }
.side-link:hover, .side-link[aria-current="page"] { background: var(--raised); }
.side-link[aria-current="page"]::before {
  content: ""; position: absolute; inset-block: .7em; inset-inline-start: 0; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #2ec4b6, #7b6cff, #ff4fa0, #ffd166);
}
.side-settings { margin-block-start: auto; border-block-start: 1px solid var(--line); padding-block-start: .4em; }
.side-settings > summary { padding-inline: .85em; color: var(--text-soft); }
.side-settings[open] > summary { color: #fff; }
.side-settings > label { margin: .6em .85em 0; }
.help { display: block; margin-block-end: .4em; color: var(--text-soft); font-size: .9em; font-weight: 400; line-height: 1.45; }
label.check .help { grid-column: 2; margin: 0; }
.section-help { color: var(--text-soft); margin: 0 0 .9em; }

@media (max-width: 1023px) {
  .shell { display: block; }
  .content { min-height: 0; }
  body { padding-block-end: calc(64px + env(safe-area-inset-bottom)); }
  .topbar { display: flex; justify-content: center; padding: .7em 1em; border-block-end: 1px solid var(--line); }
  .topbar .brand svg { height: 54px; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(22rem, 88vw); height: 100dvh;
    padding-block-start: 1.25em; background: #0b0918; border-inline-end: 1px solid var(--field-line);
    transform: translateX(-100%); visibility: hidden;
  }
  .menu-open .sidebar { transform: none; visibility: visible; }
  .side-close {
    display: inline-flex; position: absolute; inset-block-start: .75em; inset-inline-end: .75em;
    min-width: 44px; min-height: 44px; padding: 0; align-items: center; justify-content: center;
  }
  .scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .6); }
  .tabbar {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 30; justify-content: space-around;
    padding: .25em .25em calc(.25em + env(safe-area-inset-bottom));
    background: #0b0918; border-block-start: 1px solid var(--line);
  }
  .tabbar a, .tabbar button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
    min-width: 4.5em; min-height: 52px; padding: .3em .4em; background: none; border: 0; border-radius: 8px;
    color: var(--text-soft); font: inherit; font-size: .76rem; text-decoration: none; cursor: pointer;
  }
  .tabbar a:hover, .tabbar button:hover { background: none; border: 0; color: #fff; }
  .tabbar [aria-current="page"] { color: #fff; font-weight: 700; }
  .tabbar [aria-current="page"]::after { content: ""; position: absolute; inset-inline: 1.1em; bottom: 0; height: 2px; background: var(--spectrum); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .sidebar { transition: transform .25s ease-out, visibility 0s .25s; }
  .menu-open .sidebar { transition: transform .25s ease-out; }
}

/* A regular site menu: across the top on desktop, a bar of icons at the bottom on phones.
   Sites that are apps use the sidebar above instead. */
.topnav {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 2em;
  min-height: 72px; padding-inline: clamp(1em, 4vw, 3em);
  background: rgba(5, 4, 12, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line);
}
.topnav.over-sky { position: fixed; inset-inline: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; }
.topnav .brand svg { height: 60px; }
.topnav nav { margin-inline-start: auto; }
.topnav ul { display: flex; gap: .4em; list-style: none; margin: 0; padding: 0; }
.topnav ul a {
  position: relative; display: flex; align-items: center; gap: .5em; min-height: 44px; padding: .3em .8em;
  color: var(--text-soft); text-decoration: none; border-radius: 8px;
}
.topnav ul .icon { display: none; }
.topnav ul a[aria-current="page"] { color: #fff; font-weight: 700; }
.topnav ul a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: .8em; bottom: 2px; height: 2px; background: var(--spectrum); }
@media (max-width: 760px) {
  body:has(.topnav) { padding-block-end: calc(64px + env(safe-area-inset-bottom)); }
  /* No blur on the top bar here: a backdrop-filter would make the fixed bottom bar
     position itself inside the top bar instead of at the bottom of the screen. */
  .topnav { justify-content: center; min-height: 64px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 4, 12, .94); }
  .topnav nav {
    position: fixed; inset: auto 0 0 0; z-index: 30; margin: 0;
    padding: .25em .25em calc(.25em + env(safe-area-inset-bottom));
    background: #0b0918; border-block-start: 1px solid var(--line);
  }
  .topnav ul { margin: 0; justify-content: space-around; gap: 0; }
  .topnav ul a { flex-direction: column; gap: .15em; min-width: 4.5em; min-height: 52px; justify-content: center; font-size: .76rem; padding: .3em .4em; }
  .topnav ul .icon { display: block; }
  .topnav ul a[aria-current="page"]::after { inset-inline: 1.1em; bottom: 0; }
}

.foot {
  margin-block-start: auto; padding: 1.5em clamp(1em, 4vw, 3em);
  display: flex; flex-wrap: wrap; gap: .4em 2em; justify-content: space-between;
  border-block-start: 1px solid var(--line); color: var(--text-soft); font-size: .92em;
}
.foot p { margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: .1em 1.25em; }
.foot a { display: inline-block; padding-block: .35em; }

.prose { width: min(100%, 44em); margin-inline: auto; padding: clamp(2em, 6vw, 4em) clamp(1em, 4vw, 2em); }
.prose h1, .display { font: 400 clamp(1.5rem, 4vw, 2.1rem)/1.3 var(--display); margin: 0 0 .9em; }
.prose h2 { font-size: 1.2em; margin: 2em 0 .4em; }
.prose p, .prose li { color: var(--text-soft); }
.prose p { margin: 0 0 .9em; }
.prose ul { padding-inline-start: 1.25em; margin: 0 0 .9em; }
.prose li + li { margin-block-start: .35em; }
.prose a { color: #fff; }
.prose .updated { margin-block-start: 2.5em; font-size: .92em; }

/* The rainbow from the selected-item bar, at 135 degrees, for as long as the
   pointer stays. brand.js draws the same effect on the logo. */
@media (hover: hover) {
  .side-link:hover strong, .tabbar a:hover span, .tabbar button:hover span, .topnav ul a:hover span {
    color: transparent; -webkit-text-fill-color: transparent;
    background: var(--sheen) 50% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    .side-link:hover strong, .tabbar a:hover span, .tabbar button:hover span, .topnav ul a:hover span { animation: sheen 1.8s linear infinite; }
  }
  @keyframes sheen {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
  }
}