/* Tabs, for a thing shown both on the command line and through the api.
 *
 * Until the script has built the bar, the panes are plain sections with a
 * heading each: a page with no javascript reads in full, in order. */
.tabs > .tab::before {
    content: attr(data-title);
    display: block;
    font-weight: bold;
    margin: 1em 0 0.3em 0;
}

.tabs-ready {
    border: 1px solid var(--sidebar-bg);
    border-radius: 5px;
    margin: 1em 0;
}

.tabs-ready > .tab-bar {
    display: flex;
    gap: 0.2em;
    padding: 0.3em 0.3em 0 0.3em;
    border-bottom: 1px solid var(--sidebar-bg);
}

.tabs-ready > .tab-bar > button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--fg);
    cursor: pointer;
    font: inherit;
    font-size: 0.9em;
    opacity: 0.6;
    padding: 0.3em 0.8em;
}

.tabs-ready > .tab-bar > button:hover {
    opacity: 1;
}

.tabs-ready > .tab-bar > button.tab-selected {
    border-bottom-color: var(--links);
    opacity: 1;
}

.tabs-ready > .tab {
    display: none;
    padding: 0 0.8em;
}

.tabs-ready > .tab.tab-selected {
    display: block;
}

.tabs-ready > .tab::before {
    /* the bar names the pane now */
    content: none;
}

/* A code block is the whole of most panes, and carries its own margin. */
.tabs-ready > .tab > pre:first-child {
    margin-top: 0.8em;
}