/* A stage with tabs (00-common.md 3.2). Every selector is under .stagetabs and uses child combinators, so the app's own
   .tab and .tabpanel classes drawn inside a scene are never matched, and a page that links this file alone
   (the home page) and a page that also links pages.css (its connect tabs) are both right. */
.stagetabs > .tablist { display: flex; flex-wrap: nowrap; gap: 4px; width: fit-content; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: var(--r); background: var(--win); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.stagetabs > .tablist::-webkit-scrollbar { display: none; }
.stagetabs > .tablist > .tab { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 4px; background: none; color: var(--text2); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 120ms; }
.stagetabs > .tablist > .tab:hover { background: var(--hover); color: var(--text); }
/* The selected tab is told apart by a bar under it as well as by colour. */
.stagetabs > .tablist > .tab[aria-selected="true"] { background: var(--hover); color: var(--text); font-weight: 500; box-shadow: inset 0 -2px 0 var(--accent); }
.stagetabs > .tablist > .tab:focus-visible { outline-offset: -2px; }
.stagetabs > .tabpanel { margin-top: var(--s4); }
.stagetabs > .tabpanel > .tab-h { display: none; margin-bottom: var(--s2); }
@media (max-width: 720px) { .stagetabs > .tablist > .tab { min-height: 44px; padding: 0 12px; } }

/* Before site.js has set the tabs up (no .ready yet), only the first live panel shows, so the stage keeps its
   height when the tabs arrive. Scripts off has no .js class, so every panel still shows there. */
html.js .stagetabs:not(.ready) > .tabpanel:not([hidden]) ~ .tabpanel { display: none; }

/* Scripts off: no tab row, every panel under its own name, and a stage with nothing showing takes no room. */
html:not(.js) .stagetabs > .tablist { display: none; }
html:not(.js) .stagetabs > .tabpanel > .tab-h { display: block; }
html:not(.js) .stagetabs > .tabpanel + .tabpanel { margin-top: var(--s5); }
html:not(.js) .stagetabs:not(:has(> .tabpanel:not([hidden]))) { display: none; }

/* A card's Play control (shown by player.js only when its panel can be shown). */
.btn.play { align-self: flex-start; }