/* Figma 96:128: a narrow toolbar joins the rooftop to the workspace frame. */
body:is([data-planner-view="today"],[data-planner-view="planner"]),
body:is([data-planner-view="today"],[data-planner-view="planner"]) .main,
:is(#todayView,#plannerView){background:#0c0f14!important}
:is(#todayView,#plannerView) .rooftop-banner{
  height:calc(100vw * 207 / 1080);
  background:#0e1217;
  border-bottom:0;
}
:is(#todayView,#plannerView) .frame96-scene{
  position:absolute;
  z-index:5;
  inset:0;
  overflow:hidden;
  container-type:inline-size;
  pointer-events:none;
}
:is(#todayView,#plannerView) .frame96-scene img{position:absolute;display:block;max-width:none;user-select:none}
:is(#todayView,#plannerView) .frame96-backdrop{width:100%;height:auto;top:-11.39cqw;left:0;image-rendering:pixelated}
:is(#todayView,#plannerView) .frame96-foreground{
  width:100%;height:auto;bottom:-7.4cqw;left:0;
  image-rendering:pixelated;
  transition:bottom var(--banner-rail-duration,720ms) var(--banner-rail-ease,cubic-bezier(.45,0,.2,1));
}
:is(#todayView,#plannerView) .frame96-edge{width:6.67cqw;height:auto;bottom:0;left:6.67cqw}
/* The Figma backdrop depicts the noon scene. Other times and weather keep the live image planes. */
:is(#todayView,#plannerView) .frame96-backdrop{display:none!important}
html[data-rooftop-period="noon"] :is(#todayView,#plannerView) .rooftop-banner:not([data-rooftop-weather="rain"]):not([data-rooftop-weather="snow"]):not([data-rooftop-weather="cloudy"]) .frame96-backdrop{display:block!important;opacity:1;transition:opacity var(--banner-rail-duration,720ms) var(--banner-rail-ease,cubic-bezier(.45,0,.2,1))}
html[data-rooftop-period="noon"] :is(#todayView,#plannerView) .rooftop-banner.is-expanded:not([data-rooftop-weather="rain"]):not([data-rooftop-weather="snow"]):not([data-rooftop-weather="cloudy"]) .frame96-backdrop{opacity:0}
html[data-rooftop-period="noon"] :is(#todayView,#plannerView) .rooftop-banner:not([data-rooftop-weather="rain"]):not([data-rooftop-weather="snow"]):not([data-rooftop-weather="cloudy"]) .banner-art{opacity:0;transition:opacity var(--banner-rail-duration,720ms) var(--banner-rail-ease,cubic-bezier(.45,0,.2,1))}
html[data-rooftop-period="noon"] :is(#todayView,#plannerView) .rooftop-banner.is-expanded:not([data-rooftop-weather="rain"]):not([data-rooftop-weather="snow"]):not([data-rooftop-weather="cloudy"]) .banner-art{opacity:1}
:is(#todayView,#plannerView) .rooftop-banner.is-expanded .frame96-scene{display:block}
:is(#todayView,#plannerView) .rooftop-banner.is-expanded .frame96-foreground{bottom:0}
:is(#todayView,#plannerView) .rooftop-banner .banner-roof-link{z-index:11}
:is(#todayView,#plannerView) .dashboard-content{
  grid-template-columns:192px minmax(0,1fr);
  min-height:calc(100vh - 19.17vw - 52px);
  background:#0c0f14;
}
:is(#todayView,#plannerView) .analytics-sidebar{
  padding:0 8px 26px;
  border-right:1px solid #252c34;
  background:linear-gradient(#0e1217,#0c1015);
}
:is(#todayView,#plannerView) .analytics-side-brand{
  height:52px;
  min-height:52px;
  margin:0 -8px 12px;
  padding:0 24px;
  border-bottom:1px solid #242a32;
  background:#0e1217;
}
:is(#todayView,#plannerView) .analytics-side-brand::before{display:none}
:is(#todayView,#plannerView) .analytics-side-brand img{display:block;width:134px;height:24px;max-width:none;object-fit:contain;object-position:left center}
:is(#todayView,#plannerView) .analytics-side-link{min-height:35px;margin:1px 0;padding:0 12px;border-radius:5px;font-size:11px}
:is(#todayView,#plannerView) .analytics-side-link.is-current{background:#152d48;border-color:#285a86;box-shadow:inset 2px 0 #3d9dff}
:is(#todayView,#plannerView) .analytics-side-label{margin:11px 13px 5px;font-size:9px}
:is(#todayView,#plannerView) .analytics-main{padding:0 24px 34px;background:#0c0f14}
:is(#todayView,#plannerView) .dashboard-tabs{
  position:relative;
  height:52px;
  min-height:52px;
  margin:0 -24px 17px;
  padding:0 20px;
  border-bottom:1px solid #242a32;
  background:#0e1217;
}
:is(#todayView,#plannerView) .dashboard-search{
  position:absolute;
  left:calc(50% - 96px);
  top:9px;
  transform:translateX(-50%);
  width:min(342px,45vw);
  height:34px;
  border:1px solid #555b64;
  border-radius:62px;
  background:rgba(255,255,255,.1);
  box-shadow:0 3px 40px #0004,inset 0 1px #ffffff1c;
  backdrop-filter:blur(9px);
}
:is(#todayView,#plannerView) .dashboard-search>span{
  display:block;
  flex:none;
  width:18px;
  height:18px;
  overflow:hidden;
  background:url('/assets/figma-frame-96/search.svg') center / contain no-repeat;
  font-size:0;
}
:is(#todayView,#plannerView) .dashboard-search input{font-size:11px}
:is(#todayView,#plannerView) .dashboard-account-actions{margin-left:auto}
:is(#todayView,#plannerView) .rooftop-banner.is-expanded + .dashboard-content{grid-template-columns:0 minmax(0,1fr)}
@media(max-width:850px){
  :is(#todayView,#plannerView) .rooftop-banner{height:clamp(180px,19.17vw,240px)}
  :is(#todayView,#plannerView) .frame96-scene{display:none}
  html[data-rooftop-period="noon"] :is(#todayView,#plannerView) .rooftop-banner .banner-art{opacity:1}
  :is(#todayView,#plannerView) .dashboard-content{grid-template-columns:154px minmax(0,1fr)}
  :is(#todayView,#plannerView) .analytics-side-brand{padding:0 12px}
  :is(#todayView,#plannerView) .analytics-side-brand img{width:128px}
  :is(#todayView,#plannerView) .dashboard-search{left:50%;width:min(320px,48vw)}
}
@media(max-width:580px){
  :is(#todayView,#plannerView) .dashboard-content{display:block}
  :is(#todayView,#plannerView) .analytics-sidebar{display:none}
  :is(#todayView,#plannerView) .dashboard-search{left:42%;width:min(270px,56vw)}
  :is(#todayView,#plannerView) .dashboard-search kbd{display:none}
}
@media(prefers-reduced-motion:reduce){
  :is(#todayView,#plannerView) .frame96-foreground{transition:none}
  :is(#todayView,#plannerView) .frame96-backdrop,
  :is(#todayView,#plannerView) .banner-art{transition:none!important}
}