/* Shared app tab styles: Tab 1 = dark banner; Tab 2 = folder;
   Tab 3 = underline; Tab 4 = full-width segmented.
   Usage: class="gage-tabs gage-tabs--1" (or --2, --3, --4).
   Choose the style in markup, not with an end-user dropdown.
   Gage Folder Tabs: shared section navigation.
   Container: gage-tabs gage-tabs--folder
   Optional: gage-tabs--compact (secondary sections), gage-tabs--spaced (standalone bar).
   Direct children: buttons or links. Selection: aria-selected/aria-current,
   aria-pressed, or the existing active/selected class. Keep the view's own
   semantics, keyboard handling, and panel associations when adopting this style. */
.gage-tabs:is(.gage-tabs--folder,.gage-tabs--2) {
    --tab-padding: 15px 26px;
    --tab-height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 0;
    background: #edf2f4;
    border: 0;
    border-bottom: 1px solid #a8bec9;
    min-width: 0;
}
.gage-tabs:is(.gage-tabs--folder,.gage-tabs--2) > :is(button, a) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 1 auto;
    box-sizing: border-box;
    max-width: 100%;
    min-height: var(--tab-height);
    margin: 0 0 -1px;
    padding: var(--tab-padding);
    border: 1px solid transparent;
    border-top: 3px solid transparent;
    border-radius: 6px 6px 0 0;
    background: transparent;
    box-shadow: none;
    color: #526d7b;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.gage-tabs:is(.gage-tabs--folder,.gage-tabs--2) > :is(button, a):hover {
    background: #e0e9ed;
    color: #203f50;
}
.gage-tabs:is(.gage-tabs--folder,.gage-tabs--2) > :is(button, a):is(.active, .selected, [aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) {
    background: #fff;
    color: #183b4d;
    border-color: #a8bec9;
    border-top-color: #f65d29;
    border-bottom-color: #fff;
}
.gage-tabs:is(.gage-tabs--folder,.gage-tabs--2) > :is(button, a):focus-visible {
    outline: 2px solid #008799;
    outline-offset: -5px;
}
.gage-tabs:is(.gage-tabs--folder,.gage-tabs--2) > :is(button, a):disabled {
    opacity: .5;
    cursor: not-allowed;
}
.gage-tabs:is(.gage-tabs--folder,.gage-tabs--2) > :is(button, a) span { font-weight: 400; }
.gage-tabs:is(.gage-tabs--folder,.gage-tabs--2).gage-tabs--compact {
    --tab-padding: 10px 18px;
    --tab-height: 42px;
    padding: 8px 16px 0;
}
.gage-tabs.gage-tabs--spaced { margin: 20px 0; }
@media (max-width: 700px) {
    .gage-tabs:is(.gage-tabs--folder,.gage-tabs--2) {
        --tab-padding: 12px 16px;
        padding: 8px 12px 0;
    }
    .gage-tabs:is(.gage-tabs--folder,.gage-tabs--2).gage-tabs--compact {
        --tab-padding: 10px 12px;
    }
}
/* Tab 3: open underline tabs. */
.gage-tabs:is(.gage-tabs--underline,.gage-tabs--3),.gage-tabs:is(.gage-tabs--segmented,.gage-tabs--4){display:flex;flex-wrap:wrap;align-items:stretch;gap:0;min-width:0;margin:0 0 22px;padding:0;border:0;border-bottom:1px solid #afc3cd;background:transparent}
.gage-tabs:is(:is(.gage-tabs--underline,.gage-tabs--3),:is(.gage-tabs--segmented,.gage-tabs--4))>:is(button,a){display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;box-sizing:border-box;margin:0;padding:12px 22px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:#526d7b;font:inherit;font-weight:600;text-decoration:none;text-align:center;cursor:pointer;overflow-wrap:anywhere}
.gage-tabs:is(.gage-tabs--underline,.gage-tabs--3)>:is(button,a):is(.selected,.active,[aria-pressed="true"],[aria-selected="true"],[aria-current="page"]){border-bottom-color:#f65d29;background:#f1f6f7;color:#183b4d}
.gage-tabs:is(:is(.gage-tabs--underline,.gage-tabs--3),:is(.gage-tabs--segmented,.gage-tabs--4))>:is(button,a):hover{background:#e0e9ed;color:#183b4d}
.gage-tabs:is(:is(.gage-tabs--underline,.gage-tabs--3),:is(.gage-tabs--segmented,.gage-tabs--4))>:is(button,a):focus-visible{outline:3px solid #008799;outline-offset:-4px}
.gage-tabs:is(:is(.gage-tabs--underline,.gage-tabs--3),:is(.gage-tabs--segmented,.gage-tabs--4))>:is(button,a):disabled{opacity:.5;cursor:not-allowed}
/* Legacy compact segmented tabs; Tab 4 stretches these across the full width. */
.gage-tabs:is(.gage-tabs--segmented,.gage-tabs--4){width:fit-content;max-width:100%;gap:4px;padding:5px;border:1px solid #afc3cd;border-radius:9px;background:#edf2f4}
.gage-tabs:is(.gage-tabs--segmented,.gage-tabs--4)>:is(button,a){min-height:40px;padding:9px 18px;border:1px solid transparent;border-radius:5px}
.gage-tabs:is(.gage-tabs--segmented,.gage-tabs--4)>:is(button,a):is(.selected,.active,[aria-pressed="true"],[aria-selected="true"],[aria-current="page"]){background:#fff;border-color:#afc3cd;border-top-color:#f65d29;color:#183b4d;box-shadow:0 1px 3px #183b4d1a}
/* Tab 1: dark banner navigation. */
.gage-tabs.gage-tabs--1{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;width:100%;box-sizing:border-box;padding:0;margin:0 0 22px;background:#1b303a;border:0;border-top:3px solid #f65d29}
.gage-tabs.gage-tabs--1>:is(button,a){display:inline-flex;align-items:center;justify-content:center;min-height:50px;max-width:100%;box-sizing:border-box;padding:14px 22px;margin:0;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:#dce8ed;font:inherit;font-weight:600;text-decoration:none;text-align:center;overflow-wrap:anywhere;cursor:pointer}
.gage-tabs.gage-tabs--1>:is(button,a):hover{background:#294653;color:#fff}
.gage-tabs.gage-tabs--1>:is(button,a):is(.selected,.active,[aria-pressed="true"],[aria-selected="true"],[aria-current="page"]){background:#315867;color:#fff;border-bottom-color:#ff936f}
.gage-tabs.gage-tabs--1>:is(button,a):focus-visible{outline:3px solid #ff936f;outline-offset:-5px}
.gage-tabs.gage-tabs--1>:is(button,a):disabled{opacity:.5;cursor:not-allowed}
/* Tab 4: distribute tab segments evenly across the full available width. */
.gage-tabs.gage-tabs--4{width:100%;box-sizing:border-box;flex-wrap:nowrap}
.gage-tabs.gage-tabs--4>:is(button,a){flex:1 1 0;min-width:0;white-space:normal}
@media(max-width:600px){.gage-tabs.gage-tabs--4{flex-wrap:wrap}.gage-tabs.gage-tabs--4>:is(button,a){flex-basis:calc(50% - 4px)}}