:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#293e35;background:#f7f8f4;font-synthesis:none;--green:#2e5d45;--muted:#68786e;--border:#dfe5dc}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #94b39b;outline-offset:3px}h1,h2,h3,p{margin-top:0}h1{font-family:Georgia,"Times New Roman",serif;font-size:48px;line-height:1.12;font-weight:400;letter-spacing:-1.4px;margin-bottom:17px}h2{font-size:22px;line-height:1.35;letter-spacing:-.45px;font-weight:550}h3{font-size:16px}p{line-height:1.65}input,select,textarea{width:100%;min-width:0;border:1px solid #d8e0d6;border-radius:8px;padding:12px 13px;background:#fff;color:#293e35}input::placeholder,textarea::placeholder{color:#859087}textarea{resize:vertical}label{display:block;font-size:13px;font-weight:550;margin-bottom:8px}label input,label select{margin-top:8px}form>input,form>textarea,.form-section>input,.form-section>textarea{margin-bottom:22px}.sidebar{position:fixed;inset:0 auto 0 0;width:225px;background:#edf1e8;border-right:1px solid var(--border);padding:39px 23px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:13px;font-size:21px;line-height:1.1;font-weight:650;letter-spacing:-.5px;padding:0 8px}.brand-mark{display:grid;place-items:center;width:44px;height:48px;border-radius:13px;background:var(--green);color:#f7f6eb;font-family:Georgia,serif;font-size:34px}.nav-label{font-size:10px;letter-spacing:1.8px;color:var(--muted);margin:62px 12px 18px}.sidebar nav{display:grid;gap:8px}.sidebar nav a{padding:14px;border-radius:9px;display:flex;gap:12px;color:#607266;font-size:14px}.sidebar nav a.active{background:#dce6d7;color:#254d38;font-weight:600}.sidebar-note{margin-top:auto;font-size:11px;line-height:1.8;color:#778578;padding:0 10px}.main{margin-left:225px;padding:0 48px 64px;max-width:1620px}.topline{height:98px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.7px;color:var(--muted);margin-bottom:44px}.avatar{display:grid;place-items:center;height:33px;width:33px;border:1px solid #ced9c9;border-radius:50%;color:#527050;background:#e7eddf;font-size:12px}.page-heading{display:flex;justify-content:space-between;gap:28px;align-items:center;margin-bottom:28px}.page-heading>div{min-width:0}.page-heading h1{overflow-wrap:anywhere}.page-heading .button{flex-shrink:0}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#6d816e;margin-bottom:17px;font-weight:600}.muted{color:var(--muted)}.small{font-size:12px}.hint{font-size:12px;color:var(--muted);line-height:1.6;margin:9px 0 18px}.button{display:inline-flex;justify-content:center;align-items:center;border:1px solid var(--green);background:var(--green);color:white;border-radius:8px;padding:13px 20px;font-size:13px;font-weight:600;min-height:44px;gap:8px}.button:hover{background:#234d36}.button.secondary{background:transparent;border-color:#ccd7c8;color:var(--green)}.button.secondary:hover{background:#edf2e9}.button:disabled{opacity:.5;cursor:default}.full{width:100%}.panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px}.search{display:flex;gap:10px}.recipe-search{max-width:560px;margin:20px 0 30px}.search input{margin:0}.empty{text-align:center;padding:64px 28px}.empty>p.muted{max-width:430px;margin:0 auto 27px;font-size:14px}.empty h2{font-family:Georgia,serif;font-size:30px;font-weight:400}.empty-icon{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 24px;background:#edf2e8;border:1px solid #dce6d4;border-radius:21px;font-size:34px;color:#648060}.empty .hint{margin-top:18px;margin-bottom:0}.compact{padding:40px 10px}.compact h2{font-size:26px}.count{display:inline-block;vertical-align:middle;margin-left:16px;padding:5px 10px;font:12px system-ui;color:#5a7658;background:#e6edde;border-radius:7px;letter-spacing:0}.catalog-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:24px;align-items:start}.ingredient-list{list-style:none;margin:20px 0 0;padding:0}.ingredient-list li{border-top:1px solid #e8ece5;padding:16px 0;display:flex;gap:15px;justify-content:space-between;overflow-wrap:anywhere}.ingredient-list .muted{font-size:11px;flex-shrink:0}.recipe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.recipe-card{background:#fff;border:1px solid var(--border);border-radius:13px;padding:25px;transition:transform .15s,border-color .15s;overflow-wrap:anywhere}.recipe-card:hover{transform:translateY(-2px);border-color:#9bb593}.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:24px}.tag{font-size:11px;background:#eef2e8;border-radius:5px;padding:6px 9px;color:#5c7353}.card-description{font-size:13px;min-height:42px}.card-bottom{padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:14px;font-size:12px;color:var(--muted)}.back-link{font-size:12px;display:inline-block;margin-bottom:25px;color:#647760}.form-section{margin-bottom:24px}.form-section h2{margin-bottom:25px}.section-number{font-size:11px;color:#6c8664;display:inline-block;margin-right:13px;padding:8px;border-radius:7px;background:#edf2e7;vertical-align:middle;letter-spacing:0}.field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:15px}.field-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-heading h2{margin-bottom:12px}.text-button{background:none;border:0;color:var(--green);padding:10px 0;font-size:12px;text-align:left}.danger{color:#9a6258}.text-button:disabled{opacity:.4;cursor:default}.requirement{border:1px solid #dfe5da;border-radius:10px;padding:17px;margin:20px 0;background:#fafbf8;min-width:0}.requirement legend{font-size:11px;letter-spacing:.4px;color:#6c7e65;padding:0 7px}.requirement-header{display:flex;align-items:center;gap:24px;margin-bottom:12px}.requirement-header>label:first-child{flex:1;max-width:270px}.check{display:flex;gap:8px;align-items:center;font-size:12px;white-space:nowrap}.check input{width:16px;height:16px;margin:0;accent-color:var(--green)}.option-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.option-grid{display:grid;grid-template-columns:2fr 1.3fr 1fr 1fr 1fr;gap:12px;align-items:end}.option-notes{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-top:10px;align-items:end}.ingredient-option+.ingredient-option{border-top:1px dashed #cbd7c4;margin-top:18px;padding-top:18px}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:20px}.error,.notice{border:1px solid #e5bcb3;background:#fff4f0;border-radius:8px;color:#873e30;padding:15px 18px;font-size:14px;margin-bottom:22px;line-height:1.6}.notice{background:#eaf3e4;border-color:#c8dec0;color:#426a3c}.meta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:12px;color:#687961}.recipe-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:25px;align-items:start}.group-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;margin:30px 0 14px;color:#698062}.detail-ingredient{border-bottom:1px solid #e6ebe1;padding:13px 0}.ingredient-line{display:flex;justify-content:space-between;gap:20px;font-size:13px;line-height:1.7}.ingredient-line strong{font-weight:500;overflow-wrap:anywhere}.ingredient-line>span{text-align:right;min-width:80px}.detail-ingredient .hint{margin:3px 0}.or{font-size:11px;color:#8a956f;display:block;padding:6px 0}.optional{font-size:10px;color:#778754;background:#f3f5e9;padding:3px 7px;display:inline-block;margin-top:8px;border-radius:4px}.steps{list-style:none;padding:0;margin:25px 0 0}.steps li{display:flex;gap:17px;margin:0 0 25px}.steps li>span{display:grid;place-items:center;flex-shrink:0;background:#eef3e8;border-radius:50%;height:29px;width:29px;color:#6a825e;font-size:12px}.steps p{font-size:14px;line-height:1.8;margin:0;overflow-wrap:anywhere}.recipe-notes{background:#f5f5eb;padding:20px;border-radius:8px;margin-top:30px;font-size:13px;overflow-wrap:anywhere}.recipe-notes p{margin:0}.preserve{white-space:pre-wrap}dialog{border:1px solid var(--border);border-radius:16px;padding:28px;width:min(500px,calc(100% - 32px));color:#293e35}dialog::backdrop{background:#1b302a66}dialog .full{margin-top:20px}.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}[hidden]{display:none!important}
@media(min-width:1450px){.recipe-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.main{padding-left:28px;padding-right:28px}.sidebar{width:190px;padding-left:15px;padding-right:15px}.main{margin-left:190px}.option-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ingredient-choice{grid-column:span 2}.option-notes{grid-template-columns:1fr 1fr}.option-notes>.check{grid-column:span 2}.catalog-layout{grid-template-columns:1fr}.add-panel{max-width:600px}.recipe-detail{grid-template-columns:1fr 1.2fr}}
@media(max-width:760px){.sidebar{position:static;width:auto;padding:18px 20px;display:block}.brand{font-size:15px;gap:9px;padding:0}.brand-mark{width:32px;height:36px;font-size:26px}.nav-label,.sidebar-note{display:none}.sidebar nav{display:flex;margin-top:15px;gap:8px}.sidebar nav a{padding:10px 14px;font-size:13px}.main{margin-left:0;padding:0 18px 35px}.topline{height:57px;margin-bottom:26px}.page-heading{align-items:flex-start;flex-direction:column;gap:15px}h1{font-size:37px}.page-heading p.muted{font-size:14px}.recipe-grid,.recipe-detail,.field-grid,.field-grid.two{grid-template-columns:1fr}.panel{padding:20px}.empty{padding:40px 20px}.empty h2{font-size:27px}.section-heading{align-items:flex-start;flex-wrap:wrap;gap:4px}.requirement{padding:12px}.requirement-header{gap:10px;flex-wrap:wrap}.requirement-header>label:first-child{min-width:100%;max-width:none}.option-grid{grid-template-columns:1fr 1fr}.ingredient-choice{grid-column:span 2}.option-notes{grid-template-columns:1fr}.option-notes>.check{grid-column:auto}.form-actions{align-items:stretch;flex-direction:column}.card-top{gap:8px}.meta{gap:12px}.ingredient-line{gap:10px}.recipe-notes{padding:15px}}

