/* Pack 123: simple top navigation, phone first */
.ft-nav { max-width: 760px; margin: 0 auto 14px; padding: 10px 12px 0; font-size: 1.1rem; }
.ft-nav__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ft-nav__home { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.3rem; color: inherit; text-decoration: none; }
.ft-nav__btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
@container ftnav (min-width: 600px) { .ft-nav__btns { grid-template-columns: repeat(4, 1fr); } }
.ft-nav__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 10px 12px; border-radius: 16px; background: #f2f4f2; color: #1b1b1b; font-weight: 800; font-size: 1.15rem; text-decoration: none; border: 2px solid transparent; }
.ft-nav__btn:hover, .ft-nav__btn:focus-visible { border-color: #2e7d4f; }
.ft-nav__btn.is-active { background: #2e7d4f; color: #fff; }
.ft-nav__icon { font-size: 1.4rem; line-height: 1; }
.ft-menu { position: relative; }
.ft-menu__gear { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #f2f4f2; color: #333; }
.ft-menu__gear::-webkit-details-marker { display: none; }
.ft-menu[open] .ft-menu__gear { background: #2e7d4f; color: #fff; }
.ft-menu__list { position: absolute; right: 0; top: 58px; z-index: 50; list-style: none; margin: 0; padding: 8px; min-width: 260px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ft-menu__link { display: block; padding: 14px 14px; border-radius: 10px; color: #1b1b1b; text-decoration: none; font-size: 1.15rem; font-weight: 600; }
.ft-menu__link:hover { background: #f2f4f2; }
.ft-menu__link--btn { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; color: #b00020; }
.ft-menu__logout { margin: 0; }
/* The nav replaces the old link footers. */
.ft-nav ~ .card .inv-footer, .ft-nav ~ .card > .footer, .ft-nav ~ * .brand-lockup { display: none; }
/* Home: Today's prep big and bold */
.ft-today { display: block; margin: 6px 0 16px; padding: 18px 20px; border-radius: 18px; background: #2e7d4f; color: #fff; text-decoration: none; }
.ft-today__title { display: block; font-size: 1.6rem; font-weight: 900; }
.ft-today__count { display: block; font-size: 1.25rem; font-weight: 700; margin-top: 4px; }
.ft-today--none { background: #eef3ef; color: #1b1b1b; }
.ft-small-link { font-size: 1.05rem; margin: 0 0 14px; }

/* Pack 125: Today's prep gets pride of place - full width, bold, highlighted */
.ft-nav__btn { min-width: 0; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: none; }
@container ftnav (max-width: 599px) { .ft-nav__btn:not(.ft-nav__btn--prep) { flex-direction: column; gap: 2px; font-size: 1.05rem; padding: 8px 6px; } }
.ft-nav__btn--prep { grid-column: 1 / -1; min-height: 68px; font-size: 1.35rem; font-weight: 900; background: #f6b92b; color: #1b1b1b; border-color: #c98a00; box-shadow: 0 3px 0 #c98a00; }
.ft-nav__btn--prep.is-active { background: #2e7d4f; color: #fff; border-color: #1d5a37; box-shadow: 0 3px 0 #1d5a37; }
@container ftnav (max-width: 300px) { .ft-nav__btn:not(.ft-nav__btn--prep) { font-size: .98rem; } }

.ft-nav { container: ftnav / inline-size; width: 100%; box-sizing: border-box; }
/* Pack 127: 8 buttons. Today's prep has its own row; 2 columns on phones (3 rows of 2 + 1),
   4 columns wider (4 + 3). The last button fills the gap so no hole is left. */
@container ftnav (max-width: 599px) { .ft-nav__btns > .ft-nav__btn:last-child:nth-child(even) { grid-column: 1 / -1; flex-direction: row; gap: 8px; } }
/* Pack 139: only stretch the last button when the non-prep buttons are odd (9 buttons now: 8 fill 2x4 / 4x2). */
@container ftnav (min-width: 600px) { .ft-nav__btns > .ft-nav__btn:last-child:nth-child(even) { grid-column: span 2; } }

/* Pack 135: homepage = the menu only, one phone screen, no scrolling. */
.ft-home-body { margin: 0; padding: 6px 8px; box-sizing: border-box; min-height: 0; }
.page.ft-home { padding: 0 0 8px; margin: 0 auto; min-height: 0; }
.ft-home .ft-nav { margin-bottom: 6px; }
.ft-home__hello { max-width: 760px; margin: 2px auto 0; padding: 0 12px; box-sizing: border-box; font-size: .95rem; line-height: 1.3; color: #5c5a55; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-home .ft-nav { padding-top: 4px; }
.ft-home .ft-nav__btns { gap: 8px; margin-top: 8px; }
.ft-home .ft-nav__btn { min-height: 56px; padding: 6px; }
@media (max-height: 620px) {
  .ft-home .ft-nav__top { transform: scale(.9); transform-origin: left center; }
  .ft-home .ft-menu__gear { width: 46px; height: 46px; }
  .ft-home .ft-nav__btn { min-height: 50px; }
  .ft-home .ft-nav__btn--prep { min-height: 56px; }
}

/* Pack 137: inner pages - one big Home button plus the page title (no 8-button menu, no gear). */
.ft-nav--inner { padding-top: 8px; margin-bottom: 12px; }
.ft-bar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ft-bar__home { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 52px; min-width: 48px; padding: 8px 16px; box-sizing: border-box; border-radius: 16px; background: #2e7d4f; color: #fff; font-weight: 800; font-size: 1.15rem; text-decoration: none; border: 2px solid #1d5a37; white-space: nowrap; }
.ft-bar__home:hover, .ft-bar__home:focus-visible { background: #1d5a37; outline: 3px solid #f6b92b; outline-offset: 2px; }
.ft-bar__icon { flex: 0 0 auto; }
.ft-bar__title { flex: 1 1 auto; min-width: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: #1b1b1b; overflow-wrap: anywhere; }
@media (max-width: 360px) { .ft-bar { gap: 8px; } .ft-bar__home { padding: 8px 12px; font-size: 1.05rem; } .ft-bar__title { font-size: 1.1rem; } }

/* Pack 137b: one visible title. The bar shows the full title (wrapping); the page's h1 that repeats it
   is hidden visually but kept for screen readers (still one h1 per page). */
.ft-nav--inner ~ * h1.page-title, .ft-nav--inner ~ h1.page-title {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
/* Pack 137b: homepage 'Cooking now - Join' line, compact so the homepage still fits one screen. */
.ft-cooknow { width: 100%; max-width: 760px; min-width: 0; margin: 4px auto 0; padding: 4px 6px 4px 12px; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
  background: #eaf6ef; border: 2px solid #1f6f4a; border-radius: 12px; font-size: 1rem; line-height: 1.25; }
.ft-cooknow__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-cooknow__more { color: #3d5a4a; font-size: .9rem; }
.ft-cooknow__join { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 10px; background: #1f6f4a; color: #fff; font-weight: 800; font-size: 1.1rem; text-decoration: none; }
.ft-cooknow--finish { background: #fff6e0; border-color: #b26b00; }
.ft-cooknow--finish .ft-cooknow__join { background: #8a5200; }
.ft-cooknow__join:focus-visible { outline: 3px solid #f6b92b; outline-offset: 2px; }