/* The site's one header and footer links row — every page has the same links in the same
   place (tests/test_site_nav.py keeps them identical). Self-contained: its own colours (the
   site's tokens) and its own sn-/sf- classes, so no page's styles reach into it. */
.sn{background:#f6f4f0;border-bottom:1px solid #dedddd;position:relative;z-index:30}
.sn *,.sf *{box-sizing:border-box}
.sn-in{max-width:1180px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:24px;
  box-sizing:border-box}
.sn-logo{display:flex;align-items:center;gap:11px;font-weight:650;font-size:19px;
  letter-spacing:-.01em;text-decoration:none;color:#222121;flex:none}
.sn-logo svg{height:22px;width:auto;flex:none;overflow:visible}
.sn-links{display:flex;gap:22px;margin-left:auto}
.sn-links a,.sn-drop a{color:#6f6b66;text-decoration:none;font-size:14px;white-space:nowrap}
.sn-links a:hover,.sn-drop a:hover{color:#222121}
.sn-links a[aria-current="page"],.sn-drop a[aria-current="page"]{color:#222121}
/* the page you are on: underlined, same weight (the links do not shift between pages) */
.sn-links a{padding-bottom:3px}
.sn-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 #5261d6}
.sn-drop a[aria-current="page"]{box-shadow:inset 3px 0 0 #5261d6}
.sn-cta{display:inline-block;background:#222121;color:#f6f4f0;border:1px solid #222121;
  border-radius:3px;padding:10px 20px;font-size:14px;font-weight:550;text-decoration:none;
  white-space:nowrap;flex:none}
.sn-cta:hover{opacity:.85}
.sn-cta[hidden]{display:none}
.sn a:focus-visible,.sn summary:focus-visible,.sf a:focus-visible{outline:2px solid #6b63f5;outline-offset:3px}

/* phones and narrow windows: the links fold into a Menu (a <details>: works without JS) */
.sn-menu{display:none;position:relative;flex:none}
.sn-menu summary{list-style:none;cursor:pointer;border:1px solid #dedddd;border-radius:3px;
  padding:9px 12px;font-size:13px;line-height:1.2;color:#222121;background:#fff;user-select:none}
.sn-menu summary::-webkit-details-marker{display:none}
.sn-menu summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.sn-menu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.sn-drop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid #dedddd;
  border-radius:4px;box-shadow:0 10px 28px rgba(34,33,33,.12);padding:6px 0;min-width:210px;
  display:flex;flex-direction:column}
.sn-drop a{padding:11px 18px;font-size:15px}
.sn-drop hr{border:0;border-top:1px solid #dedddd;margin:6px 0}
/* seven links and the button: between the phone menu and ~1100px the row needs tighter gaps */
@media (max-width:1100px){
  .sn-in{gap:16px}
  .sn-links{gap:14px}
  .sn-cta{padding:10px 14px}
}
@media (max-width:980px){
  .sn-links{display:none}
  .sn-menu{display:block}
  .sn-cta{margin-left:auto}
}
@media (max-width:560px){
  .sn-in{gap:10px;padding:12px 16px}
  .sn-logo{font-size:17px}
  .sn-cta{padding:9px 12px;font-size:13px}
}

/* a long page's own sections, under its title ("On this page") */
.sn-op{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:20px 0 0;font-size:14px}
.sn-op span{color:#6f6b66;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase}
.sn-op a{color:#5261d6;text-decoration:none}
.sn-op a:hover{text-decoration:underline}

/* the footer's links row (each page keeps its own disclaimer and tagline around it) */
.sf{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;font-size:13px;color:#6f6b66}
.sf a{color:#6f6b66;text-decoration:none}
.sf a:hover{color:#222121;text-decoration:underline}
.sf .sf-tag{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}