/* Keep navigation anchored while month lengths and selection messages change. */
.cals{align-items:flex-start}
.cal{min-width:0}
.cal-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;height:72px;min-height:72px;gap:2px;margin-bottom:10px}
.navbtn{width:44px;height:44px;flex-shrink:0;font-size:1.65rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;touch-action:manipulation}
.monthjump{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 4px;min-width:0}
.monthjump select{font-family:'Marcellus',Georgia,serif;font-size:1.1rem;color:var(--ink);border:0;border-radius:6px;background-color:transparent;cursor:pointer;min-height:36px;padding:4px 1px;max-width:100%;touch-action:manipulation}
.monthjump select:hover{background-color:var(--grey-t,#f3f1e8)}
.monthjump select:focus-visible,.navbtn:focus-visible,.day:focus-visible,.daybox:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.day,.daybox{touch-action:manipulation}
.tl[aria-busy="true"]{pointer-events:none;opacity:.65}
.day.pad{visibility:hidden;pointer-events:none}
.day.checkout-only,.daybox.checkout-only{box-shadow:inset 0 -3px 0 var(--sage)}
.calendar-help{font-size:.85rem;color:var(--muted);margin:12px 0}
.calnotice{margin:14px 0 0}
.calnote.show{margin:14px 0 0}
.calpop .cal{flex:1;min-width:0}
.monthnav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;min-height:72px}
.monthnav .m{min-width:0}
@media(max-width:760px){
  .cals .cal{width:100%}
  .cal-head{height:84px;min-height:84px}
  .monthjump select{font-size:1.3rem;min-height:40px}
  .navbtn{width:44px;height:44px;font-size:1.85rem}
  .monthnav{width:100%;max-width:360px;min-height:84px}
  .calpop{top:8vh;top:8dvh;transform:translateX(-50%) scale(.98);max-height:84vh;max-height:84dvh}
  .calpop.open{transform:translateX(-50%) scale(1)}
  .calnotice,.calnote.show{flex-wrap:wrap}
  .miniwrap{padding:14px}
}

/* Keep the home date picker and its action together inside the mobile viewport. */
@media(max-width:760px){
  #calpop{top:50vh;top:50dvh;height:min(640px,calc(100vh - 32px));height:min(640px,calc(100dvh - 32px));max-height:none;
    padding:50px 16px 16px;display:flex;flex-direction:column;overflow:visible;transform:translate(-50%,-50%) scale(.98)}
  #calpop.open{transform:translate(-50%,-50%) scale(1)}
  #calpop .cals{flex:1;min-height:0;align-items:stretch}
  #calpop .cal{height:100%;display:flex;flex-direction:column;min-height:0}
  #calpop .cal-head{height:48px;min-height:48px;flex-shrink:0;margin-bottom:8px}
  #calpop .dow{flex-shrink:0}
  #calpop .days{flex:1;min-height:0;grid-template-rows:repeat(6,minmax(0,1fr))}
  #calpop .day{aspect-ratio:auto;min-height:0}
  #calpop .calnote{display:none}
  #calpop .calfoot{flex-shrink:0;margin-top:12px;padding-top:12px;gap:8px}
  #calpop .summary{font-size:.88rem;line-height:1.4;min-width:0}
  #calpop .summary .min{display:block;margin-left:0}
  #calpop .clear{padding:10px 14px;min-height:44px}
  #calpop .cal-search{flex-shrink:0;margin-top:12px;min-height:48px;padding:12px}
  #calpop .cal-x{top:10px}
}
@media(min-width:560px) and (max-width:760px) and (max-height:500px){
  #calpop{width:min(720px,94vw);display:grid;grid-template-columns:minmax(0,1fr) 180px;grid-template-rows:1fr 48px;gap:12px 20px}
  #calpop .cals{grid-column:1;grid-row:1 / 3}
  #calpop .calfoot{grid-column:2;grid-row:1;flex-direction:column;justify-content:center;align-items:stretch;border-top:0;margin:0;padding:0}
  #calpop .cal-search{grid-column:2;grid-row:2;margin:0;font-size:1rem}
}