/**
 * The pill tabs, one look for the whole site (Ben, 2026-10-29: "share it", rather than a copy for the parent pages).
 * Moved here word for word from css/teacher-dashboard.css, where they were the teacher pages' own; loaded by the
 * teacher dashboard (inc/teacher-dashboard.php), by the Add a child page (inc/family.php) and by the parents' Homework
 * page (inc/parent-homework.php, 2026-11-05: its child and state buttons, Ben: "use the same styles"). A new kind of pill tab
 * joins these selectors; it never copies the values.
 *
 * The colour tokens are the teacher dashboard's; on a page without them the fallbacks are the same values
 * (css/teacher-dashboard.css :root: --lh-td-soft rgba( 1, 47, 70, .04 ), --lh-td-line rgba( 1, 47, 70, .12 )).
 */

/* The two tabs, and the Homework layout switch (.lh-td-lay / .lh-td-layb): one pill switch, one rule.
   The tint is whichever of the two blocks' own tokens is in scope. */
.lh-tc-tabs,
.lh-td-lay,
.lh-rep-tabs,
.lh-today-tabs,
.lh-fam-tabs,
.lh-td-tabs,
.lh-ph-tabs
{
    display: flex;
    /* Each choice stays on one line; on the narrowest phones the next one moves under it instead ("All books 28"
       broke into "All / 28 / books" at 320, the stress test, 2026-10-24). */
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: var( --lh-tc-soft, var( --lh-td-soft, rgba( 1, 47, 70, .04 ) ) );
}

.lh-tc-tab,
.lh-td-layb,
.lh-rep-tab,
.lh-today-tab,
.lh-fam-tab,
.lh-td-tab,
.lh-ph-tab
{
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 500;
    text-decoration: none;
    color: var( --awb-custom_color_12 );
}

/* Phones: less padding at the sides, so three choices fit one line at 400. Measured 2026-10-25: Reports and
   Emails' three tabs needed 343px in a 340px strip at 11px; 9px gives back 12px. */
@media ( max-width: 640px )
{
    .lh-tc-tab,
    .lh-td-layb,
    .lh-rep-tab,
    .lh-today-tab,
    .lh-fam-tab,
    .lh-td-tab,
    .lh-ph-tab
    {
        padding-left: 9px;
        padding-right: 9px;
    }
}

/* Hover (the rule since 2026-10-25: every link changes under the pointer): navy words on a half-white ground. */
.lh-tc-tab:not( .is-on ):hover,
.lh-td-layb:not( .is-on ):hover,
.lh-rep-tab:not( .is-on ):hover,
.lh-today-tab:not( .is-on ):hover,
.lh-fam-tab:not( .is-on ):hover,
.lh-td-tab:not( .is-on ):hover,
.lh-ph-tab:not( .is-on ):hover
{
    color: var( --awb-custom_color_1 );
    background: #fff;
    box-shadow: 0 1px 3px rgba(1, 47, 70, .16);
}

.lh-tc-tab.is-on,
.lh-td-layb.is-on,
.lh-rep-tab.is-on,
.lh-today-tab.is-on,
.lh-fam-tab.is-on,
.lh-td-tab.is-on,
.lh-ph-tab.is-on
{
    background: var( --awb-color1 );
    color: var( --awb-custom_color_1 );
    box-shadow: 0 1px 3px rgba( 1, 47, 70, .16 );
}

nav.lh-rep-tabs a.lh-rep-tab {
    border: solid 1px #fff;
}

nav.lh-rep-tabs a.lh-rep-tab:hover, nav.lh-rep-tabs a.lh-rep-tab.is-on {
    border: solid 1px #212629;
}

/* Reports and Emails: the tabs as the mockup drew them (docs/mockups/td-round2.html, option a; Ben, 2026-10-25:
   "I wanted the tabs to look just like the mockup"). Today's Classes | Books are the same tabs, without the
   numbers (Ben, 2026-10-27), and so are Add a child's My children | Add a child (Ben, 2026-10-29, mockup A).
   Only what differs from the shared pill above: a 1px border, a strip that hugs its tabs, larger words, and a
   round number in front of each (the step, or the count of sent emails), navy on the chosen tab. */
.lh-rep-tabs,
.lh-today-tabs,
.lh-fam-tabs,
.lh-td-tabs,
.lh-ph-tabs
{
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 1px solid var( --lh-td-line, rgba( 1, 47, 70, .12 ) );
}

.lh-rep-tab,
.lh-today-tab,
.lh-fam-tab,
.lh-td-tab,
.lh-ph-tab
{
    gap: 8px;
    padding: 9px 18px;
    font-size: 15px;
    line-height: 1.4;
}

.lh-fam-tab-n,
.lh-td-pill,
.lh-ph-n
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* At least round; a count of 100 or more grows into a pill instead of spilling out (Homework's All). */
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 11px;
    background: rgba( 1, 47, 70, .1 );
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lh-fam-tab.is-on .lh-fam-tab-n,
.lh-td-tab.is-on .lh-td-pill,
.lh-ph-tab.is-on .lh-ph-n
{
    background: var( --awb-custom_color_1 );
    color: var( --awb-color1 );
}

/* Phones: no round numbers. With them the three tabs needed 402px in a 322px strip at 400 and the third went
   to a second row (measured 2026-10-25); without them they need about 312px. Add a child has two tabs and keeps
   its count. */
@media ( max-width: 640px )
{
    .lh-rep-tab,
    .lh-today-tab,
    .lh-fam-tab,
    .lh-td-tab,
    .lh-ph-tab
    {
        padding: 8px 9px;
        font-size: 14px;
        line-height: 1.4;
    }

    .lh-td-pill
    {
        display: none;
    }
}

/* Add a child (mockup A): the two tabs share the page's width equally, the way the mockup drew them. */
.lh-fam-tabs
{
    width: 100%;
}

.lh-fam-tab
{
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
}

/* Phones: both tabs on one row down to 320 (measured 2026-10-29: at 320 "My children 2" needed 133px of 124 and
   went under the other). */
@media ( max-width: 640px )
{
    .lh-fam-tab
    {
        gap: 5px;
        padding-left: 6px;
        padding-right: 6px;
    }
}