/* What's for Dinner – app components rendered by wfd-core shortcodes. Colors come from the Bricks palette variables. */
.wfd-empty { font-family: "Inter", system-ui, sans-serif; font-size: 1.7rem; color: var(--grass); margin: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; font-weight: 600; line-height: 1.2; padding: 1.3rem 2.2rem; border-radius: 99rem; text-decoration: none; border: 0.2rem solid transparent; cursor: pointer; }
.btn--dark { background: var(--ink); color: var(--butter); }
.btn--dark:hover { background: var(--grass); }
.btn:focus-visible, .chip:focus-visible, .rcard__link:focus-visible, .ring__btn:focus-visible { outline: 0.3rem solid var(--sungold); outline-offset: 0.3rem; }

/* Recipe cards */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2rem 2.4rem; }
.rcard { min-width: 0; }
.rcard__link { display: flex; flex-direction: column; gap: 1.4rem; text-decoration: none; color: var(--ink); height: 100%; }
.rcard__media { position: relative; aspect-ratio: 4 / 3; border-radius: 1.6rem; overflow: hidden; background: var(--card-color, var(--sungold)); border-bottom: 0.8rem solid var(--card-color, var(--sungold)); }
.rcard__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.rcard__link:hover .rcard__img { transform: scale(1.03); }
.rcard__initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: 12rem; color: var(--ink); opacity: 0.85; }
.rcard__body { display: flex; flex-direction: column; gap: 0.8rem; }
.rcard__title { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 2.4rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.rcard__link:hover .rcard__title { text-decoration: underline; text-decoration-color: var(--card-color, var(--sungold)); text-decoration-thickness: 0.3rem; text-underline-offset: 0.4rem; }
.rcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; color: var(--grass); margin: 0; }
.rcard__pill { display: inline-block; font-family: "Inter", system-ui, sans-serif; font-size: 1.3rem; font-weight: 600; line-height: 1; padding: 0.6rem 1rem; border-radius: 99rem; background: var(--card-color, var(--sungold)); color: var(--ink); }
.rcard__src { opacity: 0.8; }
.rcard--sungold { --card-color: var(--sungold); }
.rcard--lemon { --card-color: var(--lemon); }
.rcard--seed { --card-color: var(--seed); }
.rcard--linen { --card-color: var(--linen); }
.rcard--petal { --card-color: var(--petal); }
.rcard--beet { --card-color: var(--beet); }
.rcard--beet .rcard__pill, .rcard--grass .rcard__pill { color: var(--butter); }
.rcard--grass { --card-color: var(--grass); }

/* Recipe library */
.rlib { display: flex; flex-direction: column; gap: 2.4rem; }
.rlib__search { display: flex; flex-direction: row; gap: 1rem; max-width: 64rem; }
.rlib__input { flex: 1 1 auto; min-width: 0; font-family: "Inter", system-ui, sans-serif; font-size: 1.7rem; padding: 1.3rem 2rem; border-radius: 99rem; border: 0.2rem solid var(--grass); background: var(--paper); color: var(--ink); }
.rlib__input:focus { outline: 0.3rem solid var(--sungold); outline-offset: 0.2rem; }
.rlib__filters { display: flex; flex-direction: column; gap: 1.2rem; }
.rlib__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.rlib__label { flex: 0 0 7.2rem; font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; font-weight: 600; color: var(--grass); }
.chip { font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; font-weight: 500; color: var(--ink); text-decoration: none; padding: 0.7rem 1.4rem; border-radius: 99rem; border: 0.15rem solid rgba(71, 81, 11, 0.35); background: transparent; }
.chip:hover { border-color: var(--grass); }
.chip.is-on { background: var(--grass); border-color: var(--grass); color: var(--butter); }
.rlib__count { font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; color: var(--grass); margin: 0.8rem 0 0; }

