:root {
  --forest-950: #102b23;
  --forest-900: #173f32;
  --forest-800: #215442;
  --forest-700: #2f6b53;
  --leaf-500: #79a477;
  --leaf-300: #b8cfaa;
  --leaf-100: #e6efdc;
  --cream: #f7f4ec;
  --cream-deep: #eee7da;
  --paper: #fffdf9;
  --ink: #17201c;
  --muted: #5d6963;
  --line: #d8ddd7;
  --coral: #d96e4b;
  --coral-soft: #f8dfd4;
  --gold: #d8a842;
  --gold-soft: #f4e8c6;
  --blue: #4d7781;
  --blue-soft: #dcebed;
  --danger: #a83b34;
  --shadow-sm: 0 2px 10px rgba(16, 43, 35, .07);
  --shadow-md: 0 14px 36px rgba(16, 43, 35, .12);
  --shadow-lg: 0 28px 70px rgba(16, 43, 35, .18);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Optional, personal guidance. Helpers stay in the page flow on small screens. */
.tutorial-help-button {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--forest-800);font:inherit;font-weight:700;cursor:pointer;flex-shrink:0}
.page-head.tutorial-page-head {flex-wrap:wrap}
.tutorial-page-head>div:first-child {flex:1 1 180px;min-width:0}
.tutorial-page-head>.page-actions {flex:0 1 auto;min-width:0}
.tutorial-intro,.tutorial-tip {display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);padding:14px 16px;margin:0 0 20px;min-width:0}
.tutorial-intro {align-items:center;justify-content:space-between;background:var(--leaf-100)}
.tutorial-intro>div:first-child,.tutorial-tip>div {min-width:0;flex:1}
.tutorial-intro strong {font-size:1rem;color:var(--forest-900)}
.tutorial-intro p,.tutorial-tip p {margin:3px 0 0;font-size:.93rem;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.tutorial-intro-actions {display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.tutorial-intro-actions .btn,.tutorial-help-controls .btn,.tutorial-lesson-actions .btn,.tutorial-open-page {min-height:44px}
.tutorial-tip-icon {color:var(--forest-700);display:flex;padding-top:3px;flex-shrink:0}
.tutorial-tip-actions {display:flex;align-items:flex-start;gap:8px 18px;flex-wrap:wrap;margin-top:4px}
.tutorial-tip-actions>button,.tutorial-tip-details>summary {display:flex;align-items:center;min-height:44px;padding:5px 0;border:0;background:none;color:var(--forest-800);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.tutorial-tip-details {flex:1;min-width:0}
.tutorial-tip-details>summary {list-style:revert}
.tutorial-tip-details p {margin:8px 0 12px}
.tutorial-feature-tip {margin-bottom:18px;padding:12px 14px;background:var(--leaf-100)}
.tutorial-help-panel {margin-bottom:20px}
.tutorial-help-heading {display:flex;align-items:center;gap:14px}
.tutorial-help-heading h2 {font-size:1.3rem;margin:0 0 5px}
.tutorial-help-heading p {margin:0;color:var(--muted);line-height:1.5}
.tutorial-help-controls {display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 12px}
.tutorial-toggle[aria-pressed="true"] {border-color:var(--leaf-500);background:var(--leaf-100)}
.tutorial-help-topics {margin-top:14px;border-top:1px solid var(--line)}
.tutorial-help-topics>summary {display:flex;align-items:center;min-height:48px;font-weight:700;cursor:pointer;color:var(--forest-800)}
.tutorial-topic-links {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:8px}
.tutorial-topic-links button {display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;text-align:left;padding:8px 12px;font:inherit;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--forest-800);background:var(--paper);cursor:pointer}
.tutorial-topic-links button svg {flex-shrink:0}
.tutorial-page {max-width:880px}
.tutorial-top {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.tutorial-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px}
.tutorial-steps button {display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;padding:10px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--muted);font:inherit;font-weight:700;cursor:pointer}
.tutorial-steps button[aria-current="step"] {background:var(--forest-900);border-color:var(--forest-900);color:white}
.tutorial-step-number {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;font-size:.82rem}
.tutorial-progress {font-weight:700;font-size:.85rem;color:var(--forest-700);margin:0 0 10px}
.tutorial-lesson h1 {font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.16;margin:0 0 14px}
.tutorial-lead {font-size:1.02rem;color:var(--muted);line-height:1.6;margin:0 0 20px}
.tutorial-example {border:1px solid var(--leaf-300);border-radius:var(--radius-sm);background:var(--leaf-100);padding:16px;margin:0 0 20px}
.tutorial-example>.eyebrow {display:block;margin-bottom:10px;font-size:.75rem}
.tutorial-example-row {display:flex;align-items:center;gap:12px;min-width:0;line-height:1.5;padding:8px 0;color:var(--forest-900)}
.tutorial-example-row:first-of-type {font-weight:700}
.tutorial-example-row svg {flex-shrink:0}
.tutorial-example-row span {min-width:0;overflow-wrap:anywhere}
.tutorial-lesson-copy p,.tutorial-topic-copy p {font-size:.98rem;line-height:1.65;margin:0 0 16px}
.tutorial-example-note {border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px}
.tutorial-lesson-actions {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.tutorial-open-page {display:flex;gap:8px;align-items:center;justify-content:center;margin:16px auto 0}
.tutorial-page .tutorial-top .btn {min-height:44px}
.tutorial-topic-dialog .dialog-head h2 {font-size:clamp(1.5rem,4vw,2rem)}
.tutorial-help-button:focus-visible,.tutorial-intro button:focus-visible,.tutorial-tip button:focus-visible,.tutorial-tip summary:focus-visible,.tutorial-help-panel button:focus-visible,.tutorial-help-panel summary:focus-visible,.tutorial-page button:focus-visible {outline:3px solid var(--leaf-500);outline-offset:3px}
@media (max-width:620px) {
  .page-head.tutorial-page-head {gap:12px}
  .tutorial-page-head>div:first-child {flex-basis:200px}
  .tutorial-page-head>.page-actions {gap:6px}
  .tutorial-intro {flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px}
  .tutorial-intro-actions {gap:6px;flex-wrap:wrap}
  .tutorial-tip {padding:12px 14px;gap:10px}
  .tutorial-help-button {padding:7px 11px}
  .tutorial-help-heading .summary-icon {display:none}
  .tutorial-help-controls .btn {flex:1 1 160px}
  .tutorial-topic-links {grid-template-columns:minmax(0,1fr)}
  .tutorial-steps {gap:6px}
  .tutorial-steps button {flex-direction:column;gap:5px;font-size:.85rem;padding:10px 4px}
  .tutorial-lesson {padding:18px 16px}
  .tutorial-example {padding:12px 14px}
  .tutorial-lesson-actions .btn {flex:1 1 120px}
}
@media (max-width:480px) {
  .tutorial-help-button {width:44px;padding:8px}
  .tutorial-help-button span {display:none}
}
@media print {
  .tutorial-help-button,.tutorial-intro,.tutorial-tip {display:none!important}
}

/* Approved convenience variants for busy weeks. */
.easy-week-panel{display:block;margin:18px 0 24px;padding:18px 20px;border:1px solid #d8ddcf;background:linear-gradient(135deg,#fffdf8 0%,#f5f3e7 100%);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.easy-week-panel.active{border-color:#83a48c;box-shadow:0 14px 34px rgba(26,78,60,.10)}
.easy-week-panel.compact{margin:0 0 18px}
.easy-week-main{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy toggle" "title title";align-items:center;gap:12px 18px}
.easy-week-copy{grid-area:copy;display:flex;align-items:center;gap:16px;min-width:0}
.easy-week-title-row{grid-area:title;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.easy-week-title-row h2{min-width:0;margin:0;font-size:1.25rem}
.easy-week-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:15px;background:#e6efd6;color:var(--forest-700)}
.easy-week-icon svg{width:23px;height:23px}
.easy-week-info{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #d6dbd2;border-radius:50%;background:rgba(255,255,255,.72);color:var(--forest-700);cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.easy-week-info:hover,.easy-week-info.selected{border-color:#83a48c;background:#e7f0d8}
.easy-week-info:active{transform:scale(.96)}
.easy-week-info:focus-visible{outline:3px solid rgba(47,107,83,.25);outline-offset:2px}
.easy-week-info svg{width:20px;height:20px}
.easy-week-toggle{grid-area:toggle;display:flex;align-items:center;gap:9px;flex:0 0 auto;border:0;background:transparent;color:var(--forest-700);cursor:pointer;padding:8px;border-radius:999px}
.easy-week-toggle:focus-visible{outline:3px solid rgba(47,107,83,.25);outline-offset:2px}
.toggle-track{position:relative;display:block;width:50px;height:28px;border-radius:999px;background:#c9cec7;transition:background .2s ease}
.toggle-track span{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .2s ease}
.easy-week-toggle.selected .toggle-track{background:var(--forest-700);box-shadow:inset 0 0 0 1px rgba(16,43,35,.12)}
.easy-week-toggle.selected .toggle-track span{transform:translateX(22px)}
.easy-week-details{display:grid;gap:8px;margin-top:15px;padding:15px 4px 2px;border-top:1px solid #dfe2d8}
.easy-week-details[hidden]{display:none}
.easy-week-details p{max-width:780px;margin:0;color:var(--muted)}
.easy-week-details small{display:block;color:#315f4e;font-weight:700}
.easy-week-swap-heading{margin-top:4px}
.easy-week-swap-list{display:grid;gap:11px;margin-top:3px}
.easy-week-swap-group{display:grid;gap:6px}
.easy-week-swap-group>strong{font-size:.84rem;color:var(--forest-900)}
.easy-week-none{margin:2px 0 0;color:var(--muted)}
.easy-week-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:3px}
.easy-week-examples span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#edf3e4;color:#35574a;font-size:.82rem}
.easy-week-examples b{color:#66816f}
.easy-tag{display:inline-flex;align-items:center;gap:4px;background:#e7f0d8!important;color:#214d3d!important}
.easy-change-list{display:grid;gap:9px;margin:14px 0;padding:0;list-style:none}
.easy-change-list li{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:#f3f6ec}
.easy-change-list span{color:var(--muted);font-size:.9rem}
@media(max-width:700px){.easy-week-panel{padding:16px}.easy-week-main{gap:10px 12px}.easy-week-copy{gap:10px}.easy-week-icon{flex-basis:38px;width:38px;height:38px;border-radius:13px}.easy-week-title-row{gap:10px}.easy-week-title-row h2{font-size:clamp(1rem,5vw,1.12rem);line-height:1.1}.easy-week-info{flex:0 0 38px;width:38px;height:38px}.easy-week-toggle{gap:6px;padding:5px}.easy-week-toggle strong{font-size:.82rem}.easy-week-details{margin-top:13px;padding-top:13px}.easy-week-examples{display:grid}.easy-week-examples span{border-radius:12px}}

* { box-sizing: border-box; }

html {
  color-scheme: light;
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

img {
  display: block;
  max-width: 100%;
}

a { color: var(--forest-700); }

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2,
.display-type {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}

h1 {
  margin-bottom: 14px;
  font-size: clamp(2.25rem, 7vw, 4.7rem);
  line-height: .98;
}

h2 {
  margin-bottom: 10px;
  font-size: clamp(1.65rem, 4.5vw, 2.4rem);
  line-height: 1.08;
}

h3 {
  margin-bottom: 7px;
  font-size: 1.05rem;
  line-height: 1.28;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-160%);
  border-radius: 10px;
  background: var(--paper);
  color: var(--forest-900);
  font-weight: 800;
}

.skip-link:focus { transform: none; }

:focus-visible {
  outline: 3px solid #eea839;
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--forest-700);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.muted { color: var(--muted); }
.fine-print { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.no-margin { margin: 0; }

.icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.icon.small { width: 18px; height: 18px; }
.icon.large { width: 28px; height: 28px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}

.brand img {
  width: 43px;
  height: 43px;
  border-radius: 13px;
}

.brand-copy {
  display: grid;
  line-height: 1.05;
}

.brand-name {
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.brand-note {
  margin-top: 4px;
  color: color-mix(in srgb, currentColor 67%, transparent);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); box-shadow: none; }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--forest-900);
  color: #fff;
  box-shadow: 0 8px 18px rgba(23, 63, 50, .18);
}

.btn-primary:hover { background: var(--forest-800); }

.btn-secondary {
  border-color: var(--line);
  background: var(--paper);
  color: var(--forest-900);
}

.btn-soft {
  background: var(--leaf-100);
  color: var(--forest-900);
}

.btn-coral {
  background: var(--coral);
  color: #fff;
}

.btn-ghost { color: var(--forest-800); }
.btn-wide { width: 100%; }
.btn-small { min-height: 40px; padding: 8px 13px; border-radius: 12px; font-size: .9rem; }

.icon-btn {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  transition: transform .14s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

:is(.icon-btn, .segment, .back-button, .meal-select, .shop-star, .settings-link, .ai-source-card, .choice-card):active:not(:disabled) {
  transform: translateY(1px) scale(.975);
}

.icon-btn.selected {
  border-color: var(--coral);
  background: var(--coral-soft);
  color: var(--coral);
}

.pill,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-weight: 800;
}

.pill {
  min-height: 34px;
  padding: 6px 11px;
  background: var(--leaf-100);
  color: var(--forest-900);
  font-size: .82rem;
}

.tag {
  padding: 5px 9px;
  background: rgba(255,255,255,.9);
  color: var(--forest-900);
  font-size: .74rem;
  box-shadow: var(--shadow-sm);
}

.tag.free { background: var(--blue-soft); color: #28535d; }
.tag.premium { background: var(--gold-soft); color: #6d4a05; }
.tag.unlocked { background: var(--leaf-100); color: var(--forest-700); }
.tag.ai-generated-tag { background: var(--blue-soft); color: #285464; }
.tag.coral { background: var(--coral-soft); color: #873821; }

.welcome-shell {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 5% 0%, rgba(216,168,66,.18), transparent 28%),
    linear-gradient(135deg, var(--forest-950), var(--forest-800));
  color: #fff;
}

.welcome-top {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 72px);
}

.welcome-top .btn-secondary {
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.09);
  color: #fff;
  backdrop-filter: blur(12px);
}

.welcome-grid {
  max-width: 1320px;
  min-height: calc(100vh - 90px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(380px, 1.06fr);
  align-items: center;
  gap: clamp(34px, 6vw, 90px);
  padding: 38px clamp(20px, 5vw, 72px) 72px;
}

.welcome-copy { max-width: 620px; }

.welcome-copy h1 span { color: #dcebb7; }

.welcome-copy > p {
  max-width: 560px;
  margin-bottom: 28px;
  color: rgba(255,255,255,.8);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.welcome-actions .btn-primary {
  background: #fff;
  color: var(--forest-900);
}

.welcome-actions .btn-ghost { color: #fff; }

.trust-line {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  color: rgba(255,255,255,.72);
  font-size: .85rem;
  font-weight: 700;
}

.trust-line span { display: inline-flex; align-items: center; gap: 7px; }

.welcome-visual {
  position: relative;
  min-height: 640px;
}

.welcome-footer {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 clamp(20px, 5vw, 72px) 30px;
  color: rgba(255,255,255,.62);
  font-size: .78rem;
}

.welcome-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 15px; }

.welcome-footer button {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 750;
  cursor: pointer;
}

.welcome-footer button:hover { color: #fff; }

.hero-photo {
  position: absolute;
  inset: 0 0 0 10%;
  width: 90%;
  height: 100%;
  border-radius: 44px 12px 44px 44px;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

.hero-photo::after { content: ""; }

.week-ticket {
  position: absolute;
  left: 0;
  bottom: 44px;
  width: min(360px, 78%);
  padding: 21px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 24px;
  background: rgba(255,253,249,.95);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}

.ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ticket-meals { display: grid; gap: 9px; }

.ticket-meal {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 9px;
  font-size: .84rem;
}

.ticket-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--leaf-100);
  color: var(--forest-900);
  font-weight: 900;
}

.saving-bubble {
  position: absolute;
  top: 34px;
  right: -12px;
  padding: 13px 16px;
  border-radius: 17px;
  background: #dcebb7;
  color: var(--forest-950);
  box-shadow: var(--shadow-md);
  font-size: .86rem;
  font-weight: 900;
  transform: rotate(2deg);
}

.setup-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 42%) minmax(0, 58%);
  background: var(--paper);
}

.setup-art {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  background: var(--forest-900);
}

.setup-art img { width: 100%; height: 100vh; object-fit: cover; opacity: .74; }

.setup-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,43,35,.1), rgba(16,43,35,.86));
}

.setup-art-copy {
  position: absolute;
  z-index: 1;
  inset: auto 34px 38px;
  color: #fff;
}

.setup-art-copy h2 { max-width: 440px; font-size: clamp(2rem, 4vw, 3.5rem); }

.setup-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px clamp(22px, 6vw, 86px) 44px;
}

.setup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(46px, 8vh, 90px);
}

.setup-progress { display: flex; align-items: center; gap: 8px; }

.setup-dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--line);
  transition: width .2s ease, background .2s ease;
}

.setup-dot.active { width: 34px; background: var(--forest-800); }
.setup-dot.done { background: var(--leaf-500); }

.setup-content { width: min(680px, 100%); margin: auto; }
.setup-content > p { max-width: 560px; color: var(--muted); font-size: 1.05rem; }

.setup-options { display: grid; gap: 12px; margin: 26px 0; }
.setup-options.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-options.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.choice-card {
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 2px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.choice-card:hover { border-color: var(--leaf-500); }
.choice-card.selected { border-color: var(--forest-700); background: var(--leaf-100); }
.choice-card strong { display: block; }
.choice-card small { display: block; margin-top: 2px; color: var(--muted); line-height: 1.35; }

.choice-symbol {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--cream);
  color: var(--forest-800);
  font-size: 1.22rem;
  font-weight: 900;
}

.counter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }

.counter-card {
  padding: 19px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  text-align: center;
}

.counter-card strong { display: block; margin-bottom: 12px; }

.counter-control { display: flex; align-items: center; justify-content: center; gap: 14px; }

.counter-control button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--forest-800);
  font-size: 1.25rem;
  font-weight: 900;
  cursor: pointer;
}

.portion-size-setting {
  margin-top: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--paper), #f4f2e8);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.portion-size-setting.active {
  border-color: #83a48c;
  box-shadow: 0 10px 26px rgba(26, 78, 60, .08);
}

.portion-size-heading,
.portion-size-actions,
.portion-size-toggle {
  display: flex;
  align-items: center;
}

.portion-size-heading { justify-content: space-between; gap: 18px; }
.portion-size-title { min-width: 0; color: var(--forest-950); font-size: 1.03rem; }
.portion-size-summary { width: 100%; margin: 10px 0 0; color: var(--muted); line-height: 1.45; }
.portion-size-actions { flex: 0 0 auto; gap: 8px; }

.portion-size-info {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #d6dbd2;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: var(--forest-700);
  cursor: pointer;
}

.portion-size-info:hover,
.portion-size-info.selected { border-color: #83a48c; background: var(--leaf-100); }
.portion-size-info svg { width: 20px; height: 20px; }

.portion-size-toggle {
  gap: 8px;
  padding: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--forest-700);
  cursor: pointer;
}

.portion-size-toggle.selected .toggle-track { background: var(--forest-700); box-shadow: inset 0 0 0 1px rgba(16, 43, 35, .12); }
.portion-size-toggle.selected .toggle-track span { transform: translateX(22px); }
.portion-size-toggle:focus-visible,
.portion-size-info:focus-visible { outline: 3px solid rgba(47, 107, 83, .25); outline-offset: 2px; }

.portion-size-details {
  display: grid;
  gap: 8px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #dfe2d8;
}

.portion-size-details[hidden] { display: none; }
.portion-size-details p { margin: 0; color: var(--muted); }
.portion-size-details small { color: #315f4e; font-weight: 700; }

.counter-value { min-width: 24px; font-size: 1.25rem; font-weight: 900; }

.setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.allergy-note {
  display: flex;
  gap: 11px;
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: var(--gold-soft);
  color: #60450d;
  font-size: .84rem;
}

.app-shell { min-height: 100vh; }

.side-nav {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  width: 254px;
  display: flex;
  flex-direction: column;
  padding: 23px 17px;
  background: var(--forest-950);
  color: #fff;
}

.side-nav .brand { padding: 0 9px 24px; }

.nav-list { display: grid; gap: 5px; }

.nav-link {
  min-height: 51px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link.active { background: #fff; color: var(--forest-950); }

.side-card {
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 17px;
  background: rgba(255,255,255,.07);
}

.side-card p { margin-bottom: 12px; color: rgba(255,255,255,.68); font-size: .8rem; }
.side-card .btn { min-height: 40px; width: 100%; background: #dcebb7; color: var(--forest-950); }

.mobile-header {
  display: none;
  position: sticky;
  z-index: 25;
  top: 0;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(23,63,50,.08);
  background: rgba(247,244,236,.94);
  backdrop-filter: blur(15px);
}

.mobile-header .brand img { width: 39px; height: 39px; }
.mobile-header .brand-note { display: none; }

.desktop-account-btn {
  position: fixed;
  z-index: 30;
  top: 20px;
  right: 24px;
  background: rgba(255,253,249,.96);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
}

.desktop-account-btn:hover {
  border-color: rgba(23,63,50,.24);
  background: var(--paper);
}

.mobile-nav {
  display: none;
  position: fixed;
  z-index: 40;
  inset: auto 0 0;
  padding: 7px 8px calc(7px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255,253,249,.97);
  backdrop-filter: blur(16px);
}

.mobile-nav-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }

.mobile-nav .nav-link {
  min-height: 55px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 5px 2px;
  color: var(--muted);
  font-size: .69rem;
  text-align: center;
}

.mobile-nav .nav-link .icon { width: 23px; height: 23px; }
.mobile-nav .nav-link.active { background: var(--leaf-100); color: var(--forest-900); }

.app-main {
  min-height: 100vh;
  margin-left: 254px;
  padding: 34px clamp(24px, 4vw, 58px) 90px;
}

.page { width: min(1180px, 100%); margin: 0 auto; }
.page.narrow { width: min(820px, 100%); }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 25px;
}

.page-head h1 {
  margin-bottom: 8px;
  font-size: clamp(2.05rem, 4vw, 3.3rem);
}

.page-head p { margin-bottom: 0; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }

.week-navigation {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: stretch;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto 18px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.week-arrow,
.week-current {
  border: 0;
  cursor: pointer;
}

.week-arrow {
  min-height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--cream);
  color: var(--forest-800);
}

.week-arrow:hover { background: var(--leaf-100); }
.week-arrow:disabled { opacity: .35; cursor: not-allowed; }

.week-current {
  display: grid;
  place-items: center;
  padding: 5px 12px;
  border-radius: 14px;
  background: transparent;
  text-align: center;
}

.week-current:hover { background: var(--cream); }
.week-current span { color: var(--forest-700); font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.week-current strong { font-size: 1.05rem; }
.week-current small { color: var(--muted); font-size: .76rem; line-height: 1.3; }

.week-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  padding: clamp(22px, 4vw, 38px);
  border-radius: var(--radius-lg);
  background: var(--forest-900);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.week-banner::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -80px;
  bottom: -170px;
  border: 48px solid rgba(220,235,183,.12);
  border-radius: 50%;
}

.week-banner h2 { max-width: 620px; margin-bottom: 9px; }
.week-banner p { max-width: 650px; margin: 0; color: rgba(255,255,255,.74); }

.week-progress {
  position: relative;
  z-index: 1;
  min-width: 182px;
  align-self: center;
}

.week-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.week-progress strong { font-size: 2rem; line-height: 1; }

.progress-track {
  height: 9px;
  overflow: hidden;
  margin-top: 11px;
  border-radius: 99px;
  background: rgba(255,255,255,.15);
}

.progress-fill { height: 100%; border-radius: inherit; background: #dcebb7; transition: width .25s ease; }

.mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 25px 0 20px;
}

.mode-actions { display: flex; align-items: center; gap: 10px; }

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
}

.segment {
  min-height: 42px;
  padding: 8px 15px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.segment.active { background: var(--forest-900); color: #fff; }

.plan-filter-section {
  margin-bottom: 8px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: rgba(255,253,249,.72);
}

.waste-priority + .plan-filter-section {
  margin-top: 14px;
}

.plan-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.plan-filter-title .eyebrow { margin-bottom: 2px; }
.plan-filter-title strong { display: block; }
.plan-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-filter-chips .filter-chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-family: inherit;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.plan-filter-chips .filter-chip.active { border-color: var(--forest-800); background: var(--forest-900); color: #fff; }

.plan-filter-title .btn { flex-shrink: 0; }
.plan-filter-hint { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.5; }
.plan-filter-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 50%; background: var(--forest-900); color: #fff; font-size: .75rem; }
.plan-active-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.plan-active-filter { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--forest-800); border-radius: 999px; background: var(--leaf-100); color: var(--forest-800); font-size: .8rem; font-weight: 800; }
.plan-active-filter small { font-size: .65rem; font-weight: 650; opacity: .8; }
.plan-filter-intro { margin-top: 0; }
.plan-filter-dialog .choice-card:disabled { opacity: .7; cursor: default; }
.plan-filter-dialog .choice-card.selected:disabled { opacity: 1; }
.plan-remember { display: flex; align-items: flex-start; gap: 11px; padding: 14px; margin: 4px 0 16px; border-radius: 14px; background: var(--leaf-100); cursor: pointer; }
.plan-remember input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--forest-800); flex-shrink: 0; }
.plan-remember strong, .plan-remember small { display: block; }
.plan-remember strong { font-size: .9rem; }
.plan-remember small { margin-top: 4px; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.plan-saved-note { font-size: .8rem; line-height: 1.6; color: var(--muted); }
.plan-saved-note .text-button { color: var(--forest-800); text-decoration: underline; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.plan-filter-more summary { cursor: pointer; color: var(--forest-800); font-weight: 850; font-size: .95rem; padding: 3px 0 10px; }
.plan-filter-more summary small { display: block; margin: 5px 0 0 16px; font-size: .75rem; font-weight: 500; color: var(--muted); }
.plan-filter-more[open] summary { padding-bottom: 0; }
.plan-filter-more .field-hint { margin: 0 0 12px; }

.recommend-actions {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.recommend-button-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }

.recommend-actions small { color: var(--muted); font-size: .75rem; font-weight: 750; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 30px 0 14px;
}

.section-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.05rem); }
.section-head p { margin: 4px 0 0; color: var(--muted); }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}

.meal-card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid rgba(23,63,50,.1);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.meal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.meal-card.selected { border-color: var(--forest-700); box-shadow: 0 0 0 2px var(--forest-700), var(--shadow-md); }

.meal-image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-deep);
}

