/* Shared product tab bar. Every page loads this and marks its own tab
   with class="on" + aria-current="page" — that pair is the only state. */
:root{ --ptab-h:58px }

.ptabs{position:sticky;top:0;z-index:200;background:#0b0d12;color:#e8ebf1;
  border-bottom:1px solid #242a36;
  font:15px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.ptabs-in{max-width:1200px;margin:0 auto;padding-inline:clamp(14px,3vw,28px);
  height:var(--ptab-h);display:flex;align-items:center;gap:clamp(8px,2vw,22px);min-width:0}

.ptabs-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
  font-weight:600;letter-spacing:-.02em;font-size:17px;flex:none}
.ptabs-brand img{width:26px;height:26px;image-rendering:pixelated}

.ptabs-list{display:flex;align-items:center;gap:4px;margin-left:auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.ptabs-list::-webkit-scrollbar{display:none}

.ptabs-list a{position:relative;display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 14px;border-radius:999px;color:#8b92a1;text-decoration:none;font-size:14.5px;
  border:1px solid transparent;transition:color .18s,background .18s,border-color .18s}
.ptabs-list a:hover{color:#e8ebf1;background:#171b24}
.ptabs-list a .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;flex:none}

/* The active tab: filled, ringed and dotted. No mistaking it.
   ponytail: no underline — .ptabs-list scrolls sideways, so overflow clips it. */
.ptabs-list a.on{color:#0b0d12;background:#2bd4a2;border-color:#2bd4a2;font-weight:600;
  box-shadow:0 0 0 4px rgba(43,212,162,.16)}
.ptabs-list a.on .dot{background:#0b0d12;opacity:1}

/* labeling.html keeps its own sticky header — park it below this bar. */
body.has-ptabs .nav{top:var(--ptab-h)}
body.has-ptabs .mmenu{inset:calc(var(--ptab-h) + 68px) 0 0}

@media (max-width:760px){
  .ptabs-in{gap:10px}
  .ptabs-brand span{display:none}
  .ptabs-list a{padding:8px 11px;font-size:13.5px}
  /* the bar scrolls sideways here, so the current tab is pinned first */
  .ptabs-list a.on{order:-1}
}