@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{--cream:#f7f6ef;--ink:#203c30;--green:#256348;--pale:#e3eedf;--muted:#5c6b61;--white:#fff;--border:#bac7b8;--warning:#fffbeb;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:14px/1.4 Inter,Arial,sans-serif}button,input,select,textarea{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}button:focus-visible,a:focus-visible{outline:3px solid #b5a879;outline-offset:3px}p,h1,h2,h3{margin:0}h1{font-size:32px;line-height:1.4;font-weight:700}h2{font-size:18px;line-height:1.4;font-weight:700}h3{font-size:15px}a,.link{color:#1452cc;text-decoration:underline;cursor:pointer}.link{border:0;background:none;padding:0;text-align:left;font-size:13px}.small{font-size:12px}.muted{color:var(--muted)}#brand{height:72px;padding:24px;display:flex;align-items:center;gap:12px}#brand a{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap}#brand>span{font-size:13px;color:var(--muted)}.icon{position:relative;display:block;width:24px;height:24px;flex:none}.icon img{position:absolute;left:0;top:0}.icon-home img{left:1px;top:1px}.icon-pantry img{left:2px;top:1px}.icon-shopping img{left:1px;top:3px}.icon-settings img{left:1px;top:1px}#sidebar{position:fixed;top:72px;bottom:0;left:0;width:210px;background:white;padding:20px;display:flex;flex-direction:column;gap:14px}#sidebar>p:first-child{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:0}.nav-button{display:flex;align-items:center;gap:10px;background:none;border:0;border-radius:12px;padding:10px;text-align:left;width:100%;color:var(--green);font-size:12px;font-weight:700;min-height:44px}.nav-button.active{background:var(--pale)}#sidebar .footnote{font-size:12px;color:var(--muted);margin-top:6px}#app{margin-left:210px;padding:28px 32px;max-width:1450px;min-height:calc(100vh - 72px)}.page-head{display:grid;gap:12px;margin-bottom:18px}.eyebrow{font-size:10px;color:var(--green);font-weight:700}.subtitle{font-size:14px;color:var(--muted)}.columns{display:grid;grid-template-columns:minmax(0,600fr) minmax(0,382fr);gap:24px;align-items:start}.stack{display:flex;flex-direction:column;gap:14px;min-width:0}.home-wins-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}.home-wins-grid .card{padding:14px;min-height:108px}.home-wins-grid h2{font-size:clamp(13px,2.8vw,18px);line-height:1.2}.home-wins-grid p{font-size:12px}.home-wins-grid b{font-size:22px;color:var(--green)}.home-featured{margin-bottom:24px}.card{display:flex;flex-direction:column;gap:8px;background:white;border:0;border-radius:18px;padding:18px;width:100%;text-align:left;min-width:0}.card.warning{background:var(--warning)}.card.dark{background:var(--green);color:white;gap:10px}.card.dark .muted{color:white}.card p{white-space:pre-line}.card .card-link{background:none;border:0;padding:0;text-align:left;font-size:12px;font-weight:700;color:inherit}.card.dark h2{font-size:20px}.button{border:0;border-radius:14px;padding:13px 16px;min-height:48px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center;width:100%}.primary{background:var(--green);color:white}.secondary{background:var(--pale);color:var(--green)}.button:hover{filter:brightness(.96)}.calendar{gap:5px;padding:16px}.calendar .week-label{font-size:11px;color:var(--green)}.calendar-row{display:flex;gap:8px;background:none;border:0;border-radius:6px;padding:0;text-align:left;width:100%;font-size:12px;min-height:22px;align-items:center}.calendar-row b{width:70px;flex:none}.calendar-row.today{background:var(--pale)}.calendar-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}.categories .card{padding:16px;font-size:13px;gap:6px}.categories h2{font-size:17px}.rows{display:flex;flex-direction:column;gap:12px}.item-row{display:flex;align-items:center;gap:10px}.item-row .item-body{flex:1;min-width:0}.item-row small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.item-row .row-actions{display:flex;gap:8px}.quiet{border:0;background:none;padding:4px;color:var(--green);font-size:12px}.item-row input[type=checkbox]{appearance:none;width:22px;height:22px;flex:none;margin:0;border:1px solid var(--green);border-radius:5px}.item-row input:checked:after{content:'✓';display:block;text-align:center;font-size:18px;color:var(--green)}.item-row.checked .item-body{text-decoration:line-through}.empty{color:var(--muted);font-size:13px}.wheel{height:290px;position:relative;display:flex;align-items:center;justify-content:center}.wheel-layer{position:relative;width:280px;height:280px}.wheel-layer>img{position:absolute;left:0;top:0}.skillet-ingredients{position:absolute;inset:0;pointer-events:none}.skillet-ingredients i{position:absolute;width:20px;height:16px;border-radius:48% 52% 44% 56%;box-shadow:inset -3px -3px 2px #0002;animation:sizzle-food 2.4s ease-in-out infinite alternate}.skillet-ingredients i:nth-child(1){left:82px;top:117px;background:#e9bc65;animation-delay:-.8s}.skillet-ingredients i:nth-child(2){left:145px;top:95px;background:#9bc67b;animation-delay:-1.5s}.skillet-ingredients i:nth-child(3){left:99px;top:173px;background:#bf6042;animation-delay:-.4s}.skillet-ingredients i:nth-child(4){left:159px;top:164px;background:#d6a35e;animation-delay:-1.1s}.skillet-ingredients i:nth-child(5){left:63px;top:153px;background:#83ad67;animation-delay:-2s}.skillet-ingredients i:nth-child(6){left:121px;top:131px;background:#e0cc83;animation-delay:-.2s}.wheel-layer.is-mixing .skillet-ingredients i{animation-duration:.55s}.skillet-steam{position:absolute;left:92px;top:32px;width:65px;height:56px;pointer-events:none;opacity:.55}.skillet-steam:before,.skillet-steam:after{content:'';position:absolute;bottom:0;width:14px;height:30px;border-left:4px solid #b7d0bd;border-radius:60%;filter:blur(1px);animation:steam-rise 2s ease-out infinite}.skillet-steam:after{left:39px;animation-delay:-1s}.mixing-status{min-height:24px;text-align:center;color:var(--green);font-size:13px;font-weight:600;margin:0 0 8px}@keyframes sizzle-food{0%{transform:translate(-3px,3px) rotate(-9deg)}100%{transform:translate(5px,-5px) rotate(12deg)}}@keyframes steam-rise{0%{opacity:0;transform:translateY(5px)}35%{opacity:.65}100%{opacity:0;transform:translateY(-19px)}}@media(prefers-reduced-motion:reduce){.skillet-ingredients i,.skillet-steam:before,.skillet-steam:after{animation:none}}.settings-privacy-footer{padding:14px 4px 22px;text-align:center}.meal-types{display:grid;gap:14px}.recipe-card .meta{font-size:12px;color:var(--muted)}.recipe-card .status{font-size:11px;color:var(--green)}.recipe-grid{display:grid;gap:14px}.tabs{display:flex;gap:10px;margin-bottom:16px}.tabs .button{width:auto}.section-title{font-size:12px;color:var(--green);margin:8px 0}.preferences{display:grid;gap:10px}.preference{display:grid;gap:4px;text-align:left;border:0;background:none;padding:0}.preference b{font-size:13px;color:var(--green)}.preference span{font-size:12px}.preference small{font-size:11px;color:var(--muted)}dialog{color:var(--ink);border:0;border-radius:24px;background:white;padding:24px;width:min(480px,calc(100vw - 40px));max-height:90dvh;overflow:auto}dialog::backdrop{background:#203c3066}.dialog-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:18px}.dialog-head h2{font-size:23px}.dialog-head .close{border:0;background:var(--pale);border-radius:12px;min-width:40px;height:48px;color:var(--green);font-weight:700}dialog p{margin:16px 0}.actions{display:flex;gap:10px;margin-top:18px}.actions>*{flex:1}label{display:block;font-size:13px;font-weight:700;margin:18px 0}input,select,textarea{width:100%;margin-top:7px;padding:13px;border:1px solid var(--border);background:white;border-radius:10px;min-height:48px}input[type=checkbox]{width:20px;min-height:20px;accent-color:var(--green)}textarea{resize:vertical}.form-grid{display:flex;gap:12px}.form-grid>*{flex:1}.error{color:#a03e28;font-size:13px}.note{font-size:12px;color:var(--muted);line-height:1.45}.steps{padding-left:20px;line-height:1.8}.login-body #sidebar,.login-body #mobileNav{display:none}.login-body #app{margin:0;padding:90px 24px;min-height:calc(100vh - 72px)}.login-form{width:420px;max-width:100%;margin:0 auto;display:grid;gap:22px}.login-form h1{font-size:34px}.login-form label{margin:0}.login-form .actions{margin:0}.login-form .privacy{display:grid;gap:7px;font-size:12px;color:var(--muted)}.login-form .create-link{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted)}.preview-note{border-top:1px solid var(--border);padding-top:14px;color:var(--muted);font-size:12px}.preview-note button{margin-top:12px}.permission-options{display:grid;gap:10px}.permission-options button{text-align:left;border:0;border-radius:12px;padding:14px;background:var(--pale)}.permission-options small{display:block;color:var(--muted);font-size:11px;margin-top:5px}#scanVideo{width:100%;max-height:260px;background:#17261d;border-radius:10px;object-fit:cover}#scanStatus{font-size:13px;line-height:1.6}#scanItem{width:100%;background:var(--pale);border:0;border-radius:12px;padding:14px;font-weight:700}#scanResult:empty{display:none}#barcodeForm button{border:0;padding:14px;border-radius:12px}#scanner .text-button{border:0;background:none;padding:8px;font-size:12px}#toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:14px 20px;border-radius:12px;z-index:50;display:none;max-width:90vw}#environmentBadge{position:fixed;bottom:12px;right:12px;z-index:15;padding:5px 9px;background:#ad5b1a;color:white;border-radius:6px;font-size:9px;font-weight:700;letter-spacing:.5px;pointer-events:none}#mobileNav{display:none}
@media(max-width:760px){#brand{height:64px;padding:20px;gap:12px}#brand>span{display:none}#sidebar{display:none}#app{margin:0;padding:24px 24px 115px;min-height:calc(100dvh - 64px)}h1{font-size:27px}.page-head{gap:18px;margin-bottom:18px}.columns{display:flex;flex-direction:column;gap:24px}.columns>.stack{width:100%;gap:24px}.card{padding:18px;border-radius:18px}.home-columns{display:grid;grid-template-columns:1fr;gap:12px}.home-columns>.stack{display:contents}.home-columns .calendar{order:0}.home-columns .dark{order:1}.home-columns .allergy-card{order:2}.home-columns .warning{order:3}.home-columns .favorites{order:4}.calendar-row{min-height:22px}.calendar{padding:16px}.categories{gap:12px}.mobile-pantry-summary{display:block}.wheel{height:290px}.meal-types{grid-template-columns:repeat(3,1fr);gap:8px}.meal-types .button{font-size:12px;padding:12px 4px}.random-columns>.stack{gap:24px}.random-columns .supporting .card:first-child{order:-1}.random-columns{gap:24px}#mobileNav{position:fixed;bottom:0;left:0;right:0;background:white;padding:10px 10px max(14px,env(safe-area-inset-bottom));display:flex;z-index:10;justify-content:space-between}.nav-button{flex-direction:column;gap:5px;align-items:center;justify-content:center;font-size:9px;width:20%;padding:4px 2px;min-height:50px}.nav-button .desktop-label{display:none}.nav-button .mobile-label{display:block}.login-body #app{padding:34px 24px 70px}.login-form{gap:22px}.login-form h1{font-size:29px}.login-form .subtitle{line-height:1.5}.login-form .privacy{font-size:12px}.login-form .create-link{gap:16px}#environmentBadge{bottom:85px;font-size:8px}.login-body #environmentBadge{bottom:12px}dialog{width:calc(100vw - 48px)}.row-actions{gap:0!important}.item-row{font-size:13px}.tabs{flex-wrap:wrap}}
@media(min-width:761px){.mobile-label{display:none}.desktop-label{display:block}.mobile-pantry-summary{display:none}}
@media(prefers-reduced-motion:reduce){.wheel-layer .spatula{transition:none}}

.icon-home img,.icon-shopping img{left:0;top:0}.icon-random img{left:0;top:0}
input,textarea,select{font-weight:400}

#environmentBadge[data-environment="test"]{background:#315fab}#environmentBadge[data-environment="prod"]{background:#256348}
/* Keep the page within the device viewport; only content scrolls vertically. */
html{width:100%;overflow-x:hidden;overscroll-behavior-x:none;scrollbar-gutter:stable}
body{width:100%;min-width:0;overflow-x:clip;overscroll-behavior-x:none}
#app,.columns,.stack,.card,.item-body,.actions>*{min-width:0}
.card,.item-body,.subtitle,.dialog-head h2{overflow-wrap:anywhere}
.form-grid>*{min-width:0}.dialog-head h2{flex:1}.dialog-head .close{flex:none;margin-left:auto}
@media(max-width:760px){
 html{scrollbar-gutter:auto}
 #brand{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));height:auto;min-height:64px;padding-top:calc(20px + env(safe-area-inset-top))}
 #app{width:100%;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:calc(100px + env(safe-area-inset-bottom))}
 #mobileNav{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
 .nav-button{min-width:0;flex:1;font-size:9px}
 .wheel-layer{flex:none;max-width:100%}.wheel{width:100%;min-width:0}
 input,select,textarea{font-size:16px}
 .actions{flex-wrap:wrap}.actions>*{flex:1 1 120px}
 dialog{max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-width:calc(100% - 32px);padding:20px}
 .login-body #app{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
 #toast{bottom:calc(90px + env(safe-area-inset-bottom))}
 #environmentBadge{bottom:calc(80px + env(safe-area-inset-bottom))}
}

html,body,dialog{touch-action:pan-x pan-y} .today-meal{cursor:pointer}

/* One viewport shell: the document stays still and the content panel scrolls. */
html{height:100%;width:100%;overflow:hidden;overscroll-behavior:none;scrollbar-gutter:auto}
body{height:100dvh;width:100%;overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:none}
#brand{flex:0 0 72px;min-width:0}
#app{flex:1;min-height:0;max-width:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#brand a{min-width:0;white-space:normal}
#brand a span{min-width:0;overflow-wrap:anywhere}
.calendar-row{flex-direction:column;align-items:flex-start;padding:9px 8px;gap:3px;min-height:44px}
.calendar-row b{width:auto;max-width:100%;font-size:12px;overflow-wrap:anywhere}
.calendar-row span{white-space:normal;overflow-wrap:anywhere;max-width:100%}
dialog{box-sizing:border-box;min-width:0;max-width:calc(100% - 24px);overflow-x:hidden;overscroll-behavior:contain}
dialog form,dialog section,dialog label,dialog input,dialog select,dialog textarea{min-width:0;max-width:100%}
.date-picker{width:100%;min-width:0;margin-bottom:20px}
.date-picker-nav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:4px}
.date-picker-nav h3{text-align:center;overflow-wrap:anywhere}
.date-picker-nav button{min-height:44px;font-size:28px}
.selected-date{overflow-wrap:anywhere;font-size:14px}
.date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;width:100%;min-width:0}
.date-weekday{text-align:center;font-size:11px;padding:5px 0;color:var(--muted)}
.date-cell{min-width:0;width:100%;min-height:44px;padding:3px 0;border:0;border-radius:8px;background:var(--cream);font-size:14px}
.date-cell[aria-current=date]{box-shadow:inset 0 0 0 1px var(--green)}
.date-cell[aria-pressed=true]{background:var(--green);color:white}
@media(max-width:760px){
 #brand{flex:0 0 auto;min-height:64px;padding:16px max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left));padding-top:calc(16px + env(safe-area-inset-top))}
 #app{width:auto;margin:0;padding:20px max(16px,env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));min-height:0}
 .login-body #app{min-height:0;padding-top:24px}
 h1{font-size:25px;line-height:1.3}
 .page-head{gap:10px;margin-bottom:16px}
 .form-grid{flex-wrap:wrap}.form-grid>*{flex:1 1 120px;min-width:0}
 dialog{width:min(440px,calc(100% - 24px));padding:16px;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)}
 .dialog-head h2{font-size:21px}
 .wheel{height:auto;min-height:0;aspect-ratio:1;max-height:290px}
 .wheel-layer{width:min(280px,100%);height:auto;aspect-ratio:1}
 .wheel-layer>img{width:100%;height:100%}
}