/* Mobile navigation and primary actions stay within thumb reach. */
.bottom-nav { display: none; }
.calendar-tabs { display: flex; background: #e9eee4; padding: 4px; border-radius: 10px; margin: 0 0 18px; max-width: 320px; }
.calendar-tabs a { flex: 1; text-align: center; padding: 11px; border-radius: 7px; font-size: 13px; }
.calendar-tabs .active { background: #fff; box-shadow: 0 1px 4px #293e3512; font-weight: 600; }
.calendar-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin: 14px 0; }
.calendar-legend > a { margin-left: auto; padding: 12px 0 12px 16px; color: var(--green); }
.meal-mark { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; flex-shrink: 0; font-size: 15px; line-height: 1; }
.meal-mark.lunch { background: #f8e9c7; color: #77511d; }
.meal-mark.dinner { background: #e2e6f7; color: #4e5689; }
.compact-week { gap: 0; background: #fff; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.calendar-day { display: flex; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); scroll-margin-top: 16px; }
.calendar-day:last-child { border-bottom: 0; }
.calendar-day.today { background: #f4f8ef; }
.calendar-date { min-width: 38px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; }
.calendar-date strong { font-size: 23px; font-weight: 500; }
.calendar-date span { font-size: 11px; color: var(--muted); }
.calendar-dishes { flex: 1; min-width: 0; }
.calendar-dishes:not(:has(.calendar-dish)) { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.calendar-dishes:not(:has(.calendar-dish)) .calendar-free { margin: 0; }
.calendar-dishes:not(:has(.calendar-dish)) .day-add { gap: 10px; flex-shrink: 0; }
.calendar-dish { display: flex; align-items: center; gap: 7px; }
.calendar-dish > a { font-size: 13px; line-height: 1.4; flex: 1; padding: 6px 0; min-width: 0; overflow-wrap: anywhere; }
.calendar-dish small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.calendar-dish .menu-remove { width: 44px; min-width: 44px; }
.calendar-free { display: block; font-size: 12px; margin-top: 6px; }
.day-add { display: flex; gap: 18px; }
.day-add a { min-height: 44px; display: flex; align-items: center; font-size: 11px; color: var(--green); }
.month-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; margin-bottom: 18px; }
.weekday { text-align: center; font-size: 11px; color: var(--muted); padding: 6px 0; }
.month-cell { min-height: 66px; min-width: 0; border: 1px solid var(--border); background: #fff; border-radius: 9px; padding: 8px 2px; display: flex; align-items: center; flex-direction: column; gap: 6px; }
.month-cell strong { font-size: 14px; font-weight: 500; }
.month-cell.today strong { text-decoration: underline; text-underline-offset: 4px; }
.month-cell.selected { border-color: var(--green); background: #edf3e6; }
.month-marks { display: flex; gap: 2px; min-height: 17px; }
.month-marks .meal-mark { width: 17px; height: 17px; font-size: 12px; border-radius: 5px; }
.plan-settings { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; margin-bottom: 16px; }
.plan-settings fieldset { border: 0; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plan-settings legend { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.plan-settings label { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; margin: 0; gap: 6px; }
.plan-settings label:has(input:checked) { background: #e6eedd; border-color: #a6bc9b; }
.plan-settings input[type=radio] { width: 14px; height: 14px; min-height: 0; margin: 0; accent-color: var(--green); }
.plan-preview { margin-bottom: 0; }
#plan-form .meal-choice { flex-direction: row; align-items: center; margin-bottom: 8px; padding: 13px; }
#plan-form .meal-choice > div { flex: 1; min-width: 0; }
#plan-form .meal-choice h2 { font-size: 15px; line-height: 1.4; }
#plan-form .meal-choice .hint { font-size: 11px; }
#plan-form .meal-choice .hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.add-dish { flex-shrink: 0; width: 44px; height: 44px; padding: 0; font-size: 22px; }
.two-hint { display: block; color: #617b53; font-size: 10px; margin-top: 4px; }
.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 550px; }
.week-nav strong { font-size: 15px; }
.menu-week { display: grid; gap: 12px; }
.menu-day { padding: 16px 20px; scroll-margin-top: 16px; }
.menu-day summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-day summary > span:first-child { display: grid; gap: 5px; }
.menu-day summary .muted { font-size: 12px; }
.menu-day summary::after { content: '+'; color: var(--green); font-size: 20px; }
.menu-day[open] summary::after { content: '−'; }
.menu-day summary .tag { margin-left: auto; }
.menu-slots { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding-top: 12px; }
.menu-slot-heading { display: flex; justify-content: space-between; align-items: center; }
.menu-slot-heading h2 { font-size: 16px; margin: 0; }
.planned-dish { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); }
.planned-dish > a { font-size: 14px; line-height: 1.5; padding: 12px 0; }
.menu-remove { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: #8c655a; font-size: 22px; }
.meal-choices { display: grid; gap: 10px; }
.meal-choice { padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.meal-choice h2 { font-size: 17px; margin: 0; }
.meal-choice .hint { margin: 6px 0 0; }
.meal-choice form { flex-shrink: 0; }
.picker-trigger { width: 100%; min-height: 46px; text-align: left; border: 1px solid #d8e0d6; border-radius: 8px; background: #fff; color: #293e35; padding: 12px 40px 12px 13px; position: relative; }
.picker-trigger::after { content: ''; position: absolute; right: 17px; top: 17px; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.filter-picker { padding: 20px; max-height: 85dvh; overflow: auto; box-shadow: 0 16px 60px #18372733; }
.picker-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.picker-header h2 { margin: 0; font-size: 20px; }
.picker-close { border: 0; border-radius: 50%; background: #eef2e8; color: var(--green); min-width: 44px; height: 44px; font-size: 26px; }
.picker-choices { display: grid; gap: 5px; }
.picker-choice { min-height: 48px; text-align: left; padding: 12px 42px 12px 14px; border: 1px solid transparent; border-radius: 10px; background: #fff; color: #293e35; position: relative; }
.picker-choice:hover { background: #f2f5ed; }
.picker-choice[aria-pressed="true"] { background: #e6eedd; border-color: #cadbc0; color: #2e5d45; font-weight: 600; }
.picker-choice[aria-pressed="true"]::after { content: '✓'; position: absolute; right: 16px; }
.recipe-filter-form { margin-bottom: 18px; }
.recipe-filter-form .recipe-search { margin-bottom: 4px; }
.recipe-filters summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: 13px; color: var(--green); }
.recipe-filters[open] { padding-bottom: 12px; }
.filter-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 850px; padding-top: 8px; }
.filter-reset { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--green); }
.source-details { margin-top: 24px; }
.source-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.source-details summary::before { content: '+ '; margin-right: 10px; }
.source-details[open] summary::before { content: '− '; }
.source-details .preserve { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .sidebar { padding: 14px 20px; border-bottom: 1px solid var(--border); }
  .sidebar nav, .topline { display: none; }
  .main { padding-top: 26px; padding-bottom: calc(105px + env(safe-area-inset-bottom, 0px)); }
  .main:has(#recipe-form) { padding-bottom: calc(195px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)); background: #f8faf5f5; backdrop-filter: blur(14px); border-top: 1px solid #dce4d7; justify-content: space-around; }
  .bottom-nav a { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; min-width: 0; padding: 4px 5px; font-size: 10px; color: #768370; border-radius: 11px; }
  .bottom-nav a > span { font-size: 24px; line-height: 1; }
  .bottom-nav a.active { color: #315b3e; background: #e6eedd; font-weight: 650; }
  .form-actions { position: fixed; left: 0; right: 0; bottom: calc(69px + env(safe-area-inset-bottom, 0px)); padding: 12px 18px; z-index: 19; border-top: 1px solid var(--border); background: #f7f8f4f5; backdrop-filter: blur(14px); }
  .form-actions > span { display: none; }
  input, select, textarea { font-size: 16px; min-height: 46px; }
  .text-button { min-height: 44px; }
  .check { min-height: 44px; }
  .check input { min-height: 20px; width: 20px; height: 20px; }
  .back-link { min-height: 32px; }
  dialog { max-height: 85dvh; overflow-y: auto; margin: auto auto 0; width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .recipes-heading { margin-bottom: 14px; gap: 0; }
  .recipes-heading .eyebrow, .recipes-heading > .button { display: none; }
  .recipes-heading h1 { font-size: 32px; margin-bottom: 8px; }
  .recipes-heading p.muted { margin-bottom: 0; }
  .recipe-search { margin: 16px 0 18px; }
  .recipe-grid { gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .filter-fields { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .filter-fields > div { margin-bottom: 8px; }
  .picker-trigger, .picker-choice { font-size: 16px; }
  .menu-slots { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .menu-day { padding: 12px 14px; }
  .menu-day summary .tag { font-size: 10px; }
  .meal-choice { align-items: flex-start; flex-direction: column; gap: 10px; }
  .recipe-card { min-width: 0; padding: 14px 16px; border-radius: 11px; }
  .recipe-card .card-top { margin-bottom: 8px; }
  .recipe-card .tag { padding: 4px 7px; font-size: 10px; }
  .recipe-card .small { font-size: 11px; }
  .recipe-card h2 { font-size: 17px; line-height: 1.35; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .recipe-card .card-description { display: none; }
  .recipe-card .card-bottom { padding-top: 0; border-top: 0; font-size: 11px; gap: 12px; }
  .recipe-card .card-bottom > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
  .recipe-card .card-bottom > span:last-child { flex-shrink: 0; }
}

.portion-preview { padding: 14px; background: #f5f7ef; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; }
.portion-baseline { font-size: 12px; margin-bottom: 12px; }
.portion-baseline a { text-decoration: underline; }
.portion-preview fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.portion-preview legend { font-size: 12px; margin-bottom: 8px; }
.portion-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.portion-choice { min-height: 44px; flex: 1; border: 1px solid #ccd7c8; border-radius: 8px; background: #fff; color: var(--green); padding: 8px; font-size: 12px; white-space: nowrap; }
.portion-choice.active { background: #e1ecd8; border-color: #8ba57c; font-weight: 600; }
.portion-target { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.portion-target label { margin: 0; font-size: 12px; }
.portion-target input { width: 70px; flex: 1; max-width: 110px; }
.portion-target button { padding: 10px; }
.portion-preview .hint { margin: 10px 0 0; }
.portion-preview .error { margin: 12px 0 0; }

.unscaled-note { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }

.recipe-bottom-tools { margin-top: 24px; }

.cooking-volume { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.cooking-volume summary { min-height: 44px; cursor: pointer; padding: 12px 0; font-size: 12px; }
.plan-settings .target-portions { display: flex; flex-wrap: wrap; border: 0; padding: 0; }
.plan-settings .target-portions[hidden] { display: none; }
#plan-form .meal-choice .cooking-estimate { display: block; overflow: visible; color: var(--green); }
.cooking-detail { margin-top: 20px; }

.quick-plan-settings { padding: 0; }
.quick-plan-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; min-height: 48px; cursor: pointer; font-size: 13px; list-style: none; }
.quick-plan-settings > summary::-webkit-details-marker { display: none; }
.settings-summary { text-transform: none; }
.settings-summary::first-letter { text-transform: uppercase; }
.settings-action { color: var(--green); text-decoration: underline; flex-shrink: 0; }
.quick-plan-settings[open] > summary { border-bottom: 1px solid var(--border); }
.settings-content { padding: 14px; }

.shopping-period, .shopping-extras { margin-bottom: 16px; }
.shopping-period summary, .shopping-extras summary, .shopping-sources summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: 13px; color: var(--green); }
.shopping-dates { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.shopping-dates label { flex: 1; min-width: 130px; }
.shopping-warning { padding: 14px; border: 1px solid #e3cf9e; border-radius: 10px; background: #fcf6e7; font-size: 13px; margin-bottom: 12px; }
.shopping-warning p { margin: 5px 0 0; }
.shopping-choice { margin: 12px 0; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.shopping-choice select { margin-bottom: 10px; }
.shopping-items { display: grid; gap: 10px; }
.shopping-item { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.shopping-item-heading { display: flex; align-items: start; gap: 12px; justify-content: space-between; }
.shopping-item-heading h2 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.shopping-item-heading > span { font-size: 13px; text-align: right; min-width: 65px; }
.shopping-marks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.shopping-marks button { min-height: 44px; border: 1px solid var(--border); border-radius: 8px; background: #f5f8f0; padding: 8px 12px; color: var(--green); font-size: 12px; }
.shopping-marks span { font-size: 12px; color: var(--muted); }
.shopping-done { background: #f0f4eb; }
.shopping-done .shopping-item-heading h2 { text-decoration: line-through; color: var(--muted); }
.shopping-sources p { font-size: 12px; margin-bottom: 8px; }
.shopping-sources a { text-decoration: underline; }
.shopping-manual { margin-top: 20px; }
@media (max-width:760px) {
 .recipes-heading:has(.new-recipe-link) { flex-wrap: wrap; gap: 12px; }
 .recipes-heading > .new-recipe-link { display: inline-flex; padding: 10px 14px; }
}

/* Compact calendar actions retain comfortable touch targets. */
.day-add a { min-width: 44px; justify-content: center; font-size: 17px; }
.day-add { gap: 8px; }
.shopping-toolbar { display:flex; align-items:end; gap:10px; margin-bottom:16px; }
.shopping-toolbar label { flex:1; margin:0; }
.shopping-toolbar button { min-height:46px; }
.shopping-tabs { display:flex; gap:4px; padding:5px; background:var(--soft); border-radius:14px; margin:16px 0 24px; }
.shopping-tabs a { flex:1; text-align:center; padding:12px 6px; border-radius:10px; font-size:12px; min-height:44px; display:flex; align-items:center; justify-content:center; }
.shopping-tabs .active { background:white; font-weight:700; box-shadow:0 1px 4px #0001; }
.shopping-check { display:flex; align-items:center; gap:8px; font-size:12px; }
.shopping-check input { width:20px; min-height:20px; }
.shopping-regular { margin-top:14px; }
.shopping-move { margin:12px 0; }
/* Mobile shopping: department colours, dense rows and 44px touch targets. */
.cat-produce { --department:#549266; } .cat-meat { --department:#c66b6b; }
.cat-fish { --department:#4597a9; } .cat-dairy { --department:#6b9fca; }
.cat-bakery { --department:#b68a51; } .cat-pantry { --department:#c5a552; }
.cat-frozen { --department:#889dd3; } .cat-drinks { --department:#729eac; }
.cat-baby { --department:#b794bd; } .cat-household { --department:#87968e; }
.cat-pets { --department:#b08b76; } .cat-other { --department:#a3a7a0; }
.shopping-screen .page-heading { position:relative; margin-bottom:12px; padding-right:104px; }
.shopping-screen .page-heading h1 { font-size:32px; }
.shopping-screen .page-heading p { font-size:12px; margin:6px 0 0; }
.quick-actions { position:absolute; right:0; top:0; display:flex; gap:6px; }
.quick-action { margin:0; }
button.quick-action, .quick-action > summary { display:flex; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px; border:1px solid var(--border); border-radius:12px; background:white; color:var(--green); font-size:25px; cursor:pointer; padding:0; list-style:none; }
.quick-action > summary::-webkit-details-marker, .row-info > summary::-webkit-details-marker { display:none; }
details.quick-action[open] { position:fixed; inset:20px; overflow:auto; background:white; z-index:50; padding:16px; }
.shopping-screen .shopping-toolbar { margin-bottom:8px; }
.shopping-screen .shopping-toolbar label { font-size:12px; }
.shopping-screen .shopping-tabs { margin:8px 0 12px; padding:3px; }
.shopping-screen .shopping-tabs a { padding:6px 4px; font-size:12px; }
.shopping-screen .shopping-items { gap:5px; }
.department-heading { font-size:12px; font-weight:600; margin:12px 0 4px; padding-left:9px; border-left:4px solid var(--department); color:var(--muted); }
.shopping-screen .purchase-row { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:4px; padding:6px 5px; border-left:4px solid var(--department); border-radius:9px; min-height:66px; }
.row-check { margin:0; }
.row-check button, button.row-info, .row-info > summary { width:44px; min-height:44px; padding:0; border:0; background:transparent; color:var(--green); cursor:pointer; font-size:24px; display:flex; justify-content:center; align-items:center; list-style:none; }
.row-copy { min-width:0; }
.shopping-screen .row-copy h2 { font-size:15px; line-height:1.3; margin:0; overflow-wrap:anywhere; }
.shopping-screen .row-copy p { font-size:12px; line-height:1.35; margin:3px 0 0; }
.shopping-screen .row-copy small { font-size:11px; color:var(--muted); }
.purchase-row .row-info { grid-column:3; grid-row:1; }
.purchase-row details.row-info[open] { grid-column:1/-1; grid-row:2; }
.shopping-screen .shopping-done .row-copy h2 { text-decoration:line-through; }
.shopping-screen .recurring-row { position:relative; margin:5px 0; padding:9px 52px 9px 12px; border-left:4px solid var(--department); border-radius:9px; min-height:68px; }
.recurring-row > .row-info { position:absolute; top:8px; right:5px; }
.recurring-row > details.row-info[open] { position:static; }
.recurring-row .shopping-marks { margin:4px 0 0; gap:4px; }
.recurring-row .shopping-marks button { padding:4px 10px; }
.shopping-help { margin:8px 0; font-size:12px; }
.shopping-help summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--muted); }
.shopping-screen .stock-row { margin:5px 0; padding:9px 12px; border-left:4px solid var(--department); }
.stock-row h2 { margin:0; font-size:15px; } .stock-row p { margin:4px 0; }
.shopping-sheet { border:0; border-radius:18px 18px 0 0; padding:0; width:min(100%,520px); max-width:100%; max-height:85dvh; margin:auto auto 0; color:#293e35; background:#fafbf8; box-shadow:0 -8px 40px #0002; }
.shopping-sheet::backdrop { background:#18281f66; }
.shopping-sheet > header { position:sticky; top:0; display:flex; align-items:center; gap:8px; background:#fafbf8; border-bottom:1px solid var(--border); padding:10px 16px; z-index:1; }
.shopping-sheet header h2 { flex:1; font-size:18px; margin:0; }
.shopping-sheet header button { width:44px; height:44px; flex-shrink:0; font-size:28px; border:0; background:transparent; color:var(--green); cursor:pointer; }
.shopping-sheet-content { padding:16px 18px calc(20px + env(safe-area-inset-bottom)); }
.shopping-sheet .shopping-manual { margin-top:0; }
.shopping-screen button:focus-visible, .shopping-screen summary:focus-visible, .shopping-sheet button:focus-visible { outline:3px solid #749b80; outline-offset:2px; }
@media(min-width:761px) { .shopping-sheet { margin:auto; border-radius:18px; } }

/* Recipe ingredients must wrap inside narrow phone panels. */
.recipe-detail > .panel, .recipe-detail .detail-ingredient { min-width:0; }
.recipe-detail .ingredient-line { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; align-items:center; }
.ingredient-copy { min-width:0; display:flex; justify-content:space-between; gap:12px; }
.ingredient-copy > strong, .ingredient-copy > span { min-width:0; overflow-wrap:anywhere; }
.ingredient-copy > span { text-align:right; }
.detail-ingredient .hint, .group-title { overflow-wrap:anywhere; }
.ingredient-buy { display:flex; align-items:center; justify-content:center; gap:0; width:44px; min-height:44px; flex-shrink:0; border:1px solid var(--border); border-radius:9px; color:var(--green); background:#f5f8f0; font-size:14px; }
.ingredient-list li { align-items:center; padding:6px 0; }
.ingredient-list li > span { min-width:0; }
@media(max-width:760px) {
 .recipe-detail { grid-template-columns:minmax(0,1fr); }
 .recipe-detail > .panel { padding:16px; }
 .ingredient-copy { display:flex; flex-direction:column; gap:2px; }
 .ingredient-copy > span { text-align:left; color:var(--muted); }
 .detail-ingredient { padding:7px 0; }
}

/* One basket shape shared by shopping navigation and add actions. */
.basket-icon { display:inline-block; width:22px; height:22px; vertical-align:middle; flex-shrink:0; }
.ingredient-buy .basket-icon { width:20px; height:20px; }
.bottom-nav .basket-icon { width:24px; height:24px; }

a.quick-action { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border); border-radius:12px; background:white; color:var(--green); }
.shopping-screen .page-heading { padding-right:150px; }
.products-screen .page-heading { padding-right:50px; }
.product-search { display:grid; gap:10px; margin-bottom:14px; }
.product-search .search input { min-width:0; }
.product-row .row-check button:disabled { opacity:0.65; cursor:default; }
.recipe-catalog-link { display:inline-flex; min-height:44px; align-items:center; font-size:13px; color:var(--green); }
@media(max-width:360px) { .shopping-screen:not(.products-screen) .page-heading h1 { font-size:27px; } }
/* Stretch the native add button over the product row; keep info independent. */
.product-row .row-check button::after { content:""; position:absolute; inset:0; border-radius:8px; z-index:1; }
.product-row > .row-info { position:relative; z-index:2; }
.product-row .row-check button:focus-visible::after { outline:3px solid #749b80; outline-offset:2px; }
.product-row:has(.row-check button:not(:disabled)):hover { background:#f5f8f0; }
.product-row:has(.row-check button:disabled) { background:#f5f8f0; }
.product-package { min-width:0; margin:18px 0; padding:12px; border:1px solid var(--border); border-radius:10px; }
.product-package legend { font-size:13px; font-weight:600; padding:0 5px; }
.product-package .field-grid { margin-bottom:0; gap:10px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.product-package .hint { margin-bottom:0; }

.history-screen .page-heading { padding-right:0; }
.history-screen .shopping-item h2 { font-size:15px; margin-bottom:6px; }
.receipt { margin:24px 0; }
.receipt h2 { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:16px; margin:0 0 4px; }
.receipt h2 span { font-size:12px; color:var(--muted); font-weight:400; white-space:nowrap; }
.receipt-id { font-size:10px; color:var(--muted); margin:0 0 8px; overflow-wrap:anywhere; }
.receipt-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px; }
.receipt-name { width:58%; } .receipt-quantity { width:19%; } .receipt-total { width:23%; }
.receipt-table th { padding:7px 4px; font-size:11px; color:var(--muted); font-weight:500; text-align:left; border-bottom:1px solid var(--border); }
.receipt-table td { border-bottom:1px solid var(--border); padding:0 4px; overflow-wrap:anywhere; background:white; }
.receipt-table th:not(:first-child), .receipt-purchase td:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.receipt-purchase { cursor:pointer; }
.receipt-toggle { display:flex; gap:5px; justify-content:space-between; align-items:center; text-align:left; width:100%; min-height:44px; padding:9px 0; border:0; background:none; color:inherit; font-size:13px; line-height:1.35; }
.receipt-toggle span { color:var(--muted); flex-shrink:0; }
.receipt-toggle[aria-expanded=true] span { transform:rotate(180deg); }
.receipt-detail td { padding:12px; background:#eef3e9; }
.receipt-detail p { margin:0 0 7px; font-size:12px; }
.receipt-detail a { display:inline-flex; align-items:center; min-height:44px; color:var(--green); text-decoration:underline; }

.shopping-toolbar .picker-field { flex:1; min-width:0; }
.shopping-toolbar .picker-field label { display:block; margin-bottom:6px; }
.package-option { margin:10px 0; }
.package-choice { display:grid; gap:6px; width:100%; padding:14px; text-align:left; border:1px solid var(--border); border-radius:10px; background:white; color:var(--ink); overflow-wrap:anywhere; }
.package-choice span, .package-choice small { color:var(--muted); font-size:12px; }
.package-choice:hover { background:#eef3e9; }

.purchase-navigation { display:flex; width:100%; min-height:48px; align-items:center; justify-content:center; margin:10px 0; text-align:center; }

.purchase-average { display:block; font-size:11px; line-height:1.4; color:var(--muted); font-variant-numeric:tabular-nums; }

.shopping-total { margin:16px 0; padding:14px; border-top:1px solid var(--border); border-radius:10px; background:#eaf0e5; }
.shopping-total > div { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.shopping-total > div strong:last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.shopping-total p { font-size:12px; line-height:1.5; margin:6px 0 0; color:var(--muted); }

.purchase-quantity { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.purchase-quantity .button { min-width: 48px; min-height: 48px; padding: 6px 12px; font-size: 1.35rem; }
.purchase-quantity .button:disabled { opacity: .4; cursor: default; }
.purchase-quantity .quantity-reset { min-height: 44px; padding: 6px; background: transparent; border: 0; color: var(--green, #315e48); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }
.budget-filter { display:flex; align-items:end; gap:10px; margin:18px 0; }
.budget-filter label { flex:1; min-width:0; }
.budget-summary { padding:18px; background:#e6eedd; border-radius:14px; margin:18px 0; }
.budget-summary > strong { font-size:32px; color:var(--green); }
.budget-summary p { margin:6px 0; }
.budget-line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px; }
.budget-line span { overflow-wrap:anywhere; }
.budget-line strong { white-space:nowrap; }
.budget-line small { display:block; color:var(--muted); }
.budget-line meter { grid-column:1 / -1; width:100%; height:7px; }
.budget-receipt { padding:10px 0; border-bottom:1px solid var(--border); }
.budget-receipt summary { cursor:pointer; min-height:44px; display:list-item; padding:10px 0; }
.budget-group > summary, .budget-category > summary, .budget-product > summary { cursor:pointer; min-height:48px; align-items:center; list-style:none; }
.budget-group > summary::-webkit-details-marker, .budget-category > summary::-webkit-details-marker, .budget-product > summary::-webkit-details-marker { display:none; }
.budget-drill { border-left:3px solid #d7e3d4; padding-left:10px; }
.budget-product { background:#f4f7f0; padding:0 8px; }
.budget-purchase { font-size:12px; padding:12px 4px; }
.budget-receipt { scroll-margin-top:16px; }
.budget-receipt:target { outline:2px solid #8aad90; outline-offset:4px; }
.budget-group summary:focus-visible,.budget-category summary:focus-visible,.budget-product summary:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.budget-compare-filter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.budget-compare-filter button { grid-column:1 / -1; justify-self:end; }
.budget-comparison { padding:14px; border:1px solid var(--border); border-radius:12px; margin:16px 0; }
.budget-comparison > summary { min-height:44px; padding:10px 0; cursor:pointer; font-weight:600; }
.budget-change { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; }
.budget-change > strong { font-size:24px; }
.budget-comparison .budget-line strong small { display:block; font-weight:400; text-align:right; color:var(--muted); }

/* Monthly plan: compact rows with touch-sized editing controls. */
.budget-plan { margin:18px 0; padding:14px; border:1px solid var(--border); border-radius:14px; }
.budget-plan-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.budget-plan-heading h2 { margin:0; font-size:20px; }
.budget-plan-heading .button { min-height:44px; padding:10px 14px; }
.budget-plan-total { font-size:22px; font-weight:600; margin:14px 0 4px; }
.budget-plan-total span { font-size:16px; }
.budget-plan-row { padding:10px 0; border-bottom:1px solid var(--border); }
.budget-plan-row > div:first-child { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:14px; }
.budget-plan-row small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.budget-plan-row.over-limit small { color:#a03e30; }
.budget-plan-track { margin-top:7px; height:5px; border-radius:4px; background:#e4eadd; overflow:hidden; }
.budget-plan-track > span { display:block; height:100%; background:var(--green); }
.over-limit .budget-plan-track > span { background:#b65040; }
.budget-plan-field { display:grid; grid-template-columns:minmax(0,1fr) 140px; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.budget-plan-field label { margin:0; }
.budget-plan-field > span { display:flex; gap:6px; align-items:center; }
.budget-plan-field input { width:100%; min-width:0; min-height:44px; text-align:right; }
.budget-plan-form > button { margin-top:18px; min-height:44px; width:100%; }
.budget-filter input[type=month] { min-width:0; width:100%; }

.budget-forecast .budget-plan-heading h2 { font-size:18px; }
.budget-forecast .budget-plan-heading .button { display:flex; align-items:center; justify-content:center; min-width:44px; flex-shrink:0; }
.budget-forecast .budget-plan-heading svg { width:22px; height:22px; }
.budget-forecast-details > summary { min-height:44px; padding:12px 0; cursor:pointer; font-size:14px; }
.budget-forecast-result { font-size:15px; }

.budget-payment-method > summary { min-height:44px; cursor:pointer; align-items:center; list-style:none; }
.budget-payment-method > summary::-webkit-details-marker { display:none; }
.comparable-prices h3 { font-size:16px; margin:14px 0 4px; }
.comparable-shop > summary,.comparable-price-source { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; min-height:44px; border-bottom:1px solid var(--border); font-size:14px; }
.comparable-shop > summary { cursor:pointer; list-style:none; }
.comparable-shop > summary::-webkit-details-marker { display:none; }
.comparable-shop small { display:block; font-size:12px; color:var(--muted); font-weight:400; }
.comparable-shop strong { white-space:nowrap; text-align:right; }
.comparable-price-source span { min-width:0; overflow-wrap:anywhere; }

.recipe-cost { padding:12px 16px; margin-bottom:16px; }
.recipe-cost > summary { cursor:pointer; min-height:44px; font-size:15px; }
.recipe-cost > summary small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }

.menu-cost-dish > summary { cursor:pointer; min-height:44px; align-items:center; list-style:none; }
.menu-cost-dish > summary::-webkit-details-marker { display:none; }

.meal-quick-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.meal-quick-filters .button { min-height:44px; padding:10px 12px; font-size:.875rem; }
.meal-filter-hint { margin:0 0 14px; }

.move-controls[hidden] { display:none; }
.move-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:end; padding:12px; border:1px solid #c7d5c4; border-radius:12px; margin-bottom:12px; }
.move-title { flex-basis:100%; }
.move-controls label { flex:1 1 130px; min-width:0; }
.move-controls input,.move-controls select { width:100%; min-height:44px; }
.calendar-dish .move-handle { border:0; cursor:grab; touch-action:none; min-width:44px; min-height:44px; flex-shrink:0; padding:4px; font:inherit; }
.calendar-dish.move-selected { outline:2px solid #397857; outline-offset:3px; border-radius:8px; }
.move-target { outline:2px dashed #397857; outline-offset:-2px; background-color:#edf4e8; }
.move-handle:focus-visible { outline:3px solid #397857; }
.menu-undo { position:sticky; top:8px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; background:#edf4e8; border:1px solid #c7d5c4; border-radius:12px; margin-bottom:12px; }
.menu-undo span { font-size:.85rem; }
.menu-tools-form { display:flex; flex-wrap:wrap; gap:12px; padding:12px 0; }
.menu-tools-form label { flex:1 1 140px; min-width:0; }
.menu-tools-form input,.menu-tools-form select { width:100%; min-height:44px; }
.menu-tools-form .wide,.menu-tools-form .hint { flex-basis:100%; }
.menu-tools details > summary { padding:12px 0; cursor:pointer; }
.move-controls .move-linked { flex-basis:100%; }
.move-linked input { width:auto; min-height:auto; margin-right:8px; }
.move-linked[hidden] { display:none; }
.calendar-note > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }
.calendar-note small { display:block; font-size:.8rem; color:#6b7c70; }