/* Single recipe: hero */
.rhero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4.8rem; align-items: center; }
.rhero__copy { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.rhero__tags { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; }
.rhero__tags .rcard__pill { background: var(--paper); border: 0.15rem solid var(--grass); }
.rhero__title { font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: clamp(4.4rem, 6vw, 7.6rem); line-height: 0.98; letter-spacing: -0.03em; color: var(--grass); margin: 0; font-variation-settings: "SOFT" 100; }
.rhero__lede { font-family: "Inter", system-ui, sans-serif; font-size: 1.9rem; line-height: 1.6; color: var(--ink); margin: 0; max-width: 58rem; }
.rhero__facts { display: flex; flex-wrap: wrap; gap: 0; margin: 0; border-top: 0.2rem solid var(--grass); border-bottom: 0.2rem solid var(--grass); }
.rhero__fact { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.4rem 2.4rem 1.4rem 0; margin-right: 2.4rem; }
.rhero__fact dt { font-family: "Inter", system-ui, sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--grass); }
.rhero__fact dd { font-family: "Fraunces", Georgia, serif; font-size: 2.2rem; font-weight: 700; color: var(--ink); margin: 0; }
.rhero__source { font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; color: var(--grass); margin: 0; }
.rhero__source a { color: var(--ink); font-weight: 600; text-decoration-color: var(--sungold); text-decoration-thickness: 0.2rem; text-underline-offset: 0.3rem; }
.rhero__media { aspect-ratio: 1 / 1; border-radius: 50% 50% 2.4rem 2.4rem; overflow: hidden; background: var(--rhero-color, var(--sungold)); border: 1.2rem solid var(--rhero-color, var(--sungold)); }
.rhero__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50% 50% 1.2rem 1.2rem; }
.rhero--sungold { --rhero-color: var(--sungold); }
.rhero--lemon { --rhero-color: var(--lemon); }
.rhero--seed { --rhero-color: var(--seed); }
.rhero--linen { --rhero-color: var(--linen); }
.rhero--petal { --rhero-color: var(--petal); }

/* Single recipe: ingredients */
.ring { background: var(--paper); border-radius: 2.4rem; padding: 3.2rem 2.8rem; border-top: 0.8rem solid var(--seed); position: sticky; top: 2.4rem; }
.ring__head { display: flex; flex-direction: column; gap: 1.6rem; margin-bottom: 2rem; }
.ring__title, .rsteps__title, .rnotes__title { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 3.2rem; line-height: 1.1; color: var(--grass); margin: 0; }
.ring__scaler { display: inline-flex; align-items: center; gap: 1.2rem; align-self: flex-start; background: var(--butter); border-radius: 99rem; padding: 0.6rem; }
.ring__btn { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; padding: 0; border-radius: 50%; border: 0; background: var(--grass); color: var(--butter); font-family: "Inter", system-ui, sans-serif; font-size: 2.2rem; font-weight: 600; line-height: 1; cursor: pointer; }
.ring__btn:hover { background: var(--ink); }
.ring__servings { font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--ink); min-width: 11rem; text-align: center; }
.ring__group { font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--grass); margin: 2rem 0 0.8rem; }
.ring__list { list-style: none; margin: 0; padding: 0; }
.ring__item { border-bottom: 0.1rem solid rgba(71, 81, 11, 0.18); }
.ring__check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; padding: 1.1rem 0; font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; line-height: 1.45; color: var(--ink); cursor: pointer; }
.ring__check input { accent-color: var(--grass); width: 1.8rem; height: 1.8rem; margin: 0 0.6rem 0 0; transform: translateY(0.3rem); }
.ring__check input:checked ~ span { text-decoration: line-through; opacity: 0.55; }
.ring__qty { font-weight: 700; }
.ring__unit { font-weight: 600; }
.ring__note { color: var(--grass); }
.ring__name { flex: 1 1 14rem; min-width: 0; }
.ring__name::first-letter { text-transform: uppercase; }
a.site-header__brand { white-space: nowrap; }