/* Dialogs keep their own scroll; the kitchen behind them stays at its exact position. */
#app{scrollbar-gutter:stable}
body.modal-open #app{overflow:hidden;touch-action:none}
body.modal-open #brand,body.modal-open #sidebar,body.modal-open #mobileNav{touch-action:none}
dialog{overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}
.recipe-pages{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:center;gap:8px}
.recipe-pages p{text-align:center;font-size:12px;overflow-wrap:anywhere}
.recipe-pages .button{min-width:0;padding:12px 8px}

/* Kitchen day slots, recipe plate preferences, and privacy dismissal. */
.calendar-row span{display:block;text-align:right;line-height:1.6}.meal-day-slot{padding:12px;border:1px solid var(--border);border-radius:12px}.meal-day-slot h3{margin:0 0 8px}.meal-day-slot>.button{width:100%;text-align:left}.recipe-plates{display:flex;justify-content:flex-start;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 16px}.recipe-plates input{width:75px;padding:9px;border:1px solid var(--border);border-radius:8px}.privacy-close{position:absolute;right:24px;top:16px;font-size:32px;text-decoration:none;color:var(--ink);line-height:1}.privacy-actions{margin-top:28px;display:flex;gap:12px;justify-content:flex-end}

/* Align purchase checkmarks in their square on all supported devices. */
.item-row input[type=checkbox]{display:grid;place-items:center;padding:0;line-height:1;vertical-align:middle;flex-shrink:0}
.item-row input[type=checkbox]:checked:after{content:'✓';display:block;margin:0;font-size:16px;line-height:1;text-align:center;transform:none}
.recipe-maker{background:var(--pale);border-color:var(--green)}

