/* Kaleido 0.856 — night mode surfaces and corner scene switch */
.headerTools{align-items:center}
.appHeader{overflow:visible}

/* On a phone the header covers the picture, and the picture clips anything inside it.
   The control is in the header, so it stays in the top-left corner and can be tapped. */
.heroSceneSwitch{top:70px;left:19px;z-index:20}
@media(max-width:700px){
  .heroSceneSwitch{top:8px;left:8px;z-index:30}
}

body.nightMode .nightToggle[aria-checked="true"]{background:#f4d56d;border-color:#e6c45a}
body.nightMode .nightToggle[aria-checked="true"] .nightToggleThumb{background:#1b1c20}

html:has(body.nightMode),
body.nightMode{background:#0e1014!important}
body.nightMode .app,
body.nightMode .card,
body.nightMode .empty,
body.nightMode .livePreviewCard,
body.nightMode .readerSheet,
body.nightMode .readerHead,
body.nightMode .dbPanel{background:#1b1d22!important;color:#f3f0ea!important}
body.nightMode .card{border-color:#35383e!important;box-shadow:none!important}
body.nightMode .cardTitle,
body.nightMode .livePreviewTitle,
body.nightMode .readerTitle,
body.nightMode .sectionHead h2,
body.nightMode .dbHead h2{color:#f4f1ea!important}
body.nightMode .cardAuthor,
body.nightMode .catalogMeta,
body.nightMode .posterFoot,
body.nightMode .livePreviewAuthor,
body.nightMode .livePreviewHint,
body.nightMode .dbEyebrow,
body.nightMode .dbHint,
body.nightMode .dbStatus,
body.nightMode .audioDockMeta,
body.nightMode .audioDockKicker{color:#a7a39c!important}
body.nightMode .badge,
body.nightMode .strengthTag,
body.nightMode .authorBestTag{background:#2c2f35!important;color:#d5d0c8!important;border-color:#3c4047!important}
body.nightMode .timeChip,
body.nightMode .tasteToggle,
body.nightMode .dbButton,
body.nightMode .sourceFilterButton,
body.nightMode .coverGenerateBtn,
body.nightMode .cardMediaBtn.playBtn,
body.nightMode .cardMediaBtn.readTextBtn,
body.nightMode .cardActions button,
body.nightMode .list.list .statusBtn,
body.nightMode .doneListenFlyout{background:#2a2d33!important;color:#e7e2da!important;border-color:#3e4248!important}
body.nightMode .timeChip.active,
body.nightMode .sourceFilterButton.active,
body.nightMode .navBtn.active,
body.nightMode .cardActions button.active,
body.nightMode .cardMediaBtn.playBtn.playing{background:#f0eee8!important;color:#17181b!important;border-color:#f0eee8!important}
body.nightMode .tabs,
body.nightMode .viewSwitch{background:#292b30!important;border-color:#3a3d44!important}
body.nightMode .tab,
body.nightMode .viewBtn{color:#b7b3ac!important}
body.nightMode .tab.active,
body.nightMode .viewBtn.active{background:#41444b!important;color:#fff!important}
body.nightMode .bottomNav{
  background:rgba(22,24,28,.96)!important;
  border-color:#3a3d44!important;
  box-shadow:0 8px 18px rgba(0,0,0,.35)!important;
}
body.nightMode .navBtn{color:#b7b3ac!important}
body.nightMode .search,
body.nightMode .searchRow .search{
  background:rgba(28,30,36,.94)!important;
  color:#f4f1ea!important;
  border-color:#3a3d44!important;
}
body.nightMode .search::placeholder{color:#8e939b!important}
body.nightMode .searchBox::before{border-color:#9a958d!important;background:transparent!important}
body.nightMode .searchBox::after{background:#9a958d!important}
body.nightMode .cardActions .statusBtn.active,
body.nightMode .cardActions .statusBtn.active:hover,
body.nightMode .cardActions .statusBtn.active:active{
  color:#d9d3c9!important;
  background:transparent!important;
  border-color:transparent!important;
}
body.nightMode .doneStatusMain.active .doneIdleIcon svg circle{fill:#d9d3c9!important;stroke:#d9d3c9!important}
body.nightMode .doneStatusMain.active .doneIdleIcon svg path{stroke:#1b1c20!important}
body.nightMode .audioDock{
  background:rgba(24,26,31,.98)!important;
  color:#f2f0eb!important;
  border-color:#34373e!important;
}
body.nightMode .audioMain,
body.nightMode .audioSkip,
body.nightMode .audioClose,
body.nightMode .dbClose{background:#2e3138!important;color:#f2f0eb!important}
body.nightMode .dbStats>div,
body.nightMode .dbStatus,
body.nightMode .readerBody{background:#24262c!important;color:#e6e1d8!important;border-color:#3a3d44!important}
body.nightMode .details,
body.nightMode .detailsInner{color:#c9c5be!important;border-top-color:#3a3d44!important}
body.nightMode .more{color:#c4bfb6!important}
body.nightMode .hero{background:#10131a!important}
@media(max-width:700px){
  body.nightMode,
  html:has(body.nightMode){background:#0e1014!important}
  body.nightMode .appHeader{
    background:linear-gradient(to bottom,rgba(8,10,14,.62),rgba(8,10,14,0))!important;
  }
}
@media(max-width:820px){
  body.nightMode .bottomNav{background:rgba(22,24,28,.98)!important}
  body.nightMode .audioDock{background:rgba(24,26,31,.99)!important}
}