/* ============================================================
   Pipezoom - Page tabs

   The row above a page name that carries the pages beside it. Because
   the chip row under the title picks 1 section of the current page, the
   tabs are a segmented strip with their own background, wider padding
   and an icon each, drawn apart from .chipnav.

   The current tab is filled with the accent and carries the inverse
   ink, as on the active sidebar row. It has no underline and no edge
   stripe.
   ============================================================ */
.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 is centered on the gap to the page name's
   glyphs. Because .page-head places its h1 20px below its own top, 18px
   above and a bottom margin of -8px give 18px on both sides of the bar
   and leave the page name in place. Only the pages carrying the band
   match, and the bar keeps its 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;}
}