/* The signed-in landing view is one continuous rooftop and workspace frame. */
body[data-planner-view="today"] {
  --rooftop-frame: #210d19;
  background: var(--rooftop-frame);
}

body[data-planner-view="today"] .main,
body[data-planner-view="today"] .topbar {
  background: var(--rooftop-frame);
}

body[data-planner-view="today"] .sidebar {
  background: #170d16;
  border-right-color: #543343;
}

body[data-planner-view="today"] .topbar {
  border-bottom-color: #543343;
}

#todayView {
  --rooftop-frame: #210d19;
  margin: 0 -40px -56px;
  padding: 0 40px 56px;
  min-height: calc(100vh - 68px);
  background: var(--rooftop-frame);
}

.rooftop-banner {
  position: relative;
  height: clamp(330px, 35vw, 475px);
  margin: 0 -40px 30px;
  isolation: isolate;
  overflow: hidden;
  background: #394879;
}

.rooftop-banner .banner-scene {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #3a4773;
  pointer-events: none;
}

.rooftop-banner .scene-sky,
.rooftop-banner .roof-scene[data-time="dusk"] .scene-sky {
  background: linear-gradient(#354171 0 33%, #4b5d83 33% 64%, #8c8190 64% 100%);
}

.rooftop-banner .roof-scene[data-time="dawn"] .scene-sky {
  background: linear-gradient(#797991 0 33%, #b29b9c 33% 64%, #d4b2a0 64% 100%);
}

.rooftop-banner .roof-scene[data-time="day"] .scene-sky {
  background: linear-gradient(#5e86a2 0 33%, #91aab6 33% 64%, #b6b8ad 64% 100%);
}

.rooftop-banner .roof-scene[data-time="night"] .scene-sky {
  background: linear-gradient(#1b2445 0 33%, #2c365d 33% 64%, #454568 64% 100%);
}

.rooftop-banner .scene-cloud { display: none; }
.rooftop-banner .scene-sun {
  top: 19%;
  right: 18%;
  width: 30px;
  height: 30px;
  border-radius: 0;
  box-shadow: 0 0 0 7px #f0d3a120, 0 0 0 15px #f0d3a10d;
}

.rooftop-banner .scene-hill {
  bottom: 26%;
  background: #303858;
  opacity: .82;
}

.rooftop-banner .scene-city { opacity: .92; }
.rooftop-banner .scene-city i,
.rooftop-banner .scene-city i:nth-child(3n) {
  background: #232a48;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: none;
}

.rooftop-banner .scene-city i:after {
  inset: 9% 19%;
  background: repeating-linear-gradient(0deg, transparent 0 12px, #eed29288 12px 15px, transparent 15px 25px),
    repeating-linear-gradient(90deg, transparent 0 10px, #232a48 10px 15px);
}

.rooftop-banner .scene-rooftop {
  bottom: -8%;
  height: 57%;
  border-top-color: #95897d;
  background: linear-gradient(155deg, #72746c, #3e4b49 54%, #2c353b);
}

.rooftop-banner .scene-person { transform: scale(1.22); transform-origin: top center; }
.rooftop-banner .scene-grain {
  opacity: .2;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #1d1b3d40 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, #1d1b3d40 3px 4px);
}

.rooftop-banner .scene-decor .decor-object { pointer-events: none; cursor: default; }

.banner-copy {
  position: absolute;
  z-index: 12;
  top: 34px;
  left: clamp(22px, 4vw, 64px);
  display: grid;
  gap: 15px;
  color: #fff8e9;
  text-shadow: 0 3px 12px #151022b8;
  pointer-events: none;
}

.banner-copy span {
  color: #f0cd87;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}

.banner-copy strong {
  font-size: clamp(29px, 3.7vw, 55px);
  font-weight: 780;
  line-height: 1.15;
  letter-spacing: -.06em;
}

.banner-roof-link {
  position: absolute;
  z-index: 13;
  right: clamp(22px, 4vw, 64px);
  bottom: 76px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #f3dbab;
  border-radius: 0;
  background: #25121dc9;
  color: #fff1cf;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.banner-roof-link:hover { background: #36212a; }

.banner-silhouette {
  position: absolute;
  z-index: 11;
  inset: auto 0 -1px;
  height: 76px;
  background: var(--rooftop-frame);
  clip-path: polygon(0 35%, 4% 35%, 4% 26%, 7% 26%, 7% 42%, 12% 42%, 12% 30%, 18% 30%, 18% 51%, 27% 51%, 27% 38%, 36% 38%, 36% 48%, 51% 48%, 51% 34%, 58% 34%, 58% 46%, 69% 46%, 69% 32%, 76% 32%, 76% 48%, 83% 48%, 83% 37%, 90% 37%, 90% 45%, 100% 45%, 100% 100%, 0 100%);
}

#todayView .summary-card,
#todayView .surface {
  border-color: #4b3440;
  background: #2a1925;
  box-shadow: none;
}

#todayView .focus-card,
#todayView .reward-summary { background: #30202a; }
#todayView .quick-add { background: #1b1019; border-color: #604652; }
#todayView .roof-teaser .mini-roof { display: none; }
#todayView .roof-teaser .muted { margin-top: 17px; line-height: 1.6; }

@media (max-width: 1120px) {
  #todayView { margin-right: -25px; margin-left: -25px; padding-right: 25px; padding-left: 25px; }
  .rooftop-banner { margin-right: -25px; margin-left: -25px; }
}

@media (max-width: 780px) {
  #todayView { margin-right: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; }
  .rooftop-banner { margin-right: -18px; margin-left: -18px; }
}

@media (max-width: 540px) {
  #todayView { margin: 0 -12px -85px; padding: 0 12px 85px; min-height: calc(100vh - 53px); }
  #todayView .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  #todayView .page-heading h1 { font-size: clamp(25px, 7vw, 30px); }
  .rooftop-banner { height: 310px; margin: 0 -12px 22px; }
  .banner-copy { top: 25px; left: 19px; gap: 11px; }
  .banner-copy span { font-size: 8px; }
  .banner-copy strong { font-size: clamp(24px, 7vw, 36px); }
  .banner-roof-link { right: 18px; bottom: 60px; min-height: 34px; font-size: 10px; }
  .banner-silhouette { height: 56px; }
  .rooftop-banner .scene-person { transform: scale(.9); }
  .rooftop-banner .scene-tree { transform: scale(.7); }
}