/* Symbulator — the shared banner
   ==========================================================================
   ONE source for the lockup that appears on all three properties:

       symbulator.com          Documentation/landing/
       learn.symbulator.com    Documentation/web/  (via build.py)
       the app                 repos/local, repos/server

   This file exists because the same rules were previously written out three
   times in three repositories, and drifted twice in a single day, in both
   directions, each fix a person copying values by hand. Import it; do not
   copy it.

   Two bands: .topbar carries the lockup alone, .subbar carries each
   property's own controls in a slightly lighter shade. The sky keyline
   closes the pair, under the subbar.

   It is self-contained on purpose. Every colour is var(--name, #literal), so
   it works whether or not the host defines the tokens, and whatever the host
   calls them. It styles only what is common to all three; each property
   layers its own controls on top (nav links, Start reading / Download the
   PDF, the version picker) in its own stylesheet.

   Both .vnum and .tm are matched for the version numeral, because the three
   properties named that span differently before this file existed.

   Verified computed values at 1280px wide: lockup band 148px, controls
   ribbon 62px, container 1152 and left edge 64 on both,
   logo 80/r12, gap 19.2px, name 32/700/.5px/lh49.6, numeral italic 29.44px
   #8ec7f5, second line 16px #b7c3d6, keyline 3px. If you change anything
   here, re-measure — do not judge by eye.
   ========================================================================== */

:root {
  --banner-w:   72rem;
  --banner-pad: clamp(1.25rem, 4vw, 2.75rem);
}

.topbar {
  position: relative; z-index: 50;
  padding-block: 2.2rem 2rem;
  background: var(--navy, #203864);
  color: #fff;
}

/* The controls ribbon: a second, slightly lighter band under the lockup.
   The lockup band carries the identity and nothing else; every control --
   nav links on symbulator.com, Start reading / Download the PDF and the
   version picker on learn, whatever the app puts there -- sits down here.

   The two bands are one assembly: the shade change is the only divider
   between them, and the 3px sky keyline finishes the pair rather than
   splitting them, so it moved off .topbar and onto .subbar. A page with no
   subbar keeps the keyline via .topbar:last-child below.

   #2a4576 is --navy lightened about 8% -- far enough to read as a distinct
   band on both themes, close enough that the two still read as one header.
   Deliberately not a token: it exists only in relation to --navy. */
.subbar {
  /* Above .topbar so the version picker's dropdown, which lives inside this
     band, is never trapped under the lockup's stacking context. */
  position: relative; z-index: 51;
  background: var(--navy-2, #2a4576);
  border-bottom: 3px solid var(--sky, #8ec7f5);
  color: #fff;
}
.subbar-inner {
  width: min(var(--banner-w), 100%); margin-inline: auto;
  padding-inline: var(--banner-pad);
  min-height: 3.25rem;
  display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap;
  padding-block: 0.6rem;
}
/* Controls sit left, under the wordmark; anything after .subbar-spacer is
   pushed to the right edge. */
.subbar-spacer { flex: 1 1 auto; }

/* A header with no controls ribbon still needs its bottom edge. */
.topbar:last-child { border-bottom: 3px solid var(--sky, #8ec7f5); }

.topbar-inner {
  width: min(var(--banner-w), 100%); margin-inline: auto;
  padding-inline: var(--banner-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

.header-brand {
  /* The app loads no webfont. The websites load IBM Plex. Naming Plex here
     would render the banner in Plex on the sites and the system face in the
     app -- identical layout, different letterforms, and invisible unless you
     look closely. All three therefore pin the system stack on the banner
     alone; the page body keeps whatever the host uses. Do not "tidy" this
     back to --sans. */
  --banner-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex; align-items: center; gap: 1.2rem;
  color: #fff; text-decoration: none; min-width: 0;
}
.header-logo { width: 80px; height: 80px; border-radius: 12px; flex: none; display: block; }
.header-title { min-width: 0; }

.brand-name {
  margin: 0; font-family: var(--banner-sans);
  font-size: 2rem; font-weight: 700; letter-spacing: 0.5px; line-height: 1.55;
}
.brand-name .vnum,
.brand-name .tm {
  color: var(--sky, #8ec7f5);
  font-family: Georgia, "Times New Roman", "Nimbus Roman", serif;
  font-style: italic; font-size: 0.92em; letter-spacing: 0;
}
.brand-sub {
  margin: 0.4rem 0 0; font-family: var(--banner-sans);
  font-size: 1rem; line-height: 1.55; color: #b7c3d6;
}

.theme-toggle {
  flex: none; width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, transform .06s ease;
}
.theme-toggle svg { width: 1.15em; height: 1.15em; flex: none; }
.theme-toggle:hover  { background: rgba(255,255,255,.22); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--sky, #8ec7f5); outline-offset: 2px; }

@media (max-width: 520px) {
  .topbar { padding-block: 1.6rem 1.4rem; }
  .subbar-inner { min-height: 0; padding-block: 0.5rem; gap: 0.45rem; }
  .topbar-inner { gap: 0.9rem; }
  .header-brand { gap: 0.9rem; }
  .header-logo { width: 56px; height: 56px; border-radius: 9px; }
  .brand-name { font-size: 1.4rem; letter-spacing: 0.3px; }
  .brand-sub { font-size: 0.9rem; margin-top: 0.25rem; }
  .theme-toggle { width: 2.15rem; height: 2.15rem; font-size: 1.05rem; }
}