/* mobile-header.css — recovered mobile header/nav CSS (mobile-header job, 2026-06-10).
 *
 * WHY THIS FILE EXISTS (root-cause CORRECTION, mobile-header job): the per-page
 * extracted sheets turned out to carry the full header @media cascade after all
 * (verified rule-by-rule against the originals; the orchestrator's "@media
 * blocks were filtered out" diagnosis was wrong in detail). The white-panel
 * symptom had a different root cause: styleMatrixRuntime.ts replays DESKTOP-
 * captured computed facts as INLINE styles (display/visibility/opacity) onto
 * header nodes by data-rrweb-id, and inline beats every media rule — see S3.
 * S1/S2 repeat the captured rules the NEW mobile DOM (overlay / menu button /
 * close button) depends on, verbatim from the original stylesheets, so the
 * header chrome is provably whole independent of any single page sheet.
 * Loaded from index.html BEFORE the runtime-injected page sheets, so on any
 * selector tie the page sheet (the desktop-observed truth) still wins.
 *
 * SOURCES (cite-per-section):
 *   [G] https://clinicaltrials.gov/styles-3NM6M23G.css
 *       = $TRACE/network/bodies/dd5fb4d8cb9e4dc2a5c9b65810fcee4e0c4634e06c9497f20d654d50ba9ea517
 *   [C] ctg-ctgl-header component styles inside https://clinicaltrials.gov/main-TLQSJ2MH.js
 *       = $TRACE/network/bodies/cd1fa50904d22914657f00b5c07af7ca2a868931f03bf4a5bd1bb16cf7bc86b9
 *       (styles:[ array at byte 38451; [_ngcontent-%COMP%] -> [_ngcontent-ng-c2640838376],
 *       the same mechanical substitution Angular performs at runtime — the scope
 *       attribute is the one the captured DOM carries on every header node)
 *
 * Declarations are byte-verbatim from the sources (no asset urls needed here —
 * the in-panel accordion +/- icon rules already live in every page sheet with
 * sha-rewritten urls, e.g. home.css 5132-5173).
 */

/* ============================================================================
 * S1 — VERBATIM from [G]: rules the new mobile DOM (overlay / menu button /
 * close button) and the off-canvas panel depend on. All verified to also exist
 * in the 18 public page sheets (loaded after this file; identical values) —
 * repeated here only so the shared header chrome does not silently depend on
 * every individual page extraction. Media conditions byte-verbatim — no
 * hand-written breakpoints.
 * ========================================================================= */

@keyframes slidein-left{0%{transform:translate(15rem)}to{transform:translate(0)}}

