/* MEUTFS Core Beta 52 — Personnel file navigation matches the native
   My MEUTFS button group. Scoped to the dossier; existing radio tabs and
   their content-selection rules in meutfsResponsive.scss remain intact. */
.meutfsDossier .meutfsDossierButtonNav {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 1.2rem;
    padding: .65rem .75rem;
    border: 1px solid var(--wcfContentBorderInner, var(--wcfContentBorder, rgba(125, 125, 125, .25)));
    border-radius: var(--wcfBorderRadiusContainer, .4rem);
    background: var(--wcfContentContainerBackground, var(--wcfContentBackground, transparent));
}
.meutfsDossier .meutfsDossierButtonNav .meutfsDossierButtonGroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.meutfsDossier .meutfsDossierButtonNav .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 2.25rem;
    padding: .6rem .95rem;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: inherit;
    line-height: 1.35;
    cursor: pointer;
    user-select: none;
}
.meutfsDossier .meutfsDossierButtonNav .button:hover {text-decoration:none;}
/* Mirror WoltLab's buttonPrimary state without mutating CSS classes or JS.
   Radio selection continues to control exactly the same record panel. */
.meutfsDossier .meutfsDossierMain > .meutfsRecordProfile:checked ~ .meutfsDossierButtonNav .meutfsDossierNavProfile,
.meutfsDossier .meutfsDossierMain > .meutfsRecordService:checked ~ .meutfsDossierButtonNav .meutfsDossierNavService,
.meutfsDossier .meutfsDossierMain > .meutfsRecordAwards:checked ~ .meutfsDossierButtonNav .meutfsDossierNavAwards,
.meutfsDossier .meutfsDossierMain > .meutfsRecordCombat:checked ~ .meutfsDossierButtonNav .meutfsDossierNavCombat,
.meutfsDossier .meutfsDossierMain > .meutfsRecordRanks:checked ~ .meutfsDossierButtonNav .meutfsDossierNavRanks,
.meutfsDossier .meutfsDossierMain > .meutfsRecordAssignments:checked ~ .meutfsDossierButtonNav .meutfsDossierNavAssignments,
.meutfsDossier .meutfsDossierMain > .meutfsRecordQualifications:checked ~ .meutfsDossierButtonNav .meutfsDossierNavQualifications {
    color: var(--wcfButtonPrimaryColor, var(--wcfButtonPrimaryText, #fff));
    background: var(--wcfButtonPrimaryBackground, var(--wcfContentLink, #c8102e));
    border-color: var(--wcfButtonPrimaryBorder, var(--wcfButtonPrimaryBackground, var(--wcfContentLink, #c8102e)));
    text-decoration: none;
    text-underline-offset: initial;
}
/* The visually hidden native radio is still reachable via keyboard. */
.meutfsDossier .meutfsDossierMain > .meutfsRecordRadio:focus-visible ~ .meutfsDossierButtonNav .button {outline: none;}
.meutfsDossier .meutfsDossierMain > .meutfsRecordProfile:focus-visible ~ .meutfsDossierButtonNav .meutfsDossierNavProfile,
.meutfsDossier .meutfsDossierMain > .meutfsRecordService:focus-visible ~ .meutfsDossierButtonNav .meutfsDossierNavService,
.meutfsDossier .meutfsDossierMain > .meutfsRecordAwards:focus-visible ~ .meutfsDossierButtonNav .meutfsDossierNavAwards,
.meutfsDossier .meutfsDossierMain > .meutfsRecordCombat:focus-visible ~ .meutfsDossierButtonNav .meutfsDossierNavCombat,
.meutfsDossier .meutfsDossierMain > .meutfsRecordRanks:focus-visible ~ .meutfsDossierButtonNav .meutfsDossierNavRanks,
.meutfsDossier .meutfsDossierMain > .meutfsRecordAssignments:focus-visible ~ .meutfsDossierButtonNav .meutfsDossierNavAssignments,
.meutfsDossier .meutfsDossierMain > .meutfsRecordQualifications:focus-visible ~ .meutfsDossierButtonNav .meutfsDossierNavQualifications {
    outline: 2px solid var(--wcfContentLink, currentColor);
    outline-offset: 2px;
}
@media (max-width: 1024px) {
    /* Override the old mobile nowrap/scroll rule: these are button groups. */
    .meutfsDossier .meutfsDossierButtonNav {
        overflow: visible;
    }
    .meutfsDossier .meutfsDossierButtonNav .meutfsDossierButtonGroup {
        flex-wrap: wrap;
    }
}
@media (max-width: 480px) {
    .meutfsDossier .meutfsDossierButtonNav {padding:.55rem;}
    .meutfsDossier .meutfsDossierButtonNav .button {padding:.55rem .75rem;}
}