/* Homepage header: podcast icons and Sproto ticket in one right-aligned
   row under the wordmark. Does not restyle the language flags — those
   stay on the original wiki flex wrap (2 rows on desktop, 3 on mobile). */
nav.langs>script{display:none}

/* Combined row under the wordmark: podcast icons then the ticket,
   hugging the right of the content column. flex 100% so it wraps to
   its own row in the original flex nav, without changing flag layout.
   Ticket is 80px tall so the lowered disclosure sits clear of the icons;
   icons ~48px. */
nav.langs .header-links{
  --ticket-h:80px;
  --icon-h:48px;
  flex:0 0 100%;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:100%;
  margin:2px 0 0;
  padding:2px 0 6px;
  overflow:visible;
  background:none;
  border:0;
}

nav.langs .header-links .podcast-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  flex:0 0 auto;
  box-sizing:border-box;
  width:auto;
  max-width:100%;
  margin:0;
  padding:0;
  background:none;
  border:0;
}
nav.langs .header-links .podcast-row a.pl-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 var(--icon-h);
  width:var(--icon-h);
  height:var(--icon-h);
  min-width:0;
  padding:0!important;
  margin:0;
  background:none!important;
  border:0!important;
  border-radius:0;
  box-shadow:none!important;
  outline:0!important;
  filter:none!important;
  overflow:visible;
  color:inherit;
  font-weight:400;
  font-size:0;
  line-height:0;
  text-shadow:none!important;
  text-decoration:none!important;
}
nav.langs .header-links .podcast-row a.pl-icon img{
  display:block;
  width:100%;
  height:100%;
  border-radius:0;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  -ms-interpolation-mode:nearest-neighbor;
}
nav.langs .header-links .podcast-row a.pl-icon:hover{
  filter:brightness(1.08)!important;
  background:none!important;
}
nav.langs .header-links .podcast-row a.pl-icon:active,
nav.langs .header-links .podcast-row a.pl-icon[aria-current]{
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  filter:brightness(1.08)!important;
}
nav.langs .header-links .podcast-row a.pl-icon:focus-visible{
  outline:2px solid #0057e7!important;
  outline-offset:2px;
}

/* Levitating ticket: perspective stage + a spin wrapper that carries both
   the card and a silhouette drop-shadow sitting BEHIND it (not a floor puddle).
   Bob (2.5s) and a modest yaw (5s = two bobs) share one keyframe. */
