/* The availability screen is a board, with the rest of the meal one tab away. */
body:has(#event:not([hidden])) { background:white; }
body:has(#event:not([hidden])) header { padding:5px max(14px,4vw); }
body:has(#event:not([hidden])) header a { font-size:20px; }
body:has(#event:not([hidden])) header img { width:23px; height:23px; }
body:has(#event:not([hidden])) main { max-width:1170px; margin:10px auto 0; padding-inline:clamp(8px,2vw,24px); }
#event #mealTitle { font-size:clamp(20px,2.3vw,28px); text-align:start; line-height:1.08; margin:0 0 3px; }
#event .intro { font-size:14px; text-align:start; margin:2px 0; }
#event .invite { top:2px; right:max(10px,4vw); }
#event .viewBar { margin:5px 0 3px; background:white; }
#event .viewBar button { min-height:32px; padding-block:4px; }
#event #signed { margin:3px 0; justify-content:flex-start; gap:8px; }
#event #signed button,#event #passwordToggle { min-height:24px; font-size:12px; }
#event #planDetails { margin:2px 0; }
#event #join { border:0; border-radius:0; box-shadow:none; background:#f1f6ef; padding:10px 12px; }
#event #join .fields { align-items:end; }
#event #join h2 { margin:0 0 4px; font-size:17px; }
#event #join :is(#joinError,#joinReason):empty, #message:empty { display:none; }
#event .pollTools { margin:3px 0; align-items:center; }
#showResults { color:#165637; background:transparent; border:0; padding:2px 0; text-decoration:underline; font-size:14px; }
#event .boards { gap:clamp(12px,2vw,24px); align-items:flex-start; }
#event .boards > section,#event #personal { border:0; box-shadow:none; padding:4px 0; background:white; }
#event .boards h2 { font-size:18px; margin:0 0 2px; }
#event .boards .hint,#event .personalKey,#event #heatKey { margin:2px 0 4px; font-size:12px; }
#event .boards .scroll { max-height:none; overflow:visible; }
#event .grid { width:100%; min-width:0; }
#event .grid .dayToggle { border-radius:0; min-height:38px; line-height:1.1; position:static; }
#event .grid .time,#event .grid b { position:static; font-variant-numeric:tabular-nums; }
#event .grid b { font-size:11px; padding:2px 0; align-content:center; }
#event .grid .time { font-size:11px; white-space:nowrap; align-content:center; }
#event .slot,#event .hole { height:18px; min-height:0; }
#event .gridHelp { display:none; }
#gridPages { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 18px; margin:5px 0 2px; }
#gridPages > div,.miniPages { display:flex; gap:5px; align-items:center; justify-content:center; }
#gridPages button { min-width:32px; min-height:28px; padding:1px 7px; color:#1b5034; font-size:18px; line-height:1; }
#gridPages span { font-size:12px; font-variant-numeric:tabular-nums; }
.plainDialog { max-width:min(94vw,34rem); border:1px solid #b9cbbb; border-radius:10px; padding:14px; color:#172a20; }
.plainDialog::backdrop { background:#162b1d43; }
.plainDialog p { overflow-wrap:anywhere; }
#resultDialog .best { display:block; border:0; }
#resultDialog .best h3 { display:block; }
@media(pointer:coarse) { #event .slot,#event .hole { height:26px; } }
@media(max-width:700px) {
  #event #mealTitle { font-size:21px; }
  #event #join { margin:4px 0; padding:6px 8px; }
  #event #join .fields input,#event #join .primary { min-height:36px; }
  #event #boardSwitch { margin:3px 0; }
  #event #boardSwitch button { min-height:28px; padding:3px 10px; }
  #event .boards h2 { font-size:16px; }
}
@media(max-height:540px) and (min-width:540px) {
  #event .viewBar,#event .pollTools { margin:0; }
  #event #mealTitle { font-size:18px; }
}
#event .pollByline { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; }
#event .pollByline #signed { margin:0; padding:0; gap:4px; }
#mealInfo,#switch { color:#23573b; border:0; padding:2px 0; min-height:24px; font-size:12px; background:transparent; text-decoration:underline; }
#event #who { max-width:24ch; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
#event #mealTitle { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#signInDialog #join { margin:8px 0 0; padding:8px; }
#infoDialog h3,#resultDialog h3 { margin:8px 0; }
#infoDialog p { margin:4px 0; white-space:pre-line; }
@media(max-width:700px) {
  #event .boards { align-items:stretch; gap:0; }
  #event #personal,#event .boards > section { width:100%; min-width:0; }
  #event #join { display:flex; flex-wrap:wrap; gap:0 8px; align-items:center; }
  #event #join h2 { flex-basis:100%; }
  #event #join .fields { flex:1 1 200px; }
  #event #joinError,#event #joinReason { flex-basis:100%; }
}
#event .mealHeading { margin:0; text-align:start; }
#event #mealInfo { display:inline-flex; gap:6px; max-width:100%; align-items:center; font:inherit; text-align:start; color:inherit; text-decoration:none; }
.infoGlyph { flex:none; font:15px/1 system-ui,sans-serif; color:#48634e; }
#infoDialog #signed { justify-content:start; margin:2px 0; }
#personalHeading { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#event .grid { user-select:none; }
#event #gridPages > div { gap:3px; }
#event .pollTools { column-gap:10px; }
#event .pollTools #tablePanel:not([open]) { border:0; }
@media(max-width:700px) {
  #event .viewBar.isGuest [data-view=availability] { display:none; }
  #event .viewBar.isGuest #boardSwitch:not([hidden]) { display:contents; }
  #event .viewBar #boardSwitch button { border:0; border-radius:6px 6px 0 0; padding:4px; min-height:32px; background:transparent; }
  #event .viewBar #boardSwitch button[aria-pressed=true] { background:#195835; color:white; }
  #event #join h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #event #join #passwordToggle { margin:0; padding:1px 0; }
}
@media(max-height:420px) and (min-width:520px) {
  body:has(#event:not([hidden])) header { padding-block:1px; }
  body:has(#event:not([hidden])) main { margin-top:2px; }
  #event #mealTitle,#event .mealHeading { font-size:17px; }
  #event .boards { flex-direction:row; gap:12px; align-items:flex-start; }
  #event #guestColumn { display:block; }
  #event .boards.hasGuest[data-board] #personal:not([hidden]),#event .boards.hasGuest[data-board] > section { display:block; }
  #event .viewBar.isGuest #boardSwitch:not([hidden]) { display:none; }
  #event .viewBar.isGuest [data-view=availability] { display:block; }
  #event .boards .hint,#event .personalKey { display:none; }
  #event .viewBar button,#event .pollTools button { min-height:24px; }
  #event .slot,#event .hole { height:24px; }
  #event .grid .dayToggle { min-height:31px; }
}
@media(max-height:480px) and (min-width:490px) {
  #resultDialog[open] { display:grid; grid-template-columns:1.2fr 1fr; gap:3px 12px; width:min(94vw,40rem); }
  #resultDialog .dismiss { grid-column:1/-1; justify-self:start; }
  #resultDialog .best { grid-column:1; grid-row:2/span 3; margin:0; padding:0; }
  #resultDialog > h3,#resultDialog #roster,#resultDialog #rosterPages { grid-column:2; margin:3px 0; }
  #resultDialog .best :is(p,h3,.choiceField) { margin:3px 0; }
}
#event #switchGuest { background:transparent; border:0; color:#265b3a; padding:0 3px; min-height:24px; font-size:12px; text-decoration:underline; }
#event .boardTitle { justify-content:flex-start; gap:6px; }
#event #saveState { margin-inline-start:auto; font-size:12px; }
.plainDialog { overflow-wrap:anywhere; }
#event .boards .slot,#event .boards .hole { height:var(--vote-row,18px); }
#event .boards .grid .time { line-height:1; }

/* Like the reference, the inspector borrows the left pane without participating in either grid. */
#event .groupHead { min-height:0; }
#event #slotInfo {
  left:auto; right:calc(100% + clamp(12px,2vw,24px)); top:0; bottom:auto;
  width:100%; height:min(235px,48dvh); border:1px solid #94b59a; border-left:3px solid #377347;
  background:#f1f7ee; box-shadow:0 2px 8px #1f452318;
}
@media(max-width:700px) and (min-height:421px), (max-width:519px) {
  #event #slotInfo { position:fixed; top:6px; left:8px; right:8px; width:auto; height:min(36dvh,210px); z-index:10; }
}

#slotTables { border:0; padding:1px 0; background:transparent; color:#215836; text-align:start; }
#slotInfo.pinned #slotTables { text-decoration:underline; }
#slotInfo:not(.pinned) :is(button,[tabindex]) { visibility:hidden; }
#slotInfo:not(.pinned) #slotTables { visibility:visible; }