/* Tappable Pantry item rows and clear, accessible remove controls. */
.item-row .item-select{appearance:none;border:0;background:transparent;padding:8px 4px;text-align:left;color:var(--ink);font:inherit;cursor:pointer;display:block;min-height:40px}
.item-row .item-select:hover{text-decoration:underline}
.item-row .item-select:focus-visible,.item-row .remove-item:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
.item-row .remove-item{font-size:21px;line-height:1;min-width:36px;min-height:36px;display:grid;place-items:center}
.card.warning .rows{margin-top:4px}

/* The Table preferences remain readable on phones and larger devices. */
.preference-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:9px}
.preference-checks label,.table-option{display:flex;align-items:center;gap:8px;padding:8px 4px;min-height:38px}
.preference-checks input,.table-option input{flex:none;accent-color:var(--green)}
#tableOptionsForm fieldset,#foodPreferencesForm fieldset{margin:14px 0;padding:12px;border:1px solid var(--border);border-radius:12px}
#tableOptionsForm label>select,#tableOptionsForm label>input:not([type=checkbox]):not([type=radio]){margin-top:6px;width:100%}
#tableOptionsForm .table-option{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-width:0;margin:6px 0;white-space:normal;overflow-wrap:anywhere}
#tableOptionsForm .table-option input[type=radio],#tableOptionsForm .table-option input[type=checkbox]{appearance:auto;width:18px;height:18px;min-height:18px;min-width:18px;max-width:18px;padding:0;margin:0;flex:none;accent-color:var(--green)}
#tableOptionsForm fieldset{min-width:0;max-width:100%;overflow:hidden}