.meal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.meal-card:hover .meal-image { transform: scale(1.025); }

.meal-badges { position: absolute; inset: 12px 12px auto; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: 7px; }
.meal-badges > .tag { flex: 0 0 auto; white-space: nowrap; }

.meal-select {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  min-width: 82px;
  height: 44px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,253,249,.96);
  color: var(--forest-900);
  font-size: .82rem;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .14s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.meal-select .icon { width: 18px; height: 18px; }
.meal-select.selected { background: var(--forest-900); color: #fff; }

.meal-card.motion-meal-added,
.quick-card.motion-meal-added { animation: meal-choice-added .24s cubic-bezier(.2,.8,.2,1) both; }
.meal-card.motion-meal-removed,
.quick-card.motion-meal-removed { animation: meal-choice-removed .18s ease-out both; }
.motion-meal-added .meal-select .icon,
.motion-meal-added .quick-actions .icon { animation: choice-check-pop .26s cubic-bezier(.2,.8,.2,1) both; }

@keyframes meal-choice-added {
  0% { transform: scale(.992); }
  55% { transform: translateY(-2px) scale(1.006); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes meal-choice-removed {
  0% { transform: scale(1); }
  45% { transform: scale(.994); }
  100% { transform: scale(1); }
}

@keyframes choice-check-pop {
  0% { transform: scale(.55); opacity: .45; }
  65% { transform: scale(1.16); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.meal-body { flex: 1; display: flex; flex-direction: column; padding: 17px; }
.meal-body h3 { margin-bottom: 4px; font-size: 1.08rem; }
.meal-sub { min-height: 42px; margin-bottom: 13px; color: var(--muted); font-size: .85rem; line-height: 1.4; }
.meal-body.has-ingredient-swap .meal-sub { min-height: 0; margin-bottom: 8px; }
.meal-body > .ai-edited-tag { align-self: flex-start; max-width: 100%; margin-bottom: 13px; text-align: left; }

.meal-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: auto; color: var(--muted); font-size: .78rem; font-weight: 750; }
.meal-meta span { display: inline-flex; align-items: center; gap: 5px; }
.meal-meta .waste-fit { gap: 6px; }
.ai-plan-portions { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: -3px 0 11px; padding: 6px 9px; border-radius: 10px; background: var(--blue-soft); color: #285464; font-size: .76rem; font-weight: 850; }
.waste-fit strong { color: var(--forest-800); font: inherit; }
.waste-stars { color: #b77a12; font-size: .86rem; letter-spacing: .02em; }
.waste-fit--1 .waste-stars { color: #a45a42; }
.meal-card-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.meal-card-actions .btn { flex: 1 1 120px; }

.match-reason {
  margin: 13px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--forest-700);
  font-size: .79rem;
  font-weight: 800;
}

.meal-open {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.meal-open:focus-visible { outline: 3px solid #eea839; outline-offset: -4px; border-radius: 20px; }
.meal-card button:not(.meal-open):not(.meal-select) { position: relative; z-index: 2; }

.quick-list { display: grid; gap: 10px; }
.one-off-fit { margin-top: 12px; padding: 9px 11px; border-radius: 12px; background: var(--leaf-100); color: var(--forest-800); }
.one-off-fit strong { display: flex; align-items: center; gap: 5px; font-size: .77rem; line-height: 1.4; }
.one-off-fit small { display: block; margin-top: 3px; color: var(--muted); font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
.one-off-fit--compact { margin-top: 5px; padding: 0; background: transparent; }
.one-off-fit--compact strong { font-size: .73rem; }
.one-off-fit--compact small { font-size: .72rem; }
.one-off-fit--check { background: var(--cream); color: var(--muted); }
.one-off-more { display: grid; justify-items: center; gap: 10px; margin-top: 22px; }
.one-off-more p { margin: 0; color: var(--muted); font-size: .82rem; text-align: center; }
.feedback-form textarea { width: 100%; resize: vertical; min-height: 112px; line-height: 1.55; }
.feedback-form .field-label { display: block; margin-top: 18px; margin-bottom: 7px; }
.feedback-form > .btn { margin-top: 22px; }
.feedback-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 15px; border-radius: 14px; background: var(--leaf-100); line-height: 1.55; }
.feedback-consent input { margin-top: 5px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--forest-800); }
.feedback-consent small { display: block; margin-top: 6px; color: var(--muted); }
.feedback-spam-trap { display: none; }
.feedback-error { color: #7b3024; background: #fff0eb; }
.feedback-message-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.feedback-message-head, .feedback-inbox-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.feedback-message-head small, .feedback-receipt small { color: var(--muted); }
.feedback-message h3 { margin: 20px 0 7px; font-size: 1rem; }
.feedback-permission { padding: 10px 12px; border-radius: 12px; background: var(--leaf-100); font-size: .85rem; line-height: 1.5; }
.feedback-receipt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.feedback-receipt small { overflow-wrap: anywhere; }
.feedback-invite { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.feedback-invite h2 { font-size: 1.25rem; margin: 7px 0; }

.quick-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
}

.quick-thumb {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  background: var(--leaf-100);
  color: var(--forest-700);
  font-family: Georgia, serif;
  font-size: 1.7rem;
  font-weight: 900;
}

.quick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.quick-info { min-width: 0; }
.quick-info h3 { margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-info p { margin: 0; color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-info .quick-date-check { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.quick-actions { position: relative; z-index: 2; display: flex; gap: 7px; }
.quick-card > .meal-open:focus-visible { border-radius: 16px; }

.selected-dock {
  position: fixed;
  z-index: 36;
  left: calc(254px + 50%);
  bottom: 20px;
  width: min(620px, calc(100vw - 294px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 14px 13px 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: var(--forest-950);
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.selected-dock strong { display: block; }
.selected-dock small { color: rgba(255,255,255,.65); }
.selected-dock .btn { background: #dcebb7; color: var(--forest-950); }
.selected-dock--enter { animation: selected-dock-in .22s cubic-bezier(.2,.8,.2,1) both; }
.selected-dock--update .selected-count { animation: selected-count-pop .2s cubic-bezier(.2,.8,.2,1) both; }

@keyframes selected-dock-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes selected-count-pop {
  0% { transform: scale(.9); opacity: .55; }
  65% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.success-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 38px);
  border-radius: var(--radius-lg);
  background: var(--forest-900);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.success-panel::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -80px;
  bottom: -170px;
  border: 48px solid rgba(220,235,183,.12);
  border-radius: 50%;
  pointer-events: none;
}

.success-panel > * { position: relative; z-index: 1; }

.success-panel h2 { max-width: 650px; }
.success-panel > p { max-width: 680px; color: rgba(255,255,255,.76); }
.success-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 21px; }
.success-actions .btn-primary { background: #fff; color: var(--forest-900); }
.success-actions .btn-secondary { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; }

.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }

.summary-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}

.summary-card .summary-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--leaf-100);
  color: var(--forest-800);
}

.summary-card strong { display: block; font-size: 1.35rem; }
.summary-card span { color: var(--muted); font-size: .83rem; }

.plan-summary { gap: 8px; }
.plan-summary .summary-card {
  display: grid;
  grid-template-columns: 36px auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 15px;
  border-radius: 15px;
}
.plan-summary .summary-icon { width: 36px; height: 36px; margin: 0; border-radius: 11px; }
.plan-summary .summary-card strong { line-height: 1; }
.plan-summary .summary-card > span { min-width: 0; line-height: 1.3; }

.plan-insight { margin-top: 18px; }
.plan-insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin: 18px 0 14px; }
.impact-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; padding: 13px; border-radius: 15px; background: var(--cream); }
.impact-item > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--leaf-100); color: var(--forest-800); }
.impact-item strong, .impact-item small { display: block; }
.impact-item strong { font-size: 1.2rem; }
.impact-item small { margin-top: 2px; color: var(--muted); line-height: 1.35; }

.empty-state {
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 36px 20px;
  border: 1px dashed #bbc6bf;
  border-radius: var(--radius-lg);
  background: rgba(255,253,249,.5);
  text-align: center;
}

.empty-inner { max-width: 470px; }

.empty-art {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border-radius: 34px 34px 34px 10px;
  background: var(--leaf-100);
  color: var(--forest-700);
}

.empty-art .icon { width: 46px; height: 46px; }
.empty-inner p { color: var(--muted); }

.filter-bar {
  position: sticky;
  z-index: 10;
  top: 16px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 11px;
  margin-bottom: 22px;
  padding: 11px;
  border: 1px solid rgba(23,63,50,.1);
  border-radius: 19px;
  background: rgba(255,253,249,.94);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.search-box { position: relative; }
.search-box .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
}

.input,
.select { padding: 11px 13px; }
.search-box .input { padding-left: 45px; }
.textarea { min-height: 115px; padding: 12px 13px; resize: vertical; }

.filter-trigger.active { background: var(--forest-900); color: #fff; border-color: var(--forest-900); }
.filter-trigger.active .icon { color: #fff; }
.filter-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding-inline: 4px; border-radius: 999px; background: #dcebb7; color: var(--forest-900); font-size: .72rem; line-height: 1; }
.library-active-summary { margin: -10px 0 18px; color: var(--forest-800); font-size: .83rem; font-weight: 700; }
.library-active-summary button { margin-left: 8px; padding: 4px 0; border: 0; background: none; color: var(--forest-700); text-decoration: underline; font: inherit; cursor: pointer; }

.library-list { display: grid; gap: 10px; }
.library-card { min-height: 0; }
.library-card .quick-info { display: grid; gap: 2px; }
.library-card .quick-info h3 { font-size: 1rem; }
.library-card .library-detail { color: var(--forest-700); font-weight: 700; }
.library-card .library-meta { color: var(--muted); font-size: .78rem; }
.library-card .library-view { white-space: nowrap; }

.back-row { margin-bottom: 22px; }

.floating-back {
  position: sticky;
  z-index: 24;
  top: 12px;
  width: fit-content;
}

.settings-back { z-index: 30; }

.back-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(23,63,50,.14);
  border-radius: 13px;
  background: rgba(255,253,249,.94);
  color: var(--forest-800);
  font-weight: 850;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.back-button:hover { background: var(--leaf-100); }
.recipe-favourite { color: var(--forest-900); }
.recipe-favourite:not(.selected) .icon { stroke-width: 2.2; }

.recipe-hero {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  border-radius: 30px;
  background: var(--forest-900);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.recipe-photo {
  min-height: 480px;
  background: var(--forest-800);
}

.recipe-photo img { width: 100%; height: 100%; object-fit: cover; }

.recipe-photo-fallback {
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--forest-800), var(--forest-700));
  color: #dcebb7;
  font-family: Georgia, serif;
  font-size: 6rem;
  font-weight: 900;
}

.recipe-intro { align-self: center; padding: clamp(28px, 5vw, 56px); }
.recipe-intro h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.recipe-intro > p { color: rgba(255,255,255,.75); font-size: 1.07rem; }
.recipe-origin-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.recipe-origin-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.recipe-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.recipe-tags .pill { background: rgba(255,255,255,.12); color: #fff; }
.recipe-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.recipe-feedback-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.recipe-hero-actions .btn-primary { background: #fff; color: var(--forest-900); }
.recipe-hero-actions .btn-secondary { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; }
.recipe-hero-actions .recipe-like.selected,
.recipe-hero-actions .recipe-dislike.selected { border-color: #dcebb7; background: rgba(220,235,183,.2); }
.recipe-dislike-note { margin: 12px 0 0; color: #dcebb7 !important; font-size: .85rem; }

.recipe-layout { display: grid; grid-template-columns: minmax(250px, .74fr) minmax(0, 1.26fr); gap: 24px; margin-top: 25px; }
.recipe-column { display: grid; align-content: start; gap: 17px; }

.panel {
  padding: clamp(19px, 3vw, 27px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.panel h2 { font-size: 1.45rem; }
.panel h3 { font-size: 1rem; }

.nutrition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.nutrition-item {
  padding: 12px;
  border-radius: 13px;
  background: var(--cream);
}

.nutrition-item strong { display: block; font-size: 1.08rem; }
.nutrition-item span { color: var(--muted); font-size: .75rem; }
.nutrition-grid .nutrition-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.energy-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--gold-soft);
  color: #60450d;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.4;
}

.ingredient-list,
.step-list,
.plain-list { margin: 0; padding: 0; list-style: none; }
.ingredient-list { display: grid; gap: 1px; }

.ingredient-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.ingredient-row:last-child { border-bottom: 0; }
.ingredient-row span:last-child { color: var(--muted); font-weight: 750; text-align: right; }

.step-list { counter-reset: steps; display: grid; gap: 12px; }

.step-card {
  position: relative;
  padding: 18px 18px 18px 64px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
}

.step-card::before {
  counter-increment: steps;
  content: counter(steps);
  position: absolute;
  top: 17px;
  left: 17px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--forest-900);
  color: #fff;
  font-weight: 900;
}

.step-card ul { margin: 8px 0 0; padding-left: 19px; }
.step-card li + li { margin-top: 7px; }

.tip-box {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--leaf-100);
  color: var(--forest-900);
  font-size: .84rem;
}

.tip-box.important { background: var(--gold-soft); color: #60450d; }

.locked-method {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.lock-card {
  position: absolute;
  inset: 50% 22px auto;
  z-index: 2;
  padding: 25px;
  transform: translateY(-50%);
  border: 1px solid var(--gold);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.lock-card .summary-icon { margin: 0 auto 13px; }

.cook-list { display: grid; gap: 14px; }

.cook-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.cook-card img,
.cook-card .quick-thumb { width: 190px; height: 145px; border-radius: 0; }
.cook-card-info { padding: 19px; }
.cook-card-labels { padding-right: 0; }
.cook-card-info p { margin: 0; color: var(--muted); }
.cook-card-actions { display: grid; gap: 8px; padding: 19px 56px 19px 0; }
.cook-card-secondary-actions { display: contents; }
.cook-meal-status-button { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--forest-800); background: var(--paper); cursor: pointer; }
.cook-meal-status-button:hover { background: var(--leaf-100); }
.cook-meal-status-button:focus-visible { outline: 3px solid var(--forest-700); outline-offset: -3px; }
.cook-print-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 24px; border: 1px solid #cbdcc9; background: var(--leaf-100); }
.cook-print-panel h2 { margin: 4px 0 6px; }
.cook-print-panel p { margin: 0; }
.cook-print-panel .btn { flex: 0 1 auto; }
.cook-print-panel .fine-print { flex-basis: 100%; }
@media (max-width: 760px) { .cook-print-panel .btn { width: 100%; } }

.cook-mode {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow-y: auto;
  background: var(--paper);
}

.cook-top {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  padding: 8px clamp(12px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
  background: rgba(255,253,249,.96);
  backdrop-filter: blur(16px);
}

.cook-progress { flex: 1; max-width: 460px; }
.cook-progress span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .72rem; font-weight: 750; }
.cook-progress .progress-track { background: var(--cream-deep); }
.cook-progress .progress-fill { background: var(--forest-700); }

.cook-stage {
  width: min(760px, calc(100% - 30px));
  margin: 0 auto;
  padding: 20px 0 92px;
}

.cook-step { width: 100%; }
.cook-step .eyebrow { margin-bottom: 7px; }
.cook-step h1 { margin-bottom: 0; font-size: clamp(1.65rem, 4vw, 2.65rem); line-height: 1.07; }
.cook-step-items { display: grid; gap: 8px; margin: 13px 0; }

.step-amounts {
  margin: 15px 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(47,107,83,.18);
  border-radius: 15px;
  background: var(--leaf-100);
}

.step-amounts .eyebrow { margin-bottom: 8px; }
.step-amount-grid { display: grid; gap: 5px; }
.step-amount-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; }
.step-amount-row span { color: var(--forest-800); }
.step-amount-row strong { color: var(--forest-950); text-align: right; }
.cook-amounts { margin: 12px 0 4px; padding: 10px 12px; }
.cook-amounts .step-amount-grid { gap: 3px; }
.cook-amounts .step-amount-row { font-size: .93rem; }

.cook-instruction {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--cream);
  font-size: .96rem;
  line-height: 1.45;
}

.cook-instruction span:first-child {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--leaf-100);
  color: var(--forest-900);
  font-size: .8rem;
  font-weight: 900;
}

.cook-bottom {
  position: fixed;
  z-index: 105;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 9px 14px calc(9px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255,253,249,.96);
  backdrop-filter: blur(16px);
}

.timer-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(47,107,83,.18);
  border-radius: 15px;
  background: var(--cream-deep);
  color: var(--forest-950);
}

/* The coloured face represents time remaining. Its right edge moves left as
   the countdown falls, while the timer content stays fixed above it. */
.timer-bar::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: var(--timer-progress, 100%);
  background: linear-gradient(90deg, var(--leaf-300), #cee0bd);
  transition: width .95s linear;
}

.timer-bar > * { position: relative; z-index: 1; }
.timer-bar > span { min-width: 0; }
.timer-bar > span strong,
.timer-bar > span small { display: block; }
.timer-bar > span small { margin-top: 1px; color: var(--forest-700); font-size: .68rem; }
.timer-bar > .timer-clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.timer-bar.done { border-color: var(--forest-700); background: var(--forest-700); color: #fff; }
.timer-bar.done::before { display: none; }
.timer-bar.done > span small { color: rgba(255,255,255,.76); }
.timer-clear { background: #fff; color: var(--forest-950); }
.cook-timer-region { margin-top: 11px; }
.cook-timer-tools { padding-top: 9px; }
.cook-timer-tools > .eyebrow { margin-bottom: 6px; }
.cook-timer-tools > div { display: flex; flex-wrap: wrap; gap: 7px; }
.cook-step > .tip-box { margin: 11px 0 0; padding: 11px 13px; }

.waste-adjustment {
  margin-top: 13px;
  padding: 12px 13px;
  border: 1px solid rgba(47,107,83,.2);
  border-radius: 14px;
  background: var(--leaf-100);
  color: var(--forest-900);
}
.waste-adjustment > strong { display: flex; align-items: center; gap: 7px; }
.waste-adjustment p { margin: 6px 0 0; font-size: .86rem; line-height: 1.45; }

/* Shopping keeps purchase controls compact; Stock and the other pages retain their layouts. */
.shopping-page .page-head { margin-bottom: 12px; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.shop-toolbar .btn { min-height: 44px; padding: 6px 8px; }
.shop-date-choice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .8rem; }
.shop-date-choice .input { width: 154px; min-height: 44px; padding: 7px 9px; font-size: .85rem; }
.shop-progress-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 10px 12px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--leaf-100); }
.shop-progress-counts { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; color: var(--forest-900); font-size: .82rem; line-height: 1.4; }
.shop-progress-counts strong, .shop-progress-counts span { white-space: nowrap; }
.shop-progress-counts span { color: var(--forest-700); }
.shop-progress-counts span::before { content: "·"; margin-right: 10px; }
.shop-progress-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin-left: auto; min-width: 0; }
.shop-progress-actions .btn { min-height: 44px; padding: 6px 10px; font-size: .8rem; line-height: 1.25; white-space: normal; }
.shop-progress-actions .btn-ghost { flex: 0 1 auto; min-width: 0; padding-inline: 0; text-align: left; justify-content: flex-start; }
.shop-progress-actions .btn-primary { flex: 0 0 auto; margin-left: auto; box-shadow: none; }
.shopping-page .shop-item { grid-template-columns: 44px minmax(0, 1fr) auto 44px; grid-template-areas: "check name quantity more" ". actions actions more"; gap: 4px 10px; align-items: center; padding: 10px 0; }
.shopping-page .shop-name { min-height: 0; overflow-wrap: anywhere; cursor: inherit; }
.shopping-page label.shop-name { cursor: pointer; }
.shopping-page .shop-name > strong { display: inline; }
.shopping-page .shop-check-control { grid-area: check; display: grid; place-items: center; width: 44px; min-height: 44px; cursor: pointer; align-self: start; }
.shopping-page .shop-check-control input { margin: 0; }
.shopping-page .stock-check-mark { width: 44px; min-height: 44px; align-self: start; }
.shopping-page .shop-qty { max-width: 260px; overflow-wrap: anywhere; }
.shopping-page .shop-more { grid-area: more; align-self: start; width: 44px; height: 44px; border-color: transparent; border-radius: 10px; background: transparent; color: var(--muted); }
.shopping-page .shop-more:hover { background: var(--cream-deep); color: var(--forest-900); }
.shop-row-status { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.shop-row-warning { display: block; margin-top: 4px; color: #76591d; font-size: .78rem; font-weight: 750; line-height: 1.4; }
.shop-starred-indicator { display: inline-flex; align-items: center; margin-left: 6px; color: #a66a00; vertical-align: middle; }
.shop-starred-indicator .icon { width: 15px; height: 15px; }
.shopping-page .shop-item.checked, .shopping-page .stock-confirmed { padding: 6px 0; }
.shopping-page .shop-item.checked .shop-name { opacity: 1; }
.shopping-page .stock-confirmed .shop-row-status { display: none; }
.shopping-page .shop-row-actions { margin-top: 2px; }
.shopping-page .cupboard-check-item { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "check name quantity"; }
.shopping-page .check-you-have > summary { cursor: pointer; list-style: none; align-items: center; min-height: 56px; }
.shopping-page .check-you-have > summary::-webkit-details-marker { display: none; }
.shopping-page .check-you-have > summary > div { flex: 1; }
.shopping-page .check-you-have > summary > .icon { flex: 0 0 auto; }
.shopping-page .check-you-have[open] > summary > .icon { transform: rotate(90deg); }
.shopping-option-list { display: grid; gap: 10px; }
.shopping-option-list .btn { min-height: 44px; width: 100%; justify-content: flex-start; white-space: normal; text-align: left; }
.shopping-item-details { display: grid; gap: 12px; margin: 20px 0; }
.shopping-item-details > div { display: grid; grid-template-columns: minmax(100px, .6fr) minmax(0, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.shopping-item-details dt { color: var(--muted); font-size: .86rem; }
.shopping-item-details dd { margin: 0; overflow-wrap: anywhere; font-size: .9rem; }
.shopping-purchase-details summary { min-height: 44px; align-content: center; cursor: pointer; font-weight: 750; }
.shopping-purchase-details li { margin-top: 8px; font-size: .86rem; }
@media (max-width: 820px) {
  .shopping-page .shop-item { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "check name more" ". quantity more" ". actions more"; column-gap: 8px; }
  .shopping-page .shop-qty { text-align: left; max-width: none; }
  .shopping-page .cupboard-check-item { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "check name" ". quantity"; }
  .shop-progress-strip { display: grid; grid-template-columns: minmax(0, 1fr); }
  .shop-progress-actions { justify-content: space-between; width: 100%; margin-left: 0; }
  .shopping-item-details > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

.shop-store-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -6px 0 15px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--cream);
  color: var(--forest-900);
  font-size: .82rem;
}
.shop-store-note .btn { margin-left: auto; }

.shop-pack-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -6px 0 15px;
  padding: 11px 12px;
  border: 1px solid #dfbd70;
  border-radius: 13px;
  background: #fff5d9;
  color: #684b0d;
  font-size: .82rem;
  line-height: 1.4;
}
.shop-pack-warning .icon { flex: 0 0 auto; margin-top: 1px; }
.shop-pack-warning span { min-width: 0; }
.shop-pack-warning strong, .shop-pack-warning small { display: block; }
.shop-pack-warning small { margin-top: 2px; color: #76591d; }
.unverified-pack-dialog .shop-pack-warning { margin: 0 0 16px; }
.unverified-pack-note { display: block; margin-top: 4px; color: #76591d; font-size: .72rem; font-weight: 800; line-height: 1.35; }

.shopping-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; align-items: start; }
.shopping-groups { display: grid; gap: 14px; }

.shopping-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.shopping-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}

.shopping-group-head h2 { margin: 0; font-family: inherit; font-size: .98rem; letter-spacing: 0; }
.shopping-group-head > div { min-width: 0; }
.shopping-group-head p { margin: 4px 0 0; color: var(--muted); font-size: .77rem; line-height: 1.4; }
.shopping-items { padding: 4px 16px; }

.shop-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 38px;
  grid-template-areas:
    "check name quantity star"
    "check actions actions star";
  column-gap: 10px;
  row-gap: 5px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .2s ease, opacity .2s ease;
}

.shop-item:last-child { border-bottom: 0; }
.shop-item input { grid-area: check; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--forest-700); }
.shop-name { grid-area: name; min-width: 0; cursor: pointer; line-height: 1.25; }
.shopping-sync-status:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px 0 12px; color: var(--muted); font-size: .78rem; }
.shopping-sync-status > span { min-width: 0; }
.shopping-sync-status .btn { flex-shrink: 0; min-height: 44px; padding: 6px 8px; }
.purchase-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.purchase-correction-list { display: grid; gap: 12px; margin-top: 10px; }
.purchase-correction-row { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.purchase-correction-row .duplicate-choice { padding: 0; border: 0; margin-bottom: 12px; }
.purchase-correction-row .fine-print:last-child { margin-bottom: 0; }
.shop-name > strong { display: block; font-size: .93rem; line-height: 1.25; }
.shop-item.checked .shop-name > strong { color: var(--muted); text-decoration: line-through; }
.shop-item.checked .shop-name,
.shop-item.checked .shop-qty { opacity: .76; }
.shop-item.motion-shop-complete { animation: shop-complete .32s ease-out both; }
.shop-item.motion-shop-complete input { animation: choice-check-pop .26s cubic-bezier(.2,.8,.2,1) both; }

@keyframes shop-complete {
  0% { background-color: rgba(184,211,111,.38); transform: translateX(-2px); }
  100% { background-color: transparent; transform: translateX(0); }
}
.purchase-date { display: block; margin-top: 3px; color: var(--forest-700); font-size: .72rem; font-weight: 800; line-height: 1.35; text-decoration: none; }
.shop-qty { grid-area: quantity; color: var(--muted); font-size: .8rem; font-weight: 750; line-height: 1.3; text-align: right; }
.shop-row-actions { grid-area: actions; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.shop-row-actions .btn { min-height: 30px; width: auto; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); font-size: .72rem; line-height: 1; white-space: nowrap; }
.shop-row-actions .part-buy { border-color: rgba(47,107,83,.2); background: var(--leaf-100); }
.stock-check-item { background: rgba(232,238,221,.35); }
.stock-check-mark { grid-area: check; display: flex; align-items: center; justify-content: center; color: var(--forest-700); }
.stock-check-item.stock-confirmed .stock-check-mark { color: var(--forest-900); }
.stock-check-copy { display: block; }
.stock-check-reminder { padding: 11px; border-radius: 12px; background: var(--gold-soft); color: #69501b; font-size: .85rem; font-weight: 750; }
.stock-amount-choices { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.stock-amount-choices .btn { flex: 1 1 180px; white-space: normal; }
.shop-star { grid-area: star; align-self: start; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: #8b918d; cursor: pointer; }
.shop-star:hover { background: var(--cream); color: var(--gold); }
.shop-star.selected { background: #fff2c7; color: #a66a00; }
.starred-group .shopping-group-head { background: #fff7db; }
.check-you-have .shopping-group-head { align-items: flex-start; background: var(--leaf-100); }
.check-you-have .shopping-group-head > .pill { flex: 0 0 auto; white-space: nowrap; }
.cupboard-check-item {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas: "check name quantity";
}
.shopping-group-head h2 { display: flex; align-items: center; gap: 7px; }

.owned-list {
  display: grid;
  margin-top: 8px;
}

.owned-list-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.owned-list-item:last-child { border-bottom: 0; }
.owned-list-item > .icon { margin-top: 2px; color: var(--forest-700); }
.owned-list-copy { display: grid; gap: 3px; min-width: 0; }
.owned-list-copy strong { font-size: .91rem; line-height: 1.3; overflow-wrap: anywhere; }
.owned-list-copy small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.owned-list-item > .btn {
  align-self: center;
  min-height: 36px;
  width: auto;
  padding: 6px 9px;
  white-space: nowrap;
}

/* v35.4.37: Stock-covered progress rows on phones. Keep each ingredient
   and its explanation together; the separate action must not take text width.
   Rows without a Remove button keep just the first row (no empty action row). */
@media (max-width: 620px) {
  .owned-list { margin-top: 10px; }
  .owned-list-item {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 6px;
    padding: 12px 0;
  }
  .owned-list-item > .icon { grid-column: 1; grid-row: 1; }
  .owned-list-copy { grid-column: 2; grid-row: 1; gap: 4px; }
  .owned-list-copy strong,
  .owned-list-copy small { overflow-wrap: anywhere; }
  .owned-list-item > .btn {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--cream);
  }
}

.sticky-panel { position: sticky; top: 20px; }

.stock-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 27px;
  border-radius: 25px;
  background: linear-gradient(135deg, #dcebb7, var(--leaf-100));
  color: var(--forest-950);
}

.stock-hero h2 { margin-bottom: 7px; }
.stock-hero p { max-width: 580px; margin: 0; color: #395649; }
.stock-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }

.stock-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-top: 18px; }
.stock-section { margin-top: 18px; }
.stock-planning-options { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stock-planning-options > summary { min-height: 44px; padding: 12px 14px; cursor: pointer; font-weight: 700; color: var(--forest-900); }
.stock-planning-options-body { padding: 4px 14px 14px; display: grid; gap: 14px; }
.stock-planning-choice { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.stock-planning-choice input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--forest-700); }
.stock-planning-choice span { min-width: 0; }
.stock-planning-choice strong, .stock-planning-choice small { display: block; }
.stock-planning-choice small { margin-top: 4px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.stock-list { display: grid; gap: 6px; }
.stock-duplicate-notice { margin-bottom: 12px; padding: 12px; border-radius: 12px; background: var(--leaf-100); }
.stock-duplicate-notice p { margin: 0 0 8px; font-size: .85rem; }
.duplicate-choices { display: grid; gap: 8px; margin: 10px 0; }
.duplicate-choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.duplicate-choice input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--forest-800); }
.duplicate-choice span { min-width: 0; overflow-wrap: anywhere; }
.duplicate-choice strong, .duplicate-choice small { display: block; }
.duplicate-choice small { margin-top: 4px; color: var(--muted); line-height: 1.5; }

.stock-hero.stock-scan { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-radius: 20px; }
.stock-scan-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stock-scan-heading > div { min-width: 0; }
.stock-scan-heading h2 { margin: 0; font-size: clamp(1.3rem, 4.5vw, 1.65rem); line-height: 1.15; }
.stock-ai-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; padding: 4px 7px; border-radius: 999px; background: var(--paper); color: var(--forest-800); font-size: .7rem; font-weight: 800; line-height: 1.25; }
.stock-ai-badge .icon { width: 16px; height: 16px; }
.stock-scan-actions { display: flex; align-items: center; gap: 8px; }
.stock-scan-actions .btn { min-width: 0; min-height: 44px; padding: 9px 13px; font-size: .9rem; }
.stock-scan-info { flex: 0 0 44px; width: 44px; height: 44px; color: var(--forest-800); background: transparent; border-color: transparent; }
.stock-scan-info:hover { background: var(--leaf-100); }

.panel.stock-disclosure { overflow: hidden; min-width: 0; margin-top: 10px; padding: 0; border-radius: 16px; }
.stock-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; margin: 1px; padding: 13px 16px; border-radius: 14px; background-clip: padding-box; list-style: none; cursor: pointer; }
.stock-disclosure > summary::-webkit-details-marker { display: none; }
.stock-disclosure > summary::marker { content: ""; }
.stock-disclosure > summary:hover { background: var(--leaf-100); }
.stock-disclosure > summary:focus-visible { outline: 2px solid var(--forest-700); outline-offset: -3px; }
.stock-section-label { min-width: 0; }
.stock-section-label strong, .stock-section-label small { display: block; }
.stock-section-label strong { color: var(--forest-900); font-size: 1rem; line-height: 1.3; }
.stock-section-label small { margin-top: 2px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.stock-section-chevron { display: inline-flex; flex: 0 0 auto; color: var(--forest-700); }
.stock-disclosure[open] > summary .stock-section-chevron { transform: rotate(90deg); }
.stock-section-body { min-width: 0; padding: 0 16px 16px; }
.stock-section-body > p:first-child { font-size: .82rem; }
.stock-section-body > :last-child { margin-bottom: 0; }
.stock-section-body .jar-list { display: grid; gap: 10px; }
.stock-section-body .jar-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px; border-radius: 11px; background: var(--cream); }
.stock-section-body .jar-row strong, .stock-section-body .jar-row span { display: block; }
.stock-section-body .jar-row span { font-size: .8rem; color: var(--muted); }
.stock-section-body .jar-row .btn { justify-self: start; min-height: 44px; }

.stock-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px 9px 8px 11px;
  border-radius: 11px;
  background: var(--cream);
  transition: background-color .2s ease, box-shadow .2s ease;
}

.stock-item.motion-stock-updated { animation: stock-updated .34s ease-out both; }

@keyframes stock-updated {
  0% { background-color: var(--leaf-100); box-shadow: 0 0 0 2px rgba(47,107,83,.18); transform: translateY(2px); }
  100% { background-color: var(--cream); box-shadow: 0 0 0 0 rgba(47,107,83,0); transform: translateY(0); }
}

.stock-info strong { display: block; }
.stock-info span { display: block; color: var(--muted); font-size: .75rem; line-height: 1.35; }
.stock-info .purchase-date { color: var(--forest-700); font-weight: 800; }
.use-soon { color: var(--coral); font-size: .75rem; font-weight: 900; }

/* Stock details use the full card width; actions sit below at every screen size. */
.detailed-stock {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 10px 12px 6px;
}

.detailed-stock .stock-info { min-width: 0; }
.detailed-stock .stock-info strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 3px;
}
.detailed-stock .stock-info span { overflow-wrap: anywhere; }
.detailed-stock .stock-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 3px;
}
.detailed-stock .stock-edit-actions,
.detailed-stock .stock-status-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}
.detailed-stock .stock-status-actions { margin-left: auto; }
.detailed-stock .stock-row-actions .btn {
  min-height: 44px;
  padding: 6px 10px;
  font-size: .82rem;
  line-height: 1.2;
}
.detailed-stock .stock-delete,
.detailed-stock .stock-planning-symbol {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--danger);
}
.detailed-stock .stock-planning-symbol { color: var(--forest-700); }
.detailed-stock .stock-planning-symbol .icon { width: 20px; height: 20px; }
.detailed-stock .stock-planning-symbol:hover { background: var(--leaf-100); }
.detailed-stock .stock-priority-symbol { color: var(--danger); }
.detailed-stock .stock-priority-symbol:hover { background: var(--coral-soft); }
.detailed-stock .stock-delete:hover { background: var(--coral-soft); }
.detailed-stock .stock-info .use-soon { color: var(--forest-700); }
.detailed-stock .stock-info .use-soon.urgent { color: var(--danger); }

.scan-preview {
  overflow: hidden;
  display: grid;
  min-height: 260px;
  place-items: center;
  padding: 30px;
  border: 2px dashed var(--leaf-500);
  border-radius: 20px;
  background: var(--leaf-100);
  text-align: center;
}

.scan-preview .empty-art { width: 82px; height: 82px; margin-bottom: 14px; background: var(--paper); }

.ai-builder { margin-top: 18px; }
.ai-builder-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.ai-type-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ai-builder-intro { max-width: 650px; }
.ai-builder-intro h2 { margin: 4px 0 7px; }
.ai-builder-intro p { margin: 0; }
.ai-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ai-source-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.ai-source-card:hover { border-color: var(--leaf-500); background: var(--leaf-100); }
.ai-source-card:focus-visible { outline: 3px solid #eea839; outline-offset: 2px; }
.ai-source-icon { width: 46px; height: 46px; display: grid; flex: 0 0 46px; place-items: center; border-radius: 14px; background: var(--forest-900); color: #fff; }
.ai-source-copy { min-width: 0; }
.ai-source-copy strong, .ai-source-copy small { display: block; }
.ai-source-copy strong { color: var(--forest-950); font-size: .98rem; }
.ai-source-copy small { margin-top: 4px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.ai-source-arrow { color: var(--forest-700); transform: rotate(-90deg); }
.saved-ai-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.section-head.compact { margin: 0 0 12px; }
.section-head.compact h3 { margin: 0; font-size: 1.05rem; }
.section-head.compact p { font-size: .82rem; }
.ai-allowance { margin-top: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.ai-allowance summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; list-style: none; cursor: pointer; }
.ai-allowance summary::-webkit-details-marker { display: none; }
.ai-allowance summary strong, .ai-allowance summary small { display: block; }
.ai-allowance summary small { margin-top: 2px; color: var(--muted); font-size: .75rem; font-weight: 650; line-height: 1.35; }
.ai-allowance-arrow { color: var(--forest-700); transition: transform .18s ease; }
.ai-allowance[open] .ai-allowance-arrow { transform: rotate(180deg); }
.ai-allowance > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; border-top: 1px solid var(--line); }
.ai-safety-note { margin-top: 14px; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; }

.dialog.ai-flow-dialog {
  width: min(650px, 100%);
  max-height: min(860px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 0;
}
.ai-flow-dialog > .dialog-head { margin: 0; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.ai-flow-dialog > div { min-height: 0; overflow-y: auto; padding: 18px 22px 22px; }
.ai-flow-dialog > .dialog-actions { margin: 0; padding: 13px 22px; border-top: 1px solid var(--line); background: var(--paper); }
.ai-dialog-section { padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); }
.ai-dialog-section + .ai-dialog-section { margin-top: 13px; }
.ai-dialog-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 13px; }
.ai-dialog-step > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--forest-900); color: #fff; font-size: .8rem; font-weight: 900; }
.ai-dialog-step h3 { margin: 2px 0 2px; font-family: inherit; font-size: 1rem; letter-spacing: 0; }
.ai-dialog-step p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.ai-focus-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ai-focus-row { min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--cream); cursor: pointer; }
.ai-focus-row input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--forest-700); }
.ai-focus-row span { min-width: 0; }
.ai-focus-row strong, .ai-focus-row small { display: block; overflow-wrap: anywhere; }
.ai-focus-row strong { font-size: .9rem; line-height: 1.3; }
.ai-focus-row small { margin-top: 2px; color: var(--muted); font-size: .75rem; line-height: 1.35; }
.ai-option-check { margin-bottom: 10px; background: var(--leaf-100); }
.ai-added-details { border: 1px solid var(--line); border-radius: 13px; background: var(--cream); }
.ai-added-details summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; list-style: none; cursor: pointer; }
.ai-added-details summary::-webkit-details-marker { display: none; }
.ai-added-details summary strong, .ai-added-details summary small { display: block; }
.ai-added-details summary small { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.ai-added-details summary > .icon { flex: 0 0 auto; transition: transform .18s ease; }
.ai-added-details[open] summary > .icon { transform: rotate(180deg); }
.ai-added-fields { display: grid; gap: 13px; padding: 13px; border-top: 1px solid var(--line); }
.ai-preference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ai-preference-grid .field { gap: 5px; }
.ai-preference-grid .field label { font-size: .78rem; }
.ai-preference-grid .select { min-width: 0; }
.ai-preference-grid .ai-portion-field { grid-column: 1 / -1; }
.ai-portion-warning { border-color: #d9a96a; background: #fff4df; }
.ai-portion-result { border-color: #b8cda8; }
.cook-fixed-portions { margin: 8px 0 0; color: var(--muted); font-weight: 700; }
.ai-type-intro { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 13px; border-radius: 15px; background: var(--leaf-100); }
.ai-type-intro p { margin-top: 3px; font-size: .8rem; }
.ai-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ai-type-card { min-height: 82px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.ai-type-card:hover { border-color: var(--leaf-500); background: var(--cream); }
.ai-type-card strong, .ai-type-card small { display: block; }
.ai-type-card small { margin-top: 4px; color: var(--muted); font-size: .75rem; line-height: 1.35; }
.ai-photo-purpose { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 14px; padding: 12px; border: 1px solid rgba(47,107,83,.22); border-radius: 14px; background: var(--leaf-100); color: var(--forest-950); }
.ai-photo-purpose > .icon { margin: 7px; color: var(--forest-700); }
.ai-photo-purpose strong, .ai-photo-purpose small { display: block; }
.ai-photo-purpose small { margin-top: 2px; color: var(--forest-700); font-size: .76rem; line-height: 1.4; }
.ai-recipe-photo-picker { min-height: 220px; padding: 22px; }
.ai-recipe-photo-picker .button-row { justify-content: center; }
.saved-ai-list, .limit-recipes { display: grid; gap: 9px; }
.saved-ai-card, .limit-recipe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--cream); }
.saved-ai-card h3 { margin: 2px 0 4px; }
.saved-ai-card p { margin: 0; color: var(--muted); font-size: .8rem; }
.ai-saved-label { display: inline-flex; align-items: center; gap: 5px; }
.saved-ai-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.saved-ai-cooked { display: inline-flex; align-items: center; gap: 5px; color: var(--forest-700); font-size: .76rem; font-weight: 850; white-space: nowrap; }
.ai-draft h2 { margin: 5px 0 8px; }
.mini-method { display: grid; gap: 10px; margin: 18px 0; padding-left: 24px; }
.mini-method li { padding-left: 4px; line-height: 1.55; }
.limit-recipe strong, .limit-recipe small { display: block; }
.limit-recipe small { margin-top: 3px; color: var(--muted); }

.settings-list { display: grid; gap: 13px; }

.settings-link {
  width: 100%;
  min-height: 88px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  text-align: left;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.settings-link:hover { border-color: var(--leaf-500); }
.settings-icon { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 15px; background: var(--leaf-100); color: var(--forest-800); }
.settings-link strong { display: block; font-size: 1rem; }
.settings-link small { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; }
.settings-chevron { color: var(--muted); }

.settings-section { margin-top: 27px; }
.settings-section > h2 { margin-bottom: 12px; font-family: inherit; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }

.avoid-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.avoid-field legend { margin-bottom: 2px; padding: 0; font-weight: 850; }
.avoid-field .field-hint { display: block; margin-bottom: 11px; }
.avoid-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.avoid-chip { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 750; cursor: pointer; }
.avoid-chip:hover { border-color: var(--leaf-500); }
.avoid-chip.active { border-color: var(--forest-700); background: var(--leaf-100); color: var(--forest-900); }

.member-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.member-row:first-of-type { margin-top: 12px; }
.member-row strong, .member-row small { display: block; }
.member-row small { margin-top: 2px; color: var(--muted); }
.member-row .member-remove { justify-self: end; }
.member-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--forest-800); color: #fff; font-weight: 900; }
.muted-member { color: var(--muted); }
.muted-member .member-avatar { background: var(--cream-deep); color: var(--forest-800); }
.invite-code { display: flex; flex-wrap: wrap; gap: 2px; margin: 16px 0; padding: 13px 14px; border: 1px dashed var(--leaf-500); border-radius: 14px; background: var(--leaf-100); font-size: .88rem; word-break: break-word; }

.form-grid { display: grid; gap: 17px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 850; }
.field-hint { color: var(--muted); font-size: .8rem; }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.switch-row:last-child { border-bottom: 0; }
.switch-copy strong { display: block; }
.switch-copy small { display: block; color: var(--muted); }

.switch {
  position: relative;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
}

.switch input { position: absolute; opacity: 0; }
.switch-track { position: absolute; inset: 0; border-radius: 99px; background: #c8cfca; cursor: pointer; transition: background .2s ease; }
.switch-track::after { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.switch input:checked + .switch-track { background: var(--forest-700); }
.switch input:checked + .switch-track::after { transform: translateX(22px); }
.switch input:focus-visible + .switch-track { outline: 3px solid #eea839; outline-offset: 3px; }

.pricing-intro {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  align-items: center;
  gap: 26px;
  padding: clamp(26px, 5vw, 52px);
  border-radius: 30px;
  background: var(--forest-950);
  color: #fff;
}

.pricing-intro h1 { max-width: 680px; }
.pricing-intro p { max-width: 620px; color: rgba(255,255,255,.72); }

.price-proof {
  padding: 23px;
  border-radius: 22px;
  background: rgba(255,255,255,.09);
}

.price-proof strong { display: block; font-size: 2.4rem; }
.price-proof span { color: rgba(255,255,255,.67); }

.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin-top: 20px; }

.price-card {
  position: relative;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.price-card.best { border: 2px solid var(--forest-700); }
.best-label { position: absolute; top: -13px; right: 20px; padding: 5px 11px; border-radius: 99px; background: var(--forest-900); color: #fff; font-size: .75rem; font-weight: 900; }
.price { margin: 16px 0; font-size: 2.4rem; font-weight: 950; letter-spacing: -.05em; }
.price small { color: var(--muted); font-size: .9rem; letter-spacing: 0; }
.feature-list { display: grid; gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.feature-list li { display: flex; gap: 9px; }
.feature-list .icon { color: var(--forest-700); }

.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.compare-table th:not(:first-child), .compare-table td:not(:first-child) { text-align: center; }
.compare-table th { color: var(--muted); font-size: .8rem; }

.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.help-card {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.help-card p { color: var(--muted); }
.help-card .btn { align-self: flex-start; margin-top: auto; padding-left: 0; }

.faq-list { display: grid; gap: 9px; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.faq-question {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  border: 0;
  background: transparent;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.faq-answer { padding: 0 17px 17px; color: var(--muted); }

.business-contact { margin-top: 15px; }
.business-operator { margin: 12px 0; }
.business-address { margin: 12px 0; font-style: normal; line-height: 1.6; }
.business-contact a, .contact-page a[href^="mailto:"], .premium-business-details a { overflow-wrap: anywhere; }
.premium-business-details { max-width: 760px; margin: 18px auto; text-align: center; }
.legal-copy { font-size: .96rem; overflow-wrap: anywhere; }
.legal-copy h2 { margin-top: 30px; font-family: inherit; font-size: 1.2rem; letter-spacing: 0; }
.legal-copy li + li { margin-top: 6px; }

.story-copy { font-size: .96rem; line-height: 1.75; }
.story-heading { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.story-heading h2 { margin: 0; max-width: 440px; font-size: clamp(1.45rem, 5vw, 2rem); line-height: 1.15; }
.story-leaf { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: var(--forest-700); background: var(--leaf-100); }
.story-copy .story-lead { color: var(--forest-900); font-weight: 700; }
.story-signoff { display: grid; gap: 1px; margin-top: 22px; color: var(--forest-800); }
.story-signoff strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; font-style: italic; }
.story-signoff span { color: var(--muted); font-size: .8rem; }

@media (max-width: 820px) {
  .stock-scan-actions .btn { flex: 1; }
}

.dialog-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16,43,35,.64);
  backdrop-filter: blur(5px);
  animation: dialog-backdrop-in .18s ease-out both;
}

.dialog {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 23px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  transform-origin: center bottom;
  animation: dialog-panel-in .2s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes dialog-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dialog-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.dialog-head h2 { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.stock-deduction-list { margin: 16px 0; padding-left: 26px; }
.stock-deduction-list li + li { margin-top: 7px; }
.stock-deduction-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 18px;
}
.stock-deduction-row strong { white-space: nowrap; text-align: right; }

.toast-region {
  position: fixed;
  z-index: 200;
  top: 18px;
  right: 18px;
  display: grid;
  gap: 9px;
}

.toast {
  width: min(360px, calc(100vw - 36px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--forest-950);
  color: #fff;
  box-shadow: var(--shadow-lg);
  animation: toast-in .22s ease both;
}

@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

.meal-removal-undo {
  width: min(480px, calc(100vw - 36px));
  padding: 10px 12px;
  gap: 8px;
}
.meal-removal-undo > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.meal-removal-undo strong { font-weight: 700; }
.meal-undo-button, .meal-undo-dismiss {
  flex: 0 0 auto;
  min-height: 44px;
  color: #fff;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.meal-undo-button { padding: 8px 14px; border: 1px solid #fff; font-weight: 700; white-space: nowrap; }
.meal-undo-dismiss { width: 44px; display: grid; place-items: center; padding: 8px; border: 0; }
.meal-undo-button:hover, .meal-undo-dismiss:hover { background: rgba(255,255,255,.15); }
.meal-undo-button:focus-visible, .meal-undo-dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.loading-panel { min-height: 300px; display: grid; place-items: center; color: var(--muted); }

.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  border: 4px solid var(--leaf-100);
  border-top-color: var(--forest-700);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.status-message {
  margin: 14px 0;
  padding: 13px 15px;
  border: 1px solid var(--leaf-500);
  border-radius: 14px;
  background: var(--leaf-100);
  color: var(--forest-950);
  font-weight: 750;
}

.status-message.error {
  border-color: #e6a08f;
  background: #fff0ec;
  color: #7b2e22;
}

.membership-status { margin-top: 20px; }
.sandbox-pill { width: fit-content; margin-top: 16px; background: #fff1bf; color: #694800; }

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--muted);
}

.auth-divider span { height: 1px; background: var(--line); }
.auth-divider em { font-style: normal; }
.auth-toggle { margin-top: 17px; text-align: center; }
.danger-panel { border-color: #e8b2a5; }
.code-input { letter-spacing: .12em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }

.saved-ai-open {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.saved-ai-open:hover h3 { color: var(--forest-700); text-decoration: underline; }
.scan-picker { cursor: pointer; }
.scan-photo-wrap { display: grid; gap: 10px; justify-items: center; margin-bottom: 14px; }
.scan-photo { width: 100%; max-height: 300px; object-fit: contain; border-radius: 18px; background: var(--cream); }
.scan-results { display: grid; gap: 9px; margin: 16px 0; }

.scan-result {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 150px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
}

.scan-result > input { width: 20px; height: 20px; accent-color: var(--forest-700); }
.scan-result label strong, .scan-result label span { display: block; }
.scan-result label span { margin-top: 3px; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.scan-amount { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.scan-amount .input { min-height: 44px; padding: 8px 10px; }
.scan-amount span { color: var(--muted); font-weight: 800; }
.loading-inline { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 15px; border-radius: 14px; background: var(--cream); }
.loading-inline .spinner { width: 26px; height: 26px; margin: 0; }

.filter-bar { grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) auto; }
.sort-box { display: block; }
.library-badges { display: flex; flex-wrap: wrap; gap: 5px; align-self: center; }
.mini-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--leaf-100);
  color: var(--forest-800);
  font-size: .68rem;
  font-weight: 850;
}
.mini-tag.ai { background: var(--blue-soft); color: #285464; }
.mini-tag.edited { background: var(--gold-soft); color: #69501b; }
.cook-card-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 2px; }
.cook-card-labels .eyebrow { margin: 0; }
.cook-ai-tag { width: fit-content; }
.filter-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.filter-option-grid .choice-card { min-height: 74px; padding: 12px; }
.filter-option-grid .choice-symbol { width: 36px; height: 36px; border-radius: 11px; font-size: 1rem; }
.library-filter-dialog { width: min(650px, 100%); }
.filter-group { padding: 16px 0 12px; border-top: 1px solid var(--line); }
.filter-group h3 { margin: 0 0 10px; font-size: .92rem; color: var(--forest-800); }
.library-filter-dialog .filter-result-count { margin: 10px 0 18px; padding: 10px 12px; border-radius: 12px; background: var(--leaf-100); color: var(--forest-800); font-weight: 800; }
.library-filter-dialog .filter-result-count.no-matches { background: var(--gold-soft); color: #60450d; }
.library-filter-dialog .dialog-actions { position: sticky; bottom: -24px; z-index: 1; margin: 12px -24px -24px; padding: 13px 24px calc(13px + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--paper); }

.five-breakdown { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.five-breakdown h3 { margin: 0; color: var(--forest-800); font-size: .82rem; }
.five-breakdown summary,
.cook-reference summary,
.cook-order-note summary { color: var(--forest-800); font-weight: 850; cursor: pointer; }
.five-breakdown p { margin: 9px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.equipment-list { margin: 0; padding-left: 19px; color: var(--muted); }
.equipment-list li + li { margin-top: 3px; }
.timing-guide { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.timing-guide p { margin: 4px 0 0; color: var(--muted); font-size: .84rem; }
.swap-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.swap-choice .choice-card { min-height: 76px; padding: 11px; }
.swap-choice .choice-symbol { width: 34px; height: 34px; border-radius: 10px; font-size: .9rem; }
.inline-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0 0; }
.recipe-secondary { gap: 12px; }
.panel.recipe-control-panel { padding: 16px 18px; border-radius: 18px; }
.recipe-control-panel > .eyebrow { margin-bottom: 4px; }
.recipe-control-panel > h2 { margin: 0 0 12px; font-size: 1.14rem; line-height: 1.2; }
.recipe-control-panel .easy-change-list { margin: 10px 0 12px; gap: 7px; }
.recipe-control-panel .easy-change-list li { padding: 8px 10px; }
.recipe-control-panel .easy-change-list span { font-size: .82rem; }
.meal-edit-page { max-width: 1040px; }
.meal-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.meal-edit-grid > .recipe-control-panel { height: 100%; }
.meal-edit-grid > .ingredient-swap-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
.meal-portions-panel { display: grid; align-content: start; }
.meal-portion-current { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; border-radius: 14px; background: var(--leaf-100); }
.meal-portion-current > div { min-width: 0; }
.meal-portion-current strong,
.meal-portion-current small { display: block; }
.meal-portion-current strong { color: var(--forest-900); line-height: 1.35; }
.meal-portion-current small { margin-top: 3px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.meal-portion-current .btn { flex: 0 0 auto; }
.meal-portion-value { margin: 0 0 8px; color: var(--forest-900); font-size: 1.12rem; font-weight: 850; }
.meal-reset-link { width: fit-content; display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; padding: 5px 0; border: 0; background: transparent; color: var(--forest-700); font: inherit; font-size: .82rem; font-weight: 850; cursor: pointer; }
.meal-reset-link:hover { text-decoration: underline; }
.meal-reset-link:focus-visible { outline: 3px solid rgba(47,107,83,.22); outline-offset: 3px; border-radius: 6px; }
.meal-portions-tag { background: var(--gold-soft); color: #654b12; }
.meal-portions-dialog { width: min(650px, 100%); }
.meal-portion-profile { margin: 17px 0 0; padding: 0; border: 0; }
.meal-portion-profile legend { margin-bottom: 9px; color: var(--forest-900); font-weight: 850; }
.meal-portion-profile .choice-card { min-height: 76px; }
.meal-portion-profile .choice-card input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--forest-700); }
.meal-portion-profile .choice-card:has(input:checked) { border-color: var(--forest-700); background: var(--leaf-100); }
.recipe-current-version { margin-bottom: 14px; border-color: #d8cfb5; background: #fffaf0; }
.recipe-current-version h2 { margin: 3px 0 9px; font-size: 1.2rem; }
.recipe-current-version ul { display: grid; gap: 5px; margin: 0 0 10px; padding-left: 20px; color: var(--muted); }
.meal-already-cooked { margin-bottom: 14px; }
.meal-edit-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 16px; background: var(--leaf-100); }
.meal-edit-foot h2 { margin: 3px 0 6px; }
.meal-edit-foot p { margin: 0; }
.meal-edit-foot-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.household-default-note { margin: 18px 0 0; padding: 11px 13px; border-radius: 12px; background: var(--leaf-100); color: var(--forest-800); }
.nutrition-disclosure { margin-top: 12px; border-top: 1px solid var(--line); }
.nutrition-disclosure summary { display: flex; align-items: center; gap: 7px; min-height: 42px; color: var(--forest-800); font-size: .82rem; font-weight: 850; cursor: pointer; list-style: none; }
.nutrition-disclosure summary::-webkit-details-marker { display: none; }
.nutrition-disclosure summary::after { content: "+"; margin-left: auto; font-size: 1.15rem; line-height: 1; }
.nutrition-disclosure[open] summary::after { content: "−"; }
.nutrition-disclosure summary:focus-visible { outline: 3px solid rgba(47,107,83,.22); outline-offset: 2px; border-radius: 8px; }
.nutrition-disclosure-body { padding: 1px 0 4px; border-top: 1px solid var(--line); }
.nutrition-disclosure-body > p { margin: 10px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.inline-setting.compact { padding-top: 2px; }
.inline-setting.compact h2 { margin: 0; font-family: inherit; font-size: 1rem; line-height: 1.35; }
.portions-panel .btn { flex: 0 0 auto; }
.ai-edited-tag { background: #e8e1f6 !important; color: #4d356d !important; }
.ingredient-swap-panel { display: grid; gap: 10px; }
.ingredient-swap-panel > h2 { margin-bottom: 0; }
.ingredient-swap-panel > p { margin: 0; }
.ingredient-swap-panel > .tag { width: fit-content; }
.ingredient-swap-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ingredient-swap-change-list { margin: 9px 0 0; padding-left: 20px; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.ingredient-swap-change-list li + li { margin-top: 5px; }
.ingredient-swap-dialog { width: min(680px, 100%); }
.ingredient-swap-form { gap: 14px; }
.ingredient-swap-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; border: 0; }
.ingredient-swap-scope legend { grid-column: 1 / -1; margin-bottom: 2px; font-weight: 850; }
.ingredient-swap-scope .choice-card { min-height: 76px; padding: 12px; }
.ingredient-swap-scope .choice-card input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--forest-700); }
.ingredient-swap-scope .choice-card:has(input:checked) { border-color: var(--forest-700); background: var(--leaf-100); }
.ingredient-swap-scope .choice-card.disabled { cursor: not-allowed; opacity: .62; }
.ingredient-swap-preview { display: grid; gap: 13px; }
.ingredient-swap-preview > .tag { width: fit-content; }
.ingredient-swap-preview > p { margin: 0; }
.ingredient-swap-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 14px; border-radius: 15px; background: var(--leaf-100); }
.ingredient-swap-route strong:last-child { text-align: right; }
.ingredient-swap-route span { color: var(--forest-700); font-weight: 900; }
.ingredient-swap-alternatives { display: grid; gap: 9px; margin-top: 15px; }
.ingredient-swap-alternatives h3 { margin: 0 0 2px; }
.ingredient-swap-alternatives .choice-card { min-height: 70px; width: 100%; padding: 12px; }
.ingredient-swap-method-preview { margin-top: 4px; border-top: 1px solid var(--line); }
.ingredient-swap-method-preview > summary { padding: 14px 0 4px; color: var(--forest-800); font-weight: 850; cursor: pointer; }
.ingredient-swap-method-preview > div { padding-top: 10px; }
.ingredient-swap-method-preview .step-card { margin-top: 9px; padding: 13px; }
.ingredient-swap-method-preview .step-card > h3 { min-height: 0; margin: 0 0 8px; font-size: 1rem; }
.ingredient-swap-method-preview .step-card::before { display: none; }
.rating-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rating-row .selected { border-color: var(--forest-700); background: var(--leaf-100); }

.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dialog:has(.recipe-editor) { width: min(850px, 100%); }
.recipe-editor { gap: 14px; }
.recipe-editor .editor-tall { min-height: 165px; }
.recipe-editor .editor-steps { min-height: 230px; }

.history-list { display: grid; gap: 1px; }
.history-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
}
.history-row:last-child { border-bottom: 0; }
.history-row div { min-width: 0; }
.history-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.history-feedback { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; white-space: nowrap; }
.history-heart { color: #b13d56; }
.history-row strong,
.history-row small { display: block; }
.history-row small { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.recipe-management-panel { margin-top: 15px; }
.recipe-management-count { margin: 9px 0 4px; }
.recipe-management-list { display: grid; }
.recipe-management-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.recipe-management-row:last-child { border-bottom: 0; }
.recipe-management-name { min-width: 0; }
.recipe-management-name strong,
.recipe-management-name small { display: block; }
.recipe-management-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-management-name small { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.recipe-management-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.recipe-management-more { margin-top: 14px; text-align: center; }
.week-row { width: 100%; cursor: pointer; }
.week-row > span { display: flex; align-items: center; gap: 6px; color: var(--forest-700); font-size: .8rem; font-weight: 850; }
.pack-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0; }
.pack-summary div { padding: 12px; border-radius: 13px; background: var(--cream); }
.pack-summary span,
.pack-summary strong { display: block; }
.pack-summary span { color: var(--muted); font-size: .72rem; }
.pack-summary strong { margin-top: 3px; color: var(--forest-900); }

.week-advance-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
  padding: 11px 13px;
  border: 1px solid #d6c27d;
  border-radius: 15px;
  background: var(--gold-soft);
}
.week-advance-banner strong,
.week-advance-banner span { display: block; }
.week-advance-banner span { color: #69501b; font-size: .8rem; }
.week-advance-banner > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.cook-order-note { margin: -7px 0 13px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.cook-order-note p { margin: 7px 0 0; color: var(--muted); font-size: .82rem; }
.cook-priority { margin-top: 6px !important; color: var(--forest-700) !important; font-size: .78rem; font-weight: 750; }
.cook-priority .icon { vertical-align: -4px; }
.cook-reference { margin-top: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.cook-reference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 11px; }
.cook-reference-grid h3 { margin: 0 0 6px; font-family: inherit; font-size: .86rem; }
.cook-reference-grid ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .8rem; }
.cook-reference-grid p { margin: 0; color: var(--muted); font-size: .8rem; }
.cook-all-ingredients { padding: 0 !important; list-style: none; }
.cook-all-ingredients li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.cook-all-ingredients strong { text-align: right; }

@media (max-width: 1020px) {
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shopping-layout { grid-template-columns: minmax(0, 1fr); }
  .sticky-panel { position: static; }
  .stock-grid { grid-template-columns: 1fr; }
  .ai-builder-head { grid-template-columns: 1fr; }
  .ai-type-actions { justify-content: flex-start; }
}

@media (max-width: 820px) {
  body { padding-bottom: calc(72px + var(--safe-bottom)); }
  .side-nav { display: none; }
  .desktop-account-btn { display: none; }
  .mobile-header { display: flex; }
  .mobile-nav { display: block; }
  .app-main { margin-left: 0; padding: 22px 16px 42px; }
  .page-head { align-items: center; margin-bottom: 19px; }
  .page-head h1 { font-size: 2.15rem; }
  .page-head .eyebrow { display: none; }
  .selected-dock {
    left: 12px;
    right: 12px;
    bottom: calc(76px + var(--safe-bottom));
    width: auto;
    transform: none;
  }
  .setup-shell { grid-template-columns: 1fr; }
  .setup-art { display: none; }
  .setup-main { padding-top: 20px; }
  .setup-header { margin-bottom: 48px; }
  .welcome-grid { grid-template-columns: 1fr; padding-top: 24px; }
  .welcome-copy { max-width: none; }
  .welcome-visual { min-height: 520px; }
  .hero-photo { left: 5%; width: 95%; }
  .recipe-hero { grid-template-columns: 1fr; }
  .recipe-photo,
  .recipe-photo-fallback { min-height: 360px; }
  .recipe-layout { grid-template-columns: 1fr; }
  .cook-card { grid-template-columns: 120px minmax(0, 1fr); }
  .cook-card-labels > .eyebrow { padding-right: 32px; }
  .cook-card img,
  .cook-card .quick-thumb { width: 120px; height: 125px; }
  .cook-card-actions { grid-column: 1 / -1; padding: 0 14px 14px; }
  .cook-card-actions .btn { width: 100%; }
  .cook-card-secondary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cook-card-secondary-actions .btn { min-width: 0; min-height: 48px; padding: 10px 8px; font-size: .94rem; white-space: normal; }
  .meal-edit-grid { grid-template-columns: 1fr; }
  .meal-edit-grid > .ingredient-swap-panel:last-child:nth-child(odd) { grid-column: auto; }
  .meal-edit-foot { align-items: stretch; flex-direction: column; }
  .meal-edit-foot-actions { justify-content: stretch; }
  .meal-edit-foot-actions .btn { flex: 1; }
  .pricing-intro { grid-template-columns: 1fr; }
  .floating-back { top: 78px; }
}

@media (max-width: 620px) {
  .welcome-top { padding: 15px 17px; }
  .welcome-top .brand-note { display: none; }
  .welcome-top .btn { min-height: 42px; padding: 8px 12px; }
  .welcome-grid { min-height: auto; padding: 38px 17px 42px; }
  .welcome-copy h1 { font-size: clamp(2.65rem, 14vw, 4rem); }
  .welcome-actions { display: grid; }
  .welcome-actions .btn { width: 100%; }
  .trust-line { display: grid; gap: 8px; }
  .welcome-visual { min-height: 430px; margin-top: 8px; }
  .welcome-footer { align-items: flex-start; flex-direction: column; padding-inline: 17px; }
  .welcome-footer nav { justify-content: flex-start; }
  .hero-photo { inset: 0; width: 100%; border-radius: 28px 8px 28px 28px; }
  .week-ticket { left: 12px; bottom: 15px; width: calc(100% - 24px); }
  .saving-bubble { right: 8px; top: -15px; }
  .setup-main { padding-inline: 18px; }
  .setup-content { margin-top: 0; }
  .setup-content h1 { font-size: 2.35rem; }
  .setup-options.two,
  .setup-options.three,
  .counter-grid { grid-template-columns: 1fr; }
  .counter-card { display: flex; align-items: center; justify-content: space-between; text-align: left; }
  .counter-card strong { margin: 0; }
  .portion-size-heading { align-items: flex-start; }
  .portion-size-actions { margin-top: -4px; }
  .portion-size-toggle { gap: 6px; padding-inline: 3px; }
  .portion-size-toggle strong { font-size: .84rem; }
  .setup-actions { align-items: stretch; }
  .setup-actions .btn-primary { flex: 1; }
  .brand-name { font-size: .92rem; }
  .mobile-header .brand img { width: 36px; height: 36px; }
  .page-head { align-items: flex-start; }
  .page-head p { font-size: .9rem; }
  .page-actions .btn span.label { display: none; }
  .week-banner { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .week-navigation { grid-template-columns: 44px minmax(0, 1fr) 44px; margin-bottom: 14px; padding: 5px; }
  .week-arrow { min-height: 50px; }
  .week-current { padding-inline: 7px; }
  .week-current small { font-size: .7rem; }
  .week-progress { min-width: 0; }
  .mode-row { align-items: stretch; flex-direction: column; }
  .mode-row .segmented { display: grid; grid-template-columns: 1fr 1fr; }
  .mode-actions { width: 100%; }
  .section-head { align-items: flex-start; }
  .section-head .btn { padding: 8px 9px; }
  .recommend-actions { justify-items: stretch; text-align: right; }
  .recommend-section-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .recommend-section-head .recommend-actions { display: grid; justify-items: stretch; gap: 7px; width: 100%; text-align: left; }
  .recommend-section-head .recommend-button-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; width: 100%; }
  .recommend-section-head .recommend-button-row .btn { justify-content: center; width: 100%; padding-inline: 8px; font-size: .78rem; white-space: nowrap; }
  .recommend-section-head .recommend-actions small { margin-left: 0; text-align: left; }
  .plan-filter-section { margin-inline: 0; padding: 14px; border-radius: 18px; }
  .plan-filter-chips { overflow-x: auto; flex-wrap: nowrap; margin-inline: -14px; padding: 0 14px 5px; scrollbar-width: none; }
  .plan-filter-chips::-webkit-scrollbar { display: none; }
  .featured-grid { grid-template-columns: 1fr; }
  .meal-image-wrap { aspect-ratio: 16 / 10; }
  .quick-card { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; }
  .quick-thumb { width: 58px; height: 58px; }
  .quick-actions .btn .label { display: none; }
  .selected-dock { padding-left: 14px; }
  .selected-dock small { display: none; }
  .summary-grid { grid-template-columns: 1fr; }
  .plan-insight-grid { grid-template-columns: 1fr; }
  .shopping-group-head { padding: 12px 14px; }
  .shopping-items { padding: 2px 12px; }
  .shop-item {
    grid-template-columns: 24px minmax(0, 1fr) 34px;
    grid-template-areas:
      "check name star"
      "check quantity star"
      ". actions actions";
    column-gap: 8px;
    row-gap: 3px;
    padding: 9px 0;
  }
  .cupboard-check-item {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
      "check name"
      "check quantity";
  }
  .shop-qty { text-align: left; }
  .shop-row-actions { margin-top: 3px; }
  .ai-type-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ai-type-actions .btn { width: 100%; }
  .filter-bar { top: 76px; grid-template-columns: 1fr auto; padding: 8px; }
  .filter-bar .btn .label { display: none; }
  .recipe-photo,
  .recipe-photo-fallback { min-height: 290px; }
  .recipe-intro { padding: 25px 20px 28px; }
  .recipe-intro h1 { font-size: 2.35rem; }
  .recipe-layout { gap: 14px; }
  .panel { padding: 18px; border-radius: 18px; }
  .step-card { padding: 14px; }
  .step-card::before { top: 14px; left: 14px; }
  .step-card > h3 {
    min-height: 34px;
    display: flex;
    align-items: center;
    margin: 0 0 10px 46px;
  }
  .step-card > .step-amounts { margin-top: 8px; }
  .cook-top { padding: 6px 8px; }
  .cook-top .btn .label { display: none; }
  .cook-stage { width: calc(100% - 20px); padding-top: 13px; }
  .cook-step h1 { font-size: 1.8rem; }
  .cook-instruction { font-size: .92rem; }
  .cook-bottom .btn { min-height: 42px; padding: 8px 13px; }
  .timer-bar { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 7px; }
  .timer-bar .timer-clear { grid-column: 2 / -1; justify-self: end; }
  .cook-timer-tools > div { display: grid; }
  .stock-hero { grid-template-columns: 1fr; padding: 22px; }
  .stock-actions { display: grid; }
  .stock-actions .btn { width: 100%; }
  .scan-result { grid-template-columns: 24px minmax(0, 1fr); }
  .scan-amount { grid-column: 2; }
  .price-grid,
  .help-grid { grid-template-columns: 1fr; }
  .compare-wrap { overflow-x: auto; }
  .compare-table { min-width: 540px; }
  .dialog-backdrop { align-items: end; padding: 0; }
  .dialog { width: 100%; max-height: 88vh; border-radius: 24px 24px 0 0; padding-bottom: calc(24px + var(--safe-bottom)); }
  .toast-region { top: 10px; right: 10px; }
}

@media (max-height: 740px) {
  .cook-top { padding-block: 5px; }
  .cook-stage { padding-top: 10px; padding-bottom: 78px; }
  .cook-step h1 { font-size: clamp(1.45rem, 4vw, 2.15rem); }
  .cook-amounts { margin-top: 8px; padding-block: 8px; }
  .cook-step-items { gap: 6px; margin-block: 9px; }
  .cook-instruction { padding-block: 8px; font-size: .9rem; }
  .cook-timer-region { margin-top: 7px; }
  .cook-bottom { padding-block: 6px; }
}

/* Cook mode owns one stable scrolling region. Timer repainting therefore cannot
   move the document scroll position, and the top/bottom controls never consume
   more kitchen-screen space than necessary. */
.cook-mode {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.cook-top { position: relative; padding-block: 6px; }
.cook-top .btn,
.cook-top .icon-btn { min-height: 38px; height: 38px; }
.cook-stage {
  width: min(760px, calc(100% - 24px));
  height: auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  margin: 0 auto;
  padding: 12px 0 14px;
}
.cook-bottom { position: relative; inset: auto; padding-block: 6px; }
.cook-step h1 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
.cook-step-items { gap: 6px; margin: 9px 0; }
.cook-instruction { padding: 8px 10px; }
.cook-amounts { margin: 8px 0 3px; padding: 8px 10px; }
.cook-step > .tip-box { margin-top: 8px; padding: 9px 11px; }
.cook-timer-region { margin-top: 7px; overflow-anchor: none; }

@media (max-width: 620px) {
  .filter-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .sort-box { grid-column: 1 / -1; grid-row: 2; }
  .filter-option-grid,
  .two-fields,
  .three-fields,
  .pack-summary,
  .cook-reference-grid { grid-template-columns: 1fr; }
  .filter-option-grid .choice-card { min-height: 66px; }
  .library-filter-dialog .dialog-actions { margin: 12px -24px calc(-24px - var(--safe-bottom)); padding-bottom: calc(13px + var(--safe-bottom)); }
  .library-badges { display: none; }
  .recipe-management-row { grid-template-columns: 1fr; gap: 8px; }
  .recipe-management-actions { justify-content: flex-start; }
  .week-advance-banner { align-items: flex-start; flex-direction: column; }
  .week-advance-banner > div:last-child { width: 100%; }
  .week-advance-banner .btn { flex: 1; }
  .cook-stage { width: calc(100% - 18px); padding-top: 9px; padding-bottom: 9px; }
  .cook-bottom .btn { flex: 1; }
  .ai-source-grid,
  .ai-focus-list,
  .ai-preference-grid { grid-template-columns: 1fr; }
  .ingredient-swap-scope { grid-template-columns: 1fr; }
  .ingredient-swap-route { grid-template-columns: 1fr; gap: 5px; }
  .ingredient-swap-route strong:last-child { text-align: left; }
  .ingredient-swap-route span { transform: rotate(90deg); width: fit-content; }
  .ingredient-swap-actions .btn { width: 100%; }
  .meal-portion-current { align-items: stretch; flex-direction: column; }
  .meal-portion-current .btn { width: 100%; }
  .meal-portion-profile .swap-choice { grid-template-columns: 1fr; }
  .meal-edit-foot-actions { display: grid; }
  .meal-edit-foot-actions .btn { width: 100%; }
  .ai-source-card { grid-template-columns: 42px minmax(0, 1fr) 20px; padding: 13px; }
  .ai-source-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .ai-allowance > div { align-items: flex-start; flex-direction: column; }
  .dialog.ai-flow-dialog { max-height: 92vh; padding-bottom: 0; }
  .ai-flow-dialog > .dialog-head { padding: 15px 18px 13px; }
  .ai-flow-dialog > div { padding: 14px 16px 18px; }
  .ai-flow-dialog > .dialog-actions { padding: 10px 16px calc(10px + var(--safe-bottom)); }
  .ai-flow-dialog > .dialog-actions .btn { flex: 1; }
  .ai-dialog-section { padding: 13px; }
  .ai-added-amount { grid-template-columns: minmax(0, 2fr) minmax(92px, 1fr); }
  .ai-type-grid { grid-template-columns: 1fr 1fr; }
  .button-row .btn { flex: 1 1 150px; }
  .saved-ai-card { grid-template-columns: 1fr; }
  .saved-ai-actions { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .side-nav,
  .mobile-header,
  .mobile-nav,
  .page-actions,
  .back-row,
  .recipe-hero-actions { display: none !important; }
  body { background: #fff; padding: 0; }
  .app-main { margin: 0; padding: 0; }
  .recipe-hero { color: #000; background: #fff; box-shadow: none; }
  .recipe-photo { max-height: 280px; min-height: 0; }
  .recipe-layout { display: block; }
  .panel { break-inside: avoid; margin: 12px 0; box-shadow: none; }
}
/* Reliability and mobile refinements, keeping the existing visual language. */
.boot-shell { max-width: 620px; margin: 12vh auto; padding: 24px; text-align: center; }
.boot-shell img { border-radius: 18px; margin-bottom: 16px; }
.save-status, .update-status { position: relative; z-index: 100; max-width: 760px; margin: 12px auto; padding: 14px 18px; border: 2px solid var(--forest-700); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-sm); }
.save-status { position: fixed; inset: auto 12px calc(var(--mobile-nav-height, 0px) + 12px); max-height: 40vh; overflow: auto; border-color: #a95636; }
.save-status[hidden], .update-status[hidden] { display: none; }
.save-status p, .update-status p { margin: 0 0 8px; }
.save-status .btn, .update-status .btn { margin: 3px; }
.global-timers { margin-bottom: 18px; padding: 12px 16px; }
.global-timers summary, .recipe-preparation summary { cursor: pointer; font-weight: 850; min-height: 44px; align-content: center; }
.global-timers .timer-bar { margin-top: 8px; }
.global-timers .fine-print { margin: 10px 0 0; }
.timer-bar { flex-wrap: wrap; gap: 8px; }
.timer-bar > div { min-width: 0; }
.timer-bar strong { overflow-wrap: anywhere; }
.portion-summary { margin: 0; color: var(--muted); }
.recipe-essentials { grid-column: 2; grid-row: 1; }
.recipe-secondary { grid-column: 1; grid-row: 1; }
.recipe-preparation { padding-block: 8px; }
.meal-image-wrap.without-photo { aspect-ratio: auto; height: 150px; }
.meal-image-wrap.without-photo .recipe-photo-fallback { min-height: 0; font-size: 3rem; }
.recipe-photo.without-photo, .recipe-photo.without-photo .recipe-photo-fallback { min-height: 160px; }
.shop-row-actions .btn { min-height: 44px; font-size: .8rem; padding: 7px 11px; line-height: 1.2; }
.shop-star { width: 44px; height: 44px; }
.shop-name { min-height: 44px; }
.shop-item { grid-template-columns: 28px minmax(0, 1fr) auto 44px; }
.stock-reservation { color: var(--muted); }
.cook-top .btn, .cook-top .icon-btn { min-height: 44px; height: auto; }
.mode-actions, .recommend-actions { flex-wrap: wrap; gap: 10px; }
@media (max-width: 820px) {
  body { padding-bottom: var(--mobile-nav-height, calc(72px + var(--safe-bottom))); }
  .app-main { padding-bottom: calc(var(--plan-dock-height, 0px) + 32px); }
  .selected-dock { bottom: calc(var(--mobile-nav-height, calc(72px + var(--safe-bottom))) + 8px); flex-wrap: wrap; gap: 10px; }
  .recipe-essentials, .recipe-secondary { grid-column: 1; grid-row: auto; }
  .recipe-photo.without-photo, .recipe-photo.without-photo .recipe-photo-fallback { min-height: 110px; height: 110px; font-size: 3rem; }
  .meal-image-wrap.without-photo { height: 120px; }
  .shop-item { grid-template-columns: 24px minmax(0, 1fr) 44px; }
  .filter-bar { top: var(--mobile-header-height, 76px); }
  .page-actions .btn span.label, .quick-actions .btn .label, .filter-bar .btn .label { display: inline; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .update-status { margin: 12px; }
}


/* Owner-only development recipe print tools. These styles do not alter the
   normal recipe, Cook, Plan or Settings layouts. */
.owner-settings-section .settings-icon { background: #efe7cf; }
.owner-print-fields { display: grid; grid-template-columns: minmax(130px, 180px) minmax(130px, 180px) minmax(190px, 1fr); gap: 14px; align-items: end; margin: 18px 0; }
.owner-print-photo-toggle { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); font-weight: 800; }
.owner-print-photo-toggle input { width: 19px; height: 19px; accent-color: var(--forest-700); }
.owner-print-preview-wrap { margin-top: 22px; }
.owner-print-preview-head { margin-bottom: 14px; }
.owner-print-preview { display: grid; gap: 24px; }
.owner-print-card { overflow: hidden; background: #fff; color: var(--ink); border: 0; border-radius: 20px; padding: 0 24px; box-shadow: 0 15px 38px rgba(16,43,35,.11); }
.owner-print-brand { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 -24px; padding: 13px 24px; color: #fff; background: var(--forest-900); }
.owner-print-brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.owner-print-brand-lockup img { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; }
.owner-print-brand-lockup div { display: grid; line-height: 1.08; }
.owner-print-brand-lockup strong { font-size: .98rem; letter-spacing: -.015em; }
.owner-print-brand-lockup span { margin-top: 4px; color: #dcebb7; font-size: .68rem; font-weight: 700; letter-spacing: .045em; }
.owner-print-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 22px 0 19px; border-bottom: 2px solid var(--leaf-100); }
.owner-print-card-head h2 { margin: 3px 0 6px; color: var(--forest-950); font-size: 1.72rem; line-height: 1.08; }
.owner-print-card-head p { max-width: 580px; margin: 0; color: #5b665f; }
.owner-print-kicker { display: block; color: var(--forest-700); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.owner-print-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; color: var(--forest-900); font-size: .78rem; font-weight: 800; }
.owner-print-meta > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: var(--leaf-100); }
.owner-print-meta .icon { width: 15px; height: 15px; }
.owner-print-photo { width: 188px; height: 132px; object-fit: cover; border: 1px solid #d2dbd4; border-radius: 14px; box-shadow: 0 6px 18px rgba(16,43,35,.1); }
.owner-print-photo-empty { display: grid; place-content: center; justify-items: center; gap: 5px; background: var(--leaf-100); color: var(--forest-700); font-size: .7rem; font-weight: 800; }
.owner-print-body { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.5fr); gap: 25px; padding: 20px 0 18px; }
.owner-print-sidebar { align-self: start; padding: 16px; border: 1px solid #dce6dc; border-radius: 15px; background: linear-gradient(180deg, #f5f8ef, #fffdf9); }
.owner-print-body h3 { margin: 14px 0 8px; color: var(--forest-800); font-size: .88rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.owner-print-body h3:first-child { margin-top: 0; }
.owner-print-ingredients { width: 100%; border-collapse: collapse; font-size: .88rem; }
.owner-print-ingredients td { padding: 5px 3px; border-bottom: 1px solid #dfe7df; vertical-align: top; }
.owner-print-ingredients td:last-child { text-align: right; white-space: nowrap; font-weight: 800; padding-left: 12px; }
.owner-print-compact-list { margin: 0; padding-left: 18px; font-size: .87rem; }
.owner-print-method { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.owner-print-step { break-inside: avoid; }
.owner-print-step h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--forest-950); font-size: .96rem; }
.owner-print-step-number { display: inline-grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; color: #fff; background: var(--forest-700); font-size: .75rem; }
.owner-print-step ul { margin: 0; padding-left: 33px; }
.owner-print-step li { margin: 0 0 4px; }
.owner-print-callout { margin: 8px 0 0 33px; padding: 8px 10px; color: #34473d; background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; font-size: .82rem; }
.owner-print-footer { display: flex; justify-content: space-between; gap: 16px; margin: 0 -24px; padding: 10px 24px; border-top: 1px solid #dbe3dc; color: #617068; background: var(--cream); font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.owner-print-footer span:last-child { text-align: right; text-transform: none; white-space: nowrap; }
#week-recipe-print-preview[hidden] { display: none !important; }

@media (max-width: 760px) {
  .owner-print-fields, .owner-print-body { grid-template-columns: 1fr; }
  .owner-print-photo { width: 100%; max-height: 220px; }
  .owner-print-brand-lockup span { display: none; }
}

@media print {
  /* A small safety margin gives ordinary printers room for their unprintable
     edge while recovering 14 mm of page height compared with the old cards. */
  @page { size: A4; margin: 4mm; }
  body.owner-print-active { background: #fff !important; color: #000 !important; padding: 0 !important; }
  body.owner-print-active .app-sidebar,
  body.owner-print-active .desktop-account-btn,
  body.owner-print-active .mobile-header,
  body.owner-print-active .mobile-nav,
  body.owner-print-active .global-timers,
  body.owner-print-active .save-status,
  body.owner-print-active .update-status,
  body.owner-print-active .back-row,
  body.owner-print-active .page-head,
  body.owner-print-active .owner-print-controls,
  body.owner-print-active .owner-print-preview-head { display: none !important; }
  body.owner-print-active .cook-page > :not(#week-recipe-print-preview) { display: none !important; }
  body.owner-print-active .app-shell { display: block !important; min-height: 0 !important; }
  body.owner-print-active .app-main { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
  body.owner-print-active .page,
  body.owner-print-active .page.narrow,
  body.owner-print-active .owner-print-preview-wrap { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  body.owner-print-active #owner-recipe-print-preview { display: block !important; }
  body.owner-print-active #week-recipe-print-preview[hidden] { display: block !important; }
  body.owner-print-active .owner-print-card { display: flex; flex-direction: column; box-sizing: border-box; min-height: 288mm; break-inside: avoid-page; page-break-inside: avoid; break-after: page; page-break-after: always; overflow: visible; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0 4mm; color: #17201c; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.owner-print-active .owner-print-card:last-child { break-after: auto; page-break-after: auto; }
  body.owner-print-active .owner-print-brand { margin: 0 -4mm; padding: 2.5mm 4mm; background: #173f32 !important; }
  body.owner-print-active .owner-print-brand-lockup img { width: 10mm; height: 10mm; border-radius: 2.5mm; }
  body.owner-print-active .owner-print-brand-lockup strong { color: #fff !important; font-size: 10pt; }
  body.owner-print-active .owner-print-brand-lockup span { color: #dcebb7 !important; font-size: 6.5pt; }
  body.owner-print-active .owner-print-card-head { gap: 4mm; padding: 4mm 0 2.5mm; border-color: #e6efdc; }
  body.owner-print-active .owner-print-card-head h2 { color: #102b23 !important; font-size: 17pt; }
  body.owner-print-active .owner-print-card-head p { color: #4f5f56 !important; }
  body.owner-print-active .owner-print-kicker { color: #2f6b53 !important; }
  body.owner-print-active .owner-print-meta { color: #173f32 !important; }
  body.owner-print-active .owner-print-meta > span { background: #e6efdc !important; }
  body.owner-print-active .owner-print-photo { width: 44mm; max-height: 34mm; border-radius: 2mm; }
  body.owner-print-active .owner-print-body { flex: 1 0 auto; grid-template-columns: 30% 1fr; gap: 3.5mm; padding: 2.5mm 0 3mm; }
  body.owner-print-active .owner-print-sidebar { padding: 3.5mm; border-color: #dce6dc; border-radius: 2.5mm; background: #f5f8ef !important; }
  body.owner-print-active .owner-print-body h3 { color: #215442 !important; font-size: 9pt; margin: 3mm 0 1.5mm; }
  body.owner-print-active .owner-print-ingredients,
  body.owner-print-active .owner-print-compact-list,
  body.owner-print-active .owner-print-body p,
  body.owner-print-active .owner-print-step { font-size: 8.5pt; line-height: 1.28; }
  body.owner-print-active .owner-print-step { font-size: 8.7pt; }
  body.owner-print-active .owner-print-step h4 { color: #102b23 !important; font-size: 9pt; }
  body.owner-print-active .owner-print-step-number { width: 6mm; height: 6mm; flex-basis: 6mm; color: #fff !important; background: #2f6b53 !important; font-size: 7pt; }
  body.owner-print-active .owner-print-step ul { padding-left: 8mm; }
  body.owner-print-active .owner-print-method { gap: 2.2mm; }
  body.owner-print-active .owner-print-callout { margin-left: 8mm; color: #34473d !important; background: #f4e8c6 !important; border: 0; border-left: 2.5px solid #d8a842; padding: 1.5mm 2mm; font-size: 8pt; }
  body.owner-print-active .owner-print-ingredients td { border-color: #d3ddd4; padding: 1mm .5mm; }
  body.owner-print-active .owner-print-footer { margin: auto -4mm 0; padding: 2mm 4mm; color: #52645a !important; background: #f7f4ec !important; }

  /* Only content-heavy recipes tighten. Ordinary cards keep the full branded
     spacing above, while these two levels prevent long methods crossing A4. */
  body.owner-print-active .owner-print-card--compact .owner-print-brand { padding-top: 2.4mm; padding-bottom: 2.4mm; }
  body.owner-print-active .owner-print-card--compact .owner-print-brand-lockup img { width: 8.5mm; height: 8.5mm; }
  body.owner-print-active .owner-print-card--compact .owner-print-card-head { padding-top: 3.7mm; padding-bottom: 3mm; }
  body.owner-print-active .owner-print-card--compact .owner-print-card-head h2 { font-size: 16pt; }
  body.owner-print-active .owner-print-card--compact .owner-print-photo { width: 40mm; max-height: 30mm; }
  body.owner-print-active .owner-print-card--compact .owner-print-body { gap: 3.5mm; padding: 2.5mm 0 3mm; }
  body.owner-print-active .owner-print-card--compact .owner-print-sidebar { padding: 3mm; }
  body.owner-print-active .owner-print-card--compact .owner-print-ingredients,
  body.owner-print-active .owner-print-card--compact .owner-print-compact-list,
  body.owner-print-active .owner-print-card--compact .owner-print-body p,
  body.owner-print-active .owner-print-card--compact .owner-print-step { font-size: 8pt; line-height: 1.22; }
  body.owner-print-active .owner-print-card--compact .owner-print-step { font-size: 8.2pt; }
  body.owner-print-active .owner-print-card--compact .owner-print-step h4 { font-size: 8.5pt; }
  body.owner-print-active .owner-print-card--compact .owner-print-step-number { width: 5.4mm; height: 5.4mm; flex-basis: 5.4mm; }
  body.owner-print-active .owner-print-card--compact .owner-print-step ul { padding-left: 7mm; }
  body.owner-print-active .owner-print-card--compact .owner-print-method { gap: 1.8mm; }
  body.owner-print-active .owner-print-card--compact .owner-print-callout { margin-left: 7mm; font-size: 7.5pt; }
  body.owner-print-active .owner-print-card--compact .owner-print-footer { padding-top: 2mm; padding-bottom: 2mm; }

  body.owner-print-active .owner-print-card--dense .owner-print-brand { padding-top: 2mm; padding-bottom: 2mm; }
  body.owner-print-active .owner-print-card--dense .owner-print-brand-lockup img { width: 8mm; height: 8mm; }
  body.owner-print-active .owner-print-card--dense .owner-print-brand-lockup span { font-size: 6pt; }
  body.owner-print-active .owner-print-card--dense .owner-print-card-head { padding-top: 3mm; padding-bottom: 2.5mm; }
  body.owner-print-active .owner-print-card--dense .owner-print-card-head h2 { font-size: 15pt; }
  body.owner-print-active .owner-print-card--dense .owner-print-card-head p { font-size: 8pt; line-height: 1.2; }
  body.owner-print-active .owner-print-card--dense .owner-print-meta { margin-top: 2mm; }
  body.owner-print-active .owner-print-card--dense .owner-print-meta > span { padding: 1mm 2mm; }
  body.owner-print-active .owner-print-card--dense .owner-print-photo { width: 33mm; max-height: 24mm; }
  body.owner-print-active .owner-print-card--dense .owner-print-body { grid-template-columns: 28% 1fr; gap: 3mm; padding: 2mm 0; }
  body.owner-print-active .owner-print-card--dense .owner-print-sidebar { padding: 2.5mm; }
  body.owner-print-active .owner-print-card--dense .owner-print-body h3 { margin-top: 2mm; font-size: 8.2pt; }
  body.owner-print-active .owner-print-card--dense .owner-print-ingredients,
  body.owner-print-active .owner-print-card--dense .owner-print-compact-list,
  body.owner-print-active .owner-print-card--dense .owner-print-body p,
  body.owner-print-active .owner-print-card--dense .owner-print-step { font-size: 7.7pt; line-height: 1.15; }
  body.owner-print-active .owner-print-card--dense .owner-print-step h4 { margin-bottom: .6mm; font-size: 8pt; }
  body.owner-print-active .owner-print-card--dense .owner-print-step li { margin-bottom: .5mm; }
  body.owner-print-active .owner-print-card--dense .owner-print-step-number { width: 5mm; height: 5mm; flex-basis: 5mm; font-size: 6.5pt; }
  body.owner-print-active .owner-print-card--dense .owner-print-step ul { padding-left: 6.5mm; }
  body.owner-print-active .owner-print-card--dense .owner-print-method { gap: 1.2mm; }
  body.owner-print-active .owner-print-card--dense .owner-print-callout { margin-top: 1mm; margin-left: 6.5mm; padding: 1mm 1.5mm; font-size: 7pt; }
  body.owner-print-active .owner-print-card--dense .owner-print-footer { padding-top: 1.7mm; padding-bottom: 1.7mm; }

  body.owner-print-active .owner-print-card--extra-dense .owner-print-brand { padding-top: 1.6mm; padding-bottom: 1.6mm; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-card-head { padding-top: 2.4mm; padding-bottom: 2mm; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-card-head h2 { font-size: 14pt; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-photo { width: 30mm; max-height: 21mm; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-body { gap: 2.5mm; padding: 1.5mm 0; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-ingredients,
  body.owner-print-active .owner-print-card--extra-dense .owner-print-compact-list,
  body.owner-print-active .owner-print-card--extra-dense .owner-print-body p,
  body.owner-print-active .owner-print-card--extra-dense .owner-print-step { font-size: 7.4pt; line-height: 1.1; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-step h4 { margin-bottom: .4mm; font-size: 7.8pt; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-step li { margin-bottom: .35mm; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-step-number { width: 4.8mm; height: 4.8mm; flex-basis: 4.8mm; font-size: 6pt; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-step ul { padding-left: 6mm; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-method { gap: 1mm; }
  body.owner-print-active .owner-print-card--extra-dense .owner-print-callout { margin-top: .7mm; margin-left: 6mm; padding: .8mm 1.3mm; font-size: 6.8pt; }
}

/* v35.4.38: first-step preparation and clearly separated Cook reference notes. */
.cook-before-start {
  margin: 3px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest-700);
  border-radius: 12px;
  background: var(--leaf-100);
  overflow-wrap: anywhere;
}
.cook-before-start h2 {
  margin: 0 0 5px;
  font-family: inherit;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--forest-950);
}
.cook-before-start p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--forest-800); }
.cook-reference-notes { display: grid; align-content: start; gap: 15px; min-width: 0; }
.cook-reference-section { min-width: 0; overflow-wrap: anywhere; }
.cook-reference-section + .cook-reference-section { padding-top: 12px; border-top: 1px solid var(--line); }
.cook-reference-grid > section { min-width: 0; }
.cook-reference .cook-reference-section p { line-height: 1.5; }

/* Cooking records remain separate from the main recipe actions. */
.planned-cooking-controls { position:relative; z-index:2; margin-top:12px; padding-top:10px; border-top:1px solid #e0e7dc; }
.planned-cooking-controls small { display:block; color:#56634e; font-size:.78rem; }
.planned-cooking-controls > div { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:4px; }
.planned-cooking-controls .btn { min-height:44px; white-space:normal; }
.meal-status-recipe { margin: 0 0 12px; font-weight: 700; }
.meal-status-dialog .planned-cooking-controls { margin: 0; padding: 0; border: 0; }
.meal-status-dialog .planned-cooking-controls > div { display: grid; gap: 8px; margin-top: 12px; }
.meal-status-dialog .planned-cooking-controls .btn { justify-content: flex-start; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); background: var(--paper); }
.cooking-history-notice { background:#eef4e6; border-color:#c7d8b5; }
.cooking-history-notice span { color:#56634e; }
.cooking-review-list { list-style:none; padding:0; margin:0; }
.cooking-review-list li { padding:14px 0; border-bottom:1px solid #e0e7dc; }
.cooking-review-list li:last-child { border-bottom:0; }
.cooking-review-list small { display:block; color:#56634e; margin:4px 0 8px; }
.cooking-review-list li > div { display:flex; flex-wrap:wrap; gap:7px; }