/* styles/_breakpoints.scss */

:root {
  color-scheme: dark;
  --color: #fff;
  --color-2: #a7b4c6;
  --color-3: #626c7a;
  --line-color: #090b12;
  --document-surface-color: #0a0b0f;
  --surface-color: #0a0b0f;
  --surface-color-2: #14161e;
  --surface-color-3: #1d1e28;
  --surface-color-4: #3e4052;
  --button-color: #1e2229;
  --dropshadow-color: #34394b;
  --highlight-color: #2c3344;
  --note-divider-color: #292e35;
  --shortcut-button: #14161e;
  --sunrise-gradient: linear-gradient(112deg, rgb(0 0 0 / 0%) 42%, #0e0400 100%), #31231c;
  --fallback-box-shadow: 0px 77px 31px rgb(0 0 0 / 4%), 0px 43px 32px rgb(0 0 0 / 10%), 0px 19px 19px rgb(0 0 0 / 10%), 0px 2px 7px rgb(0 0 0 / 14%);
  --card-color: #5C697B;
  --card-color-primary: #A7B4C6;
  --card-logo-color: #626C7A;
  --feature-introduction-shadow-color: -20px 10px 100px 0px rgb(42 52 68 / 50%);
  --later-tag-background: #162827;
  --later-tag-color: #559490;
  --scrollbar-color: #1d1e28;
  --scrollbar-handle-color: #2b2d3c;
  --scrollbar-handle-hover-color: #454758;
}
mymind-card {
  --surface-color: #1d1e28;
}
mymind-card.highlighted > .inner p,
mymind-card.highlighted > .inner h1,
mymind-card.highlighted > .inner h2,
mymind-card.highlighted > .inner h3,
mymind-card.highlighted > .inner h4,
mymind-card.highlighted > .inner h5,
mymind-card.highlighted > .inner h6,
mymind-card.highlighted > .inner li {
  box-shadow: 5px 0 0 #2c3344, -5px 0 0 #2c3344;
}
mymind-card.highlighted {
  color: #a7b4c6;
}
mymind-card .reddit .title,
mymind-card .reddit h3 {
  color: var(--color-2);
}
@media (pointer: fine) {
  mymind-card.post:hover > .inner,
mymind-card.content:hover > .inner,
mymind-card.quote:hover > .inner,
mymind-card.video-game:hover > .inner,
mymind-card.tv-episode:hover > .inner {
    box-shadow: 10px 17px 44px rgb(0 0 0 / 50%);
  }
  mymind-card.new-note:hover {
    box-shadow: 0 0 0 3px #33384e, 10px 17px 44px rgb(0 0 0 / 50%);
  }
  .adding-note:not(.scroll-lock) mymind-card.new-note {
    box-shadow: 0 0 0 3px #33384e, 10px 17px 44px rgb(0 0 0 / 50%);
  }
  mymind-card.software-application {
    --hover-box-shadow: 10px 17px 44px 0 rgba(0, 0, 0, 0.5);
  }
}
mymind-cover.default .placeholder {
  background: #2B2C3B;
}
.account .block .row .icon {
  --color: #626c7a;
}
.account .block p {
  color: #a7b4c6;
}
.close-account-modal, .cancel-subscription-modal, .export-modal, .add-email-modal {
  --surface-color: #1d1e28;
}
.close-account-modal > .box h2,
.cancel-subscription-modal > .box h2,
.export-modal > .box h2,
.add-email-modal > .box h2 {
  color: var(--color);
}
.top::before {
  background: linear-gradient(180deg, #15171e 16%, rgba(21, 23, 30, 0) 100%);
}
body:not(.desktop) .trash-header::before {
  background: linear-gradient(180deg, #15171e 16%, rgb(21 23 30 / 0%) 100%);
}
.trash-header > .inner {
  border-bottom-color: #39404a;
}
.trash-header .button-restore {
  box-shadow: 0px 6px 39px rgb(0 0 0 / 30%);
}
mymind-card .body.long::after {
  background: linear-gradient(180deg, rgb(29 30 40 / 0%) 0%, var(--surface-color-3) 100%);
}
mymind-analyzing .blob {
  background: url("./../images/card/analyzing-blob-dark.webp") center / contain no-repeat;
}
mymind-card-detail mymind-palette > li .copy {
  background-color: #1e2229;
}
mymind-card-detail .highlighted {
  --color: #a7b4c6;
}
.cover-container mymind-cover.default {
  background-color: #000;
}
.post-details > .body:hover {
  box-shadow: 0px 70px 31px 20px rgb(0 0 0 / 1%), 0px 43px 32px 16px rgb(0 0 0 / 5%), 0px 19px 19px 12px rgb(0 0 0 / 5%), 0px 2px 7px 8px rgb(0 0 0 / 7%);
}
.post-details > .body .fp-infos p {
  box-shadow: 0px 5px 100px rgb(0 0 0 / 60%);
}
mymind-card-sidebar {
  box-shadow: inset 7px 0px 44px rgb(0 0 0 / 6%);
}
mymind-card-sidebar > header {
  background: linear-gradient(180deg, rgb(40 43 54 / 80%) 20%, rgb(20 22 30 / 0%) 157%);
}
mymind-card-sidebar > .scroll {
  --overflow-gradient: linear-gradient(180deg, rgb(21 27 35 / 0%) 0%, #14161e 100%);
}
.card-detail.reader-mode.article > .guts .inner .reader__wrapper::before {
  background: linear-gradient(0deg, rgb(29 30 40 / 0%) 0%, var(--surface-color-3) 94%);
}
.card-detail.reader-mode.article > .guts .inner .reader__wrapper::after {
  background: linear-gradient(180deg, rgb(29 30 40 / 0%) 0%, var(--surface-color-3) 94%);
}
mymind-reader::after {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #0A0B0F 94%);
}
mymind-reader > h1.headline {
  color: #fff;
}
mymind-tag-cloud .bubble .remove {
  background-image: url("./../icons/remove.svg") !important;
}
mymind-tag-cloud > .guts.overflowing::after {
  background: linear-gradient(180deg, rgb(21 27 35 / 0%) 0%, #14161e 100%);
}
.tag-control input {
  background: none;
}
.tag-control {
  --color: #a7b4c6;
}
.tag-control > .field > .input {
  box-shadow: 1px 2px 14px 0px rgb(0 0 0 / 50%);
}
.tag-control .recent-tags-menu p {
  color: #B3BCCA;
}
.tag-control .recent-tags-menu {
  color: #748297;
}
.tag-control .add-tags,
.tag-control .instruction {
  color: #748297;
}
.tag-control .added-tags::after {
  background: linear-gradient(-90deg, rgb(20, 22, 30) 5%, rgba(20, 22, 30, 0) 100%);
}
.add-tag-form > .field > .input {
  background-color: #242531;
  box-shadow: 1px 2px 14px 0px rgb(0 0 0 / 50%);
}
mymind-tag > .remove:hover {
  background-image: url("./../icons/remove-dark-hover.svg") !important;
}
mymind-tag > .remove {
  background-image: url("./../icons/remove-dark.svg") !important;
}
.download .icon,
.trash .icon {
  --color: var(--color-3);
}
.news, mymind-shortcuts {
  --surface-color: #14161e;
  background-image: url("./../images/news/bg-dark.webp");
}
.news p,
mymind-shortcuts p {
  color: #a7b4c6;
}
mymind-focus-mode-editor::before {
  background-image: url("./../images/expanded-note-bg-dark.jpg");
}
mymind-focus-mode-editor .loader img.loader-gradient--light {
  display: none;
}
mymind-focus-mode-editor .loader img.loader-gradient--dark {
  display: block;
}
.focus-mode__trigger::after {
  background-image: url(./../icons/focus-circle-dark.png);
}
.focus-mode__trigger--lightbox::after {
  background-image: url(./../icons/focus-circle-dark.png);
}
mymind-top-of-mind {
  --dropshadow-color: #000;
}
mymind-top-of-mind > .tom__container {
  box-shadow: none;
}
.tom__item:not(.sortable-chosen):hover .tom__item-cover {
  box-shadow: 5px 5px 22px 0px #15171E;
}
.tom__item-cover > .inner {
  --surface-color: #242531;
}
.tom__item-cover.post {
  background-color: rgb(36, 37, 49);
}
.tom__list mymind-card.sortable-chosen::before,
.tom__item.sortable-chosen .tom__item-cover::before {
  background: #21232E;
  border: 1px dashed #2E2F3C;
  color: #4B4D60;
}
.tom__item:has(.article) p {
  background: var(--surface-color);
}
.tom__item:has(.article) p::after {
  background: var(--surface-color);
}
.tom__content::after {
  background: linear-gradient(90deg, rgba(27, 29, 38, 0) 0%, rgba(27, 29, 38, 1) 90%);
}
.tom-introduction-modal > .box .rhs {
  background-image: url("./../images/tom/lightbox-image-dark.webp");
}
.tom-introduction-modal > .box {
  background-image: url("./../images/tom/darkmode-lightbox.webp");
  box-shadow: -5px -5px 22px rgb(0 0 0 / 6%), 24px 24px 44px rgb(0 0 0 / 22%);
}
.tom__item-cover.note, .tom__item-cover.quote, .tom__item-cover.content {
  background: rgb(36, 37, 49);
}
.sortable-fallback .inner {
  background-color: var(--surface-color) !important;
  color: #a7b4c6;
}
body.is-dragging-card.floating-header mymind-top-of-mind > .tom__container {
  box-shadow: 0px 11px 11px rgb(0 0 0 / 22%), 0px 1px 0px #262834 !important;
}
body.is-dragging-card.floating-header mymind-top-of-mind {
  background: linear-gradient(180deg, rgb(167 180 198 / 10%) 5%, rgb(167 180 198 / 0%) 78%) !important;
}
#reader-inner {
  color: #a7b4c6;
}
#reader-inner hr {
  border-color: #a7b4c6;
}
mymind-card-note > .guts .field textarea:hover {
  background: #21242e;
  border-top: 1px solid #313646;
  border-bottom: 1px solid #313646;
  border-right: 1px solid #313646;
  box-shadow: 2px 2px 22px rgb(0 0 0 20%);
}
mymind-card-note > .guts .field textarea:focus {
  border-top: 1px solid #313646;
  border-bottom: 1px solid #313646;
  border-right: 1px solid #313646;
  box-shadow: 2px 2px 22px rgb(0 0 0 / 20%);
}
mymind-card-note > .guts .field textarea {
  --color: #a7b4c6;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  height: 45px;
}
mymind-card-note > .guts .field.empty textarea {
  border: 1px solid #313646;
}
mymind-card-note .guts:hover {
  box-shadow: none;
}
mymind-card-note .prose.ProseMirror-focused,
mymind-card-note .prose:hover {
  box-shadow: 2px 2px 22px rgb(0 0 0 / 50%);
}
mymind-card-note .prose {
  --surface-color: var(--surface-color-3);
  border: none;
  color: #737c8b;
}
.prose mark {
  color: #a7b4c6;
}
.editor-menu {
  background: linear-gradient(180deg, #676983 0%, #3e4052 83.9%);
  box-shadow: 4px 6px 32px rgb(0 0 0 / 63%), inset 0px 2px 0px #748297;
}
.mobile-editor-menu {
  background: linear-gradient(180deg, #676983 0%, #3e4052 84%);
}
.mobile-editor-menu button.toggle-italic {
  filter: drop-shadow(1px 1px 0px #373d46);
}
@media (min-width: 1025px) {
  .floating-header > .top:before {
    opacity: 0.9;
  }
  .floating-header mymind-search-bar:hover,
.floating-header mymind-search-bar.active {
    box-shadow: 8px 12px 44px #232633;
  }
}
@media (max-width: 1366px) {
  body.main-view:not(.desktop) .top::before {
    background: linear-gradient(180deg, #14161e 48%, rgb(20 22 30 / 0%) 100%);
  }
  body.main-view:not(.desktop).vibing mymind-search-bar .search-filters.filters--mobile {
    background-color: var(--surface-color-3);
    box-shadow: 11px 8px 33px rgb(0 0 0 / 50%);
  }
  mymind-search-bar .search-filters.filters--mobile {
    --surface-color: #1d1e28;
    box-shadow: 11px 8px 33px rgb(0 0 0 / 50%);
  }
}
@media (max-width: 1024px) {
  body:not(.desktop) mymind-search-bar > .inner,
body.desktop mymind-search-bar > .inner {
    box-shadow: 8px 17px 43px rgb(0 0 0 / 50%);
  }
  body:not(.desktop) mymind-search-bar .clear-icon,
body.desktop mymind-search-bar .clear-icon {
    --color: var(--color-2);
    --button-color: #343a43;
  }
  mymind-search-bar > .search-filters::before {
    background: linear-gradient(90deg, #1d1e28 0%, rgba(29, 30, 40, 0) 100%);
  }
  mymind-search-bar > .search-filters > .bubble:not(.date-range) .inner {
    background-color: #343a43;
    color: var(--color-2);
  }
  mymind-search-bar > .search-filters {
    --surface-color: #1d1e28;
    box-shadow: 11px 8px 33px rgb(0 0 0 / 50%);
  }
  .mobile-note-composer .card {
    --color: #748297;
    box-shadow: 11px -15px 43px rgb(0 0 0 / 10%);
  }
  body.floating-header.searching mymind-search-bar > .inner {
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  }
}
mymind-space-chooser ul > li:hover {
  background: #000;
  --surface-color: #000;
  --border-color: #000;
}
mymind-search-suggestions-bar > ul > li:hover {
  --surface-color: #333543;
  box-shadow: 4px 4px 22px -10px rgb(0 0 0 / 50%);
}
mymind-search-suggestions-bar > ul > li {
  --color: #a7b4c6;
}
.search-bar-focused .grid-wrapper::after {
  background: linear-gradient(0deg, rgba(20, 22, 30, 1) 0%, rgba(20, 22, 30, 0) 100%);
}
button[disabled] {
  background-color: #626c7a;
  color: #1d1e28;
}
button[disabled]:hover {
  background-color: #626c7a;
  color: #1d1e28;
}
.space-detail-view .space-button > mm-circle {
  --color: #fff;
}
.new-space-modal .step {
  box-shadow: 0px 4px 111px rgb(0 0 0 / 50%);
}
.empty-space > .top-circle {
  background-image: url("./../images/spaces/empty-top-dark-bg.png;quality(75);1920x_.webp");
}
.empty-space > .bottom-circle {
  background-image: url("./../images/spaces/circle-dark.webp;quality(75);1920x_.webp");
}
@media (max-width: 768px) {
  .empty-space > .top-circle {
    background-image: url("./../images/spaces/circle-top-mobile-dark.webp");
  }
  .empty-space > .bottom-circle {
    background-image: url("./../images/spaces/circle-bottom-mobile-dark.webp");
  }
}
.button-ggg:hover {
  --color: #fff;
}
mymind-stack mymind-card {
  box-shadow: none;
  filter: drop-shadow(0px 2px 6px rgb(0 0 0 / 40%));
}
mymind-stack .dummy {
  box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 40%);
}
mymind-stack.empty > .cards {
  background-image: url("./../images/spaces/empty-dark.png");
}
.bubble:not(.date-range) > .inner > .text {
  color: #a7b4c6;
}
.filters--desktop > .bubble > .inner > .remove {
  background-image: url("./../icons/remove-dark.svg");
}
@media (max-width: 768px) {
  .trash-header.view-header {
    box-shadow: 11px 0px 50px rgb(0 0 0 / 50%);
  }
}
menu.dropdown {
  --surface-color: #1d1e28;
}
menu.dropdown > .action {
  --color: #626c7a;
  background: #14161e;
}
menu.dropdown .space-details .search-filters > .bubble > .inner {
  background-color: #14161e;
  color: #626c7a;
}
body.native .delete-space-confirmation {
  --backdrop-color: rgb(42 51 64 / 80%);
}
mymind-tldr > .processing-content > .background {
  background: url("./../images/card/analyzing-blob-dark.webp") center / cover no-repeat;
}
mymind-tldr > .empty-guts > .cta::after {
  background: url("./../images/tldr/empty-circle-dark.svg") center / contain no-repeat;
}
@media (max-width: 768px) {
  mymind-empty-state {
    --color: #fff;
  }
  mymind-empty-state .guts {
    background-image: url("./../images/empty/bg-mobile-dark.webp");
  }
}
button.upload-from-device {
  background-color: #1d1e29;
}
.markdown-shortcuts__intro {
  background-image: none;
}
.markdown-shortcuts__intro::before {
  background: linear-gradient(45deg, #391e37, #4d1e3f);
  bottom: -17px;
  z-index: 9;
}
.markdown-shortcuts__intro .markdown-shortcuts__intro-wrapper {
  overflow: hidden;
  box-shadow: 5px 5px 29px #000;
  background: url('./../images/markdown-intro-bg-dark.webp') center / cover no-repeat;
}
mymind-card.movie:hover > mymind-image {
  filter: drop-shadow(11px 11px 33px rgb(0 0 0 / 50%));
}
mymind-card.article:hover {
  filter: drop-shadow(10px 17px 44px rgb(0 0 0 / 50%));
}
mymind-card .track-background {
  background-image: url("./../images/track/track-background-dark.png");
}
mymind-business-object {
  box-shadow: 0px 120px 34px 0px rgb(0 0 0 / 0%), 0px 77px 31px 0px rgb(0 0 0 / 4%), 0px 43px 32px 0px rgb(0 0 0 / 10%), 0px 19px 19px 0px rgb(0 0 0 / 10%), 0px 2px 7px 0px rgb(0 0 0 / 14%);
}
mymind-card.software-application i {
  background: #97A5BB;
}
mymind-software-application {
  box-shadow: 0px 77px 31px rgb(0 0 0 / 4%), 0px 43px 32px rgb(0 0 0 / 10%), 0px 19px 19px rgb(0 0 0 / 10%), 0px 2px 7px rgb(0 0 0 / 14%), inset 5em 2.4em 30px rgb(64 70 79 / 10%);
}
div.offline-only {
  background-image: url('./../images/offline/bg_dark.png');
}