nav.langs .header-links .sp-ticket-wrap{
  position:relative;
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  min-width:0;
  max-width:100%;
  padding:10px 12px 12px 0;
  margin:-8px 0 -4px 0;
  box-sizing:border-box;
  overflow:visible;
}
nav.langs .header-links .sp-ticket-stage{
  position:relative;
  z-index:1;
  display:block;
  width:min(100%, calc(var(--ticket-h) * 620 / 320));
  perspective:800px;
  perspective-origin:50% 45%;
  transform-style:preserve-3d;
}
nav.langs .header-links .sp-ticket-spin{
  position:relative;
  display:block;
  width:100%;
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  will-change:transform;
  animation:sp-ticket-bob-yaw 5s cubic-bezier(.37,0,.63,1) infinite;
}
nav.langs .header-links .sp-ticket-cast{
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:620 / 320;
  max-height:var(--ticket-h);
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
  user-select:none;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  -ms-interpolation-mode:nearest-neighbor;
  /* Static silhouette; offset/opacity are animated (no animated blur). */
  filter:brightness(0);
  opacity:.38;
  transform:translate3d(4px,5px,-1px);
  transform-origin:50% 50%;
  will-change:transform,opacity;
  animation:sp-ticket-cast 5s cubic-bezier(.37,0,.63,1) infinite;
}
nav.langs .header-links a.sp-ticket{
  position:relative;
  z-index:1;
  display:block;
  flex:none;
  box-sizing:border-box;
  height:auto;
  width:100%;
  min-width:0;
  max-width:100%;
  padding:0!important;
  margin:0;
  background:none!important;
  border:0!important;
  border-radius:0;
  box-shadow:none!important;
  outline:0!important;
  filter:none!important;
  overflow:visible;
  color:inherit;
  font-weight:400;
  font-size:0;
  line-height:0;
  text-shadow:none!important;
  text-decoration:none!important;
  transform:translateZ(0);
  transform-style:preserve-3d;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
}
nav.langs .header-links a.sp-ticket img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:620 / 320;
  max-height:var(--ticket-h);
  border-radius:0;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  -ms-interpolation-mode:nearest-neighbor;
  /* Help browsers keep the hard-cut zigzag crisp under rotateY. */
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Two-faced ticket: designed back is visible through the middle of the 360° click spin. */
nav.langs .header-links .sp-ticket-card{
  position:relative;
  display:block;
  width:100%;
  transform-style:preserve-3d;
}
nav.langs .header-links a.sp-ticket{
  transform-style:preserve-3d;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
}
nav.langs .header-links a.sp-ticket img.sp-ticket-front{
  position:relative;
  z-index:1;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
nav.langs .header-links a.sp-ticket img.sp-ticket-back{
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:620 / 320;
  max-height:var(--ticket-h);
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
  user-select:none;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  -ms-interpolation-mode:nearest-neighbor;
  transform:rotateY(180deg) translateZ(0.5px);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
nav.langs .header-links a.sp-ticket .sp-ticket-badge{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
nav.langs .header-links a.sp-ticket:hover{background:none!important}
nav.langs .header-links a.sp-ticket:active,
nav.langs .header-links a.sp-ticket[aria-current]{
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}
nav.langs .header-links a.sp-ticket:focus-visible{
  outline:2px solid #0057e7!important;
  outline-offset:2px;
}
nav.langs .header-links .sp-ticket-sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Modest bob + modest yaw (tamed from ±18° so the punched right edge stays clean). */
@keyframes sp-ticket-bob-yaw{
  0%   {transform:translateY(2px) rotateY(-12deg) rotateX(2deg)}
  25%  {transform:translateY(-8px) rotateY(0deg) rotateX(-2deg)}
  50%  {transform:translateY(2px) rotateY(12deg) rotateX(2deg)}
  75%  {transform:translateY(-8px) rotateY(0deg) rotateX(-2deg)}
  100% {transform:translateY(2px) rotateY(-12deg) rotateX(2deg)}
}
/* Shadow travels WITH the card (it's inside the spin wrapper). Slightly
   tighter/darker when the ticket is low, farther/lighter when high. */
@keyframes sp-ticket-cast{
  0%,50%,100%{transform:translate3d(3px,4px,-1px);opacity:.44}
  25%,75%{transform:translate3d(6px,7px,-1px);opacity:.26}
}

/* One full 360° yaw on ticket click; plays on .sp-ticket-stage so it
   does not cancel the bob, and still runs when the lookup form opens. */
@keyframes sp-ticket-click-spin{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}
nav.langs .header-links .sp-ticket-stage.is-click-spin{
  animation:sp-ticket-click-spin 1.05s cubic-bezier(.37,.05,.2,1) 1;
}
@media (prefers-reduced-motion:reduce){
  nav.langs .header-links .sp-ticket-stage.is-click-spin{animation:none}
}


/* Form-open no longer freezes the bob — the ticket keeps floating after a click.
   is-high / is-low / is-turn are leftover pose pins; JS does not set them. */
nav.langs .header-links .sp-ticket-wrap.is-high .sp-ticket-spin,
nav.langs .header-links .sp-ticket-wrap.is-low .sp-ticket-spin,
nav.langs .header-links .sp-ticket-wrap.is-turn .sp-ticket-spin,
nav.langs .header-links .sp-ticket-wrap.is-high .sp-ticket-cast,
nav.langs .header-links .sp-ticket-wrap.is-low .sp-ticket-cast,
nav.langs .header-links .sp-ticket-wrap.is-turn .sp-ticket-cast{
  animation:none;
}
nav.langs .header-links .sp-ticket-wrap.is-high .sp-ticket-spin{transform:translateY(-8px) rotateY(0deg) rotateX(-2deg)}
nav.langs .header-links .sp-ticket-wrap.is-high .sp-ticket-cast{transform:translate3d(6px,7px,-1px);opacity:.26}
nav.langs .header-links .sp-ticket-wrap.is-low .sp-ticket-spin{transform:translateY(2px) rotateY(0deg) rotateX(2deg)}
nav.langs .header-links .sp-ticket-wrap.is-low .sp-ticket-cast{transform:translate3d(3px,4px,-1px);opacity:.44}
nav.langs .header-links .sp-ticket-wrap.is-turn .sp-ticket-spin{transform:translateY(-3px) rotateY(-12deg) rotateX(0deg)}
nav.langs .header-links .sp-ticket-wrap.is-turn .sp-ticket-cast{transform:translate3d(4px,5px,-1px);opacity:.34}

@media (prefers-reduced-motion:reduce){
  nav.langs .header-links .sp-ticket-spin,
  nav.langs .header-links .sp-ticket-cast{
    animation:none!important;
  }
  nav.langs .header-links .sp-ticket-spin{transform:none!important}
  nav.langs .header-links .sp-ticket-cast{transform:translate3d(4px,5px,-1px);opacity:.38}
}

/* Address / ENS lookup panel (opened by the ticket; no-JS still follows /sprotogremlins). */
nav.langs .header-links .sp-lookup{
  position:absolute;
  right:10px;
  top:calc(100% - 4px);
  z-index:8;
  width:min(280px, calc(100vw - 24px));
  box-sizing:border-box;
  padding:10px 10px 8px;
  background:#fff;
  color:#111;
  border:1px solid #808080;
  box-shadow:2px 2px 0 rgba(0,0,0,.28);
  font-size:13px;
  font-weight:400;
  line-height:1.35;
  text-align:left;
}
html.dark nav.langs .header-links .sp-lookup{
  background:#1c1c1c;
  color:#eee;
  border-color:#666;
  box-shadow:2px 2px 0 rgba(0,0,0,.55);
}
nav.langs .header-links .sp-lookup[hidden]{display:none!important}
nav.langs .header-links .sp-lookup label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
}
nav.langs .header-links .sp-lookup input[name="q"]{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:4px 0 0;
  padding:5px 7px;
  font:inherit;
  font-size:13px;
  color:inherit;
  background:#fff;
  border:1px solid #808080;
  border-radius:0;
}
html.dark nav.langs .header-links .sp-lookup input[name="q"]{
  background:#111;
  border-color:#666;
  color:#eee;
}
nav.langs .header-links .sp-lookup-actions{
  display:flex;
  gap:6px;
  margin:8px 0 0;
}
nav.langs .header-links .sp-lookup button{
  font:inherit;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  cursor:pointer;
  border:1px solid #808080;
  border-radius:0;
  background:#efefef;
  color:#111;
}
nav.langs .header-links .sp-lookup button[type="submit"]{
  background:#2e7d32;
  border-color:#1b5e20;
  color:#fff;
}
nav.langs .header-links .sp-lookup button.sp-lookup-cancel{background:#eee}
html.dark nav.langs .header-links .sp-lookup button{
  background:#333;
  color:#eee;
  border-color:#666;
}
html.dark nav.langs .header-links .sp-lookup button[type="submit"]{
  background:#2e7d32;
  color:#fff;
  border-color:#1b5e20;
}
nav.langs .header-links .sp-lookup-status{
  margin:8px 0 0;
  min-height:1em;
  font-size:12px;
}
nav.langs .header-links .sp-lookup-status.is-error{color:#b00020}
html.dark nav.langs .header-links .sp-lookup-status.is-error{color:#ff8a80}
nav.langs .header-links .sp-lookup-list{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  max-height:220px;
  overflow:auto;
}
nav.langs .header-links .sp-lookup-list[hidden]{display:none!important}
nav.langs .header-links .sp-lookup-list a{
  position:relative;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  box-sizing:border-box;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:6px 4px!important;
  background:none!important;
  border:0!important;
  border-bottom:1px solid #e0e0e0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  overflow:visible!important;
  color:#111!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.3!important;
  text-shadow:none!important;
  text-decoration:none!important;
  white-space:nowrap;
  filter:none!important;
}
html.dark nav.langs .header-links .sp-lookup-list a{border-bottom-color:#333!important;color:#eee!important}
nav.langs .header-links .sp-lookup-list a:hover,
nav.langs .header-links .sp-lookup-list a:focus-visible{
  background:rgba(51,102,204,.10)!important;
}
nav.langs .header-links .sp-lookup-list .sp-claimed,
nav.langs .header-links .sp-lookup-list .sp-unclaimed{
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
}
nav.langs .header-links .sp-lookup-list .sp-claimed{color:#2e7d32}
nav.langs .header-links .sp-lookup-list .sp-unclaimed{color:#666}
html.dark nav.langs .header-links .sp-lookup-list .sp-unclaimed{color:#aaa}

nav.langs .header-links .merch-slot[hidden]{display:none!important}
@media (max-width:499px){
  nav.langs .header-links{--ticket-h:80px;gap:6px;padding:6px 0 8px}
  nav.langs .header-links .sp-ticket-wrap{padding:8px 8px 10px 0;margin:-6px 0 -2px 0}
  nav.langs .header-links .podcast-row{--icon-h:44px;gap:12px}
}

/* Pull the Wiki title + original disclosure up into the empty left
   of the icons/ticket row so that dead space is gone. Do not restyle
   .brand or .tag (last week's size and shape). Icons sit higher and
   share the same band as the title and disclosure. */
header.top:has(nav.langs .header-links) > .brand-block{
  --ticket-row-h: calc(var(--ticket-h, 80px) + 20px);
  --links-w: calc(var(--icon-h, 48px) * 3 + 16px * 2 + 4px + (var(--ticket-h, 80px) * 620 / 320) + 40px);
  margin-top: calc(0px - var(--ticket-row-h));
  max-width: calc(100% - var(--links-w));
  min-height: var(--ticket-row-h);
  /* Nov 14 2026 (reference screenshot): title + disclosure stacked tight
     (the original 4px flex gap) at the bottom of the icons/ticket band, so
     the Main page tabs sit right under the disclosure like on every other
     page. 8px under the disclosure = the same 10px tag-to-tabs gap as the
     static pages. */
  justify-content:flex-end;
  padding-top:0;
  padding-bottom:8px;
  box-sizing:border-box;
  position:relative;
  z-index:1;
  overflow:visible;
}
/* Disclosure stays original size (0.85rem, compact box). It may run
   under the podcast icons, so only the ticket width is reserved.
   Shrinks only if the remaining column is narrower than the sentence. */
header.top:has(nav.langs .header-links) > .brand-block{
  --ticket-w: calc((var(--ticket-h, 80px) * 620 / 320) + 36px);
  max-width: calc(100% - var(--ticket-w));
  container-type:inline-size;
}
header.top:has(nav.langs .header-links) > .brand-block > .tag{
  white-space:nowrap;
  box-sizing:border-box;
  max-width:100%;
  font-size:.85rem;
  margin-top:0;
}
@container (max-width:388px){
  header.top:has(nav.langs .header-links) > .brand-block > .tag{
    font-size:calc(.85rem * 100cqw / 389px);
  }
}
/* Raise the podcast icons to the top of the row so the original
   disclosure can sit underneath them. The ticket stays vertically
   in the band, hugging the right. Same layout at every width. */
nav.langs .header-links .podcast-row{
  align-self:flex-start;
  padding-top:2px;
}
@media (max-width:499px){
  header.top:has(nav.langs .header-links) > .brand-block{
    --ticket-h:80px;
    --icon-h:44px;
    --ticket-row-h: calc(80px + 16px);
    --ticket-w: calc((80px * 620 / 320) + 28px);
  }
}

/* Tighten the green gap under the disclosure so the Main page
   tabs sit close to the ticket and the sentence. A little room
   stays for the ticket's ground shadow and bob. */
header.top:has(nav.langs .header-links) > nav.site{
  margin-top:2px;
}
header.top:has(nav.langs .header-links) nav.langs .header-links{
  padding-bottom:2px;
}
header.top:has(nav.langs .header-links) nav.langs .header-links .sp-ticket-wrap{
  padding-bottom:8px;
}
@media (max-width:499px){
  header.top:has(nav.langs .header-links) nav.langs .header-links{
    padding-bottom:2px;
  }
  header.top:has(nav.langs .header-links) nav.langs .header-links .sp-ticket-wrap{
    padding-bottom:8px;
  }
}

/* Notification badge: live count of claimed Sproto pages, top-right of the
   ticket, traveling with the bob and yaw. Hidden until the count is known
   and at least 1. */
nav.langs .header-links a.sp-ticket .sp-ticket-badge{
  position:absolute!important;
  top:-8px;
  right:-8px;
  z-index:4;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 5px!important;
  margin:0!important;
  box-sizing:border-box;
  border-radius:999px;
  background:#e3120b!important;
  color:#fff!important;
  font:700 11px/20px Tahoma,Geneva,Verdana,sans-serif!important;
  letter-spacing:0!important;
  text-shadow:none!important;
  text-decoration:none!important;
  border:2px solid #fff!important;
  box-shadow:0 1px 2px rgba(0,0,0,.45)!important;
  filter:none!important;
  pointer-events:none;
  overflow:visible!important;
  white-space:nowrap;
  font-size:11px!important;
  line-height:16px!important;
}
nav.langs .header-links a.sp-ticket .sp-ticket-badge[hidden]{
  display:none!important;
}
@media (max-width:499px){
  nav.langs .header-links a.sp-ticket .sp-ticket-badge{
    min-width:18px;
    height:18px;
    top:-6px;
    right:-6px;
    font-size:10px!important;
    line-height:14px!important;
  }
}

/* Claimed-Sproto directory on /people. */
.sproto-claims{margin:12px 0 8px}
.sproto-claims-status{margin:8px 0;color:#54595d}
.sproto-claims-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:12px 0 4px;
  padding:0;
  list-style:none;
}
.sproto-claims-grid a{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:124px;
  box-sizing:border-box;
  padding:8px 6px 10px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line,#a7d7f9);
  color:#202122;
  text-decoration:none;
  text-align:center;
  gap:4px;
}
.sproto-claims-grid a:hover{background:#eaf3ff;border-color:#36c}
.sproto-claims-grid img{
  display:block;
  width:96px;
  height:96px;
  object-fit:cover;
  background:#eee;
}
.sproto-claims-grid .sc-name{
  font-weight:700;
  font-size:13px;
  line-height:1.25;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sproto-claims-grid .sc-sproto{font-size:12px;color:#54595d}
html.dark .sproto-claims-grid a{background:#181a1d;color:#f0f0f0;border-color:#33363a}
html.dark .sproto-claims-grid a:hover{background:#222;border-color:#69f}
html.dark .sproto-claims-status{color:#aaa}