/* Keep the APK's stacked agenda and bottom sheet on small screens. */
@media (min-width:751px) {
  .app-shell #viewContent:has(>.agenda-day) {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:16px;
    align-items:start;
  }
  .app-shell #viewContent:has(>.agenda-day)>.section-head {
    grid-column:1/-1;
    margin:8px 0 0;
  }
  .app-shell .agenda-day {
    min-width:0;
    margin:0;
    padding:20px;
    gap:16px;
  }
  .app-shell .agenda-content h3 {
    font-size:19px;
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  .app-shell .agenda-content>.item-type {
    margin-top:9px;
    margin-bottom:0;
  }
  .app-shell .agenda-meta {
    min-width:0;
    line-height:1.6;
    overflow-wrap:anywhere;
    align-items:flex-start;
  }
  .app-shell .agenda-meta>svg {width:16px;height:18px;margin-top:1px}
  .app-shell .agenda-content>.row {flex-wrap:wrap;gap:8px}
  .app-shell .agenda-content>.row>.btn {
    flex:0 1 auto;
    min-width:0;
    min-height:38px;
    white-space:normal;
  }

  .modal:has(#scheduleDate) {max-width:580px}
  .modal:has(#scheduleDate) .modal-head {align-items:flex-start}
  .modal:has(#scheduleDate) .modal-head h2 {
    min-width:0;
    max-width:420px;
    font-size:23px;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .modal:has(#scheduleDate) .modal-body>.help {overflow-wrap:anywhere}
  .modal:has(#scheduleDate) .stack {gap:18px}
  .modal:has(#scheduleDate) .checkbox-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px 14px;
  }
  .modal:has(#scheduleDate) .check-label {align-items:flex-start}
  .modal:has(#scheduleDate) .check-label input {
    flex:0 0 17px;width:17px;height:17px;min-height:17px;padding:0;margin-top:1px;
  }
  .modal:has(#scheduleDate) #scheduleDate {max-width:310px;min-width:0}
  .modal:has(#scheduleDate) #customReminders {max-width:360px;min-width:0}
  .modal:has(#scheduleDate) .modal-footer {justify-content:flex-end}
  .modal:has(#scheduleDate) .modal-footer>.btn {flex:0 1 auto}
}

@media (min-width:1100px) {
  .app-shell #viewContent:has(>.agenda-day) {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:20px;
  }
  .app-shell .agenda-day {padding:22px;gap:18px}
}

@media (min-width:751px) and (max-height:600px) {
  .modal:has(#scheduleDate) {max-height:calc(100dvh - 24px)}
  .modal:has(#scheduleDate) .modal-head {padding-top:14px}
  .modal:has(#scheduleDate) .modal-footer {padding-block:10px 12px}
  .modal:has(#scheduleDate) .stack {gap:13px}
}