:root{font-family:Inter,"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#253e32;background:#f7f8f3;font-synthesis:none;line-height:1.6}*{box-sizing:border-box}body{margin:0}header{height:84px;border-bottom:1px solid #e0e5da;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);background:#fcfdf9}.brand{text-decoration:none;color:#284d38;font-weight:750;font-size:21px;letter-spacing:.04em;display:flex;align-items:center;gap:12px}.logo{font-size:26px;background:#315b42;color:white;border-radius:10px;padding:0 9px}.local{font-size:12px;color:#647961;background:#eaf0e4;padding:7px 13px;border-radius:20px}main{max-width:1240px;margin:auto;padding:44px 32px 0}.intro{padding:8px 0 30px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:.18em;color:#73866a;margin:0 0 10px}h1{font-size:clamp(26px,3.3vw,39px);line-height:1.55;letter-spacing:.045em;margin:0 0 16px;font-weight:700}.intro>p:last-child{font-size:14px;color:#738072;margin:0}.summary{display:grid;grid-template-columns:1fr 1fr 1.3fr;background:#edf1e5;border:1px solid #dfe6d4;border-radius:15px;padding:22px 30px;margin-bottom:40px;gap:30px}.summary>div+div{border-left:1px solid #d8dfce;padding-left:30px}.summary span{font-size:12px;color:#62725c}.summary strong{font-size:34px;line-height:1.3;display:block;margin-top:5px;font-weight:650}.summary small{font-size:13px;margin-left:9px;font-weight:400}.urgent-summary strong{color:#bb5b45}.summary-note{align-self:center;color:#7b886d;font-size:14px;letter-spacing:.1em}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}h2{font-size:21px;margin:0;letter-spacing:.03em}.section-title .eyebrow{margin-bottom:4px}.sort-note{font-size:11px;color:#7e897b}.toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:16px}.tabs{display:flex;gap:4px;background:#eaece4;padding:4px;border-radius:9px}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #dce2d5;background:#fff;color:#3e5845;border-radius:7px;padding:9px 12px;font-size:12px;min-height:40px}button:hover{background:#edf2e7}button:disabled{cursor:not-allowed;opacity:.55}.tabs button{border:0;background:transparent;min-height:34px;padding:5px 12px}.tabs .active{background:#fff;box-shadow:0 1px 4px #23391b12;color:#2d563d;font-weight:700}.search{flex:1;min-width:130px;max-width:200px}.search input{margin:0;background:#fff;padding:9px 12px;font-size:12px}input,select,textarea{width:100%;border:1px solid #dce1d5;border-radius:7px;background:#fff;color:#314b39;padding:11px 12px;margin-top:6px;font-size:14px;min-height:44px}input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid #65885c;outline-offset:2px}#notice{font-size:13px;color:#a1412e;margin:8px 0}#notice:empty{display:none}.food-card{display:grid;grid-template-columns:45px 1fr auto;gap:14px;background:#fff;border:1px solid #e1e5db;border-radius:11px;padding:20px;margin-bottom:12px;align-items:center}.food-card.urgent{border-left:4px solid #c46850;background:#fffdfa}.food-icon{width:44px;height:48px;background:#eff2e8;display:grid;place-items:center;font-size:24px;color:#789468;border-radius:11px}.food-content h3{font-size:17px;margin:4px 0;overflow-wrap:anywhere}.location-tag{font-size:10px;color:#718264;background:#eff3e8;border-radius:4px;padding:3px 6px}.quantity{font-size:12px;color:#7b8577;margin:0;overflow-wrap:anywhere}.expiry{text-align:right}.expiry strong{display:block;font-size:14px;font-weight:650}.expiry span{font-size:10px;color:#818a7c;display:block;margin-top:5px}.urgent .expiry strong{color:#bb503d}.card-actions{grid-column:2/4;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f1eb;padding-top:10px}.card-actions button{min-height:32px;padding:3px 12px;font-size:11px}.delete{color:#9a5f50}.empty{border:1px dashed #cfd9c5;min-height:270px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:#fcfdf8}.empty-icon{font-size:44px;color:#8da87c}.empty h3{font-size:17px;margin:10px 0}.empty p{font-size:12px;color:#7d8875;margin:0}.storage-note{font-size:10px;color:#87917e;margin:20px 0}.form-panel{padding:25px;background:#fff;border:1px solid #e0e5d8;border-radius:13px}.form-panel h2{margin-bottom:22px}form label{display:block;font-size:12px;font-weight:600;margin-bottom:17px}.date-row{display:grid;grid-template-columns:1fr 1.15fr;gap:10px}.date-row input,.date-row select{font-size:12px;padding:10px 6px;min-width:0}.primary{width:100%;background:#325e44;color:#fff;border-color:#325e44;font-weight:650;padding:12px}.primary:hover{background:#254e35}#cancel-edit{width:100%;margin-top:8px}.batch-panel{background:#edf0e3;border:1px solid #e2e5d8;border-radius:13px;padding:23px;margin-top:20px}.pill{color:#7c8d68;font-size:10px;letter-spacing:.08em}.batch-panel h2{font-size:17px;margin:8px 0}.batch-panel p{font-size:11px;color:#76816a;line-height:1.9}.batch-panel textarea{font-size:12px;resize:vertical;line-height:1.8}.batch-actions{display:flex;gap:8px;margin-top:10px}.batch-actions button{flex:1;font-size:11px;padding:7px}.batch-panel .fine{font-size:10px;line-height:1.7;margin-bottom:0}footer{margin-top:55px;border-top:1px solid #e0e5d8;padding:24px 0;color:#728168;font-size:12px;display:flex;justify-content:space-between}footer span{font-size:10px;color:#8a9381}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}[hidden]{display:none!important}@media(max-width:850px){.workspace{grid-template-columns:1fr 300px;gap:20px}main{padding:28px 20px 0}.food-card{grid-template-columns:34px 1fr;gap:10px;padding:15px}.food-icon{width:34px}.expiry{grid-column:2;text-align:left}.card-actions{grid-column:1/3}.summary{gap:15px;padding:20px}.summary>div+div{padding-left:15px}}@media(max-width:650px){header{height:68px;padding:0 18px}.brand{font-size:17px;gap:8px}.local{font-size:9px;padding:6px 8px}main{padding:25px 18px 0}.intro{padding-bottom:25px}.intro>p:last-child{font-size:12px;max-width:280px}.summary{margin-bottom:28px;grid-template-columns:1fr 1fr}.summary-note{display:none}.workspace{display:flex;flex-direction:column}.inventory{order:0}aside{order:1}.food-card{grid-template-columns:38px 1fr auto}.food-icon{width:38px}.expiry{grid-column:auto;text-align:right}.card-actions{grid-column:2/4}.search{max-width:none;flex-basis:100%}.tabs{width:100%}.tabs button{flex:1}.form-panel{padding:23px}.date-row{grid-template-columns:1fr 1fr}footer{margin-top:32px;gap:15px}.storage-note{line-height:1.8}}
@media(max-width:650px){h1{font-size:22px;letter-spacing:.015em;line-height:1.65}}

/* Registration actions stay mobile-only; a future voice action can share this row. */
.mobile-actions{display:none}
@media(max-width:650px){
  main{padding-top:18px}
  .intro{padding:0 0 12px}
  .intro .eyebrow,.intro-detail,.intro>p:last-child{display:none}
  .intro h1{font-size:18px;line-height:1.5;margin:0;letter-spacing:.025em}
  .mobile-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
  .mobile-actions>*{flex:1 1 140px}
  .register-link{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:8px;text-decoration:none;font-size:16px}
  .summary{padding:16px 20px;margin-bottom:24px}
  .summary strong{font-size:28px}
  #form-title{scroll-margin-top:20px}
  html{scroll-behavior:smooth}
  input,select,textarea,.search input,.date-row input,.date-row select,.batch-panel textarea{font-size:16px}
  button,.tabs button,.card-actions button{min-height:44px}
  .food-card{grid-template-columns:38px minmax(0,1fr) auto}
  .food-content{min-width:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Confirmation cards stay inside the existing batch panel on desktop. */
.review-card{min-width:0;margin:18px 0;padding:14px;border:1px solid #c5d2bc;border-radius:10px;background:#fff}
.review-card legend{padding:0 6px;font-weight:700;font-size:14px}
.review-source{overflow-wrap:anywhere;white-space:pre-wrap}
.review-warnings{font-size:12px;color:#8c482e;padding-left:20px;line-height:1.8}
.review-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.review-fields label{font-size:12px;min-width:0}
.review-fields label:first-child{grid-column:1/-1}
.review-fields input,.review-fields select{min-width:0;max-width:100%}
.review-confirm{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin:16px 0;cursor:pointer}
.review-confirm input{width:22px;height:22px;min-height:22px;flex:0 0 22px;margin:2px 0;accent-color:#325e44}
#batch-status{font-size:13px;overflow-wrap:anywhere;color:#84472d}
#batch-status:empty{display:none}
@media(max-width:650px){.review-card{padding:12px}.review-fields{gap:12px 8px}.review-confirm{min-height:44px}.batch-actions{flex-wrap:wrap}.batch-actions button{flex:1 1 120px}}
.review-error{font-size:13px;color:#a13d2b;overflow-wrap:anywhere}
.review-error:empty{display:none}
/* Fixed mobile actions use Safari's safe area; desktop layout stays untouched. */
.mobile-dock{display:none}
@media(max-width:650px){
  :root{--mobile-safe-bottom:env(safe-area-inset-bottom,0px);--mobile-dock-height:calc(76px + var(--mobile-safe-bottom))}
  body{padding-bottom:calc(var(--mobile-dock-height) + 16px)}
  html{scroll-padding-bottom:calc(var(--mobile-dock-height) + 16px)}
  .mobile-dock{position:fixed;z-index:20;inset:auto 0 0;display:grid;grid-template-columns:minmax(0,2.2fr) minmax(76px,1fr);gap:10px;align-items:stretch;padding:12px max(12px,env(safe-area-inset-right,0px)) calc(12px + var(--mobile-safe-bottom)) max(12px,env(safe-area-inset-left,0px));background:#fcfdf9;border-top:1px solid #d7dfcf;box-shadow:0 -4px 16px #253e3210}
  .mobile-dock a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 8px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:700;line-height:1.5;text-align:center;overflow-wrap:anywhere}
  .dock-manual{color:#325e44;background:#fff;border:1px solid #bacbb2}
  .mobile-dock a:focus-visible,.register-link:focus-visible{outline:2px solid #65885c;outline-offset:2px}
  .keyboard-open .mobile-dock{visibility:hidden;pointer-events:none}
  #batch{scroll-margin-top:20px}
}

/* Mobile: the persistent registration dock replaces the duplicate hero and top action. */
@media(max-width:650px){
  .intro,.mobile-actions{display:none}
  main{padding-top:12px}
}
/* Two-line summaries keep batch review short; edit fields open on demand. */
.review-card{padding:0;overflow:hidden}
.review-card details>summary{cursor:pointer;padding:12px;list-style:none;border-radius:10px;min-height:66px}
.review-card details>summary::-webkit-details-marker{display:none}
.review-card details>summary::after{content:'タップして詳細・編集 ▾';display:block;font-size:10px;color:#66785d;margin-top:4px}
.review-card details[open]>summary::after{content:'詳細を閉じる ▴'}
.review-card summary:focus-visible{outline:2px solid #65885c;outline-offset:-3px}
.review-first-line{display:flex;gap:6px;align-items:center;justify-content:space-between;min-width:0}
.review-first-line strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-badge{flex-shrink:0;font-size:10px;padding:2px 6px;border-radius:4px;background:#fff0dd;color:#8c482e}
.review-description{display:block;font-size:11px;color:#62725c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review-body{padding:0 12px 12px;border-top:1px solid #edf0e7}
.review-attention{display:block;width:calc(100% - 24px);margin:0 12px 8px;background:#fff7e9;color:#8c482e;text-align:left;border:0;min-height:40px;font-size:11px}
.review-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid #edf0e7}
.review-footer .review-confirm{margin:0;align-items:center;min-height:44px}
.review-footer button{min-height:44px}
.review-card.confirmed{border-color:#7f9b70}
.review-card.confirmed .review-badge{background:#e5efdf;color:#325e44}
.date-options{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.date-options p{flex-basis:100%;margin:0}
.date-option{flex:1 1 130px;min-height:44px}
.date-option[aria-pressed="true"]{border-color:#325e44;background:#e5efdf;color:#325e44}
@media(max-width:650px){.review-card{padding:0}.review-description{font-size:12px}.review-attention{min-height:44px}}
.batch-review-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}
.batch-review-tools button{min-height:44px;padding:10px 18px;font-weight:700;border-color:#7f9b70}
.batch-review-tools p{flex:1 1 160px;margin:0}
.review-blockers{margin:0 12px 10px;padding-left:20px;font-size:12px;line-height:1.7;color:#9a3e2d;overflow-wrap:anywhere}
.review-fields [aria-invalid="true"]{border-color:#bc674d}

/* Compact inventory rows on phones; actions stay available on expansion. */
.card-toggle{display:none}
@media(max-width:650px){
  .food-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:12px 14px;align-items:center}
  .food-icon{display:none}
  .food-content{grid-column:1;grid-row:1;min-width:0}
  .food-content h3{display:inline;font-size:15px;margin:0 6px 0 0}
  .food-content .quantity{display:inline;font-size:12px}
  .location-tag{display:inline-block;margin-right:7px;vertical-align:middle}
  .expiry{grid-column:2;grid-row:1;min-width:0;text-align:right}
  .expiry strong{font-size:12px;white-space:nowrap}
  .expiry span{font-size:10px;white-space:nowrap}
  .card-toggle{display:block;grid-column:1/-1;grid-row:2;justify-self:end;min-height:28px!important;padding:0 8px;font-size:11px;border:0;background:transparent;color:#62725c}
  .card-actions{display:none;grid-column:1/-1;grid-row:3;margin-top:2px;padding-top:8px}
  .food-card.expanded .card-actions{display:flex}
}

/* Single-line inventory on phones; the selected location tab makes its label redundant. */
.expiry-mobile{display:none}
@media(max-width:650px){
  .food-card{grid-template-columns:minmax(0,1fr) auto 35px;gap:6px;padding:8px 10px;min-height:54px}
  .food-content{grid-column:1;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .food-content h3{font-size:14px}
  .food-content .quantity{font-size:12px}
  .food-card.location-filtered .location-tag{display:none}
  .location-tag{font-size:9px;margin-right:5px;padding:2px 4px}
  .expiry{grid-column:2;grid-row:1}
  .expiry strong,.expiry>span:not(.expiry-mobile){display:none}
  .expiry .expiry-mobile{display:block;font-size:12px;font-weight:650;white-space:nowrap;color:#314b39;margin:0}
  .food-card.urgent .expiry-mobile{color:#bb503d}
  .card-toggle{grid-column:3;grid-row:1;display:block;justify-self:stretch;min-width:35px;width:35px;min-height:40px!important;padding:0 5px;font-size:23px;line-height:1;border:0;background:transparent}
  .card-actions{grid-column:1/-1;grid-row:2}
}
.sharing-panel{background:#fff;border:1px solid #dce3d4;border-radius:12px;padding:14px 18px;margin:0 0 22px}
.sharing-panel>summary{font-size:14px;font-weight:700;cursor:pointer;min-height:32px}
.sharing-panel p{font-size:12px;overflow-wrap:anywhere}
.sharing-panel label{font-size:13px;display:block}
.sharing-panel input{max-width:100%;min-width:0}
.sharing-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
#share-join{margin-top:15px;display:flex;align-items:flex-end;gap:10px}
#share-join label{flex:1;min-width:0}
#share-join button{flex-shrink:0}
#sharing-key-result{border:1px solid #bdcdaa;background:#f4f8ee;border-radius:8px;padding:14px;margin-top:14px}
#sharing-status{white-space:pre-wrap;color:#70523a}
@media(max-width:650px){.sharing-panel{padding:12px;margin-bottom:18px}#share-join{display:block}#share-join button{margin-top:10px;width:100%}.sharing-actions button{min-height:44px;flex:1 1 140px}.local{max-width:150px;white-space:normal}}
.recovery-entry{margin-top:18px;border-top:1px solid #dce3d4;padding-top:12px}
.recovery-entry>summary{cursor:pointer;font-size:13px;min-height:44px;display:flex;align-items:center}
#share-recover button{margin-top:10px;min-height:44px}
#sharing-recovery-fields{margin:14px 0;padding-top:12px;border-top:1px solid #c7d6bc}
#recovery-availability{font-size:12px}

/* Native radio inputs keep keyboard selection and form reset behavior. */
.location-choice{border:0;padding:0;margin:0 0 17px;min-width:0}
.location-choice legend{padding:0;font-size:12px;font-weight:600;margin-bottom:6px}
.location-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.location-options label{position:relative;margin:0;font-size:13px;font-weight:600;cursor:pointer;min-width:0}
.location-options input{position:absolute;inset:0;width:100%;height:100%;min-height:44px;padding:0;margin:0;opacity:0;z-index:1;cursor:pointer}
.location-options span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 4px;border:1px solid #cbd5c4;border-radius:7px;background:#fff;color:#3e5845}
.location-options input:checked+span{background:#325e44;color:#fff;border-color:#325e44}
.location-options input:focus-visible+span{outline:2px solid #65885c;outline-offset:2px}
.location-options input:disabled+span{opacity:.55;cursor:not-allowed}
.review-fields>.location-choice{grid-column:1/-1;margin-bottom:0}
.review-fields .location-options label{grid-column:auto}

/* Mobile dashboard: let the inventory list start immediately after compact counts. */
@media(max-width:650px){
  .summary{padding:9px 14px;margin-bottom:12px;gap:12px;border-radius:11px;align-items:center}
  .summary>div+div{padding-left:12px}
  .summary span{font-size:11px;line-height:1.25;display:block}
  .summary strong{font-size:25px;line-height:1.15;margin-top:3px}
  .summary small{font-size:11px;margin-left:4px}
  .section-title{display:none}
  .workspace{gap:10px}
  .toolbar{margin-bottom:10px;gap:8px}
}

/* Family navigation and recipes are separate from the inventory layout. */
[hidden]{display:none!important}
.main-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;position:sticky;top:0;z-index:10;background:#f7f8f3;padding:8px 0;margin-bottom:24px}
.main-tabs button{min-height:48px;font-size:15px;font-weight:700;border-color:#d3ddcb}
.main-tabs [aria-selected="true"]{background:#325e44;color:white;border-color:#325e44}
.coming-soon{background:white;border:1px solid #dce3d4;border-radius:12px;padding:28px;min-height:240px}
.recipe-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.recipe-heading h1{margin-bottom:0}.recipe-heading>.primary{width:auto;min-height:48px}
.recipe-storage-note,.recipe-help{font-size:13px;color:#62725c}
#recipe-status{font-size:14px;color:#93432e;white-space:pre-wrap;overflow-wrap:anywhere}
.recipe-reload{margin:0 0 18px}
.recipe-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.recipe-card,.recipe-detail,.recipe-form,.recipe-empty{background:#fff;border:1px solid #dce3d4;border-radius:12px;padding:22px;overflow-wrap:anywhere}
.recipe-card h2{margin:4px 0}.recipe-card p{font-size:13px}.recipe-meals{color:#62725c;font-size:13px}
.recipe-card button{width:100%;min-height:44px}
.recipe-detail{max-width:760px;margin:auto}.recipe-detail h3{margin:24px 0 10px}.recipe-detail li{margin-bottom:10px;white-space:pre-wrap}
.recipe-detail h2{margin-top:22px}.recipe-multiline{white-space:pre-wrap}
.recipe-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.recipe-actions .primary{width:auto;flex:1}
.recipe-form{max-width:760px;margin:16px auto}.recipe-form input,.recipe-form textarea,.recipe-form select{font-size:16px;min-width:0;max-width:100%}
.recipe-form label{font-size:14px}.recipe-form fieldset{min-width:0;border:1px solid #dce3d4;border-radius:8px;padding:14px;margin:12px 0}
.recipe-form legend{font-size:14px;font-weight:600}.recipe-form button{min-height:44px;font-size:14px}
.recipe-form>.recipe-actions{margin-top:24px}.recipe-form>label{margin-top:20px}
.recipe-meal-options{display:flex;gap:12px}.recipe-meal-options label{display:flex;align-items:center;gap:8px;margin:0;min-height:44px;flex:1}
.recipe-meal-options input{width:22px;height:22px;min-height:22px;margin:0;accent-color:#325e44}
.recipe-ingredient-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}.recipe-ingredient-row>button{grid-column:1/-1;justify-self:end}
.recipe-tasting-row textarea{min-height:88px}.recipe-tasting{border-top:1px solid #dce3d4;margin-top:16px}
.recipe-error{color:#93432e}.recipe-empty{min-height:180px}
#panel-recipes h2,#recipe-form{scroll-margin-top:80px}
body:not([data-main-tab="fridge"]){--mobile-dock-height:0px}
@media(max-width:650px){
  .main-tabs{gap:4px;margin-bottom:18px;padding:6px 0}.main-tabs button{font-size:14px;padding:8px 4px}
  .recipe-heading{align-items:flex-start}.recipe-heading h1{font-size:25px}.recipe-heading>.primary{font-size:13px;padding:12px 10px}
  .recipe-form,.recipe-detail,.recipe-card{padding:16px}.recipe-ingredient-row{grid-template-columns:1fr 1fr}
  .recipe-ingredient-row>label:first-of-type{grid-column:1/-1}.recipe-meal-options{gap:6px}
  .recipe-actions button{flex:1 1 120px}.coming-soon{padding:22px}
  body:not([data-main-tab="fridge"]) main{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:650px){
  .recipe-form .recipe-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .recipe-form .recipe-actions .primary{width:100%}
}
.recipe-form input,.recipe-form select,.recipe-form textarea{scroll-margin-top:86px;scroll-margin-bottom:100px}

/* Compact recipe list: one or two lines per recipe on mobile. */
@media(max-width:650px){
  .recipe-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .recipe-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;align-items:center;padding:9px 12px}
  .recipe-card .recipe-meals{grid-column:1;grid-row:1;font-size:10px;margin:0;line-height:1.3}
  .recipe-card h2{grid-column:1;grid-row:2;font-size:15px;line-height:1.4;margin:0}
  .recipe-card p:not(.recipe-meals){grid-column:1;grid-row:3;font-size:10px;color:#70806c;margin:0}
  .recipe-card .recipe-open{grid-column:2;grid-row:1/4;width:auto;min-height:44px;padding:7px 10px;font-size:12px}
}
.recipe-heading-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.recipe-heading-actions .primary{width:auto}
.recipe-import-workspace>button{margin:8px 4px 8px 0}
.recipe-import-workspace label{display:block;margin:12px 0;font-size:14px}
.recipe-import-workspace textarea{font-size:16px}
.recipe-import-card{border:1px solid #dce3d4;border-radius:10px;margin:16px 0;padding:14px;overflow-wrap:anywhere}
.recipe-import-card h3{margin:0}.recipe-import-card summary{min-height:44px;cursor:pointer}
.recipe-import-confirm{display:flex!important;align-items:center;gap:10px;min-height:44px}
.recipe-import-confirm input{width:22px;height:22px;min-height:22px;margin:0;flex-shrink:0}
.recipe-import-card p,.recipe-import-card li{white-space:pre-wrap}
@media(max-width:650px){.recipe-heading-actions{max-width:190px}.recipe-heading-actions button{min-height:44px;font-size:13px}.recipe-import-workspace{padding:14px}}

/* Mobile recipe screen: prioritize saved recipes over explanatory UI. */
@media(max-width:650px){
  .recipe-heading{gap:8px;align-items:center;margin-bottom:8px}
  .recipe-heading .eyebrow{display:none}
  .recipe-heading h1{font-size:20px;line-height:1.3}
  .recipe-heading-actions{max-width:none;gap:6px}
  .recipe-heading-actions button{font-size:11px;min-height:42px;padding:7px 9px}
  .recipe-storage-note{font-size:10px;line-height:1.5;margin:2px 0 6px}
  #recipe-status{font-size:12px;line-height:1.5;margin:5px 0}
  #recipe-status:empty{display:none}
  .recipe-reload{display:block;width:max-content;margin:0 0 8px auto;border:0;background:transparent;color:#70806c;font-size:11px;min-height:32px;padding:3px 6px}
}
.shopping-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.shopping-heading h1{margin-bottom:0}
.shopping-help{font-size:12px;color:#62725c}#shopping-status{font-size:13px;color:#93432e;white-space:pre-wrap;overflow-wrap:anywhere}
#shopping-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:10px;align-items:end;background:#fff;border:1px solid #dce3d4;border-radius:10px;padding:14px;margin-top:14px}
#shopping-form label{margin:0;min-width:0}#shopping-form input{font-size:16px;min-width:0}#shopping-form button{min-height:44px}
#shopping-cancel{grid-column:1/-1}.shopping-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0}.shopping-toolbar p{font-size:12px;margin:0}
.shopping-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px;background:#fff;border:1px solid #dce3d4;border-radius:9px;padding:8px 10px;margin-bottom:7px}
.shopping-item label{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;cursor:pointer}.shopping-item input{width:24px;height:24px;min-height:24px;flex-shrink:0;margin:0;accent-color:#325e44}
.shopping-item label span{min-width:0}.shopping-item strong{display:block;font-size:15px;overflow-wrap:anywhere}.shopping-item small{display:block;font-size:11px;color:#62725c;overflow-wrap:anywhere}
.shopping-item.purchased strong{text-decoration:line-through;color:#738072}.shopping-item button{min-height:44px;padding:8px;font-size:12px}
@media(max-width:650px){.shopping-heading{align-items:flex-start}.shopping-heading h1{font-size:25px}.shopping-heading .local{max-width:160px}#shopping-form{grid-template-columns:minmax(0,1fr) 90px;gap:8px;padding:12px}#shopping-submit{grid-column:1/-1}.shopping-item{padding:6px 8px;gap:4px}.shopping-item button{padding:8px 6px;min-width:44px}}

/* Make the shopping checkbox meaning explicit. */
.shopping-purchase-state{display:block;font-size:11px;line-height:1.4;color:#738072;margin-top:2px}
.shopping-item.purchased .shopping-purchase-state{color:#325e44;font-weight:700}

/* Shopping: show item and optional quantity inline; retain explicit purchased state. */
.shopping-item label>span{display:flex;align-items:center;flex-wrap:wrap;column-gap:7px;row-gap:0}
.shopping-item label strong,.shopping-item label small,.shopping-item .shopping-purchase-state{display:inline;margin:0}
.shopping-item .shopping-purchase-state{font-size:10px}
#shopping-refresh[hidden]{display:none!important}
@media(max-width:650px){
 .shopping-heading .eyebrow,.shopping-heading h1{display:none}
 .shopping-heading{justify-content:flex-end;margin-bottom:4px}
 .shopping-help{font-size:10px;line-height:1.5;margin:2px 0 5px}
 .shopping-item label strong{font-size:14px}
 .shopping-item{padding:5px 8px}
}

#shopping-purchased{margin-top:20px}
#shopping-purchased-title{font-size:14px;color:#62725c;margin:0 0 8px}
.shopping-item.purchased{background:#edf5e9;border-color:#d4e3cc}
.shopping-item label>span{display:flex;align-items:baseline;flex-wrap:nowrap;gap:6px;flex:1}
.shopping-item strong{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopping-item small{flex:0 1 auto;max-width:45%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.shopping-item .shopping-purchase-state{flex:0 1 auto;max-width:35%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Purchased rows are distinguished by their section and green background, not strike-through. */
.shopping-item.purchased strong{text-decoration:none;color:#314b39}

/* Shopping mobile: keep refresh and necessary feedback compact. */
@media(max-width:650px){
 .shopping-heading{display:none}
 .shopping-help{display:none}
 .shopping-refresh-row{display:flex;justify-content:flex-end;margin:2px 0 4px}
 #shopping-refresh{min-height:36px;padding:5px 10px;font-size:12px}
 #shopping-form{margin-top:4px}
 #shopping-status{font-size:11px;line-height:1.4;margin:5px 0}
 #shopping-status:empty{display:none}
}

/* Shopping keeps the list visible; the form opens without replacing its draft DOM. */
.shopping-topbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 8px}
.shopping-topbar #shopping-refresh{min-height:44px;padding:5px 10px;font-size:12px}
.shopping-add-dock .primary{width:auto;min-height:48px}
#shopping-form-title{grid-column:1/-1;font-size:17px;margin:0}
#shopping-form{scroll-margin-top:86px}#shopping-form input{scroll-margin-top:90px;scroll-margin-bottom:100px}
.shopping-purchased-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.shopping-purchased-heading #shopping-purchased-title{margin:0}
.shopping-purchased-heading #shopping-cleanup{min-height:44px;padding:6px 10px;font-size:12px}
.shopping-toolbar{margin:8px 0 12px}
@media(max-width:650px){
  .shopping-topbar{margin:0 0 4px}
  .shopping-add-dock{position:fixed;z-index:20;inset:auto 0 0;padding:12px max(12px,env(safe-area-inset-right,0px)) calc(12px + var(--mobile-safe-bottom)) max(12px,env(safe-area-inset-left,0px));background:#fcfdf9;border-top:1px solid #d7dfcf;box-shadow:0 -4px 16px #253e3210}
  .shopping-add-dock .primary{width:100%;font-size:16px;min-height:48px}
  body[data-main-tab="shopping"]{padding-bottom:calc(var(--shopping-dock-height,76px) + 16px)}
  body[data-main-tab="shopping"] main{padding-bottom:0}
  body[data-main-tab="shopping"].shopping-form-open{padding-bottom:calc(24px + var(--mobile-safe-bottom))}
  html.shopping-active{scroll-padding-bottom:calc(var(--shopping-dock-height,76px) + 16px)}
  .shopping-keyboard-open .shopping-add-dock,.keyboard-open .shopping-add-dock{visibility:hidden;pointer-events:none}
  #shopping-form{margin:0 0 12px}
  #shopping-cancel{min-height:44px}
}
.meal-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.meal-heading h1{margin:0}.meal-heading button{min-height:44px}
.meal-help,#meal-shopping-target{font-size:12px;color:#62725c;margin:8px 0}#meal-status{font-size:13px;color:#93432e;white-space:pre-wrap;overflow-wrap:anywhere}
#meal-selectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}#meal-selectors label{font-size:14px;min-width:0}#meal-selectors select{font-size:16px;min-width:0;max-width:100%}
.meal-material-title{font-size:18px;margin:20px 0 12px}.meal-material,.meal-review-card{background:#fff;border:1px solid #dce3d4;border-radius:10px;padding:12px;margin-bottom:10px;overflow-wrap:anywhere}
.meal-material.available{background:#f2f7ee}.meal-material.unknown{border-color:#d6b98e}.meal-material-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.meal-material-heading label{display:flex;align-items:center;gap:10px;min-height:44px;min-width:0}.meal-material input,.meal-confirm-label input{width:22px;height:22px;min-height:22px;flex-shrink:0;margin:0;accent-color:#325e44}
.meal-state{font-size:12px;white-space:nowrap;font-weight:700}.meal-source{font-size:11px;color:#62725c;white-space:pre-wrap;margin:0 0 6px}.meal-amount{font-size:12px;margin:4px 0}.meal-reason,.meal-warning{font-size:12px;color:#93432e;margin:6px 0}
#meal-prepare{width:100%;min-height:48px}#meal-review{margin-top:20px}#meal-review h2{font-size:18px}#meal-review>p{font-size:12px}.meal-review-card h3{font-size:16px;margin:0 0 8px}.meal-review-card label{font-size:13px;display:block}.meal-review-card input{font-size:16px}
.meal-confirm-label{display:flex;align-items:center;gap:10px;min-height:48px;font-size:13px;margin:14px 0}#meal-add{min-height:48px}
@media(max-width:650px){.meal-heading h1{font-size:24px}#meal-selectors{grid-template-columns:minmax(0,1fr);gap:10px}#meal-selectors label{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center}#meal-selectors select{margin:0}.meal-material{padding:10px}}

/* Meal v1.1: scoped to the meal panel; all slots retain their own selection. */
#meal-status{color:#62725c}#meal-status.meal-error{color:#93432e;font-weight:700}
#meal-selectors{display:block;margin:12px 0}#meal-selectors label[hidden]{display:none}
.meal-time-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
.meal-time-switch button{min-width:0;min-height:44px;margin:0}.meal-time-switch button[aria-pressed="true"]{background:#325e44;color:#fff;border-color:#325e44}
#meal-selectors select{width:100%;text-overflow:ellipsis}#meal-selectors label{min-width:0}
.meal-material-heading strong{min-width:0;overflow-wrap:anywhere}.meal-state{flex-shrink:0}
#meal-prepare{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:2;background:#325e44;color:#fff;box-shadow:0 2px 8px #0002}
#meal-review{scroll-margin-top:12px}#meal-add{width:100%}

.meal-material .meal-source{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#meal-prepare:disabled{position:static;box-shadow:none}

#family-transfer{font-size:12px;overflow-wrap:anywhere}#family-transfer:empty{display:none}#family-transfer button{min-height:44px;max-width:100%;white-space:normal}#family-transfer details{margin:8px 0}#family-transfer summary{min-height:36px;cursor:pointer}#family-status{white-space:pre-wrap;color:#93432e}#family-migration:not(:empty){background:#f2f7ee;border:1px solid #dce3d4;padding:12px;border-radius:10px;margin:10px 0}#family-migration h2{font-size:16px}#family-migration label{display:flex;align-items:center;gap:8px;min-height:44px}#family-migration input{width:22px;min-height:22px;flex-shrink:0}#family-transfer input[type=file]{font-size:16px;width:100%;min-width:0}#family-migrate{width:100%}

#purchase-tools,#purchase-suggestions{font-size:13px;overflow-wrap:anywhere}#purchase-tools summary,#purchase-suggestions summary{min-height:44px;cursor:pointer}#purchase-status{white-space:pre-wrap;color:#93432e}#purchase-review{margin:12px 0;padding:12px;background:#f2f7ee;border:1px solid #dce3d4;border-radius:10px;scroll-margin-top:10px}#purchase-review h2{font-size:18px}#purchase-review p{font-size:12px}.purchase-review-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;padding:10px 0;border-bottom:1px solid #dce3d4}.purchase-review-row select,.purchase-review-row input:not([type=checkbox]),.purchase-review-row small{grid-column:1/-1;min-width:0;width:100%;font-size:16px}.purchase-review-row small{font-size:12px}.purchase-review-row input[type=checkbox],#purchase-confirm{width:22px;height:22px;min-height:22px;margin:0}#purchase-review>label{display:flex;gap:8px;align-items:center;min-height:48px}#purchase-save{width:100%;min-height:48px;background:#325e44;color:white}.purchase-history-row{border-bottom:1px solid #dce3d4;padding:6px 0}.purchase-history-row form label{display:block}.purchase-history-row input{font-size:16px}.purchase-suggestion{padding:8px 0}.purchase-suggestion button{min-height:44px}.purchase-recent{display:block;font-size:11px;color:#62725c}

#purchase-status.purchase-info{color:#62725c;font-size:12px}

#purchase-review{scroll-margin-top:86px}.purchase-review-row input,.purchase-review-row select,.purchase-history-row input{scroll-margin-top:90px;scroll-margin-bottom:100px}body[data-main-tab="shopping"].purchase-review-open .shopping-add-dock{display:none}