/* The editor is a temporary layer above the family's calendar. */
:root{--motion-arrive:cubic-bezier(.16,1,.3,1)}
@supports (transition-behavior:allow-discrete){
  .editor{
    opacity:0;transform:translateY(8px) scale(.985);
    transition:opacity 160ms ease-out,transform 160ms ease-out,display 160ms allow-discrete,overlay 160ms allow-discrete;
  }
  .editor[open]{
    opacity:1;transform:none;animation:none;
    transition-duration:260ms;
    transition-timing-function:var(--motion-arrive);
  }
  .editor::backdrop{
    opacity:0;
    transition:opacity 160ms ease-out,display 160ms allow-discrete,overlay 160ms allow-discrete;
  }
  .editor[open]::backdrop{opacity:1;transition-duration:260ms}
  @starting-style{
    .editor[open]{opacity:0;transform:translateY(8px) scale(.985)}
    .editor[open]::backdrop{opacity:0}
  }
  @media(max-width:760px){
    .editor{transform:translateY(24px)}
    .editor[open]{transform:none}
    @starting-style{.editor[open]{transform:translateY(24px)}}
  }
}
/* The add menu unfolds as a small, ordered set of choices. */
.editor[open] .add-choices>.list-card{animation:choice-unfold 220ms var(--motion-arrive) both}
.editor[open] .add-choices>.list-card:nth-child(2){animation-delay:30ms}
.editor[open] .add-choices>.list-card:nth-child(3){animation-delay:60ms}
.editor[open] .add-choices>.list-card:nth-child(4){animation-delay:90ms}
@keyframes choice-unfold{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .editor,.editor[open],.editor::backdrop,.editor[open]::backdrop{transform:none!important;transition:none!important;animation:none!important;opacity:1}
  .editor[open] .add-choices>.list-card{animation:none!important}
  @starting-style{.editor[open],.editor[open]::backdrop{opacity:1;transform:none}}
}