/* mcp.tc listing pages only (page-only, after site.css): the page tabs Overview · Integrate · History · FAQ right under
   the head, Overview opening with the Connect block (listing.php, listing.js). The strip sticks under the site header.
   data-on on .ptabs (set by the inline scripts after the strip and after the panels, before they are drawn, then kept by
   listing.js) marks the current tab, so it shows selected before listing.js runs. Without JS the strip is a row of jump
   links and every section shows in order. The History entries themselves are styled by changes.css (shared with /changes). */
.ptabs-list{position:sticky;top:var(--head);z-index:20;display:flex;gap:8px;overflow-x:auto;border-bottom:1px solid var(--line);background:var(--bg);scrollbar-width:none}
.ptabs-list::-webkit-scrollbar{display:none}
.ptab{padding:12px 8px 13px;font-size:15px}
.ptab::after{left:8px;right:8px}
:is([data-on=overview] [data-t=overview],[data-on=integrate] [data-t=integrate],[data-on=history] [data-t=history],[data-on=faq] [data-t=faq]){color:var(--fg);font-weight:500}
:is([data-on=overview] [data-t=overview],[data-on=integrate] [data-t=integrate],[data-on=history] [data-t=history],[data-on=faq] [data-t=faq])::after{transform:none}
@media (forced-colors:active){:is([data-on=overview] [data-t=overview],[data-on=integrate] [data-t=integrate],[data-on=history] [data-t=history],[data-on=faq] [data-t=faq])::after{forced-color-adjust:none;background:Highlight}}
@media (max-width:719px){.ptabs-list{margin-inline:calc(var(--gutter) * -1);padding-inline:calc(var(--gutter) - 8px)}}
@media (max-width:379px){.ptabs-list{gap:2px}.ptab{padding-inline:5px;font-size:14px}.ptab::after{left:5px;right:5px}} /* four labels fit at 320 px in every language */
@media (min-width:720px){.ptab:first-child{padding-left:0}.ptab:first-child::after{left:0}} /* first label on the text edge */
/* the stuck strip must never cover a focused control or a jump target */
html:has(.ptabs-list){scroll-padding-top:calc(var(--head) + 64px)}
.ptab-panel>.l-sec:first-child{padding-top:32px}
.ptab-panel>.linkblock:first-child{margin-top:24px}
.ptab-panel:focus-visible{outline-offset:6px;border-radius:var(--r-sm)}
/* client tabsets (Set up, Embed): before site.js (deferred) runs, show what it will show (the first panel, or the
   remembered client's), so nothing collapses or jumps after the first paint */
.js .tabs:not(.is-ready)>[role=tablist]{display:flex}
.js .tabs:not(.is-ready)>.panel:not([role=tablist]+.panel){display:none}
.js .tabs:not(.is-ready) .panel-title{display:none}
.js .tabs[data-pre]:not(.is-ready)>.panel:not(.pre){display:none} /* a remembered client (inline script after Set up) */
.js .tabs[data-pre]:not(.is-ready)>.panel.pre{display:block}
/* the inline script after the strip set data-on before the panels were parsed: the others never draw (until the script
   after them marks them hidden, which the rules below then handle) */
.ptabs[data-on=overview] :is(#integrate,#history,#faq):not([hidden]),.ptabs[data-on=integrate] :is(#overview,#history,#faq):not([hidden]),.ptabs[data-on=history] :is(#overview,#integrate,#faq):not([hidden]),.ptabs[data-on=faq] :is(#overview,#integrate,#history):not([hidden]){display:none}
/* find-in-page and jumps to an anchor can open a hidden panel (hidden="until-found", set only where supported) */
.ptab-panel[hidden=until-found]{display:block!important}
/* the History and FAQ tabs name their panels; their h2 stays for the outline and screen readers (data-on, not is-ready:
   it is there before the first paint, only with JS, so the heading never shows and then collapses) */
.ptabs[data-on] :is(#history,#faq)>.l-sec>h2{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.ptab-panel.is-in{animation:panel-in .18s var(--ease-out)}}
@media print{.ptabs-list{display:none}.ptab-panel{display:block!important;content-visibility:visible!important}}
/* Embed: the language menu (needs listing.js; without JS .em-nojs explains ?lang=) and the AI prompt's height */
.em-lang{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:-4px 0 16px;font-size:13px;color:var(--fg-2)}
.em-lang .select{border-color:var(--line)}
html:not(.js) .em-lang,.js .em-nojs{display:none}
.em-prompt .code pre{max-height:min(420px,60vh);overflow-y:auto}
/* Follow (a link to the private follow page; listing.js says "Following" when the signed-in reader follows it): top
   right of the head, under the badges on phones (the head is a grid there) */
.l-follow{flex:none;margin-left:auto}
.l-follow.is-on .i,.h-follow.is-on .i{fill:currentColor}
@media (max-width:559px){.l-follow{grid-column:1/-1;justify-self:start;margin-top:16px;margin-left:0}}