body:has(#create:not([hidden])) main { margin:clamp(8px,2vh,20px) auto; }
#create { max-width:580px; }
#create .intro { margin:3px 0 12px; }
#create #newMeal .columns { display:block; }
#create #newMeal .columns > section, #create #extrasPage { padding:12px 18px; border:0; }
#create .createTabs, #create .dayPager, .createDialog .dialogBar { display:flex; align-items:center; gap:8px; }
.createTabs { border-bottom:1px solid #d7dfd8; padding:4px 10px; }
.createTabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:#45604d; padding:6px 10px; }
.createTabs button[aria-pressed=true] { color:#174e32; border-bottom-color:#357347; font-weight:bold; }
.createTabs small { font-weight:normal; }
#create h2 { font-size:19px; line-height:1.2; margin:0 0 8px; }
#create .dayPager { justify-content:space-between; margin:5px 0; }
#create .dayPager button { min-width:36px; padding:3px 9px; }
#create .dayPager span { color:#395640; font-size:13px; }
#create #dayRows .daySchedule { margin:5px 0 0; padding:4px 9px 7px; }
#create #dayRows .daySchedule > button { display:inline-block; margin:6px 4px 0 0; }
#create #dayRows:has(.daySchedule:nth-child(2)) .daySchedule > legend { position:absolute; clip-path:inset(50%); width:1px; height:1px; }
#create #openZone { display:block; margin-top:6px; min-height:28px; }
#create #rangeNote, #create #dayHint, #create #lookupNotice { font-size:12px; margin:3px 0; }
#create #lookupNotice:empty, #create #rangeNote:empty, #create #providerHelp:empty { display:none; }
#create .actions { display:grid; grid-template-columns:minmax(50px,1fr) auto auto; gap:6px; margin:0; padding:8px 12px; }
#create .actions .primary { width:auto; grid-column:3; }
#create #pollSummary { margin:0; font-size:13px; line-height:1.25; }
#create #monthNav, #create #calendar { max-width:100%; }
#create #monthNav { margin:6px 0 4px; }
#create #calendar { gap:2px; }
#create #calendar button { min-height:32px; }
#create #selection { margin:4px 0 0; font-size:13px; }
#create .extraFields { margin:0; gap:8px; }
#create .extraFields label { margin:0; }
#create .extraFields textarea, #create .extraFields input { margin-top:2px; }
#create .createDialog {
  width:min(460px,calc(100vw - 20px)); max-height:calc(100dvh - 16px);
  margin:auto; padding:14px; border:1px solid #93aa99; border-radius:12px;
  color:#1a3022; background:white;
}
.createDialog::backdrop { background:#172a2099; }
.createDialog .dialogBar { justify-content:space-between; padding-bottom:8px; }
.createDialog p { margin:6px 0; }
.createDialog input, .createDialog textarea { max-width:100%; }
.createDialog > textarea, .createDialog > input { display:block; width:100%; margin:5px 0; }
.createDialog > a, .createDialog > button { display:inline-block; margin:6px 5px 0 0; }
.createDialog .timePager { width:100%; }
#create #lookup { background:#fff; padding:14px; }
#create #occasionChoices .choiceRail { justify-content:flex-start; }
#create #occasionChoices { margin:4px 0; }
#create #zoneDialog .zoneBox .choiceRail { flex-wrap:wrap; }
#create #zoneDialog .choiceRail button { max-width:100%; overflow-wrap:anywhere; }
@media(max-width:700px) {
  body:has(#create:not([hidden])) header { padding:5px 12px; }
  body:has(#create:not([hidden])) header a { font-size:20px; }
  body:has(#create:not([hidden])) header img { width:25px; }
  #create h1 { font-size:clamp(21px,6vw,32px); line-height:1.12; margin:0; }
  #create .intro { font-size:13px; line-height:1.28; margin:3px 0 7px; }
  #create .createTabs { gap:0; }
  #create .createTabs button { flex:1; white-space:nowrap; }
  #create #newMeal .columns > section, #create #extrasPage { padding:7px 10px; }
  #create h2 { font-size:17px; margin-bottom:4px; }
  #create #daysPage > .choiceField, #create #timesPage > .choiceField { font-size:12px; }
  #create #calendar button { min-height:32px; padding:2px 4px; }
  #create .actions { padding:6px 8px; }
  #create .actions button { padding:6px 8px; min-height:36px; }
  #create .extraFields { grid-template-columns:1fr; }
  #create #newMeal .choiceRail button { padding:4px 7px; }
  #create #sharedHours, #create #dayEditor { margin-top:4px; }
  #create .daySchedule .timeFields { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  #create #dayHint { margin:2px 0; }
}
#create .actions { position:static; }
@media(max-height:635px) and (max-width:700px) {
  body:has(#create:not([hidden])) main { margin:4px auto; }
  #create #daysPage h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #create #daysPage > .choiceField { font-size:0; }
  #create #daysPage > .choiceField .choiceBox { font-size:14px; }
  #create .createTabs button { min-height:30px; padding-block:3px; }
  #create .actions button { white-space:nowrap; }
  #create #calendar { gap:1px; }
  #create #calendar button { min-height:30px; }
  #create .intro { margin-bottom:4px; }
  body:has(#create:not([hidden])) #message:empty { margin:0; }
}
#occasionWord { max-width:100%; overflow-wrap:anywhere; }
#create:not([data-page=daysPage]) > .intro { display:none; }
@media(max-width:700px) {
  #create:not([data-page=daysPage]) > h1 { display:none; }
}
@media(min-width:701px) and (max-height:760px) {
  body:has(#create:not([hidden])) header { padding:7px 4vw; }
  body:has(#create:not([hidden])) main { margin:8px auto; }
  #create h1 { font-size:30px; line-height:1.1; margin:4px 0; }
  body:has(#create:not([hidden])) #message:empty { margin:0; }
}

/* On shallow screens the setup rail and active editor sit alongside one another. */
@media(min-width:520px) and (max-height:610px) {
  body:has(#create:not([hidden])) header { padding:3px 12px; }
  body:has(#create:not([hidden])) header a { font-size:18px; }
  body:has(#create:not([hidden])) header img { width:21px; }
  body:has(#create:not([hidden])) main { margin:4px auto; padding-inline:8px; }
  body:has(#create:not([hidden])) #message:empty { margin:0; }
  #create:not([hidden]) { display:grid; grid-template-columns:minmax(135px,.44fr) minmax(0,1fr); grid-template-rows:auto auto 1fr auto; gap:4px 10px; max-width:900px; align-items:start; }
  #create #newMeal, #create #newMeal > .columns { display:contents; }
  #create > h1, #create:not([data-page=daysPage]) > h1 { display:block; grid-area:1/1; text-align:left; font-size:20px; line-height:1.12; margin:0; }
  #create > .intro { grid-area:2/1; text-align:left; margin:0; font-size:12px; line-height:1.2; }
  #create .createTabs { grid-area:3/1; flex-direction:column; padding:0; border:0; gap:1px; align-items:stretch; }
  #create .createTabs button { text-align:left; padding:2px 5px; border:0; min-height:28px; }
  #create .createTabs button[aria-pressed=true] { background:#e1eee0; border-radius:4px; }
  #create #newMeal > .actions { grid-area:4/1; display:flex; flex-direction:column; align-items:stretch; gap:4px; margin:0; padding:0; background:none; border:0; }
  #create #newMeal > .actions .primary { min-height:30px; padding:4px 8px; }
  #create #editTimes { display:none; }
  #create #newMeal .columns > section, #create #extrasPage { grid-area:1/2/5/3; min-width:0; padding:5px 8px; border:1px solid #c6d5c8; border-radius:8px; background:white; }
  #create #daysPage h2, #create #timesPage h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #create #daysPage > .choiceField, #create #timesPage > .choiceField { font-size:0; }
  #create .choiceRail { margin:2px 0; }
  #create #newMeal .choiceRail button { font-size:13px; min-height:26px; padding:2px 7px; }
  #create #monthNav { margin:2px 0; }
  #create #monthNav button { min-height:26px; padding:0 12px; }
  #create #calendar { gap:1px; }
  #create #calendar button { min-height:27px; padding:1px 3px; }
  #create #selection { margin:2px 0 0; font-size:12px; }
  #create #sharedHours, #create #dayEditor { margin-top:3px; }
  #create #dayRows .daySchedule { padding:3px 6px; margin:2px 0 0; }
  #create .dayPager { margin:1px 0; }
  #create #editDayPager button, #create #openLookup, #create .daySchedule > button { padding:2px 6px; min-height:26px; }
  #create #newMeal .daySchedule > button { margin-top:2px; }
  #create #openZone { min-height:23px; margin:1px 0; padding:1px 3px; }
  #create #rangeNote, #create #lookupNotice, #create #dayHint { margin:1px 0; }
  #create #newMeal .extraFields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #create #newMeal .extraFields label:last-child { grid-column:1/-1; }
  #create .createDialog { width:min(600px,calc(100vw - 16px)); padding:8px 12px; }
  #create #zoneDialog .zoneBox { display:grid; grid-template-columns:1fr auto; }
  #create #zoneDialog .zoneBox input { grid-area:1/1; }
  #create #zoneDialog .zoneBox .textButton { grid-area:1/2; }
  #create #zoneDialog .zoneBox .choiceRail { grid-area:2/1/3/3; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
  #create #zoneDialog .choiceRail button { min-height:24px; padding:1px 4px; }
}
@media(min-width:520px) and (max-height:410px) {
  #create .createTabs { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
  #create .createTabs button:last-child { grid-column:1/-1; }
  #create > h1, #create:not([data-page=daysPage]) > h1 { font-size:18px; }
  #create:has(#customOccasion:not(:disabled)) #occasionStory { display:none; }
}
@media(min-width:490px) and (max-height:480px) {
  #create .createDialog.pasteReview[open] { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; align-items:start; }
  .pasteReview .dialogBar,.pasteReview > .hint:first-of-type { grid-column:1/-1; }
  .pasteReview > input { grid-column:1; grid-row:3; }
  .pasteReview > textarea { grid-column:1; grid-row:4; }
  .pasteReview > .quickRow { grid-column:2; grid-row:3/span 2; }
  .pasteReview > button { grid-column:2; }
  .pasteReview > p:empty { display:none; }
}