/* Canonical Fuel navigation — identical markup on every surface (React dashboard,
   lifting, compare, explore + the static recipes and meal-plan pages).

   Always a top navigation. Two states from the same DOM:
     >= 900px  single row: brand left, icon + label pills right
     <  900px  two rows: brand, then a full-width horizontally scrollable pill row

   Every destination keeps its label at every size, and pills stay at least 38px tall
   so they remain comfortable touch targets. */

:root {
  --fuel-nav-bg: #f7f7f5;
  --fuel-nav-panel: #ffffff;
  --fuel-nav-ink: #111111;
  --fuel-nav-muted: #83837e;
  --fuel-nav-border: #e3e3df;
  --fuel-nav-hover: #ececea;
}

/* ---------- Top bar ---------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 12px 0 13px;
  background: var(--fuel-nav-bg);
}
.topbar .brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.topbar .brand h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--fuel-nav-ink); white-space: nowrap; }
.topbar .brand-text { display: grid; gap: 1px; min-width: 0; }
.topbar .brand-date { margin: 0; font-size: 12px; font-weight: 600; color: var(--fuel-nav-muted); white-space: nowrap; }
.topbar .brand-date .date-short { display: none; }

/* Signed-in Google account picture */
.topbar .brand-avatar {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--fuel-nav-border);
  background: #f0f0ee;
}
.topbar .brand-avatar-fallback { display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #4a4a46; }

/* ---------- Nav items -------------------------------------------------------- */
.topbar .user { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.topbar .user .nav-icon-button {
  position: relative;
  /* Must not shrink: the labels are nowrap, so a shrinking pill overflows its text
     onto the neighbouring item instead of getting narrower. */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* App.css pins `.user button { width: 38px }`, which squashed the <button> items to
     icon-only while the <a> items sized naturally. Set it back explicitly. */
  width: auto;
  height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--fuel-nav-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease;
}
.topbar .user .nav-icon-button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Specific enough to beat App.css's generic `.user span` rule, which loads later. */
.topbar .user .nav-icon-button .nav-label { font-size: 13px; font-weight: 650; color: inherit; letter-spacing: -.01em; }
.topbar .user .nav-icon-button:hover { background: var(--fuel-nav-hover); color: var(--fuel-nav-ink); }
.topbar .user .nav-icon-button.nav-active { background: var(--fuel-nav-ink); color: #fff; }
.topbar .user .nav-icon-button:focus-visible { outline: 2px solid var(--fuel-nav-ink); outline-offset: 2px; }

/* ---------- Menus ------------------------------------------------------------ */
/* Wrapper around the config ("More") button. The React app uses .profile-shell, the
   static pages .fuel-nav-shell; keep them identical here so this file is the single
   source of truth (DashEdit.css used to redeclare these and win). */
.fuel-nav-shell, .topbar .user .profile-shell { display: grid; }

/* The dropdown is a SIBLING of the pill row, not a child of it, and hangs off the
   header at every width.

   It cannot live inside .topbar .user: below 900px that row is a horizontal overflow
   container, which clips an absolutely-positioned child. Positioning the panel `fixed`
   escapes that clipping on desktop but not on a real phone — iOS Safari mispositions
   and clips `fixed` descendants of a touch-scrolling container (the row also carries
   -webkit-overflow-scrolling: touch), so the menu opened somewhere off-screen.

   Anchoring to .topbar instead solves it outright: .topbar is sticky, so it is the
   containing block, and it has visible overflow, so nothing clips. No viewport
   measurement, no custom properties, no JS, and one rule for every screen size. */
.topbar .fuel-menu, .topbar .profile-menu {
  position: absolute;
  top: calc(100% - 4px);
  right: 0;
  left: auto;
  bottom: auto;
  z-index: 100;
  width: min(268px, calc(100vw - 24px));
  max-height: 68vh;
  overflow-y: auto;
  padding: 6px;
  display: grid; gap: 2px;
  background: var(--fuel-nav-panel);
  border: 1px solid var(--fuel-nav-border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.15);
}
.fuel-menu[hidden] { display: none; }
.topbar .fuel-menu button, .topbar .fuel-menu a,
.topbar .profile-menu button, .topbar .profile-menu a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border: 0; background: transparent; color: var(--fuel-nav-ink);
  font-size: 13.5px; font-weight: 650; text-align: left; text-decoration: none;
  border-radius: 10px; cursor: pointer;
}
.topbar .fuel-menu button:hover, .topbar .fuel-menu a:hover,
.topbar .profile-menu button:hover, .topbar .profile-menu a:hover { background: var(--fuel-nav-hover); }
.topbar .fuel-menu svg, .topbar .profile-menu svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Mobile / narrow: the nav moves to its own row under the brand -----
   Still a top navigation, just given a full-width row of its own so every pill keeps
   its label and a comfortable target. The row scrolls horizontally when the
   destinations outrun the screen; the active pill is scrolled into view on load. */
@media (max-width: 899px) {
  .topbar {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 11px 0 9px;
    margin-bottom: 14px;
  }
  .topbar .brand { flex: 1 1 auto; }
  .topbar .brand h1 { font-size: 19px; }
  .topbar .brand-avatar { width: 34px; height: 34px; }
  .topbar .brand-date .date-long { display: none; }
  .topbar .brand-date .date-short { display: inline; }

  .topbar .user {
    order: 2;
    flex: 1 0 100%;
    /* Flex items default to min-width:auto, which pins the row to its content width
       and stops overflow-x from ever scrolling. */
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    gap: 6px;
    /* Scrolls rather than wrapping, so the header keeps a fixed, compact height. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-padding-inline: 2px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .topbar .user::-webkit-scrollbar { display: none; }

  .topbar .user .nav-icon-button {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--fuel-nav-panel);
    border: 1px solid var(--fuel-nav-border);
  }
  .topbar .user .nav-icon-button .nav-label { display: inline; font-size: 12.5px; }
  .topbar .user .nav-icon-button.nav-active {
    background: var(--fuel-nav-ink);
    border-color: var(--fuel-nav-ink);
    color: #fff;
  }

  /* Pin the config ("More") pill to the right so it is ALWAYS reachable while the
     destination pills scroll under it. Without this it scrolled off the right edge on
     the dashboard — the row rests scrolled fully left on the active Home pill — which
     hid the whole config menu. Sticky within the horizontal scroll container keeps it
     glued to the right edge; the gradient fades incoming pills out behind it. */
  .topbar .user .profile-shell,
  .topbar .user .fuel-nav-shell {
    position: sticky;
    right: -1px;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: 2px;
    padding-left: 16px;
    background: linear-gradient(to right, transparent, var(--fuel-nav-bg) 16px);
  }

  /* Bigger targets on touch; the panel's placement is width-independent (see above). */
  .topbar .fuel-menu button, .topbar .fuel-menu a,
  .topbar .profile-menu button, .topbar .profile-menu a { padding: 13px 12px; font-size: 14.5px; }
}

@media (max-width: 420px) {
  .topbar .user .nav-icon-button { padding: 0 11px; gap: 6px; }
  .topbar .user .nav-icon-button .nav-label { font-size: 12px; }
}

/* Carried over from the retired recipe-nav.css (its nav classes are no longer
   rendered; these rules are still load-bearing). */
.activity-rings .fitness-track,
.activity-rings .fitness-progress { display: block !important; visibility: visible !important; opacity: 1 !important; }
.activity-rings.is-visible .rings-graphic { opacity: 1 !important; transform: scale(1) !important; }