/* Cooking milestones, cost estimates and nutrition details. */
.cooking-wins{border-color:var(--green);background:#edf6e7}
.cooking-wins b{font-size:1.4em;color:var(--green)}
.home-wins-top{margin-bottom:18px}
.estimated-plate-cost{font-weight:700;color:var(--green);margin:8px 0}
.recipe-savings{border:1px solid var(--border);border-radius:12px;padding:14px;margin:12px 0;background:#f3f7ee}
.recipe-savings input{width:100%;max-width:260px;padding:10px;border:1px solid var(--border);border-radius:8px}
.recipe-nutrition{font-weight:600;color:var(--ink)}
.cooking-confetti{position:fixed;inset:0;pointer-events:none;z-index:3000;overflow:hidden}
.cooking-confetti span{position:absolute;top:-24px;border-radius:2px;animation:confetti-fall 1.8s linear forwards;will-change:transform}
@keyframes confetti-fall{0%{transform:translate3d(0,-5vh,0) rotate(0deg);opacity:1}90%{opacity:1}100%{transform:translate3d(var(--confetti-drift,35px),110vh,0) rotate(720deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.cooking-confetti{display:none}}

/* Kitchen weekly savings prominently resets with the Sunday–Saturday view. */
.weekly-savings{margin:0 0 18px;padding:18px 22px;border:1px solid var(--green);background:#e9f4e5}
.weekly-savings h2{margin:4px 0}
.weekly-savings .savings-amount{display:block;font-size:clamp(28px,5vw,44px);font-weight:700;color:var(--green);line-height:1.2;margin:8px 0}
.weekly-savings .note{margin-bottom:0}
.savings-bar-legend{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 16px;font-size:13px;font-weight:700;margin:12px 0 8px}
.savings-green-label{color:#17603f}
.savings-red-label{color:#ad3030;text-align:right}
.savings-bar-track{display:flex;overflow:hidden;width:100%;height:24px;border:1px solid #aec0b5;border-radius:12px;background:#dfe6df;margin-bottom:10px}
.savings-bar-green{background:#27834f;height:100%;transition:width .25s ease}
.savings-bar-red{background:#cd4242;height:100%;margin-left:auto;transition:width .25s ease}
@media (prefers-reduced-motion:reduce){.savings-bar-green,.savings-bar-red{transition:none}}

/* Regional meal-price settings and accessible pricing controls. */
#pricingMode,#pricingState,#pricingCity,#nationalMealBase,#restaurantBenchmark{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--ink)}


/* Keep the Kitchen hero cards in their intended sequence on narrow screens. */
@media(max-width:760px){
 .home-columns .calendar{order:0}
 .home-columns .dark{order:1}
 .home-columns .favorites{order:5}
 .home-columns .warning{order:3}
 .home-columns .recipe-maker{order:4}
 .home-columns .allergy-card{order:6}
}

.recipe-autocomplete{position:relative;min-width:0}.recipe-autocomplete>input{width:100%}.recipe-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;max-height:260px;overflow-y:auto;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 28px #203c3029;padding:4px}.recipe-suggestions[hidden]{display:none}.recipe-suggestion{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;border:0;border-radius:8px;background:transparent;color:var(--ink);padding:10px 12px;text-align:left;cursor:pointer;white-space:normal}.recipe-suggestion+ .recipe-suggestion{border-top:1px solid #e9eee8}.recipe-suggestion small{font-size:11px;color:var(--muted)}.recipe-suggestion:hover,.recipe-suggestion.active,.recipe-suggestion:focus-visible{background:var(--pale);outline:2px solid transparent}

/* Weekly calendar and meal choices: left aligned, vertically centered and wrapped on mobile. */
.calendar-row span{white-space:normal;text-overflow:clip;overflow-wrap:anywhere;line-height:1.5;min-width:0}
.meal-day-slot .button,.meal-day-slot .meal-day-actions .button,[data-select-recipe],#autoChoice,#ateOutChoice{display:flex;align-items:center;justify-content:flex-start;text-align:left;white-space:normal;overflow-wrap:anywhere;word-break:normal;min-height:44px;line-height:1.4}
.meal-day-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.meal-day-actions .button{width:100%;min-width:0;margin:0}

/* Persistent year-to-date savings is separate from the Sunday-to-Saturday bar. */
.savings-to-date{margin:0 0 20px;padding:18px 22px;background:#f2f7ef;border:1px solid #b9d3bd}
.savings-to-date h2{margin:4px 0}
.savings-to-date .savings-amount{display:block;font-size:clamp(26px,4vw,38px);font-weight:700;color:var(--green);margin:8px 0}
.weekly-savings .savings-bar-track{justify-content:space-between}
.weekly-savings .savings-bar-red{margin-left:auto}

/* Kitchen meal text and inline selection improvements. */
.calendar-row{align-items:center;text-align:left}.calendar-row span{text-align:left;white-space:normal;overflow-wrap:break-word;word-break:normal;flex:1}
.item-suggestions{position:relative;display:flex;flex-direction:column;max-height:220px;overflow-y:auto;background:white;border:1px solid var(--border);border-radius:8px;z-index:100;box-shadow:0 6px 14px #203c3020;margin-top:4px}
.item-suggestions[hidden]{display:none}
.item-suggestion{display:block;width:100%;padding:10px;text-align:left;background:white;border:0;border-bottom:1px solid #e3e9e3;color:var(--ink);cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.item-suggestion:hover,.item-suggestion:focus{background:var(--pale)}
.settings-account-footer{background:var(--white);padding:20px;border:1px solid var(--border);border-radius:14px;gap:12px}
.settings-privacy-footer{display:flex;flex-wrap:wrap;gap:12px 20px;padding:16px}
.rating-option{display:block;margin:8px 0}
.privacy-close{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:500;background:white;border-radius:50%;padding:4px 10px;box-shadow:0 2px 10px #203c302a}

/* More legible weekly Kitchen meal plan. */
.calendar-row{font-size:15px;line-height:1.55;gap:14px;min-height:48px;padding:10px 8px}
.calendar-row b{font-size:16px;line-height:1.4;width:128px;font-weight:700}
.calendar-row span{font-size:15px;line-height:1.6;white-space:normal;overflow-wrap:break-word}
@media(max-width:700px){.calendar-row{gap:5px;align-items:flex-start}.calendar-row b{width:auto;font-size:16px}.calendar-row span{font-size:15px;flex:auto;width:100%}}

/* Family invitation sharing and mobile readability. */
.family-invite-code{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0;padding:14px;background:#f2f7ef;border:1px solid #c5d9c9;border-radius:12px}
.family-invite-code label{flex-basis:100%;font-weight:700}
.family-invite-code input{flex:1 1 200px;min-width:0;max-width:100%;font-size:clamp(16px,4vw,22px);font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums;user-select:text;-webkit-user-select:text}
.family-invite-code .note{flex-basis:100%;margin:0}

/* Branded app launch splash: never traps the user if startup fails. */
.launch-splash{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#f7f6ef;padding:24px;text-align:center;animation:splash-fallback .2s ease 1.5s forwards}
.launch-splash-content{display:flex;flex-direction:column;align-items:center;gap:18px}
.launch-mark{width:min(48vw,190px);height:auto}
.launch-splash h1{color:#256348;font-size:clamp(24px,5vw,36px);letter-spacing:-.03em;line-height:1.2}
.launch-splash.is-dismissing{opacity:0;pointer-events:none;transition:opacity .2s ease}
@keyframes splash-fallback{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.launch-splash.is-dismissing{transition:none}}

/* Stronger back action in the Choose Meal dialog. */
#backChoice{background:#184b36;color:#fff}
#backChoice:hover{background:#123d2b}

/* Compact weekly and calendar-year savings, with text-only category totals. */
.savings-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px;align-items:stretch}
.savings-summary-grid .card{margin:0;padding:14px;min-width:0;gap:7px}
.savings-summary-grid h2{font-size:clamp(14px,2.6vw,19px);line-height:1.2;margin:2px 0}
.savings-summary-grid .savings-amount{font-size:clamp(24px,4vw,35px);line-height:1.12;margin:4px 0;overflow-wrap:anywhere}
.savings-summary-grid .eyebrow{font-size:9px;overflow-wrap:anywhere}
.savings-summary-grid p{font-size:clamp(10px,1.5vw,12px);line-height:1.45}
.savings-summary-grid .note{margin:0}
.savings-summary-grid .savings-bar-legend{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:7px 0;font-size:clamp(10px,1.5vw,12px);line-height:1.35}
.savings-summary-grid .savings-green-label{color:#145a3c;text-align:left}
.savings-summary-grid .savings-red-label{color:#b42b31;text-align:left}
@media(max-width:390px){.savings-summary-grid{gap:8px}.savings-summary-grid .card{padding:10px}.savings-summary-grid .savings-amount{font-size:23px}.savings-summary-grid h2{font-size:14px}}
/* The invitation stays hidden until a valid generated code is available. */
.family-invite-code[hidden]{display:none!important}
#inviteFamily{background:#d5edca;color:#174d30}
#copyInvite{background:#205b3e;color:#fff}
#inviteFamily:hover,#copyInvite:hover{filter:brightness(.94)}


.account-settings-dialog{width:min(560px,calc(100vw - 32px));max-height:85dvh;overflow-y:auto}.account-settings-dialog form{margin:18px 0}.account-settings-dialog label{display:grid;gap:6px}.account-settings-dialog input{width:100%}.account-settings-dialog hr{border:0;border-top:1px solid #d6e2d8;margin:24px 0}.account-settings-dialog h3{margin:10px 0}

.login-form .save-login-information{margin-top:-4px;font-size:14px;font-weight:500}.login-form .save-login-information span{display:flex;align-items:center;gap:9px}.login-form .save-login-information input{width:18px;height:18px;margin:0;accent-color:var(--green)}

.login-form .login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.login-form .login-options .save-login-information{margin:0}.login-form .login-options [data-action=forgot]{margin-left:auto;white-space:nowrap}.login-form .login-options+.create-link{margin-top:12px;margin-bottom:12px}

.login-form>.actions{display:flex}.login-form>.actions>[type=submit]{width:100%}.login-form>.passkey-login{width:100%;margin-top:10px}.login-form .save-login-information{font-size:13px}.login-form .login-options{column-gap:8px}

/* Compact account form rhythm; retain comfortable touch targets. */
.account-settings-dialog{padding:20px}
.account-settings-dialog .dialog-head{margin-bottom:12px;gap:8px}
.account-settings-dialog .dialog-head h2{margin:0}
.account-settings-dialog .account-load:empty,.account-settings-dialog [role="status"]:empty,.account-settings-dialog #pendingAccountEmail:empty{display:none}
.account-settings-dialog .account-content{display:flex;flex-direction:column;gap:10px}
.account-settings-dialog [hidden]{display:none!important}
.account-settings-dialog .account-content>form{margin:0}
.account-settings-dialog .stack{gap:9px}
.account-settings-dialog h3{margin:0 0 2px}
.account-settings-dialog label{gap:4px;margin:0;font-size:13px}
.account-settings-dialog input:not([type="checkbox"]){min-height:44px;padding:9px 11px}
.account-settings-dialog .button{min-height:44px;padding:10px 14px}
.account-settings-dialog hr{width:100%;margin:5px 0;border:0;border-top:1px solid #d6e2d8}
.account-settings-dialog .card{padding:0;border-radius:0;background:transparent;gap:9px}
.account-settings-dialog #privacyAccountControls label{display:flex;align-items:flex-start;gap:8px}
.account-settings-dialog #analyticsConsent{width:18px;height:18px;flex:none;margin:1px 0 0;accent-color:var(--green)}
.account-settings-dialog .note,.account-settings-dialog #privacyAccountControls p{font-size:12px;line-height:1.4}
@media(max-width:600px){.account-settings-dialog{padding:16px}.account-settings-dialog .dialog-head{margin-bottom:10px}}

.email-change-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}.email-change-identity{overflow-wrap:anywhere}.account-settings-dialog .email-change-actions .button{min-width:0}

[hidden]{display:none!important}.settings-pricing-wide{margin-top:18px}.pantry-overview{margin-top:16px}.family-settings-dialog{width:min(580px,calc(100vw - 32px));max-height:85dvh;overflow:auto}.family-settings-dialog>label,.family-settings-dialog .stack>label{display:grid;gap:5px;margin:12px 0}.family-settings-dialog input:not([type=checkbox]),.family-settings-dialog select{width:100%;min-height:44px}.family-settings-dialog .family-leave-confirm{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:16px 0}.family-leave-confirm input{width:18px;height:18px;margin:0;accent-color:var(--green)}.family-leave-confirm span{line-height:1.4}.family-member{display:flex;justify-content:space-between;gap:10px;text-align:left}.family-member:disabled{opacity:1;color:var(--ink)}.family-member span{font-size:12px}.family-settings-dialog .family-details{margin:16px 0}.family-settings-dialog .button{min-height:44px}.settings-pricing-wide>.card{width:100%}

/* Recipe review uses consistent left-aligned content and centered control rows. */
.recipe-review-dialog{text-align:left}.recipe-card .button,[data-recipe]{justify-content:flex-start;align-items:center;text-align:left}.recipe-review-dialog .recipe-plates{justify-content:flex-start;align-items:center}

/* Desktop Kitchen text and weekly meal names stay left aligned and wrap fully. */
@media(min-width:761px){
 #app[data-screen="home"],#app[data-screen="home"] :is(h1,h2,h3,p,b,strong,span,button){text-align:left}
 #app[data-screen="home"] .button{justify-content:flex-start}
 #app[data-screen="home"] .calendar-row{display:grid;grid-template-columns:minmax(0,128px) minmax(0,1fr);align-items:center;text-align:left;min-width:0}
 #app[data-screen="home"] .calendar-row b,#app[data-screen="home"] .calendar-row span{width:auto;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-align:left}
}

.wheel-layer>.skillet-food{position:absolute;left:0;top:0;width:280px;height:280px}.random-columns .supporting>.meal-types{margin-bottom:0}.random-columns .supporting .quiet{text-align:left;white-space:normal;overflow-wrap:anywhere}

/* Keep meal choices immediately below the skillet on phone-sized screens. */
@media(max-width:760px){
 .random-columns>.stack{display:contents}
 .random-columns .wheel{order:0}
 .random-columns .meal-types{order:1;width:100%}
 .random-columns .mixing-status{order:2;width:100%;margin:0}
 .random-columns .mixing-status:empty{display:none}
 .random-columns>.stack>.card{order:3}
 .random-columns .supporting>.card{order:4}
}

/* Center popup button labels and give paired actions equal space. */
dialog[open] button,dialog[open] .button,dialog[open] .meal-day-slot .button,dialog[open] .meal-day-actions .button{justify-content:center;text-align:center}
dialog[open] .actions{justify-content:center}
dialog[open] .actions>.button{flex:1 1 0;width:auto;white-space:normal;overflow-wrap:anywhere}
dialog[open] .email-change-actions{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Grocery autocomplete keeps its list labels left aligned and vertically centered. */
dialog[open] #groceryNameHints .item-suggestion{display:flex;align-items:center;justify-content:flex-start;text-align:left;min-height:44px}

/* Favorite recipe filters: clean, left-aligned and gently animated. */
dialog[open] .favorite-filter-panel{padding:16px;border:1px solid #d9e6d8;border-radius:16px;background:#f5faf2;margin:8px 0 14px}
dialog[open] .favorite-filter-panel>.note{margin:0 0 12px}
dialog[open] .favorite-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
dialog[open] .favorite-filter-grid label{display:block;text-align:left;min-width:0;font-weight:600}
dialog[open] .favorite-filter-grid select{display:block;width:100%;min-width:0;margin-top:6px;text-align:left;text-align-last:left;padding:12px;background:#fff;border:1px solid #bfd3bf;border-radius:10px;color:#173a28}
dialog[open] .favorite-filter-grid option{text-align:left}
dialog[open] .favorite-results{gap:9px;max-height:42vh;overflow-y:auto;padding:2px 3px 6px}
dialog[open] .favorite-result{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:12px;min-height:52px;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;animation:favorite-appear .22s ease both}
dialog[open] .favorite-result span{min-width:0;text-align:left;overflow-wrap:anywhere}
dialog[open] .favorite-result small{flex-shrink:0;color:#355d43;font-size:.78rem}
dialog[open] .favorite-result:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(32,91,62,.12)}
@keyframes favorite-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:420px){dialog[open] .favorite-filter-grid{grid-template-columns:1fr}dialog[open] .favorite-filter-panel{padding:12px}}
@media(prefers-reduced-motion:reduce){dialog[open] .favorite-result{animation:none;transition:none}dialog[open] .favorite-result:hover{transform:none}}

.favorite-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1rem 0}.favorite-pagination .button{min-width:44px}.favorite-pagination span{font-weight:700;color:var(--forest,#244f37)}.favorite-pagination .button:disabled{opacity:.42;cursor:not-allowed}

/* Compact, scannable recipe results and saved-recipe tiles. */
.recipe-maker-results{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;align-items:start}
.recipe-maker-results .recipe-card{padding:14px;min-width:0}
.recipe-maker-results .recipe-card h2,.recipe-maker-results .recipe-card h3{font-size:16px;line-height:1.3}
.recipe-maker-results .recipe-card .button{width:100%;margin-top:8px}
.saved-recipe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.saved-recipe-hero{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;min-width:0;padding:14px;border:1px solid #d5e4d7;border-radius:14px;background:#f6faf5;color:#204b36;cursor:pointer}
.saved-recipe-hero:hover,.saved-recipe-hero:focus-visible{background:#e8f3e8;border-color:#7eac86}
.saved-recipe-hero strong{font-size:14px;overflow-wrap:anywhere}
.saved-recipe-hero small{color:#4f715c;font-size:11px}
@media(max-width:420px){.saved-recipe-grid{grid-template-columns:1fr}}

/* Consistent, borderless Kitchen summary hero cards. */
.home-wins-grid,.savings-summary-grid{gap:12px;align-items:stretch}
.home-wins-grid{margin-bottom:12px}
.home-wins-grid .card,.savings-summary-grid .card{border:0;outline:0;box-shadow:none;background:#edf6e7;border-radius:18px;margin:0}
.home-wins-grid .card{min-height:108px}
.home-wins-grid .home-wins-top{margin-bottom:0}
.savings-summary-grid .card{min-height:108px}

/* Keep policy reading inside the current app screen. */
.privacy-policy-dialog{width:min(800px,calc(100vw - 24px));max-height:90dvh}
.privacy-policy-frame{display:block;width:100%;height:65vh;height:65dvh;border:0;background:var(--cream);margin:16px 0}
html.privacy-embedded,html.privacy-embedded body{height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.privacy-embedded main{padding:16px 20px!important}
.privacy-embedded .privacy-close,.privacy-embedded .privacy-actions{display:none}
.privacy-embedded h2{margin:22px 0 8px}.privacy-embedded p{margin:10px 0;line-height:1.6}