/* Calm local brand styling; original logo and avatars remain separate SVGs. */
@font-face {
  font-family: "Nauryz RedKeds";
  src: url("/fonts/NauryzRedKeds.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --pink: #f2a2be;
  --pink-dark: #c56b8b;
  --pink-soft: #f5cdde;
  --pink-surface: #fff3f8;
  --lime: #cdf0a4;
  --sage: #acd282;
  --lime-soft: #f2ffe4;
  --danya-soft-gradient: linear-gradient(155deg, #effaff 0%, #f4ffeb 100%);
  --anya-soft-gradient: linear-gradient(155deg, #fff0f5 0%, #f6ffeb 100%);
  --peach: #efc7b2;
  --peach-soft: #fff1e8;
  --indigo: #182b76;
  --indigo-soft: #f1f5fd;
  --ink: #182b76;
  --surface: #fff;
  --canvas: #fff;
  --green: var(--indigo);
  --deep: #12215b;
  --muted: #707a91;
  --line: #e8ecf2;
  --brand-gradient: linear-gradient(110deg, #cdf0a4 0%, #bddfd9 28%, #bfdffa 50%, #d9c8ed 73%, #f2a2be 100%);
  --brand-soft-gradient: linear-gradient(110deg, #f2ffe4 0%, #f1fbfa 35%, #f1f6ff 60%, #fff2f8 100%);
  --orange: #956049;
  --heading-font: "Nauryz RedKeds", "Century Gothic", Arial, sans-serif;
  --body-font: "Century Gothic", "CenturyGothic", Arial, sans-serif;
  font-family: var(--body-font);
  color: var(--ink);
  background: var(--canvas);
  font-size: 16px;
}

body { background: var(--canvas); }
.mobile-nav-toggle, .mobile-account-footer, .week-heading-mobile { display: none; }
::selection { background: var(--lime); color: var(--ink); }
h1, h2, h3, .brand, .meal-card h3, .review-title,
.next-grid h2, .dialog-title, .shopping-heading h2 {
  font-family: var(--heading-font);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
h1 { font-size: 2.8rem; line-height: 1.15; }
h2 { font-size: 1.45rem; line-height: 1.25; }
h3 { font-size: 1.15rem; line-height: 1.35; }
button, input, select, textarea { font-family: var(--body-font); }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 4px;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--indigo); }

/* Application frame and navigation. */
.shell { position: relative; isolation: isolate; }
.brand-flower-decoration {
  position: fixed;
  width: 460px;
  max-width: 48vw;
  right: -90px;
  bottom: -110px;
  opacity: .13;
  pointer-events: none;
  z-index: 0;
}
.brand-flower-decoration img { display: block; width: 100%; height: auto; }
.sidebar {
  width: 250px;
  padding: 31px 19px 24px;
  background: white;
  border-right: 1px solid var(--line);
  z-index: 2;
}
.brand {
  gap: 11px;
  margin: 0 6px 37px;
  font-size: 1.8rem;
  line-height: 1.05;
}
.brand small {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: .6rem;
  color: var(--indigo);
  letter-spacing: 2px;
  margin-top: 7px;
}
.brand-lockup { display: block; width: 200px; max-width: 100%; height: auto; }
.brand-wordmark {
  display: inline-block;
  font-family: var(--heading-font);
  font-size: 2.05rem;
  line-height: 1.08;
  font-weight: 700;
  background: var(--brand-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.brand-mark {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: var(--indigo);
  overflow: hidden;
}
.brand-mark svg, .brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sidebar nav { gap: 8px; }
.sidebar nav a {
  min-height: 49px;
  padding: 13px 12px;
  gap: 11px;
  border-radius: 15px;
  color: #606180;
  font-weight: 600;
  font-size: .84rem;
  line-height: 1.4;
  transition: background .16s, color .16s;
}
.sidebar nav a:hover { background: #f8fafc; color: var(--ink); }
.sidebar nav a.active { background: var(--brand-soft-gradient); color: var(--ink); }
.sidebar nav a > span:first-child, .nav-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}
.nav-icon svg { width: 100%; height: 100%; }
.nav-count {
  background: var(--lime-soft);
  color: var(--ink);
  border-radius: 8px;
  padding: 3px 7px;
  font-size: .7rem;
}
.sidebar nav a.active .nav-count { background: white; color: var(--ink); }
.sidebar-footer { border-top-color: var(--line); padding: 24px 9px 0; }
.local-icon { color: var(--indigo); width: 23px; height: 23px; }
.local-icon svg { width: 100%; height: 100%; }
.sidebar-footer p { color: var(--ink); font-size: .82rem; }
.sidebar-footer small { color: #76718a; font-size: .75rem; }
.sidebar-footer .text-button { font-size: .74rem; line-height: 1.65; }
main {
  position: relative;
  z-index: 1;
  margin-left: 250px;
  width: calc(100% - 250px);
  padding: 42px 42px 48px;
}
.page-header { margin-bottom: 29px; gap: 24px; }
.page-header p { color: var(--muted); font-size: .91rem; }
.eyebrow { color: var(--indigo); font-size: .67rem; font-weight: 600; letter-spacing: 1.5px; }
.week-select-label select {
  background: var(--surface);
  border-color: #e3e9f2;
  border-radius: 13px;
  padding: 13px 35px 13px 15px;
  color: var(--ink);
  font-size: .85rem;
  box-shadow: 0 3px 12px #182b7603;
}
.muted, .help { color: var(--muted); }
.text-button {
  color: var(--indigo);
  text-decoration-color: #b0b6d5;
  text-underline-offset: 4px;
}
.text-button:hover { color: var(--deep); text-decoration-color: var(--indigo); }

/* Week navigation and cooking actions. */
.day-tabs { gap: 9px; margin-bottom: 28px; }
.day-tab {
  background: white;
  color: #6e7891;
  border: 1px solid #e6ebf3;
  border-radius: 17px;
  min-height: 97px;
  padding: 14px 6px 12px;
  transition: background .16s, border-color .16s, transform .16s;
}
.day-tab > span { color: inherit; font-size: .67rem; font-weight: 600; }
.day-tab b { font-family: var(--heading-font); font-weight: 700; color: var(--ink); font-size: 1.8rem; line-height: 1.3; }
.day-tab small { color: #79768b; font-size: .68rem; }
.day-tab:hover:not(.active) { border-color: var(--indigo); transform: translateY(-2px); }
.day-tab.active { background: var(--brand-soft-gradient); border-color: #ccdcb7; color: var(--ink); box-shadow: inset 0 -3px 0 #b8d795; }
.day-tab.active b { color: var(--ink); }
.day-tab.active small { color: #66738b; }
.shopping-tab, .shopping-tab:nth-child(n) {
  background: white;
  border-color: #c8c9cc;
  border-radius: 23px;
  justify-content: center;
  padding-inline: 10px;
}
.shopping-tab b { font-family: var(--heading-font); font-size: 1.25rem; font-weight: 700; line-height: 1.12; }
.shopping-tab:hover:not(.active) { border-color: #a6abb4; }
.shopping-tab.active {
  background: linear-gradient(110deg, #f3ffe9 0%, #f1f8ff 52%, #fff0f8 100%);
  border-color: #b9d29e;
  color: var(--ink);
  box-shadow: 0 4px 0 #b9d29e;
}
.section-heading { margin-bottom: 18px; }
.section-heading h2 { font-size: 1.43rem; }
.day-readiness {
  background: var(--lime-soft);
  color: #527044;
  border: 1px solid #dfedcf;
  border-radius: 10px;
  padding: 7px 11px;
  font-size: .75rem;
  font-weight: 600;
}
.day-layout { gap: 22px; }
.meal-grid { gap: 18px; }
.cooking-cook {
  --cooking-color: #805439;
  --cooking-soft: #fff1e8;
  --cooking-border: #ebcdbb;
  --cooking-accent: #d7a482;
}
.cooking-finish {
  --cooking-color: #36547d;
  --cooking-soft: #f0f7ff;
  --cooking-border: #d2e0f4;
  --cooking-accent: #9abde5;
}
.cooking-thaw {
  --cooking-color: #954d6b;
  --cooking-soft: #fff2f7;
  --cooking-border: #f1d5e1;
  --cooking-accent: #e5a6bf;
}
.cooking-prepared {
  --cooking-color: #4c6c37;
  --cooking-soft: #f2ffe4;
  --cooking-border: #d8e9c2;
  --cooking-accent: #acd282;
}
.meal-card {
  background: var(--surface);
  color: var(--ink);
  border-color: #e4eaf2;
  border-radius: 19px;
  box-shadow: 0 5px 20px #182b7603;
  padding: 23px;
}
.meal-card:hover { border-color: #c7d1e6; box-shadow: 0 8px 24px #182b7609; }
.meal-card.week-meal { border-radius: 19px; border-top-width: 3px; }
.meal-card.week-meal:hover { box-shadow: 0 8px 24px #182b7609; }
.meal-card h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.28; letter-spacing: 0; }
.meal-card > p, .meal-open > p { color: var(--muted); line-height: 1.65; font-size: .84rem; }
.meal-label { color: #76758b; font-size: .64rem; letter-spacing: .9px; }
.meal-label i { background: #d7a482; width: 7px; height: 7px; border-radius: 50%; }
.lunch .meal-label i { background: #8cb566; }
.dinner .meal-label i { background: var(--indigo); }
.snack .meal-label i { background: var(--pink-dark); }
.card-top .muted { color: #78788e; font-size: .74rem; }
.meal-open { background: var(--surface); padding: 20px 22px 21px; }
.meal-open:hover { background: #fcfdff; }
.cooking-band { padding: 11px 18px; font-size: .8rem; }
.cooking-band b { font-weight: 600; }
.cooking-band small { border-radius: 7px; font-size: .65rem; }
.cooking-workflow { padding: 16px 19px 18px; }
.cooking-instruction { color: #575c71; font-size: .82rem; line-height: 1.65; }
.batch-context { font-size: .71rem; }
.card-tags > span { color: #6e7991; background: #f5f7fb; padding: 4px 8px; border-radius: 7px; font-size: .68rem; }
.card-tags > span.warning, .badge.warning { color: #935269; background: var(--pink-surface); }
.card-bottom { border-top-color: #edf0f5; padding-top: 14px; color: var(--muted); }
.card-nutrition b { color: var(--indigo); font-size: .86rem; }
.card-nutrition > span { color: #737589; font-size: .73rem; }
.recipe-link { color: var(--indigo); font-size: .72rem; font-weight: 600; }
.badge { color: #626485; background: var(--indigo-soft); border-radius: 7px; }
.badge.green { background: var(--lime-soft); color: #4c6c37; }

/* Daily targets and secondary panels. */
.panel, .review-card {
  background: var(--surface);
  border-color: #e4eaf2;
  border-radius: 19px;
  box-shadow: 0 5px 20px #182b7603;
}
.panel.goals {
  container-type: inline-size;
  padding: 10% 8% 9%;
  background: linear-gradient(155deg, #effaff 0%, #f7fced 100%);
  border: 0;
  border-radius: 8% / 6%;
  box-shadow: none;
}
.panel.goals:has(.person-switch button.active[data-person="woman"]) { background: linear-gradient(155deg, #fff0f5 0%, #f7fced 100%); }
.person-switch { background: #edf3f7; border-radius: 25px; padding: 4px; gap: 4px; }
.person-switch button { color: #6b6c89; font-size: .83rem; padding: 6px 13px 6px 6px; }
.person-switch button.active { color: var(--ink); background: white; box-shadow: 0 2px 5px #182b760a; }
.avatar { width: 30px; height: 30px; background: transparent; }
.avatar.man, .avatar.woman { background: transparent; color: var(--ink); }
.avatar img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.panel.goals h3 { font-family: var(--body-font); font-weight: 600; font-size: 6.3cqw; line-height: 1.3; }
.goal-policy { color: #70738c; font-size: .72rem; line-height: 1.65; }
.target-big { color: var(--indigo); font-family: var(--heading-font); font-weight: 700; font-size: 2.7rem; letter-spacing: 0; margin-top: 15px; }
.target-big span { font-family: var(--body-font); font-size: .79rem; color: #767a99; }
.target-mini { gap: 7px; }
.target-mini b { color: var(--ink); font-size: .91rem; }
.target-mini span { font-size: .67rem; color: #75778e; }
.actual-totals { border-top-color: #dfe1ee; }
.actual-totals > span { color: #72768e; font-size: .74rem; }
.actual-totals > b { font-size: .97rem; color: var(--indigo); }
.actual-macros { gap: 8px; }
.actual-macros b { font-size: .77rem; }
.actual-macros span { color: #75778e; font-size: .63rem; }
.actual-fiber { font-size: .74rem; }
/* The switch and all daily figures share one width and three label anchors. */
.panel.goals .person-switch { width: 100%; max-width: none; padding: 1.1cqw; gap: 1.1cqw; border-radius: 999px; margin-bottom: 10.8cqw; }
.panel.goals .person-switch button { min-height: 18.35cqw; padding: 1.5cqw; border-radius: 999px; font-size: 6cqw; gap: 2.4cqw; color: #686868; }
.panel.goals .person-switch button.active { color: var(--ink); }
.panel.goals .person-switch .avatar { width: 12.6cqw; height: 12.6cqw; }
.panel.goals .target-big {
  display: flex;
  align-items: baseline;
  gap: 2.8cqw;
  margin-top: 0;
  font-size: 17.5cqw;
  line-height: 1.05;
  text-align: left;
}
.panel.goals .target-big span, .panel.goals .actual-calories > span { font-family: var(--body-font); font-size: 5.2cqw; font-weight: 400; color: #808080; }
.panel.goals .target-mini { margin-top: 12cqw; }
.panel.goals .actual-totals { margin-top: 6cqw; padding-top: 9.8cqw; border-top-color: #d8dbd6; text-align: left; }
.panel.goals .actual-totals > span { margin-bottom: 0; color: #808080; font-size: 5.5cqw; line-height: 1.25; }
.panel.goals .actual-calories { display: flex; align-items: baseline; gap: 2.8cqw; margin-top: 2.5cqw; color: var(--indigo); font-size: 8.2cqw; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.panel.goals .actual-macros { margin-top: 3.25cqw; }
.goals .goal-metrics {
  --goal-value-size: 8cqw;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: none;
}
.goals .actual-macros { --goal-value-size: 6.85cqw; }
.goals .goal-metrics > div {
  position: relative;
  display: block;
  justify-self: center;
  padding-top: calc(var(--goal-value-size) * 1.1 + .8cqw);
  text-align: center;
}
.goals .goal-metrics > div:first-child { justify-self: start; }
.goals .goal-metrics > div:last-child { justify-self: end; }
.goals .goal-metrics b {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  font-size: var(--goal-value-size);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.goals .goal-metrics span { display: block; margin-top: 0; font-size: 5.45cqw; line-height: 1.2; color: #808080; white-space: nowrap; }
.goals .actual-macros span { font-size: 5cqw; }
.note-panel { background: var(--pink-surface); border-color: #f0e0e9; }
.note-symbol { color: var(--pink-dark); }
.note-panel h3 { color: var(--ink); font-size: 1.2rem; }
.note-panel p { color: #767086; font-size: .82rem; }
.note-panel .text-button { color: #8f4d69; text-decoration-color: #cf99af; font-size: .79rem; }
.week-note { background: var(--peach-soft); border-color: #efd6c6; }
.week-note summary { color: #7b5a4d; }
details > p { color: var(--muted); }

/* Buttons, inputs, recipe library and review history. */
.button { border-radius: 12px; padding: 12px 18px; font-size: .84rem; font-weight: 600; }
.button.primary { background: var(--indigo); color: white; }
.button.primary:hover { background: var(--deep); }
.button.secondary { color: var(--indigo); background: var(--surface); border-color: #d1d5eb; }
.button.secondary:hover { background: var(--indigo-soft); }
.search { border-color: #dcdce9; border-radius: 13px; background: white; padding-left: 16px; }
.search > span { color: var(--indigo); }
.search input { padding-block: 13px; font-size: .86rem; color: var(--ink); }
.recipe-toolbar .search > input[type="search"] { border: 0; border-radius: 0; background: transparent; margin: 0; }
.search input:focus { outline: none; }
.search:focus-within { outline: 2px solid var(--indigo); outline-offset: 2px; }
.filter-tabs { gap: 5px; }
.filter-tabs button { color: #74758c; border-radius: 10px; font-size: .79rem; padding: 10px 12px; }
.filter-tabs button:hover { background: var(--pink-soft); color: var(--ink); }
.filter-tabs button.active { color: var(--ink); background: var(--lime); }
.library-grid { gap: 20px; }
.library-grid .meal-card { background: var(--surface); border-top: 4px solid var(--pink); }
.library-grid .meal-card:nth-child(3n + 2) { border-top-color: var(--sage); }
.library-grid .meal-card:nth-child(3n) { border-top-color: var(--peach); }
.empty { color: var(--muted); }
.empty.large > span { color: var(--pink-dark); }
.empty h2, .empty h1 { color: var(--ink); }
.feedback-intro h2 { font-size: 1.7rem; }
.feedback-intro p, .review-card p { color: var(--muted); }
.review-card { padding: 24px; }
.review-top b { color: var(--ink); }
.rating-text { color: #b06785; font-size: .88rem; letter-spacing: 1px; }
.review-title { color: var(--ink); font-weight: 700; font-size: 1.4rem; }
.review-title:hover { color: #566d9b; }

/* Next-week flow and profile forms. */
.next-grid { gap: 22px; }
.next-grid .panel { padding: 28px; }
.export-panel { background: var(--lime-soft); border-color: #daeacb; }
.import-panel { background: #fff; border-color: #e4eaf2; }
.step-number {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--indigo);
  background: var(--lime);
  border-radius: 14px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  margin-bottom: 19px;
}
.import-panel .step-number { background: var(--pink-surface); color: #a05775; }
.next-grid h2 { font-size: 1.8rem; font-weight: 700; }
.next-grid p { color: var(--muted); font-size: .86rem; }
.soft-note { background: #e7f5dc; color: #5f7255; border-radius: 13px; font-size: .79rem; }
.file-drop { border-color: #cbd5e6; background: #fafcff; color: var(--indigo); border-radius: 12px; }
.file-drop input { color: #747890; }
.file-drop input::file-selector-button {
  border: 1px solid #d4d8ec;
  background: white;
  color: var(--indigo);
  border-radius: 7px;
  padding: 6px 9px;
  margin-right: 8px;
  cursor: pointer;
}
.import-preview { border-top-color: var(--line); }
.import-preview h3 { color: var(--indigo); }
.import-warnings { color: #8c6650; }
.profiles-grid { gap: 23px; }
.profile-fields { border-color: #e4eaf2; border-radius: 15px; padding: 21px; background: #fcfdff; }
.profile-fields legend { color: var(--ink); font-weight: 600; font-size: .88rem; }
.profile-fields label, .feedback-form-section label { color: #71738a; font-size: .83rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { color: var(--ink); }
label > input:not([type="checkbox"]):not([type="radio"]), label > select, textarea {
  background: white;
  border-color: #dce0ed;
  border-radius: 10px;
  padding: 11px 12px;
  font-size: .86rem;
}
input::placeholder, textarea::placeholder { color: #8b8b9e; opacity: 1; }
.form-error { color: #a74e6c; }
.guide-panel ul { color: var(--muted); font-size: .85rem; }

/* Recipe dialog: ingredient totals and feedback use the same palette. */
dialog {
  max-width: 760px;
  border: 1px solid #e3e9f3;
  border-radius: 26px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 100px #182b7624;
  padding: 30px 34px;
}
dialog::backdrop { background: #182b7655; backdrop-filter: blur(4px); }
.close-button { background: var(--pink-surface); color: #9a5574; width: 35px; height: 35px; }
.close-button:hover { background: #f8dce8; }
.dialog-title { font-size: 2.3rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.dialog-description { color: var(--muted); font-size: .87rem; }
.nutrition-caption { color: #72768e; }
.nutrition-strip { background: var(--lime-soft); border-color: #dceace; border-radius: 14px; padding: 17px 10px; }
.nutrition-strip.man { background: var(--danya-soft-gradient); border-color: #dce9e8; }
.nutrition-strip.woman { background: var(--anya-soft-gradient); border-color: #e9e4df; }
.nutrition-strip b { color: var(--ink); font-family: var(--body-font); font-weight: 700; font-size: 1.25rem; }
.nutrition-strip span { color: #6b7889; font-size: .68rem; }
.nutrition-details { color: var(--muted); }
dialog h3 { font-size: 1.3rem; }
th { color: #737e94; background: #f5f8fc; font-size: .73rem; }
td { border-bottom-color: #e6e5ef; font-size: .85rem; }
td small { color: #7c7c91; }
.ingredient-total { color: var(--indigo); background: #f5faef; }
.ingredient-table { border: 1px solid #e4e9f2; border-radius: 13px; overflow: hidden; }
.ingredient-table table { table-layout: fixed; }
.ingredient-table th:first-child, .ingredient-table td:first-child { width: 70%; overflow-wrap: anywhere; }
.ingredient-table th:last-child, .ingredient-table td:last-child { width: 30%; text-align: right; }
.ingredient-table th, .ingredient-table td { padding: 12px; }
.ingredient-table td { vertical-align: middle; }
.ingredient-table tbody tr:last-child td { border-bottom: 0; }
.portion-serving { margin: 19px 0 25px; }
.portion-serving > h4 { margin: 0 0 12px; font-family: var(--body-font); color: var(--ink); font-size: .91rem; font-weight: 600; line-height: 1.4; }
.portion-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.portion-note {
  min-width: 0;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid #dce9e8;
  border-left: 3px solid #a0c7d0;
  border-radius: 15px;
  background: var(--danya-soft-gradient);
}
.portion-note[data-person="woman"] { background: var(--anya-soft-gradient); border-color: #e9e4df; border-left-color: #dfafc3; }
.portion-note-heading { display: flex; align-items: center; gap: 11px; }
.portion-note-heading .avatar { width: 40px; height: 40px; }
.portion-note-heading strong { color: var(--ink); font-size: .97rem; font-weight: 600; line-height: 1.3; }
.portion-note p { margin-top: 12px; color: #3e5079; font-size: .89rem; line-height: 1.7; }
.portion-weight-hint { margin: 10px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.6; }
.steps li { color: #63687c; font-size: .95rem; }
.steps li::before { background: var(--pink-surface); color: #9a5574; width: 29px; height: 29px; font-weight: 600; }
.storage-note { background: var(--peach-soft); border-radius: 14px; padding: 17px 19px; }
.storage-note b { color: #7d5b48; }
.storage-note p { color: #816f69; }
.feedback-form-section { border-top-color: #e3e2ee; margin-top: 28px; }
.feedback-section { margin-bottom: 23px; padding-bottom: 23px; border-bottom: 1px solid #e8ecf3; }
.feedback-section:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.feedback-section h4 { margin: 0 0 16px; font-family: var(--body-font); color: var(--ink); font-size: .91rem; font-weight: 600; line-height: 1.4; }
.feedback-section .input-pair { align-items: start; gap: 16px; }
.feedback-section > label,
.feedback-section .input-pair > label,
.feedback-section .slider-heading > label,
.feedback-section .slider-title,
.feedback-section fieldset > legend { color: var(--ink); font-size: .82rem; font-weight: 600; line-height: 1.5; }
.feedback-section .input-pair > label { margin-bottom: 16px; }
.feedback-section > label { margin-bottom: 0; }
.feedback-section input:not([type="checkbox"]):not([type="radio"]),
.feedback-section select, .feedback-section textarea { font-weight: 400; }
.feedback-section label > input[type="date"], .feedback-section label > select { height: 44px; min-height: 44px; }
.feedback-section .rating-field { margin: 0 0 20px; }
.feedback-section .rating-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.feedback-section .rating-options label { min-width: 0; }
.feedback-section .rating-options span { display: grid; place-items: center; min-height: 44px; padding: 8px 5px; font-size: .82rem; }
.feedback-section .symptom-field { margin: 3px 0 0; }
.feedback-section .symptom-field .symptom-hint { color: #7b8290; font-weight: 400; }
.feedback-section .symptom-field > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.feedback-section .symptom-field label { min-width: 0; min-height: 34px; margin: 0; font-size: .78rem; font-weight: 400; color: #67748b; }
.feedback-section .symptom-field input { margin: 0; flex-shrink: 0; }
#feedback-form > .button { min-height: 47px; margin-top: 7px; }
.feedback-slider {
  min-width: 0;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.slider-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.feedback-slider .slider-heading > label,
.feedback-slider .slider-heading > .slider-title {
  display: block;
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.5;
}
.slider-heading output {
  flex-shrink: 0;
  max-width: 57%;
  color: #586c91;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: right;
  overflow-wrap: anywhere;
}
.feedback-slider[data-slider-field="actualPercent"] .slider-heading { align-items: center; }
#feedback-actualPercent-value {
  color: #586c91;
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
input.slider-range[type="range"] {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 7px 0 1px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
input.slider-range[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 20px; background: #dce8d2; }
input.slider-range[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 2px 7px #182b7630;
}
input.slider-range[type="range"]::-moz-range-track { height: 8px; border-radius: 20px; background: #dce8d2; }
input.slider-range[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid white; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 7px #182b7630; }
input.slider-range[type="range"]:focus { outline: none; }
input.slider-range[type="range"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.slider-stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.slider-limits { display: flex; justify-content: space-between; gap: 16px; color: #79829a; font-size: .7rem; line-height: 1.5; padding-inline: 2px; }
.feedback-slider[data-slider-field="personId"] .slider-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slider-stops button {
  min-width: 0;
  min-height: 44px;
  padding: 6px 7px;
  border-radius: 9px;
  background: transparent;
  color: #768197;
  font-size: .7rem;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.slider-stops button:hover { background: #f1f5fc; color: var(--ink); }
.slider-stops button.active { background: #edf2fa; color: var(--ink); font-weight: 600; }
.feedback-section .slider-stops { margin-top: 7px; border-radius: 10px; background: #f1f4f9; gap: 3px; }
.feedback-section .slider-stops button { border: 1px solid transparent; color: #647189; min-height: 44px; font-size: .72rem; padding: 7px 8px; }
.feedback-section .slider-stops button.active { background: white; border-color: #dce4f0; color: var(--ink); box-shadow: 0 1px 5px #182b7608; }
.slider-stops button:focus-visible { outline-width: 2px; outline-offset: 2px; }
.feedback-slider[data-slider-field="personId"] .slider-stops button { display: flex; align-items: center; justify-content: center; gap: 7px; }
.slider-stops .avatar { width: 25px; height: 25px; }
.rating-field legend, .symptom-field legend { color: #71738a; }
.rating-options span { color: #8c7190; border-color: #e7d9e4; border-radius: 10px; background: #fff; }
.rating-options input:checked + span { background: var(--pink-surface); border-color: var(--pink); color: #995372; }
.rating-options input:focus-visible + span { outline-color: var(--indigo); }
#toast { background: var(--indigo); border-radius: 14px; box-shadow: 0 5px 25px #182b7629; font-size: .84rem; }

/* Pantry groups share two columns; rows keep the same controls and styling. */
.shopping-page { max-width: none; margin-inline: auto; }
.shopping-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.shopping-groups .shopping-group { min-width: 0; margin-bottom: 0; container-type: inline-size; }
.shopping-groups .shopping-checklist { padding: 10px 12px; }
.shopping-groups .shopping-columns { display: none; }
.shopping-groups .shopping-item { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.shopping-groups .shopping-quantity > small { display: block; }
.shopping-groups .stock-forms { justify-self: end; width: min(430px, calc(100% - var(--shopping-indent, 37px))); }
.shopping-groups .stock-form { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; align-items: end; }
.shopping-groups .stock-form > label > span:first-child {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 5px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  display: block;
  font-size: .7rem;
}
.shopping-groups .stock-result { grid-column: 1 / -1; padding-top: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.shopping-groups .stock-result small { margin: 0; }
.shopping-empty { margin: 4px 0; padding: 10px 12px; font-size: .78rem; line-height: 1.6; }
.shopping-heading h2 { font-size: 2.2rem; font-weight: 700; }
.shopping-heading p { color: var(--muted); font-size: .86rem; }
.shopping-heading .shopping-shortcut { color: #7b7b90; font-size: .73rem; }
.shopping-heading { flex-wrap: wrap; }
.shopping-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.shopping-actions .button { padding: 10px 13px; white-space: nowrap; }
@media (max-width: 760px) {
  .shopping-actions { justify-content: flex-start; }
}
.shopping-progress { border-color: #d5e6c2; color: #4b6736; background: var(--lime-soft); border-radius: 12px; font-size: .8rem; padding: 10px 13px; }
.shopping-group > h3 { color: var(--ink); font-family: var(--body-font); font-size: .88rem; font-weight: 600; gap: 8px; }
.shopping-group > h3 > span { background: var(--pink-surface); color: #995372; border-radius: 7px; padding: 3px 8px; }
.shopping-group.shopping-stocked > h3 > span { background: var(--lime); color: #4b6736; }
.shopping-checklist { border-radius: 20px; padding: 0 16px 10px; }
.shopping-columns { color: #797a8e; font-size: .68rem; padding: 16px 12px 13px; border-bottom: 0; }
.shopping-checklist .shopping-item {
  min-height: 84px;
  margin: 0 0 8px;
  padding: 16px 12px;
  border: 1px solid #edf0f5;
  border-radius: 13px;
}
.shopping-checklist li + li { border-top: 1px solid #edf0f5; }
.shopping-checklist .shopping-item:last-child { margin-bottom: 0; }
.shopping-item .shopping-product b { color: var(--ink); font-size: .86rem; font-weight: 600; }
.shopping-item .shopping-product small { color: #7b7a90; font-size: .71rem; }
.shopping-quantity b { color: var(--indigo); font-size: .85rem; }
.shopping-quantity small { color: #7b7a90; }
.shopping-checklist .shopping-item.is-stocked { background: #f6faf1; border-color: #e5eddc; }
.shopping-item.is-stocked .shopping-product b { color: #5b7650; }
.shopping-row.is-checked .shopping-product b { text-decoration: none; color: #5b7650; }
.shopping-row:hover .shopping-product b { color: var(--indigo); }
.shopping-row:focus-within { background: transparent; }
.shopping-checklist .shopping-item:has(.stock-form:focus-within) { background: #f8fbff; }
.shopping-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid #c4cedd;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.shopping-row input[type="checkbox"]::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #48603a;
  border-bottom: 2px solid #48603a;
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
}
.shopping-row input[type="checkbox"]:checked { background: #e2efd5; border-color: #adc796; }
.shopping-row input[type="checkbox"]:checked::after { opacity: 1; }
.shopping-row input[type="checkbox"]:hover:not(:disabled) { border-color: #809b6b; }
.shopping-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.shopping-row input[type="checkbox"]:disabled { cursor: wait; opacity: .55; }
@media (forced-colors: active) {
  .shopping-row input[type="checkbox"] { appearance: auto; }
  .shopping-row input[type="checkbox"]::after { display: none; }
}
.stock-form > label { color: #77788e; }
.stock-input { background: #fcfcff; border-color: #dce0ed; border-radius: 10px; height: 39px; }
.stock-input > input { color: var(--ink); padding: 8px 10px; font-size: .85rem; outline: none; }
.stock-input > span { color: #797c93; font-size: .74rem; }
.stock-input:focus-within { outline-color: var(--indigo); }
.stock-save { color: var(--indigo); background: #f2f7ff; border-color: #d9e3f3; border-radius: 10px; font-size: .72rem; font-weight: 600; height: 39px; }
.stock-save:hover { background: #e8f0fb; }
.stock-result { color: #587744; font-size: .75rem; }
.stock-result.stock-missing { color: #aa5b78; }
.stock-result small { color: #808093; font-size: .67rem; }

@container (min-width: 530px) {
  .shopping-groups .shopping-columns,
  .shopping-groups .shopping-item { grid-template-columns: minmax(0, 1fr) 305px; gap: 12px; }
  .shopping-groups .shopping-columns { display: grid; }
  .shopping-groups .shopping-column-product { grid-template-columns: minmax(0, 1fr) 55px; gap: 9px; padding-left: 29px; }
  .shopping-groups .shopping-column-product > span:last-child { white-space: nowrap; }
  .shopping-groups .shopping-column-stock { grid-template-columns: minmax(0, 1fr) 115px; gap: 8px; }
  .shopping-groups .shopping-item .shopping-row { grid-template-columns: 20px minmax(0, 1fr) 55px; gap: 9px; }
  .shopping-groups .shopping-quantity > small { display: none; }
  .shopping-groups .stock-forms { width: 100%; justify-self: stretch; }
  .shopping-groups .stock-form { grid-template-columns: 88px max-content minmax(0, 1fr); gap: 8px; align-items: center; }
  .shopping-groups .stock-form > label > span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .shopping-groups .stock-result { grid-column: auto; display: block; padding-top: 0; }
  .shopping-groups .stock-input > input { padding-inline: 8px; }
  .shopping-groups .stock-input > span { padding-right: 8px; }
  .shopping-groups .stock-save { padding-inline: 7px; }
}

/* Responsive layout preserves compact rows and readable controls. */
@media (min-width: 1600px) {
  main { padding: 47px 58px 52px; }
  .meal-card { padding: 25px; }
  .meal-card h3 { font-size: 1.6rem; }
  .meal-open { padding: 23px 25px; }
}
@media (max-width: 1250px) {
  .sidebar { width: 224px; padding-inline: 15px; }
  .brand { font-size: 1.6rem; margin-inline: 3px; gap: 10px; }
  .brand-lockup { width: 194px; }
  .brand-wordmark { font-size: 1.85rem; }
  .brand-mark { width: 48px; height: 48px; }
  .sidebar nav a { padding-inline: 10px; font-size: .77rem; gap: 8px; }
  main { margin-left: 224px; width: calc(100% - 224px); padding: 34px 27px 42px; }
  .day-tabs { gap: 7px; }
  .day-tab { min-height: 89px; padding-inline: 4px; }
  .day-tab b { font-size: 1.65rem; }
  .shopping-tab b { font-size: 1.1rem; }
  .meal-open { padding: 18px 18px 19px; }
  .meal-card { padding: 20px; }
  .meal-card h3 { font-size: 1.38rem; }
  .cooking-band { padding: 10px 15px; }
  .cooking-workflow { padding: 15px 16px 17px; }
  .goals { padding: 19px; }
  .target-mini b { font-size: .85rem; }
  .target-big { font-size: 2.5rem; }
}
@media (max-width: 1000px) {
  .day-tab b { font-size: 1.5rem; }
  .shopping-tab b { font-size: 1.05rem; }
  .week-select-label select { max-width: 275px; }
  .day-layout { gap: 18px; }
  .day-aside { gap: 18px; }
  .goals { padding: 22px; }
  .note-panel { padding: 23px; }
}
@media (max-width: 999px) {
  .shopping-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .shopping-checklist { padding-top: 10px; }
}
@media (max-width: 760px) {
  .shopping-groups .shopping-item { --shopping-indent: 31px; }
  .sidebar { position: static; width: 100%; background: white; padding: 19px 20px 5px; border-bottom-color: var(--line); }
  .brand { margin: 0 0 18px; font-size: 1.8rem; gap: 12px; }
  .brand-lockup { width: 220px; }
  .brand-wordmark { font-size: 2.1rem; }
  .brand-mark { width: 49px; height: 49px; }
  .brand small { font-size: .57rem; }
  .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-bottom: 11px; }
  .sidebar nav a { min-width: 0; white-space: normal; font-size: .8rem; padding: 11px 10px; border-radius: 12px; min-height: 43px; gap: 8px; }
  .sidebar nav a > span:first-child, .nav-icon { width: 19px; height: 19px; }
  .brand-flower-decoration { width: 320px; max-width: 75vw; right: -90px; bottom: -90px; opacity: .1; }
  main { margin: 0; width: 100%; padding: 28px 20px 40px; }
  h1 { font-size: 2.5rem; }
  .page-header { gap: 18px; margin-bottom: 23px; }
  .page-header p { font-size: .84rem; }
  .week-select-label select { width: 100%; max-width: none; font-size: .85rem; padding-block: 12px; }
  .day-tabs { gap: 6px; row-gap: 9px; margin-bottom: 25px; }
  .day-tab { border-radius: 12px; min-height: 68px; padding: 8px 3px; }
  .day-tab > span { font-size: .6rem; letter-spacing: .6px; }
  .day-tab b { font-size: 1.45rem; line-height: 1.25; }
  .shopping-tab { min-height: 90px; border-radius: 23px; padding: 14px 15px; justify-content: center; }
  .shopping-tab b { font-size: 1.65rem; }
  .section-heading h2 { font-size: 1.35rem; }
  .day-readiness { font-size: .7rem; padding: 6px 9px; }
  .meal-card { border-radius: 18px; padding: 19px; }
  .meal-card.week-meal { border-radius: 18px; }
  .meal-card h3 { font-size: 1.4rem; }
  .meal-open { padding: 18px; }
  .cooking-band { padding: 11px 16px; font-size: .79rem; }
  .cooking-band small { font-size: .62rem; }
  .cooking-workflow { padding: 15px 17px 17px; }
  .cooking-instruction { font-size: .82rem; }
  .panel, .review-card { border-radius: 18px; }
  .goals { padding: 20px; }
  .goals h3 { font-size: .9rem; }
  .target-big { font-size: 2.6rem; }
  .target-mini span { font-size: .68rem; }
  .person-switch button { font-size: .8rem; }
  .note-panel h3 { font-size: 1.2rem; }
  .note-panel p { font-size: .82rem; }
  .note-panel .text-button { font-size: .78rem; }
  .filter-tabs button { font-size: .75rem; padding: 8px 10px; }
  .next-grid .panel { padding: 24px; }
  .next-grid h2 { font-size: 1.6rem; }
  .profile-fields { padding: 17px; }
  dialog { padding: 23px; border-radius: 22px; }
  .dialog-title { font-size: 2rem; }
  .nutrition-strip { border-radius: 12px; padding: 15px 5px; }
  .nutrition-strip b { font-size: 1.2rem; }
  .nutrition-strip span { font-size: .61rem; }
  .shopping-heading h2 { font-size: 1.9rem; }
  .shopping-heading p { font-size: .82rem; }
  .shopping-heading .shopping-shortcut { font-size: .7rem; }
  .shopping-checklist { padding: 10px 12px; border-radius: 17px; }
  .shopping-item .shopping-product b { font-size: .85rem; }
  .shopping-quantity b { font-size: .82rem; }
  .shopping-progress { font-size: .76rem; }
}
@media (max-width: 560px) {
  .day-aside { grid-template-columns: 1fr; }
  .target-mini { grid-template-columns: repeat(3, 1fr); }
  .target-mini > div { display: block; }
  .target-mini span { margin-top: 4px; }
  .meal-grid, .library-grid { grid-template-columns: 1fr; }
  .card-bottom { flex-direction: row; align-items: center; }
  .card-nutrition > span { font-size: .72rem; }
  .stock-save { font-size: .74rem; }
  .stock-result { font-size: .75rem; }
  .input-pair { gap: 12px; }
  .feedback-form-section .input-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .portion-notes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .portion-note { padding: 16px; }
  .portion-note-heading .avatar { width: 36px; height: 36px; }
  .portion-note p { font-size: .86rem; }
  .feedback-section .input-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .feedback-section .symptom-field > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .feedback-section .slider-stops button { font-size: .74rem; }
  .slider-stops button { font-size: .74rem; }
}
@media (max-width: 420px) {
  .shopping-groups .shopping-item { --shopping-indent: 28px; }
  .sidebar { padding-inline: 15px; }
  .sidebar nav a { font-size: .75rem; padding-inline: 9px; }
  .sidebar nav a > span:first-child, .nav-icon { display: block; width: 18px; height: 18px; }
  main { padding: 25px 15px 36px; }
  h1 { font-size: 2.35rem; }
  .day-tabs { gap: 5px; row-gap: 8px; }
  .day-tab { border-radius: 11px; }
  .day-tab > span { font-size: .58rem; }
  .day-tab b { font-size: 1.4rem; }
  .shopping-tab b { font-size: 1.5rem; }
  .meal-card h3 { font-size: 1.45rem; }
  .meal-open { padding: 19px; }
  .cooking-band small { margin-left: auto; }
  .card-top .muted { font-size: .71rem; }
  .dialog-title { font-size: 1.85rem; }
  dialog { padding: 21px 18px; }
  .rating-options { gap: 6px; }
  .rating-options span { padding: 8px 9px; font-size: .81rem; }
  .nutrition-strip b { font-size: 1.1rem; }
  .shopping-heading h2 { font-size: 1.85rem; }
  .shopping-checklist { padding: 10px; }
  .shopping-item .shopping-product b { font-size: .82rem; }
  .shopping-item .shopping-product small { font-size: .68rem; }
  .stock-input, .stock-save { height: 39px; }
}

/* Keep the week's food close to the top on phones. */
@media (max-width: 760px) {
  .sidebar { position: relative; z-index: 3; padding: 12px 16px; }
  .sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .sidebar-top .brand { margin: 0; min-width: 0; }
  .sidebar-top .brand-lockup { width: 154px; max-width: 100%; }
  .mobile-nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); font-size: .875rem; font-weight: 600; }
  .mobile-nav-toggle > svg { width: 18px; height: 18px; }
  .mobile-nav-toggle > .nav-chevron { width: 13px; height: 13px; transition: transform .16s; }
  .mobile-nav-toggle[aria-expanded="true"] { background: var(--brand-soft-gradient); }
  .mobile-nav-toggle[aria-expanded="true"] > .nav-chevron { transform: rotate(180deg); }
  .sidebar #site-navigation { display: none; position: absolute; top: calc(100% + 6px); left: 16px; right: 16px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 12px 35px #182b7614; }
  .sidebar.is-nav-open #site-navigation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sidebar #site-navigation a { min-height: 44px; padding: 11px 12px; font-size: .875rem; }
  main { padding: 18px 16px 28px; }
  .week-page-header { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 16px; }
  .week-page-header > div { flex: 0 0 auto; }
  .week-page-header h1 { font-family: var(--body-font); font-size: 1rem; line-height: 1.3; white-space: nowrap; }
  .week-heading-desktop { display: none; }
  .week-heading-mobile { display: inline; }
  .week-page-header .week-select-label { flex: 1; min-width: 0; width: auto; }
  .week-page-header .week-select-label select { min-height: 44px; width: 100%; max-width: none; border-radius: 12px; font-size: 1rem; padding: 10px 27px 10px 10px; text-overflow: ellipsis; }
  .day-tabs { margin-bottom: 18px; }
  .day-tabs .shopping-tab:nth-child(n) { min-height: 44px; padding: 10px 14px; border-radius: 13px; }
  .day-tabs .shopping-tab b { font-size: 1.125rem; line-height: 1.2; white-space: nowrap; }
  .shopping-label-break { display: none; }
  .mobile-account-footer { display: block; position: relative; z-index: 1; padding: 0 16px 24px; }
}