/* ============================================================
   GP Team Hub - Page tabs

   The row above a page name that carries the pages beside it. It is
   deliberately not a .chipnav: the chip row under the title picks one
   section of the page you are on, and two rows of identical pills
   stacked on each other would say those two things were the same kind
   of choice. So the tabs are a segmented strip with a surface of their
   own, wider padding and an icon each.

   The current tab is filled with the accent and carries the inverse
   ink, matching the active sidebar row it stands in for. No underline
   and no edge stripe, because a border on one side of a rounded box
   reads as decoration wherever it lands.
   ============================================================ */
.ptabs{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  margin:0 0 16px;
  padding:4px;
  background:var(--surface-high);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.ptabs::-webkit-scrollbar{display:none;}

.ptab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  padding:8px 16px;
  border-radius:var(--radius-sm);
  font-size:.88rem;
  font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
  transition:background .12s,color .12s;
}
.ptab i{font-size:.82rem;color:var(--ink-faint);transition:color .12s;}

.ptab:hover{background:var(--surface-raised);color:var(--ink);text-decoration:none;}
.ptab:hover i{color:var(--accent);}

.ptab-on,
.ptab-on:hover{background:var(--accent-strong);color:var(--ink-inverse);}
.ptab-on i,
.ptab-on:hover i{color:var(--ink-inverse);}

/* Narrow screens read the labels and drop nothing: the strip scrolls
   sideways and the icons carry the tabs that are off the edge. */
/* Under the band, the bar sat hard against it. Centering it needs the
   gap measured to the page name's GLYPHS, not to its box: .page-head
   seats its h1 20px below its own top, so an even 8/8 split of the box
   gap read as 8 above and 28 below. 18 above and a bottom margin of -8
   put 18px of air on both sides of the bar and leave the page name on
   the pixel it was on. Only the pages carrying the band are selected,
   and nothing about the bar itself changes: same width, height,
   padding, gap and tabs. */
.calls-top + .ptabs{
  margin-top:18px;
  margin-bottom:-8px;
}

@media (max-width:520px){
  .ptab{padding:8px 12px;font-size:.84rem;}
}