/* Single recipe: steps + notes */
.rsteps { display: flex; flex-direction: column; gap: 2.4rem; }
.rsteps__group { font-family: "Fraunces", Georgia, serif; font-size: 2.2rem; font-weight: 700; color: var(--ink); margin: 1.6rem 0 0; }
.rsteps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.4rem; }
.rsteps__item { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.rsteps__num { display: flex; align-items: center; justify-content: center; width: 5.6rem; height: 5.6rem; border-radius: 50%; background: var(--lemon); font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: 2.4rem; color: var(--ink); }
.rsteps__item:nth-child(7n+2) .rsteps__num { background: var(--seed); }
.rsteps__item:nth-child(7n+3) .rsteps__num { background: var(--linen); }
.rsteps__item:nth-child(7n+4) .rsteps__num { background: var(--petal); }
.rsteps__item:nth-child(7n+5) .rsteps__num { background: var(--sungold); }
.rsteps__item:nth-child(7n+6) .rsteps__num { background: var(--beet); color: var(--butter); }
.rsteps__item:nth-child(7n+7) .rsteps__num { background: var(--grass); color: var(--butter); }
.rsteps__text { font-family: "Inter", system-ui, sans-serif; font-size: 1.8rem; line-height: 1.7; color: var(--ink); margin: 0.8rem 0 0; max-width: 64ch; }
.rnotes { display: flex; flex-direction: column; gap: 1.6rem; padding-top: 3.2rem; border-top: 0.2rem solid var(--grass); }
.rnotes__body { font-family: "Inter", system-ui, sans-serif; font-size: 1.7rem; line-height: 1.7; color: var(--ink); }
.rnotes__credit { font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; color: var(--grass); margin: 0; }
.rnotes__credit a { color: var(--ink); font-weight: 600; }

@media (max-width: 991px) {
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rhero { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
  .rhero__media { max-width: 48rem; }
  .ring { position: static; }
}
@media (max-width: 767px) {
  .rgrid { grid-template-columns: minmax(0, 1fr); gap: 2.8rem; }
  .rcard__title { font-size: 2.2rem; }
  .rlib__label { flex-basis: 100%; }
  .rhero__fact { padding-right: 1.6rem; margin-right: 1.6rem; }
  .rhero__fact dd { font-size: 1.9rem; }
  .ring { padding: 2.4rem 2rem; }
  .rsteps__item { grid-template-columns: 4.4rem minmax(0, 1fr); gap: 1.2rem; }
  .rsteps__num { width: 4.4rem; height: 4.4rem; font-size: 2rem; }
  .rsteps__text { font-size: 1.7rem; margin-top: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { .rcard__img { transition: none; } }

/* Bricks template sections (classes set on native Bricks elements) */
.tpl-section { padding: 6.4rem 0; background: var(--butter); }
.tpl-section--paper { background: var(--paper); }
.tpl-wrap { width: 100%; max-width: 128rem; margin: 0 auto; padding: 0 2.4rem; display: flex; flex-direction: column; gap: 2.4rem; }
.tpl-lib-title { font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: clamp(4.8rem, 7vw, 8.8rem); line-height: 0.95; letter-spacing: -0.035em; color: var(--grass); margin: 0; }
.tpl-lib-lede { font-family: "Inter", system-ui, sans-serif; font-size: 1.9rem; line-height: 1.6; color: var(--ink); margin: 0; max-width: 60rem; }
.tpl-rbody { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 5.6rem; align-items: start; }
.tpl-rbody__side, .tpl-rbody__main { min-width: 0; display: flex; flex-direction: column; gap: 4rem; }
@media (max-width: 991px) { .tpl-rbody { grid-template-columns: minmax(0, 1fr); gap: 4rem; } }
@media (max-width: 767px) { .tpl-section { padding: 4rem 0; } .tpl-wrap { padding: 0 1.6rem; } }

/* ===================== App (logged-in) ===================== */
.app-nav { background: var(--paper); border-bottom: 0.1rem solid rgba(71, 81, 11, 0.15); }
.app-nav__inner { max-width: 128rem; margin: 0 auto; padding: 0 2.4rem; display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.app-nav__link { flex: 0 0 auto; font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--grass); text-decoration: none; padding: 1.6rem 1.2rem 1.3rem; border-bottom: 0.3rem solid transparent; }
.app-nav__link:hover { color: var(--ink); border-bottom-color: var(--lemon); }
.app-nav__link.is-on { color: var(--ink); border-bottom-color: var(--sungold); }
.app-nav__link:focus-visible { outline: 0.3rem solid var(--sungold); outline-offset: -0.3rem; }
.app-title { font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: clamp(4rem, 6vw, 6.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--grass); margin: 0; }
.app-card { background: var(--paper); border-radius: 2rem; padding: 2.8rem; display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.app-card--lemon { background: var(--lemon); }
.app-card--seed { background: var(--seed); }
.app-card--linen { background: var(--linen); }
.app-card--petal { background: var(--petal); }
.app-card__title { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 2.6rem; line-height: 1.15; color: var(--ink); margin: 0; }
.app-text { font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; line-height: 1.55; color: var(--ink); margin: 0; }
.app-text a, .wfd-empty a { color: var(--ink); font-weight: 600; text-decoration-color: var(--sungold); text-decoration-thickness: 0.2rem; }
.app-label { display: block; font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; font-weight: 600; color: var(--grass); margin-top: 0.4rem; }
.app-card--seed .app-label, .app-card--linen .app-label, .app-card--petal .app-label, .app-card--lemon .app-label { color: var(--ink); }
.app-select, .app-textarea { font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; padding: 1.1rem 1.4rem; border-radius: 1.2rem; border: 0.2rem solid var(--grass); background: var(--paper); color: var(--ink); max-width: 100%; }
.app-textarea { width: 100%; border-radius: 1.6rem; line-height: 1.5; }
.app-num { max-width: 10rem; }
.btn--primary { background: var(--sungold); color: var(--ink); }
.btn--primary:hover { background: var(--lemon); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.addr__result { font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; margin: 0; }
.addr__result.is-ok { color: var(--grass); }
.addr__result.is-err { color: var(--beet); font-weight: 600; }

/* This week */
.tw { display: flex; flex-direction: column; gap: 2.4rem; }
.tw__hello { font-family: "Inter", system-ui, sans-serif; font-size: 1.9rem; color: var(--ink); margin: 0; }
.tw__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.4rem; align-items: start; }
.tw__side { display: flex; flex-direction: column; gap: 2.4rem; min-width: 0; }
.tw__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.tw__day { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.6rem; align-items: center; padding: 1.2rem 1.6rem; border-radius: 1.4rem; border-left: 0.8rem solid var(--day, var(--sungold)); background: var(--butter); }
.tw__day--sungold { --day: var(--sungold); } .tw__day--lemon { --day: var(--lemon); } .tw__day--seed { --day: var(--seed); } .tw__day--linen { --day: var(--linen); } .tw__day--petal { --day: var(--petal); } .tw__day--beet { --day: var(--beet); } .tw__day--grass { --day: var(--grass); }
.tw__date { font-family: "Fraunces", Georgia, serif; font-size: 1.9rem; font-weight: 700; color: var(--ink); display: flex; flex-direction: column; }
.tw__date small { font-family: "Inter", system-ui, sans-serif; font-size: 1.3rem; font-weight: 500; color: var(--grass); }
.tw__meals { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.tw__meal { font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; color: var(--ink); display: flex; gap: 1rem; align-items: baseline; }
.tw__meal a { color: var(--ink); font-weight: 600; text-decoration: none; }
.tw__meal a:hover { text-decoration: underline; text-decoration-color: var(--sungold); }
.tw__slot { flex: 0 0 7.6rem; font-size: 1.3rem; font-weight: 600; color: var(--grass); }
.tw__empty { font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; color: var(--grass); }
.tw__counts, .tw__low, .tw__ideas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; color: var(--ink); }
.tw__counts strong { font-family: "Fraunces", Georgia, serif; font-size: 2.2rem; margin-right: 0.4rem; }
.tw__ideas a { color: var(--ink); font-weight: 600; }
.tw__ideas small { display: block; font-size: 1.3rem; color: var(--ink); opacity: 0.75; }

/* Calendar */
.cal { display: flex; flex-direction: column; gap: 1.6rem; }
.cal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.6rem; }
.cal__nav { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cal__range { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 2.6rem; color: var(--ink); margin: 0; min-width: 18rem; text-align: center; }
.cal__targets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cal__target { font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; color: var(--ink); background: var(--paper); border-radius: 99rem; padding: 0.6rem 1.4rem; border: 0.15rem solid rgba(71, 81, 11, 0.25); }
.cal__target.is-full { background: var(--seed); border-color: var(--seed); }
.cal__warn { font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; background: var(--petal); color: var(--ink); border-radius: 1.2rem; padding: 1.2rem 1.6rem; margin: 0; }
.cal__grid { display: grid; grid-template-columns: 10rem repeat(7, minmax(0, 1fr)); gap: 0.6rem; }
.cal__corner { }
.cal__day { border-radius: 1.4rem 1.4rem 0.4rem 0.4rem; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.2rem; background: var(--day); color: var(--ink); min-width: 0; }
.cal__day.is-today { box-shadow: inset 0 0 0 0.3rem var(--ink); }
.cal__day--beet, .cal__day--grass { color: var(--butter); }
.cal__day--sungold, .cal__cell--sungold { --day: var(--sungold); } .cal__day--lemon, .cal__cell--lemon { --day: var(--lemon); } .cal__day--seed, .cal__cell--seed { --day: var(--seed); } .cal__day--linen, .cal__cell--linen { --day: var(--linen); } .cal__day--petal, .cal__cell--petal { --day: var(--petal); } .cal__day--beet, .cal__cell--beet { --day: var(--beet); } .cal__day--grass, .cal__cell--grass { --day: var(--grass); }
.cal__dname { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 2rem; line-height: 1; }
.cal__dnum { font-family: "Inter", system-ui, sans-serif; font-size: 1.3rem; font-weight: 500; }
.cal__deliv { align-self: flex-start; margin-top: 0.6rem; font-family: "Inter", system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; background: var(--butter); color: var(--ink); border-radius: 99rem; padding: 0.3rem 0.8rem; }
.cal__slot { font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--grass); padding: 1.2rem 0.4rem; }
.cal__cell { background: var(--paper); border-radius: 0.6rem; border-top: 0.4rem solid var(--day); min-height: 11rem; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.cal__cell.is-over { outline: 0.3rem dashed var(--grass); outline-offset: -0.3rem; background: var(--butter); }
.cal__celllabel { display: none; }
.cal__add { margin-top: auto; align-self: stretch; font-family: "Inter", system-ui, sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--grass); background: transparent; border: 0.15rem dashed rgba(71, 81, 11, 0.35); border-radius: 0.8rem; padding: 0.6rem; cursor: pointer; }
.cal__add:hover { background: var(--butter); border-color: var(--grass); }
.cal__add:focus-visible, .mchip__remove:focus-visible, .picker__item:focus-visible { outline: 0.3rem solid var(--sungold); outline-offset: 0.2rem; }
.mchip { position: relative; background: var(--butter); border-radius: 0.8rem; padding: 0.8rem 2.6rem 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; cursor: grab; border-left: 0.4rem solid var(--day); }
.mchip.is-dragging { opacity: 0.4; }
.mchip.is-cooked { opacity: 0.6; }
.mchip--leftovers, .mchip--eating_out { background: transparent; border: 0.15rem dashed rgba(71, 81, 11, 0.35); border-left-width: 0.4rem; }
.mchip__title { font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; font-weight: 600; line-height: 1.25; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.mchip__title:hover { text-decoration: underline; }
.mchip__meta { font-family: "Inter", system-ui, sans-serif; font-size: 1.2rem; color: var(--grass); }
.mchip__remove { position: absolute; top: 0.3rem; right: 0.3rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: transparent; color: var(--grass); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.mchip__remove:hover { background: var(--petal); color: var(--ink); }

/* Picker dialog */
.picker { border: 0; border-radius: 2.4rem; padding: 0; width: min(56rem, calc(100vw - 3.2rem)); max-height: min(72rem, calc(100vh - 6.4rem)); background: var(--butter); color: var(--ink); }
.picker::backdrop { background: rgba(38, 43, 6, 0.55); }
.picker__inner { display: flex; flex-direction: column; gap: 1.4rem; padding: 2.4rem; }
.picker__head { display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; }
.picker__title { font-family: "Fraunces", Georgia, serif; font-size: 2.4rem; font-weight: 700; color: var(--grass); margin: 0; }
.picker__close { width: 4rem; height: 4rem; border-radius: 50%; border: 0; background: var(--paper); font-size: 2.4rem; cursor: pointer; color: var(--ink); }
.picker__search { width: 100%; }
.picker__quick { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.picker__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; max-height: 44rem; }
.picker__item { width: 100%; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; text-align: left; background: var(--paper); border: 0; border-radius: 1.2rem; padding: 0.8rem; cursor: pointer; font-family: "Inter", system-ui, sans-serif; color: var(--ink); }
.picker__item:hover { background: var(--lemon); }
.picker__thumb { width: 5.6rem; height: 5.6rem; border-radius: 0.8rem; object-fit: cover; }
.picker__thumb--blank { display: flex; align-items: center; justify-content: center; background: var(--seed); font-family: "Fraunces", Georgia, serif; font-size: 2.4rem; font-weight: 800; }
.picker__name { font-size: 1.6rem; font-weight: 600; }
.picker__meta { font-size: 1.3rem; color: var(--grass); }
.picker__none { font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; color: var(--grass); padding: 1.2rem 0; }

/* Shopping */
.shop { display: flex; flex-direction: column; gap: 2.4rem; }
.shop__windows { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.shop__meals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 0.4rem 2.4rem; font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; color: var(--ink); }
.shop__mdate { display: inline-block; min-width: 9.6rem; font-weight: 600; color: var(--grass); text-transform: capitalize; }
.pc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.pc__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem; background: var(--paper); border-radius: 1.2rem; padding: 1.2rem 1.6rem; }
.pc__name { font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; }
.pc__name small { font-weight: 400; font-size: 1.3rem; color: var(--grass); }
.pc__actions { display: flex; gap: 0.6rem; }
.shop__stores { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.store { background: var(--paper); border-radius: 2rem; overflow: hidden; border-top: 1rem solid var(--store, var(--seed)); }
.store--wholefoods { --store: var(--seed); }
.store--amazon { --store: var(--sungold); }
.store__head { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: 2rem 2.4rem 1.2rem; }
.store__title { font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: 3rem; color: var(--ink); margin: 0; }
.store__count { font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; color: var(--grass); }
.store__copy { margin-left: auto; }
.store > .app-text { padding: 0 2.4rem 2.4rem; }
.store__list { list-style: none; margin: 0; padding: 0 2.4rem 1.6rem; }
.sline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1.6rem; padding: 1.2rem 0; border-bottom: 0.1rem solid rgba(71, 81, 11, 0.15); }
.sline__check { display: flex; align-items: flex-start; gap: 1rem; cursor: pointer; }
.sline__check input { width: 2rem; height: 2rem; accent-color: var(--grass); margin: 0.2rem 0 0; flex: 0 0 auto; }
.sline__name { font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--ink); }
.sline.is-done .sline__name { text-decoration: line-through; opacity: 0.5; }
.sline__qty { font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; font-weight: 700; color: var(--ink); text-align: right; display: flex; flex-direction: column; }
.sline__qty small { font-family: "Inter", system-ui, sans-serif; font-size: 1.2rem; font-weight: 500; color: var(--grass); }
.sline__for { grid-column: 1; padding-left: 3rem; font-family: "Inter", system-ui, sans-serif; font-size: 1.3rem; color: var(--grass); }
.sline__link { grid-column: 2; grid-row: 2; justify-self: end; font-family: "Inter", system-ui, sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--ink); text-decoration-color: var(--store); text-decoration-thickness: 0.2rem; text-underline-offset: 0.3rem; white-space: nowrap; }
.shop__extra-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.shop__extra-row .rlib__input { flex: 1 1 24rem; }
.shop__place { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 2.4rem; border-radius: 2rem; background: var(--grass); }
.shop__place .app-text { color: var(--butter); max-width: 60rem; }
.shop__hint { font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; color: var(--lemon); margin: 0; }

/* Orders / pantry */
.app-table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 1.6rem; overflow: hidden; font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; color: var(--ink); }
.app-table th { text-align: left; background: var(--grass); color: var(--butter); font-weight: 600; padding: 1.2rem 1.6rem; }
.app-table td { padding: 1.2rem 1.6rem; border-bottom: 0.1rem solid rgba(71, 81, 11, 0.15); }
.app-table a { color: var(--ink); font-weight: 600; }
.status { display: inline-block; padding: 0.4rem 1rem; border-radius: 99rem; font-size: 1.3rem; font-weight: 600; background: var(--butter); }
.status--placed, .status--delivered { background: var(--seed); }
.status--ready { background: var(--lemon); }
.pantry { display: flex; flex-direction: column; gap: 2.4rem; }
.pantry__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pantry__item { display: grid; grid-template-columns: minmax(0, 1fr) 16rem auto; align-items: center; gap: 1.6rem; padding: 1.2rem 0; border-bottom: 0.1rem solid rgba(71, 81, 11, 0.15); }
.pantry__name { font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; }
.pantry__name small { font-weight: 400; font-size: 1.3rem; color: var(--grass); }
.status-low .pantry__name small, .status-out .pantry__name small { color: var(--beet); font-weight: 600; }
.pantry__bar { display: block; height: 1rem; border-radius: 99rem; background: var(--butter); overflow: hidden; }
.pantry__bar span { display: block; height: 100%; background: var(--seed); border-radius: 99rem; }
.status-low .pantry__bar span, .status-out .pantry__bar span { background: var(--sungold); }
.pantry__actions { display: flex; gap: 0.6rem; }

/* Ideas, add recipe, family, auth */
.idea__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin: 0.4rem 0 0; }
.idea__link { color: var(--ink); text-decoration: none; }
.idea__link:hover { text-decoration: underline; text-decoration-color: var(--card-color); }
.addr { display: flex; flex-direction: column; gap: 2rem; max-width: 76rem; }
.addr__tabs { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.fam { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.fam__members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.fam__member { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.fam__member .rlib__input { flex: 1 1 14rem; padding: 1rem 1.6rem; }
.fam__login { font-family: "Inter", system-ui, sans-serif; font-size: 1.3rem; color: var(--grass); }
.fam__row { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.fam__num { display: flex; flex-direction: column; gap: 0.4rem; }
.fam__toggle, .fam__day { font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; color: var(--ink); display: inline-flex; align-items: center; gap: 0.6rem; }
.fam__toggle input, .fam__day input { width: 1.8rem; height: 1.8rem; accent-color: var(--grass); }
.fam__days { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; }
.fam__stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.6rem; }
.fam__store { display: flex; flex-direction: column; gap: 0.2rem; }
.fam__save { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.6rem; }
.fam__status { font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; color: var(--grass); }
.fam__invite { margin-top: 2.4rem; max-width: 76rem; }
.fam__invites { list-style: none; margin: 0; padding: 0; font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; color: var(--ink); display: flex; flex-direction: column; gap: 0.4rem; }
.fam__invites small { color: var(--grass); margin-left: 0.6rem; }
.auth { max-width: 48rem; }
.auth form p { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.4rem; }
.auth label { font-family: "Inter", system-ui, sans-serif; font-size: 1.4rem; font-weight: 600; color: var(--grass); }
.auth input[type=text], .auth input[type=password], .auth input[type=email] { font-family: "Inter", system-ui, sans-serif; font-size: 1.7rem; padding: 1.2rem 1.8rem; border-radius: 99rem; border: 0.2rem solid var(--grass); background: var(--paper); color: var(--ink); }
.auth .login-remember label { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; color: var(--ink); }
.auth input[type=submit] { font-family: "Inter", system-ui, sans-serif; font-size: 1.7rem; font-weight: 600; padding: 1.4rem 2.6rem; border-radius: 99rem; border: 0; background: var(--sungold); color: var(--ink); cursor: pointer; align-self: flex-start; }
.auth input[type=submit]:hover { background: var(--lemon); }

@media (max-width: 991px) {
  .tw__grid, .shop__stores, .fam { grid-template-columns: minmax(0, 1fr); }
  .cal__grid { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .cal__corner, .cal__slot, .cal__day { display: none; }
  .cal__celllabel { display: block; font-family: "Inter", system-ui, sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--ink); text-transform: capitalize; }
  .cal__cell { min-height: 0; border-top: 0; border-left: 0.6rem solid var(--day); border-radius: 1rem; }
}
@media (max-width: 767px) {
  .app-nav__inner { padding: 0 1rem; }
  .app-card { padding: 2rem; border-radius: 1.6rem; }
  .tw__day { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .tw__date { flex-direction: row; align-items: baseline; gap: 0.8rem; }
  .pantry__item { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .fam__stores { grid-template-columns: minmax(0, 1fr); }
  .store__head, .store__list { padding-left: 1.6rem; padding-right: 1.6rem; }
  .sline__for { padding-left: 3rem; }
  .app-table { font-size: 1.3rem; }
  .app-table th, .app-table td { padding: 1rem 0.8rem; }
}
.shop__extra-row > .rlib__input { width: auto; flex: 1 1 24rem; min-width: 0; }
.shop__extra-row > .app-select, .shop__extra-row > .btn { width: auto; flex: 0 0 auto; }
.shop__meals { grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); }
.app-select { width: auto; }
.fam__member > .rlib__input { width: auto; }
.fam__member > .app-select { flex: 0 0 auto; }

.chip { white-space: nowrap; }

.home-join__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; margin: 0; }
.home-join__login { font-family: "Inter", system-ui, sans-serif; font-size: 1.7rem; font-weight: 600; color: var(--ink); text-decoration-thickness: 0.2rem; text-underline-offset: 0.4rem; }
.rsteps__away { max-width: 60rem; }
.home-join .home-join__text { font-family: "Inter", system-ui, sans-serif; font-size: 2rem; line-height: 1.6; color: var(--ink); margin: 0 0 2.4rem; max-width: 56rem; }
@media (max-width: 767px) { .home-join .home-join__text { font-size: 1.8rem; } }