/* THE SITE HEADER, ONE DEFINITION FOR EVERY PAGE (task #309).
 *
 * Before this file there were six headers: home, snow, /how, profile,
 * developers and apikeys each carried their own bar with its own link set,
 * its own order and its own breakpoints. Four of them hid links on a phone
 * behind .hide-s with nothing to show them in, two of them never listed
 * /how at all, and the two developer pages shared nothing with the rest of
 * the site. Owner: "We need uniformity across our top header menu and
 * links, mobile view is missing, the how page is missing, only desktop
 * showing."
 *
 * So: one stylesheet, one markup block, one script. Every class here is
 * prefixed sn- so it cannot collide with a page's own .btn, .mark or
 * .nav-cta, and the few properties a page's bare nav{} rule would reach
 * into the component with are restated at higher specificity below.
 *
 * The bar is dark on every page, including the white ones. That is the
 * uniformity: the same header over the night the homepage hero is drawn on
 * and over the docs page's paper.
 */

.sn{
  --sn-ground:#0a1425;
  --sn-ink:#ffffff;
  --sn-dim:#b9c8dc;
  --sn-lit:#66a7f1;
  --sn-edge:rgba(255,255,255,.10);
  --sn-hover:rgba(255,255,255,.10);
  --sn-h:60px;

  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; gap:14px;
  min-height:var(--sn-h);
  padding:env(safe-area-inset-top,0px) clamp(14px,4vw,40px) 0;
  background:var(--sn-ground); color:var(--sn-ink);
  border-bottom:1px solid var(--sn-edge);
  font-family:inherit; font-size:14px; line-height:1.2;
}

/* THE MARK */
.sn-mark{
  display:flex; align-items:center; gap:9px; flex:0 0 auto;
  font-weight:700; letter-spacing:.02em; font-size:16px;
  color:var(--sn-ink); text-decoration:none;
}
.sn-mark svg{ width:26px; height:26px; flex:0 0 26px; display:block; }
.sn-mark b{ color:var(--sn-lit); font-weight:700; }

/* THE LINKS. A page's own nav{} rule reaches this element by tag, so every
   property those rules set is restated here at .sn .sn-links (0,2,0). */
.sn .sn-links{
  position:static; top:auto; z-index:auto;
  display:flex; align-items:center; justify-content:flex-start;
  flex-wrap:nowrap; gap:2px;
  margin:0 auto 0 8px; padding:0;
  background:none; border:0; box-shadow:none; backdrop-filter:none;
  color:inherit;
}
.sn-lnk{
  display:inline-block; padding:8px 11px; border-radius:8px;
  color:var(--sn-dim); text-decoration:none;
  font-size:14px; font-weight:500; white-space:nowrap;
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease;
}
.sn-lnk:hover{ background:var(--sn-hover); color:var(--sn-ink); }
.sn-lnk[aria-current="page"]{ color:var(--sn-ink); font-weight:600; background:rgba(255,255,255,.08); }

/* THE END: the one call to action, any page-specific control, the toggle */
.sn-end{ display:flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto; }
.sn .sn-links + .sn-end{ margin-left:0; }
/* THE CTA IS PART OF THE BAR, NOT A POSTER ON IT.
 *
 * It was a solid white pill on a near-black bar: the highest contrast object
 * on every page, louder than the wordmark and louder than the tab a reader is
 * actually on. Owner: "make it less intrusive as well, more in theme."
 *
 * So it takes the bar's own palette. A quiet outline reads as a control
 * without shouting, and the hover and press states give it the weight a solid
 * fill was carrying all the time. */
.sn-cta{
  display:inline-block; padding:8px 15px; border-radius:9px;
  background:transparent; color:var(--sn-ink); border:1px solid rgba(255,255,255,.28);
  font-size:14px; font-weight:600; white-space:nowrap; text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
}
.sn-cta:hover{ background:var(--sn-hover); border-color:rgba(255,255,255,.45); }
.sn-cta:active{ background:rgba(255,255,255,.16); }
.sn-cta:hover{ filter:brightness(.94); }
.sn-aux{
  display:inline-block; padding:8px 13px; border-radius:9px;
  background:transparent; color:var(--sn-ink);
  border:1px solid rgba(255,255,255,.22);
  font:inherit; font-size:14px; font-weight:600; white-space:nowrap;
  text-decoration:none; cursor:pointer;
}
.sn-aux:hover{ background:var(--sn-hover); }

