/* Nov 7: the on-page panel for recipes, meal tiles, study links and the promise (panel-nov7.js).
   Phone: a sheet from the bottom. 760 px and up: a panel from the right. */
.p7 { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.p7[hidden] { display: none; }
.p7.is-open { pointer-events: auto; }
.p7 .p7-backdrop { position: absolute; inset: 0; background: rgba(8, 24, 24, .36); opacity: 0; transition: opacity .34s ease; }
.p7.is-open .p7-backdrop { opacity: 1; }
.p7 .p7-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: #fff; color: #144444; border-radius: 22px 22px 0 0; box-shadow: 0 -18px 60px rgba(0, 0, 0, .18); transform: translateY(104%); transition: transform .44s cubic-bezier(.32, .72, 0, 1); outline: none; font-family: inherit; -webkit-font-smoothing: antialiased; }
.p7.is-open .p7-sheet { transform: none; }
.p7 .p7-top { position: relative; flex: 0 0 auto; height: 54px; display: flex; align-items: center; padding: 6px 12px 0 12px; }
.p7 .p7-grab { position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: #d5dcdb; }
.p7 .p7-close, .p7 .p7-back { appearance: none; -webkit-appearance: none; border: 0; margin: 0; background: #eff3f2; color: #144444; height: 34px; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; }
.p7 .p7-close { width: 34px; margin-left: auto; padding: 0; }
.p7 .p7-back { padding: 0 13px 0 7px; }
.p7 .p7-back[hidden] { display: none; }
.p7 .p7-close:focus-visible, .p7 .p7-back:focus-visible, .p7 .p7-row:focus-visible, .p7 .p7-out:focus-visible { outline: 2px solid #a4cd3a; outline-offset: 2px; }
.p7 .p7-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.p7 .p7-hero { margin: 2px 16px 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #eef2f1; }
.p7 .p7-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p7 .p7-pad { padding: 18px 22px 6px; }
.p7 .p7-eyebrow { margin: 0 0 7px; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: #5e7976; }
.p7 .p7-title { margin: 0; font-family: inherit; font-size: 26px; line-height: 1.12; font-weight: 700; letter-spacing: -.012em; color: #144444; text-transform: none; }
.p7 .p7-sub { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: #4a5d5a; letter-spacing: 0; }
.p7 .p7-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.p7 .p7-chips li { margin: 0; font-size: 13px; font-weight: 500; line-height: 1; padding: 7px 11px; border-radius: 999px; background: #eff3f2; color: #2e4a47; }
.p7 .p7-h { margin: 26px 0 6px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: #5e7976; }
.p7 .p7-ing { list-style: none; margin: 0; padding: 0; }
.p7 .p7-ing li { margin: 0; padding: 11px 0; border-bottom: 1px solid #e6ecea; font-size: 16px; line-height: 1.4; color: #1f3d3a; }
.p7 .p7-steps { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: p7s; }
.p7 .p7-steps li { counter-increment: p7s; position: relative; margin: 0; padding: 2px 0 14px 38px; font-size: 16px; line-height: 1.5; color: #1f3d3a; }
.p7 .p7-steps li::before { content: counter(p7s); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: #144444; color: #fff; font-size: 13px; font-weight: 700; line-height: 26px; text-align: center; }
.p7 .p7-tip { margin: 8px 0 0; padding: 13px 15px; border-radius: 14px; background: #f3f8e6; font-size: 15px; line-height: 1.45; color: #2e4a47; }
.p7 .p7-tip b { color: #144444; margin-right: 2px; }
.p7 .p7-list { list-style: none; margin: 14px 0 0; padding: 0; }
.p7 .p7-list li { margin: 0; }
.p7 .p7-row { appearance: none; -webkit-appearance: none; border: 0; border-bottom: 1px solid #e6ecea; border-radius: 0; background: none; width: 100%; margin: 0; display: grid; grid-template-columns: 62px 1fr 16px; gap: 14px; align-items: center; padding: 10px 0; text-align: left; cursor: pointer; color: inherit; font-family: inherit; text-transform: none; letter-spacing: 0; }
.p7 .p7-row img { width: 62px; height: 62px; border-radius: 12px; object-fit: cover; background: #eef2f1; display: block; }
.p7 .p7-row-text b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; color: #144444; }
.p7 .p7-row-text small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.3; color: #5e7976; }
.p7 .p7-row-go { color: #9aaba8; display: grid; place-items: center; }
.p7 .p7-pub { margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: #4a5d5a; }
.p7 .p7-label { margin: 24px 0 6px; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: #5e7976; }
.p7 .p7-quote { margin: 0; font-size: 16px; line-height: 1.5; color: #2e4a47; }
.p7 .p7-out { display: inline-flex; align-items: center; gap: 6px; margin: 26px 0 0; padding: 13px 20px; border-radius: 999px; background: #144444; color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1; }
.p7 .p7-note { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: #7a8b88; }
.p7 .p7-doc p:not(.p7-eyebrow):not(.p7-sub) { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: #2e4a47; }
.p7 .p7-doc a { color: #144444; text-decoration: underline; text-underline-offset: 2px; }
.p7 .p7-doc section { margin: 0; padding: 0; }
html.p7-lock, html.p7-lock body { overflow: hidden !important; }

@media (min-width: 760px) {
  .p7 .p7-sheet { left: auto; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); max-height: none; border-radius: 0; box-shadow: -24px 0 70px rgba(0, 0, 0, .14); transform: translateX(104%); }
  .p7 .p7-grab { display: none; }
  .p7 .p7-top { height: 64px; padding: 0 18px; }
  .p7 .p7-hero { margin: 0 26px; }
  .p7 .p7-pad { padding: 22px 30px 6px; }
  .p7 .p7-title { font-size: 30px; }
  .p7 .p7-backdrop { background: rgba(8, 24, 24, .22); }
}
@media (prefers-reduced-motion: reduce) {
  .p7 .p7-sheet { transform: none !important; transition: opacity .2s ease !important; }
  .p7:not(.is-open) .p7-sheet { opacity: 0; }
}
.p7 .p7-title-source { font-size: 21px; line-height: 1.22; letter-spacing: -.005em; }
@media (min-width: 760px) { .p7 .p7-title-source { font-size: 23px; } }