/* The site top bar: brand left, icon nav, theme toggle. Shared by base.html (every product page)
   and profile.html (the homepage), so there is one definition. --wrap and --gutter come from
   rapture.css on the product pages; the homepage does not load it, so each use carries the
   same value as its fallback. */

/* --- The drifting constellation: ONE @keyframes for the whole site ---
   The masthead, the contact band and the tool-web backdrop (.web-backdrop, toolweb.css: /lattice
   and the homepage) point at this. It lives here because
   topbar.css reaches every page (base.html and profile.html link it, rapture.css imports it). */
@keyframes constellation-drift {
  from { -webkit-mask-position: 50% 0%; mask-position: 50% 0%; }
  to { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
}

/* --- Top bar: solid teal, wordmark left, icon nav right ---
   Plain on purpose (2026-10-13: Kevin reverted the constellation layers on the bars; the lines
   live in the masthead, the contact band, the product pages' title band and the tool webs only). */
.topbar {
  background: var(--teal);
  color: var(--on-teal);
  border-bottom: 2px solid var(--brass);
}
.topbar__inner {
  max-width: var(--wrap, 1180px);
  margin: 0 auto;
  padding: 14px var(--gutter, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
/* The homepage sheet underlines links by default; the bar never does. */
.topbar a { text-decoration: none; }
.topbar__brand {
  color: var(--on-teal);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar__brand:hover { color: var(--brass); }

/* --- Icon nav (this IS the nav) --- */
.icon-nav {
  display: flex;
  gap: 26px;
  align-items: stretch;
}
.icon-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, var(--on-teal) 72%, transparent);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 4px 4px;
  border-bottom: 2px solid transparent;
}
.icon-nav a svg { width: 22px; height: 22px; stroke: currentColor; }
.icon-nav a:hover { color: var(--on-teal); }
.icon-nav a.active { color: var(--brass); border-bottom-color: var(--brass); }

/* Light/dark toggle. The site opens dark and never follows the OS (2026-10-13: Kevin chose dark
   as the default); this switches it per browser and is remembered. Only one of the two icons is ever shown: the one for the theme you would GET by
   pressing it, which is why the sun shows while dark and the moon while light. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid color-mix(in srgb, var(--on-teal) 26%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, var(--on-teal) 72%, transparent);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--brass); border-color: var(--brass); }
.theme-toggle svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
/* Pages are served with data-theme="dark", so the sun shows by default (the theme you get by
   pressing it). With no attribute at all the light palette applies and the moon shows. */
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }

/* Narrow desktop and tablet: seven links (crypto and console both on) plus the wordmark and
   toggle need about 910px at full spacing, so the bar would wrap to a second row between 721 and
   about 900px. Tighter gaps, tracking and gutter keep it on one row down to 721px. */
@media (min-width: 721px) and (max-width: 960px) {
  .topbar__inner { --gutter: 20px; gap: 14px; }
  .topbar__brand { letter-spacing: 0.14em; }
  .icon-nav { gap: 10px; }
  .icon-nav a { letter-spacing: 0.06em; }
}

@media (max-width: 720px) {
  .topbar__inner { --gutter: 24px; justify-content: center; gap: 14px; }
  /* Brand on its own row, then the icon grid with the theme toggle beside it. The column count
     follows the link count (icon-nav--n5/6/7, set in _topbar.html) so the last row is never a
     single link: 5 -> 3+2, 6 -> 3+3, 7 -> 4+3. Rows are centred. Each item's width comes from
     the column count, so grid + gap + toggle fits a 320px viewport on one row. */
  .topbar__brand { flex-basis: 100%; text-align: center; }
  .icon-nav {
    --cols: 3;
    --col-gap: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px var(--col-gap);
    flex: 1 1 0;
    min-width: 0;
    max-width: 300px;
  }
  .icon-nav a {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols));
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .icon-nav--n7 { --cols: 4; --col-gap: 6px; }
  .icon-nav--n7 a { letter-spacing: 0.04em; font-size: 0.62rem; }
}

/* --- Site footer: a plain teal bar, shared by base.html and profile.html (templates/_footer.html) ---
   Moved here from rapture.css so the homepage, which does not load rapture.css, draws the same bar.
   Its top border is the 2px brass rule above it. On the homepage it follows the contact band, and
   then that border IS the one rule between the band and the footer, so the margin goes. */
.site-footer {
  background: var(--teal);
  color: color-mix(in srgb, var(--on-teal) 80%, transparent);
  text-align: center;
  padding: 26px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-top: 32px;
  border-top: 2px solid var(--brass);
}
.contact + .site-footer { margin-top: 0; }
.site-footer__link {
  display: inline-block;
  text-decoration: none;  /* the homepage sheet underlines every link; the bar never does */
  margin-left: 14px;
  color: color-mix(in srgb, var(--on-teal) 55%, transparent);
  border-bottom: 1px solid transparent;
}
.site-footer__link:hover { color: var(--on-teal); border-bottom-color: var(--brass); }
.site-footer__privacy {
  margin: 10px 0 0;
  max-width: none;  /* the homepage sheet gives every <p> a 36rem measure, which would left-align this */
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--on-teal) 55%, transparent);
}