/* ==========================================================================
   tp-audtabs.css - Personal | Business tabs inside the dark top bar (personal site only)
   2026-10-30. On desktop (992px+) the light strip above the bar is hidden and its
   tabs + Service Status sit in the dark bar, which was empty apart from the logo.
   --tp-sw-h (tb-switchbar.css) is set to 8px so the purple menu row sits 8px lower,
   giving the tabs a 45px band. Phones/tablets keep the strip unchanged.
   Loaded only by includes/header.php; the business header is not affected.
   ========================================================================== */
@media (min-width: 992px) {
    body.tp-sw { --tp-sw-h: 8px !important; }
    body.tp-sw .tp-switchbar { display: none; }
    body.tp-sw .navbar.fixed-top { top: 0 !important; }

    .tp-navrow { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; height: 41px; align-self: flex-start;
                 padding-left: clamp(96px, 8vw, 140px); }

    /* Pinned beside the logo, which is fixed at left: 2rem and 80px wide */
    .tp-aud-tabs { position: fixed; top: 7px; left: calc(2rem + 80px + 20px); z-index: 1002;
                   display: inline-flex; padding: 3px; gap: 4px; border-radius: 999px;
                   background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
    .tp-aud-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px; border-radius: 999px;
                     color: #E9DCF8; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none;
                     transition: background .2s, color .2s; }
    .tp-aud-tabs a i { font-size: 13px; opacity: .85; }
    .tp-aud-tabs a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
    .tp-aud-tabs a[aria-current="page"] { background: #fff; color: #320561; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
    .tp-aud-tabs a[aria-current="page"] i { opacity: 1; }
    .tp-aud-tabs a:focus-visible, .tp-status:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    .tp-status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px;
                 color: #E9DCF8; font-size: 14px; font-weight: 500; text-decoration: none; border: 1px solid rgba(255, 255, 255, .18); }
    .tp-status:hover { color: #fff; background: rgba(255, 255, 255, .1); }
    .tp-status .tb-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .2); }
}