/* The site's header, the same on every page: one layout for the logo, the nav, the account picture and the
   workbench button, so nothing moves when you go from one page to another. Every page that shows this header
   loads this file after its own styles, so these rules win; change a header size here, not in a page. */
html { scrollbar-gutter: stable; }   /* the header does not step sideways on a page short enough for no scrollbar */
.bar .top { display: flex; align-items: center; gap: 22px; height: 64px;
  max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.bar .top > a > img { height: 22px; display: block; }
.bar .top nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.bar .top nav a { font-size: 13px; line-height: 1.6; padding: 6px 10px; border-radius: 4px; text-decoration: none; white-space: nowrap; }
.bar .top .tools { display: flex; align-items: center; gap: 14px; margin-left: 0; }
.bar .top #account { margin-left: 0; }
.bar .top .tools .btn, .bar .top > .btn { padding: 10px 16px; min-height: 38px; white-space: nowrap;
  font: 600 14px "Martian Grotesk", Arial, sans-serif; }
.bar .top .btn .short { display: none; }

.sponsor-strip { min-height:44px; display:flex; align-items:center; gap:14px; padding:8px max(20px,calc((100% - 1180px)/2)); background:#182255; color:#fffdf7; font-size:13px; }
.sponsor-label { font:11px 'Martian Mono',monospace; letter-spacing:.08em; text-transform:uppercase; opacity:.72; }
.sponsor-copy { color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.sponsor-copy img { width:28px; height:28px; object-fit:cover; vertical-align:middle; margin-right:8px; border-radius:3px; }
.sponsor-claim { color:#d5ff43; text-decoration:none; white-space:nowrap; }
.sponsor-dashes { display:flex; gap:3px; width:100px; }
.sponsor-dashes i { display:block; height:3px; flex:var(--share); background:rgba(255,255,255,.32); }
.sponsor-dashes i.on { background:#d5ff43; }
.sponsor-strip.compact { min-height:0; padding:0; background:transparent; max-width:190px; font-size:11px; }
.sponsor-strip.compact .sponsor-claim,.sponsor-strip.compact .sponsor-label { display:none; }
.landing-sponsors,.kit-sponsors,.community-sponsors { display:flex; justify-content:center; align-items:center; }
.landing-sponsors .landing-sponsor,.kit-sponsors .landing-sponsor,.community-sponsors .landing-sponsor { width:max-content; max-width:100%; min-width:0; }
.landing-sponsors .landing-sponsor b,.kit-sponsors .landing-sponsor b,.community-sponsors .landing-sponsor b { min-width:0; white-space:normal; overflow-wrap:anywhere; }
/* "Become a Sponsor" is a control, not a sponsor name: never truncate it, and give it a pill. */
.landing-sponsors .landing-sponsor.sponsor-cta,.kit-sponsors .landing-sponsor.sponsor-cta,.community-sponsors .landing-sponsor.sponsor-cta { width:auto; padding:7px 14px; border-radius:999px; background:rgba(255,253,247,.10); box-shadow:inset 0 0 0 1px rgba(255,253,247,.35); color:rgba(255,253,247,.92); transition:background-color .2s,box-shadow .2s,color .2s; }
.landing-sponsors .landing-sponsor.sponsor-cta:hover,.kit-sponsors .landing-sponsor.sponsor-cta:hover,.community-sponsors .landing-sponsor.sponsor-cta:hover { background:rgba(213,255,67,.10); box-shadow:inset 0 0 0 1px var(--lime); color:var(--lime); }
.landing-sponsors .landing-sponsor.sponsor-cta b,.kit-sponsors .landing-sponsor.sponsor-cta b,.community-sponsors .landing-sponsor.sponsor-cta b { max-width:none; white-space:nowrap; overflow:visible; overflow-wrap:normal; }
@media (max-width:900px) { .sponsor-strip.compact { display:none; } }
@media (max-width:560px) { .sponsor-strip .sponsor-copy span,.sponsor-strip .sponsor-claim { display:none; } }

/* The nav drops to the Menu button at the same width on every page (navmenu.mjs shows that button exactly
   when this hides the nav), and the account and the button stay pinned to the right as one group. */
@media (max-width: 820px) {
  .bar .top nav { display: none; }
  .bar .top .tools, .bar .top > .btn { margin-left: auto; }
  .bar .top .tools .btn, .bar .top > .btn { padding: 9px 14px; min-height: 42px; }
  .bar .top .btn .short { display: inline; }
  .bar .top .btn .long { display: none; }
}
@media (max-width: 520px) {
  .bar .top .tools .btn, .bar .top > .btn { padding: 9px 12px; font: 600 13px "Martian Grotesk", Arial, sans-serif; }
}
@media (max-width: 420px) { .bar .top { gap: 12px; } }