/* One soft change between screens, and a Living Day that moves instead of jumps.
   Everything that moves here switches off with Reduce motion. */
:root{--mc-move:240ms;--mc-settle:cubic-bezier(.22,.8,.24,1);--mc-slide:14px}

@media (prefers-reduced-motion:no-preference){
  /* Taps keep working during a change. */
  ::view-transition{pointer-events:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--mc-move);animation-timing-function:ease-in-out}

  /* The navigation holds still while the screen changes. */
  html[data-motion-kind=view] .app-sidebar{view-transition-name:mc-rail}
  ::view-transition-group(mc-rail){animation-duration:var(--mc-move);animation-timing-function:var(--mc-settle)}

  /* The sign-in scene dissolves into the day. */
  html[data-motion-kind=enter]::view-transition-old(root),html[data-motion-kind=enter]::view-transition-new(root){animation-duration:520ms}

  /* Inside Plan only the panel changes, and the selected pill slides to its new tab. */
  html[data-motion-kind=tab]::view-transition-old(root){animation:none;opacity:0}
  html[data-motion-kind=tab]::view-transition-new(root){animation:none;opacity:1}
  html[data-motion-kind=tab] .preview-plan-tabs [role=tab][aria-selected=true]{view-transition-name:mc-plan-pill}
  html[data-motion-kind=tab] [id^=plan-panel-]:not([hidden]){view-transition-name:mc-plan-panel}
  ::view-transition-group(mc-plan-pill){animation-duration:280ms;animation-timing-function:var(--mc-settle);z-index:2}
  ::view-transition-group(mc-plan-panel){animation-duration:280ms;animation-timing-function:var(--mc-settle)}
  html[data-motion-kind=tab]::view-transition-old(mc-plan-panel){animation:mc-panel-out 150ms ease-in both}
  html[data-motion-kind=tab]::view-transition-new(mc-plan-panel){animation:mc-panel-in 280ms var(--mc-settle) both}
  html[data-motion-kind=tab][data-motion-dir=back]::view-transition-old(mc-plan-panel){animation-name:mc-panel-out-back}
  html[data-motion-kind=tab][data-motion-dir=back]::view-transition-new(mc-plan-panel){animation-name:mc-panel-in-back}
}
@keyframes mc-panel-out{to{opacity:0;transform:translateX(calc(var(--mc-slide)*-1))}}
@keyframes mc-panel-in{from{opacity:0;transform:translateX(var(--mc-slide))}}
@keyframes mc-panel-out-back{to{opacity:0;transform:translateX(var(--mc-slide))}}
@keyframes mc-panel-in-back{from{opacity:0;transform:translateX(calc(var(--mc-slide)*-1))}}

/* Living Day status line */
.living-sync{display:flex;align-items:center;gap:8px;min-height:32px;margin:0 0 8px;font-size:12.5px;line-height:1.3;color:#44506f;transition:color 200ms ease}
.living-sync__dot{flex:none;width:8px;height:8px;border-radius:50%;background:#9fb0d0;transition:background-color 240ms ease}
.living-sync__text{flex:1;min-width:0}
.living-sync__act{flex:none;min-height:32px;padding:0 12px;border:0;border-radius:999px;background:#eaf0fb;color:#22408f;font:inherit;font-weight:700;cursor:pointer;transition:background-color 180ms ease}
.living-sync__act:hover{background:#dde6f8}
.living-sync__act[hidden]{display:none}
.living-sync[data-state=reading] .living-sync__dot{background:#3f6fe0}
.living-sync[data-state=placed]{color:#176b4d}
.living-sync[data-state=placed] .living-sync__dot,.living-sync[data-state=idle] .living-sync__dot{background:#27a372}
.living-sync[data-state=attention]{color:#8a4b08}
.living-sync[data-state=attention] .living-sync__dot{background:#e0902b}
html.theme-dark .living-sync{color:#b9c6e2}
html.theme-dark .living-sync__act{background:#22304f;color:#d7e3ff}
html.theme-dark .living-sync[data-state=placed]{color:#7fe0b6}
html.theme-dark .living-sync[data-state=attention]{color:#f2bd7b}
@media (prefers-reduced-motion:no-preference){
  .living-sync[data-state=reading] .living-sync__dot{animation:mc-sync-pulse 1100ms ease-in-out infinite}
  .preview-plan-day[data-living-sync=reading] [data-preview-day-track]::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:220% 100%;animation:mc-sync-sweep 1400ms ease-in-out infinite}
}
@keyframes mc-sync-pulse{50%{transform:scale(1.35);opacity:.55}}
@keyframes mc-sync-sweep{from{background-position:120% 0}to{background-position:-80% 0}}
html:is(.mc-reduce-motion,.rm,[data-reduced-motion=true],[data-personalize-motion=true]) .living-sync__dot{animation:none!important}
html:is(.mc-reduce-motion,.rm,[data-reduced-motion=true],[data-personalize-motion=true]) [data-preview-day-track]::after{animation:none!important;display:none}

/* Plan blocks answer the touch without shifting anything around them. */
.plan-block,.plan-free-row button{transition:filter 160ms ease,background-color 160ms ease,box-shadow 160ms ease}
.plan-block:active{filter:brightness(.94)}

/* Calendar sources in Connections */
.calendar-sources{display:grid;gap:10px;margin:14px 0}
.calendar-source{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 1px 0 rgba(20,40,90,.06)}
html.theme-dark .calendar-source{background:#17213a}
.calendar-source strong{display:block;font-size:15px}
.calendar-source small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:#55617f}
html.theme-dark .calendar-source small{color:#b9c6e2}
.calendar-source__actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.calendar-source__form{grid-column:1/-1;display:grid;gap:8px;margin-top:6px}
.calendar-source__form[hidden]{display:none}
.calendar-source__form ol{margin:0;padding-left:18px;font-size:13px;line-height:1.45}
.calendar-source__form input{width:100%;min-height:44px;padding:0 12px;border:1px solid #c9d3e8;border-radius:12px;background:#fff;color:#16213f;font:inherit;font-size:16px}
.calendar-source__form p{margin:0;font-size:12.5px;line-height:1.4;color:#55617f}
html.theme-dark .calendar-source__form p{color:#b9c6e2}
html.theme-dark .calendar-source__form input{background:#101a30;border-color:#34425f;color:#eef3ff}
.calendar-source__note[data-tone=error]{color:#a23a16}
html.theme-dark .calendar-source__note[data-tone=error]{color:#f2a58c}
@media (max-width:520px){.calendar-source{grid-template-columns:minmax(0,1fr)}.calendar-source__actions{justify-content:flex-start}}