/* Keep the existing tablet/desktop planner; compact only below 701px. */
#visualPlanner .calendar-compact-name{display:none}
#visualPlanner .calendar-hint .calendar-wide-name{display:inline}
.calendar-meal-meta{display:block;color:#617267;font-size:13px;line-height:1.4;grid-column:2;margin-top:-6px;padding-right:44px}
.calendar-edit-head{display:flex;align-items:center;gap:14px;margin:8px 0 12px}
.calendar-edit-head .calendar-edit-photo{flex:0 0 88px;width:88px;height:88px;aspect-ratio:1;border-radius:18px}
.calendar-edit-head>div:last-child{min-width:0}
.calendar-edit-head h2{font-size:21px;line-height:1.25;margin:4px 0;overflow-wrap:anywhere}
.calendar-edit-head .calendar-edit-label{margin:0;font-size:14px}
.calendar-edit-time,.calendar-edit-note{font-size:14px;line-height:1.4;color:#52675a;margin:8px 0}
.calendar-recipe-back{min-height:44px;margin-bottom:12px;background:#eef5f0;color:#216747}
.calendar-edit-actions button{overflow-wrap:anywhere;min-height:44px}
.calendar-edit-actions>.primary{line-height:1.4}
@media(max-width:700px){
  #menuView.active{display:flex;flex-direction:column}
  #menuView>.ux-back{order:-2;margin-bottom:4px;align-self:flex-start}
  #menuView>.section-title{display:contents}
  #menuView>.section-title>div{order:-1;margin-bottom:12px}
  #menuView>.section-title .label{display:none}
  #menuView>.section-title h2{font-size:24px!important}
  #menuView>.section-title>.btn{order:8;align-self:flex-start;margin:16px 0 0;min-height:44px}
  #menuView #planSummary,#menuView .plan-buy-summary{display:contents}
  #menuView .plan-buy-tabs{order:0;margin:0 0 4px}
  #menuView #weekPlanner,#menuView #monthPlanner{order:1;min-width:0}
  #menuView .plan-buy-amount{order:2;margin:12px 0 8px;padding:14px;background:#f2f7f3;border-radius:18px}
  #menuView .plan-buy-note{order:3;margin:4px 0 10px}
  #menuView .plan-buy-summary>.primary{order:4;min-height:46px}
  #visualPlanner .calendar-heading{margin:8px 0;gap:8px}
  #visualPlanner .calendar-heading h3{font-size:17px}
  #visualPlanner .calendar-hint{font-size:13px;line-height:1.4;margin:10px 0}
  #visualPlanner .calendar-hint .calendar-wide-name{display:none}
  #visualPlanner .calendar-hint .calendar-compact-name{display:inline}
  #visualPlanner:not(.calendar-scope-day) .calendar-scroll{overflow:visible;min-width:0}
  #visualPlanner:not(.calendar-scope-day) .meal-calendar{min-width:0;width:100%;table-layout:fixed}
  #visualPlanner:not(.calendar-scope-day) .meal-calendar th,#visualPlanner:not(.calendar-scope-day) .meal-calendar td{padding:4px;vertical-align:middle}
  #visualPlanner:not(.calendar-scope-day) .meal-calendar thead th{font-size:13px;padding:11px 2px}
  #visualPlanner:not(.calendar-scope-day) .meal-calendar tr>:first-child{width:39px;position:static}
  #visualPlanner:not(.calendar-scope-day) .calendar-wide-name{display:none}
  #visualPlanner:not(.calendar-scope-day) .calendar-compact-name{display:inline}
  #visualPlanner:not(.calendar-scope-day) .calendar-day{font-size:13px;min-height:60px;text-align:center;padding:0}
  #visualPlanner:not(.calendar-scope-day) .calendar-day-cart,#visualPlanner:not(.calendar-scope-day) .calendar-photo,#visualPlanner:not(.calendar-scope-day) .calendar-plus{display:none}
  #visualPlanner:not(.calendar-scope-day) .calendar-slot{min-height:68px;display:flex;align-items:stretch}
  #visualPlanner:not(.calendar-scope-day) .calendar-dish{width:100%;min-height:68px;padding:3px 0}
  #visualPlanner:not(.calendar-scope-day) .calendar-recipe-name{font-size:14px!important;line-height:1.3;font-weight:600;margin:0;padding:0;overflow-wrap:anywhere;-webkit-line-clamp:3}
  #visualPlanner:not(.calendar-scope-day) .calendar-empty{min-height:68px;width:100%;gap:2px;border-radius:10px;padding:4px 1px}
  #visualPlanner:not(.calendar-scope-day) .calendar-empty>span{font-size:23px}
  #visualPlanner:not(.calendar-scope-day) .calendar-empty small{font-size:12px;line-height:1.25;overflow-wrap:anywhere}
  #visualPlanner.calendar-scope-day .calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin:0 0 8px}
  #visualPlanner.calendar-scope-day .calendar-days button{padding:0;font-size:13px;min-width:0}
  #visualPlanner.calendar-scope-day .meal-calendar td{padding:10px;margin:7px 0}
  #visualPlanner.calendar-scope-day .meal-calendar td:before{margin-bottom:6px}
  #visualPlanner.calendar-scope-day .calendar-slot{min-height:60px}
  #visualPlanner.calendar-scope-day .calendar-plus{display:none}
  #visualPlanner.calendar-scope-day .calendar-dish{grid-template-columns:64px minmax(0,1fr);gap:4px 12px;padding:0}
  #visualPlanner.calendar-scope-day .calendar-photo{grid-row:1/3;width:64px;height:60px}
  #visualPlanner.calendar-scope-day .calendar-recipe-name{font-size:15px!important;line-height:1.25;overflow-wrap:anywhere}
  #visualPlanner.calendar-scope-day .calendar-meal-meta{grid-column:2;margin:0;padding:0;font-size:13px}
  #visualPlanner.calendar-scope-day .calendar-empty{min-height:60px}
}

/* V5.42 · Centered dishes and a quieter, rounded planner. */
#visualPlanner .calendar-heading{gap:12px}
#visualPlanner .calendar-heading h3{font-weight:700;letter-spacing:-.025em;color:#234c37}
#visualPlanner .calendar-arrow{border-color:#e1e9e4;box-shadow:0 2px 7px rgba(25,60,40,.04)}
#visualPlanner:not(.calendar-scope-day) .calendar-scroll{border:1px solid #e2e9e5;border-radius:22px;box-shadow:0 5px 20px rgba(25,60,40,.035);overflow:hidden}
#visualPlanner:not(.calendar-scope-day) .meal-calendar th,
#visualPlanner:not(.calendar-scope-day) .meal-calendar td{border-color:#e8eeea}
#visualPlanner:not(.calendar-scope-day) .meal-calendar thead th{background:#edf5f0;color:#365e47;font-weight:650}
#visualPlanner:not(.calendar-scope-day) .meal-calendar tbody th{background:#f7faf8}
#visualPlanner .calendar-dish{text-align:center;border-radius:12px}
#visualPlanner .calendar-recipe-name{text-align:center;padding-right:0;letter-spacing:-.01em}
#visualPlanner .calendar-meal-meta{text-align:center;padding-right:0}
#visualPlanner .calendar-day{text-align:center}
#visualPlanner .calendar-photo{border-radius:14px}
#visualPlanner .calendar-empty{border-color:#d4e1d8;background:#f8faf9}
#visualPlanner .calendar-hint{color:#607568;text-align:center;line-height:1.5}
#visualPlanner.calendar-scope-day .meal-calendar td{border-color:#e3eae5;border-radius:20px;box-shadow:0 3px 12px rgba(25,60,40,.035)}
#visualPlanner.calendar-scope-day .meal-calendar td:before{letter-spacing:.01em}
#visualPlanner .calendar-dish:focus-visible{outline:3px solid #168458;outline-offset:-3px}
@media(min-width:701px){
  #visualPlanner:not(.calendar-scope-day) .calendar-scroll{overflow-x:auto}
  #visualPlanner:not(.calendar-scope-day) .calendar-recipe-name{font-size:14px!important;line-height:1.4;margin:10px 4px 4px}
}
@media(max-width:700px){
  #visualPlanner .calendar-heading{margin:12px 0}
  #visualPlanner:not(.calendar-scope-day) .meal-calendar td{padding:4px;background:#fff}
  #visualPlanner:not(.calendar-scope-day) .meal-calendar thead th{padding:13px 2px}
  #visualPlanner:not(.calendar-scope-day) .calendar-dish{display:flex;align-items:center;justify-content:center;min-height:72px;padding:7px 3px;background:#f5f8f6;border:1px solid #edf1ee;border-radius:11px}
  #visualPlanner:not(.calendar-scope-day) .calendar-recipe-name{width:100%;font-weight:550;line-height:1.35;color:#294635;hyphens:auto}
  #visualPlanner:not(.calendar-scope-day) .calendar-empty{min-height:72px;border-radius:11px}
  #visualPlanner:not(.calendar-scope-day) .calendar-day{font-weight:700;color:#426650}
  #visualPlanner.calendar-scope-day .calendar-dish{text-align:center}
  #visualPlanner .calendar-dish:active{background-color:#e6f1e9}
}
@media(hover:hover){
  #visualPlanner .calendar-dish:hover{background-color:#eef5f0}
  #visualPlanner .calendar-arrow:hover,#visualPlanner .calendar-day:hover{background-color:#e8f2ec}
}