/* NO DROP-DOWN. THE TABS ARE ON THE SCREEN AT EVERY WIDTH (task #315).
 *
 * Owner, Sep 15, with a phone photograph of the header beside the same page
 * in desktop mode: "i do not like our new mobile header, a drop down next to
 * our title is not what we are going for here, make it also look more like
 * desktop view in the way we are delivering each page and tab, remember i
 * said uniformity. And further, the drop down you provided was very basic
 * and lackluster. Ive seen many mobile headers that can fit our tabs in at
 * the appropriate size and pixel etc."
 *
 * They are right, and the photograph proves it: the same page in desktop mode
 * on the same phone carries all five tabs plus the call to action and reads
 * perfectly. The links were never too wide, they were too large. Measured at
 * 12.5 px with 9 px of padding: Snow 44, How it works 84, Safety 50,
 * Developers 80, Profile 50, four gaps 8 = 316 px, against 358 px of usable
 * width on a 390 px phone. It fits with room to spare.
 *
 * So below the breakpoint the bar becomes two rows rather than a menu: the
 * mark and the call to action on the first, the tab row across the full width
 * of the second. That is a header pattern a phone reader already knows, it
 * shows every destination without a press, and it is the desktop bar at a
 * smaller size, which is the uniformity that was asked for. */

/* Author display rules beat the browser's own [hidden] rule; restate it. */
.sn [hidden]{ display:none !important; }

/* ---- the narrow end, last so nothing below can undo it ---- */

/* THE SAME BAR, SMALLER. Nothing is hidden and nothing is folded away: the
   tab row moves to its own line and every label keeps its desktop wording. */
@media (max-width:900px){
  .sn{ flex-wrap:wrap; padding-bottom:0; min-height:0; row-gap:0; }
  .sn-mark{ order:1; }
  /* THE END SLOT REACHES THE RIGHT EDGE.
     `.sn .sn-links + .sn-end{ margin-left:0 }` above is (0,2,0) and is what
     puts the CTA beside the links on a wide bar. Below 900 px the links drop
     to their own row, so the slot should push right again, and the plain
     `.sn-end` rule at (0,1,0) could never win against it: measured at 412 px
     the CTA's right edge sat 175 px short of the screen, hard against the
     wordmark. Restated at the same specificity, it wins on source order. */
  .sn-end{ order:2; }
  .sn .sn-links + .sn-end{ margin-left:auto; }
  .sn .sn-links{
    order:3; flex-basis:100%; width:100%;
    margin:0 calc(-1 * clamp(14px,4vw,40px));
    padding:0 clamp(14px,4vw,40px) 6px;
    gap:2px;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline:clamp(14px,4vw,40px);
  }
  .sn .sn-links::-webkit-scrollbar{ display:none; }
  .sn-mark, .sn-end{ min-height:52px; align-items:center; }
  .sn-mark{ display:inline-flex; }
  .sn-lnk{ font-size:12.5px; padding:7px 9px; border-radius:7px; }
  .sn-cta{ font-size:13px; padding:7px 13px; }
  .sn-aux{ font-size:13px; padding:7px 11px; }
}

/* A small phone keeps every tab. The mark gives up a little size, which is
   the thing on this bar with slack in it, and the call to action shortens
   rather than leaving: it is the one control the page is selling. */
@media (max-width:430px){
  .sn{ padding:env(safe-area-inset-top,0px) 14px 0; }
  .sn .sn-links{ margin:0 -14px; padding:0 14px 6px; scroll-padding-inline:14px; }
  .sn-mark{ font-size:15px; gap:7px; }
  .sn-mark svg{ width:23px; height:23px; flex:0 0 23px; }
  .sn-lnk{ font-size:12px; padding:7px 8px; }
  .sn-cta{ font-size:12.5px; padding:7px 11px; }
}