.usa-overlay{position:absolute;inset:0;position:fixed;background:#000000b3;opacity:0;transition:opacity .15s ease-in-out;visibility:hidden;z-index:400}
.usa-overlay.is-visible{opacity:1;visibility:visible}

.usa-menu-btn{color:#0071bc;text-decoration:underline;background-color:transparent;border:0;border-radius:0;box-shadow:none;font-weight:400;justify-content:normal;text-align:left;margin:0;padding:0;width:auto;flex:0 1 auto;padding-left:.75rem;padding-right:.75rem;background-color:#0071bc;color:#fff;font-size:.81rem;height:3rem;text-align:center;text-decoration:none;text-transform:uppercase}
.usa-menu-btn:visited{color:#54278f}
.usa-menu-btn:focus{outline:.25rem solid #2491ff;outline-offset:0rem}
.usa-menu-btn:hover{background-color:#1a4480;color:#fff;text-decoration:none}
.usa-menu-btn:active,.usa-menu-btn:visited{color:#fff}
@media all and (min-width:64em){.usa-menu-btn{display:none}}

.usa-nav__close{color:#0071bc;text-decoration:underline;background-color:transparent;border:0;border-radius:0;box-shadow:none;font-weight:400;justify-content:normal;text-align:left;margin:0;padding:0;width:auto;height:3rem;width:3rem;background-image:none;color:currentColor;flex:none;float:right;margin:-.75rem -1rem 1rem auto;text-align:center}
.usa-nav__close:focus{outline:.25rem solid #2491ff;outline-offset:0rem}
.usa-nav__close:hover{color:currentColor;text-decoration:none}
.usa-nav__close img{width:1.5rem}
.usa-nav__close+*{clear:both}
@media all and (min-width:64em){.usa-nav__close{display:none}}

@media all and (max-width:63.99em){.usa-navbar{align-items:center;border-bottom:1px solid #dfe1e2;display:flex}}

@media all and (max-width:63.99em){.usa-nav{right:0;position:absolute;bottom:0;top:0;position:fixed;background:#fff;border-right:0;display:none;flex-direction:column;overflow-y:auto;padding:1rem;width:15rem;z-index:500}.usa-nav.is-visible{animation:slidein-left .3s ease-in-out;display:flex}}

@media all and (max-width:63.99em){.usa-nav__primary{margin-bottom:0;margin-top:0;list-style-type:none;padding-left:0}.usa-nav__primary>li{margin-bottom:0;max-width:unset}.usa-nav__primary-item{border-top:1px solid #dfe1e2}.usa-nav__primary a:not(.usa-button){display:block;padding:.5rem 1rem;text-decoration:none}.usa-nav__primary a:not(.usa-button):hover{background-color:#f0f0f0;text-decoration:none}.usa-nav__primary a:not(.usa-button):not(.usa-current){color:#565c65}.usa-nav__primary a:not(.usa-button):not(.usa-current):hover{color:#0071bc}.usa-nav__primary a:not(.usa-button):not(.usa-current):focus{outline-offset:0}.usa-nav__primary a{padding-bottom:.75rem;padding-top:.75rem}}

@media all and (max-width:63.99em){.usa-nav__submenu{list-style-type:none;padding-left:0;margin:0}.usa-nav__submenu>li{margin-bottom:0;max-width:unset}.usa-nav__submenu-item{border-top:1px solid #dfe1e2;font-size:.87rem}.usa-nav__submenu .usa-current:after{display:none}.usa-nav__submenu a:not(.usa-button){padding-left:2rem}.usa-nav__submenu .usa-nav__submenu a:not(.usa-button){padding-left:3rem}.usa-nav__submenu .usa-nav__submenu .usa-nav__submenu a:not(.usa-button){padding-left:4rem}}

/* ============================================================================
 * S2 — VERBATIM from [C] (scope substituted): the ctg component rules the new
 * mobile DOM needs. All four also exist in the page sheets (kept by the
 * desktop extraction because the scoped selectors matched); repeated for
 * header self-containment.
 * ========================================================================= */

.usa-menu-btn[_ngcontent-ng-c2640838376]{height:100%;font-size:14px;font-weight:700;background-color:var(--ctgl-color-primary-darkest);color:#fff;width:65px;text-transform:capitalize}
.usa-menu-btn[_ngcontent-ng-c2640838376]:hover{background-color:var(--ctgl-color-primary-dark)}
.usa-nav[_ngcontent-ng-c2640838376] .nav-close-button[_ngcontent-ng-c2640838376]{margin:-.75rem -.75rem 1rem auto}
.adjust-mobile-menu[_ngcontent-ng-c2640838376]{display:flex;flex-direction:column;height:100%}
.mobile-my-list[_ngcontent-ng-c2640838376]{float:right;margin-top:2px;margin-right:-14px;height:1.25em;width:1.25em}

/* ============================================================================
 * S3 — CLONE-RUNTIME ADAPTER (NOT captured CSS; the ONLY non-verbatim rules).
 * styleMatrixRuntime.ts replays the DESKTOP-captured computed facts as INLINE
 * styles keyed by data-rrweb-id — nav 2938 gets `display: block; visibility:
 * visible; opacity: 1` inline on every page, which beats the captured
 * `.usa-nav{display:none}` mobile rule above and produced the white-panel
 * symptom (CONSTITUTION 2026-06-10l runtime-inline-style lesson: that inline
 * display is a runtime output, not authored truth). These two rules repeat the
 * captured declarations EXACTLY (display:none / display:flex, same selectors,
 * same breakpoint) with !important added so the captured mobile contract wins
 * over the replayed desktop inline style. Scoped to the mobile breakpoint —
 * desktop cascade untouched.
 * ========================================================================= */

@media all and (max-width:63.99em){
.usa-nav{display:none!important}
.usa-nav.is-visible{display:flex!important}
/* navbar 2930 gets the desktop fact `display: inline-block` replayed inline,
 * which stacks the Menu button under the logo; the captured mobile decl is
 * `display:flex` (S1 .usa-navbar block above) — repeated here with !important. */
.usa-navbar{display:flex!important}
}