/* Tabs (cTabs)

   The markup cTabs emits is:

     <div class="cTabs" data-name data-anchor>
       <ol class="cTabs-tabs">
         <li data-name [data-current]><a href>Caption</a></li>
       </ol>
       <div class="cTabs-content">…</div>
     </div>

   tabs.js sets data-current on the <li> only once that tab's content has
   arrived, so there is deliberately no current tab while the first one is
   still loading. Everything below keys off that attribute rather than a
   class, because the attribute is what the script actually writes. */

/* Main tabs */

.cTabs {
    display: block;
    padding: 0 0 2em 0;
}

/* Tab strip */

.cTabs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .2em;
    list-style: none;
    /* The strip sits on top of the panel so the current tab's bottom border can
       be painted over the panel's, making the two read as one surface. */
    margin: 0 0 -.1em 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.cTabs-tabs li {
    display: block;
}

.cTabs-tabs a {
    background-color: #EEECD4;
    border: .1em solid #C0D7CF;
    border-top-left-radius: .4em;
    border-top-right-radius: .4em;
    display: block;
    padding: .7em 1.2em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    /* Every tab reserves the accent strip the current one fills in, so marking
       a tab current cannot change its height and shuffle the whole row. The
       box is content-box throughout this theme, so a border that appears only
       on one tab would move it. */
    border-top: .3em solid transparent;
}

.cTabs-tabs a:hover {
    background-color: #FEFDF3;
}

.cTabs-tabs a:focus-visible {
    /* The tabs are links and are reached by keyboard, but the browser's own
       outline is drawn tight against the rounded corners and is easy to lose
       against the cream. Offsetting it lifts it clear of the tab edge. */
    outline: .2em solid #3F4043;
    outline-offset: .1em;
}

/* Current tab -- takes the panel's own background and drops the border between
   them, so the tab and its content read as a single sheet. The dark top accent
   is the same way the main menu marks its selected option. */

.cTabs-tabs li[data-current] a,
.cTabs-tabs li[data-current] a:hover {
    background-color: #FFFEEA;
    border-bottom-color: #FFFEEA;
    border-top-color: #3F4043;
}

/* Content panel */

.cTabs-content {
    background-color: #FFFEEA;
    border: .1em solid #C0D7CF;
    /* Holds a little height while the first tab is still being fetched, so the
       page below does not jump as content lands. Kept small, since it is also
       the floor for a genuinely short panel. */
    min-height: 4em;
    padding: 1.5em;
}

/* A form or table dropped straight into a panel carries its own trailing gap,
   which doubles up with the panel's padding. */

.cTabs-content>.cForm:last-child,
.cTabs-content>.cTable:last-child {
    padding-bottom: 0;
}