/* Shared compact page-header actions. Apply only to an annotated header group. */
.cf-top-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:5px;row-gap:4px;min-width:0;max-width:100%;margin-left:auto;flex:none}
@media(max-width:480px){.cf-top-nav,.cf-ui .cf-nav-pair{flex:1 1 auto;min-width:0}}
.cf-top-nav :is(button,a){box-sizing:border-box!important;display:inline-flex!important;align-items:center;justify-content:center;flex:none;width:auto!important;min-width:0!important;min-height:36px!important;height:36px!important;margin:0!important;padding:0 9px!important;border:1px solid #c7d2e7!important;border-radius:10px!important;background:#f7f9ff!important;color:#3345a5!important;font-size:max(12px,.75rem)!important;font-weight:700!important;line-height:1!important;text-decoration:none!important;white-space:nowrap!important;box-shadow:none!important}
/* Keep the compact default at ordinary text size, while honoring the nutrition
   page's accessibility-scale contract instead of pinning its header actions to
   12 px when the user enlarges text. */
body.cf-health .cf-top-nav :is(button,a){font-size:max(12px,.75rem)!important}
.cf-top-nav :is(button,a)[hidden]{display:none!important}
.cf-top-nav :is(button,a):focus-visible{outline:2px solid #4f46e5;outline-offset:2px}
.cf-top-nav [data-cf-nav-role="home"]{background:#edf1ff!important;border-color:#bac6ee!important;color:#303ea0!important}
#audioCacheDetailModal .cf-top-nav #audioCacheDetailBack{width:64px!important;min-width:64px!important}
.cf-top-nav [data-cf-nav-role="more"]{font-size:max(18px,1.125rem)!important;min-width:36px!important;width:36px!important;padding:0!important}
.cf-top-nav [data-cf-nav-role="more"] svg{display:block;width:20px;height:20px;fill:currentColor;flex:none}
.cf-top-nav [data-cf-nav-role="more"][hidden],.cf-top-nav [data-cf-nav-menu][hidden]{display:none!important}
.cf-top-nav [data-cf-nav-menu]{position:absolute;z-index:2147483000;top:calc(100% + 5px);right:0;display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:132px;max-width:min(240px,calc(100vw - 20px));padding:6px;border:1px solid #d6ddec;border-radius:12px;background:white;box-shadow:0 8px 24px #1725542b}
.cf-top-nav [data-cf-nav-menu] :is(button,a){justify-content:flex-start!important;width:100%!important;min-height:38px!important;height:38px!important;background:white!important}
.cf-top-nav:has([data-cf-nav-menu]:not([hidden])){position:relative;z-index:2147483000}
.player-toolbar.cf-top-nav{width:100%;margin-left:0}
.diary-history-end .diary-history-menu{order:1}
#historyModal .diary-history-end > .cf-top-nav{order:2!important}
.diary-toolbar > [data-cf-nav-role="up"],.diary-toolbar > .cf-home-button{box-sizing:border-box!important;min-height:36px!important;height:36px!important;padding:0 9px!important;border:1px solid #c7d2e7!important;border-radius:10px!important;background:#f7f9ff!important;color:#3345a5!important;font-size:12px!important;font-weight:700!important;white-space:nowrap}
#trackHeader > h3{order:0;margin-right:auto}
#trackHeader > .module-modal-actions{order:1}
#trackHeader > #trackLandingNav{order:2;margin-left:0}
.cf-ui #trackModal.cf-unified #trackHeader #trackConfigToggleBtn{box-sizing:border-box!important;flex:0 0 36px!important;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;border-radius:10px!important;white-space:nowrap!important;line-height:1!important;font-size:20px!important}
#trackOverflowMenu > button:last-child{min-height:38px}
@media(max-width:360px){.cf-top-nav{gap:4px}.cf-top-nav :is(button,a){padding-inline:6px!important;font-size:max(11px,.6875rem)!important}}
/* Touch devices need a full 44 px target even though the compact desktop
   header intentionally stays denser. Widths remain content-sized to preserve
   the 320 px header layout. */
@media(pointer:coarse){
  .cf-top-nav :is(button,a){min-width:44px!important;min-height:44px!important;height:44px!important}
  .cf-top-nav [data-cf-nav-role="more"]{min-width:44px!important;width:44px!important}
  .cf-top-nav [data-cf-nav-menu] :is(button,a){min-height:44px!important;height:44px!important}
}