/* Local sticky frame. Opaque palette surfaces avoid repaint-heavy blur while
   keeping posters and their text from showing through the navigation. */
:root{--plans-navigation-height:76px;--plans-steps-height:0px}
html{scroll-padding-top:calc(var(--plans-navigation-height) + var(--plans-steps-height) + 16px)}
#plans-navigation{
  --navigation-gutter:max(5vw,calc((100% - 1120px)/2));
  position:sticky;top:0;z-index:30;isolation:isolate;
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
  width:100%;max-width:none;min-height:76px;margin:0;
  padding:10px var(--navigation-gutter);
  padding-top:max(10px,env(safe-area-inset-top));
  background:var(--tools-bg,#f4f2eb);border-bottom:1px solid var(--tools-border,#bcc7b2);
  box-shadow:0 6px 16px #17251c06;
}
#plans-navigation .brand{flex:none;min-height:44px;display:flex;align-items:center;padding:0}
#plans-navigation .brand span{white-space:pre}
#plans-navigation nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;width:auto;max-width:100%;margin-left:auto;gap:6px}
#plans-navigation nav>a{min-height:44px}
#plans-navigation #open-saved-plans{order:1;min-height:44px;padding:10px 14px;border-color:var(--tools-border);background:var(--tools-surface);color:var(--tools-text);font-size:12px;font-weight:600}
#plans-navigation #open-saved-plans:hover,#plans-navigation #open-saved-plans[aria-expanded=true]{background:var(--tools-raised)}
#plans-navigation #tools-theme{order:2;margin-left:0}
body[data-flow=results] #plans-navigation{--navigation-gutter:clamp(24px,3.2vw,80px);padding-block:10px;padding-top:max(10px,env(safe-area-inset-top))}
#flow-nav{position:sticky;top:var(--plans-navigation-height);z-index:25;background:var(--tools-bg,#f4f2eb);padding-block:8px;border-bottom:1px solid var(--tools-border,#bcc7b2)}
body[data-flow=results] #flow-nav{padding-block:8px;border-bottom:1px solid var(--tools-border,#bcc7b2)}
#flow-nav button{min-height:42px}
.skip-link{z-index:60}
@media(max-width:759px){
  #plans-navigation,body[data-flow=results] #plans-navigation{--navigation-gutter:16px;min-height:64px;gap:8px;flex-wrap:nowrap;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top))}
  #plans-navigation .brand{font-size:20px;letter-spacing:-.8px}
  #plans-navigation nav{width:auto;min-width:0;flex-wrap:nowrap;gap:6px;justify-content:flex-end}
  /* The brand already leads to All tools. Prioritize saved plans and theme in
     the compact bar instead of repeating the same destination at phone width. */
  #plans-navigation nav>a{display:none}
  #plans-navigation #open-saved-plans{min-height:44px;padding:10px 11px;font-size:12px;gap:6px}
  #flow-nav{gap:4px;padding-block:6px}
  #flow-nav button{padding:9px 8px;text-align:center}
}
@media(max-width:370px){#plans-navigation .brand span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{#plans-navigation,#flow-nav{position:static;box-shadow:none}}