.focusCard {
  overflow: hidden !important;
}

.focusCard .focusHeader {
  overflow: visible !important;
  pointer-events: none !important;
}

.focusCard > .focusDueMeta {
  position: absolute !important;
  top: 50px !important;
  left: auto !important;
  right: 12px !important;
  bottom: auto !important;
  transform: none !important;
  width: max-content !important;
  max-width: 148px !important;
  min-height: 38px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 6px 8px !important;
  background: rgba(18,104,255,.08) !important;
  text-align: right !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 8 !important;
}

.taskMeta h3 {
  font-size: 19px !important;
  line-height: 1.02 !important;
  font-weight: 1000 !important;
  letter-spacing: -.055em !important;
}

.dueTimeLine {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.02em;
}

.dueRemainingLine {
  display: block;
  color: var(--blue);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
}

.dueGlue {
  font-size: .86em;
  font-weight: 800;
  text-transform: lowercase;
}

.taskCard {
  padding-right: 10px !important;
}

.taskMeta {
  padding-right: 74px !important;
  align-items: center !important;
}

.taskMeta p.taskDueInline {
  max-width: min(245px, 100%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.05 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}

.taskMeta p.taskDueInline .dueTimeLine,
.taskMeta p.taskDueInline .dueRemainingLine {
  display: inline !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}

.taskMeta p.taskDueInline .dueTimeLine {
  color: var(--ink);
}

.taskMeta p.taskDueInline .dueRemainingLine {
  color: var(--blue);
}

.taskMeta p.taskDueInline .dueTimeLine::after {
  content: "·";
  margin-left: 6px;
  color: var(--muted);
  font-weight: 900;
}

.taskCard.done .taskMeta p.taskDueInline .dueRemainingLine {
  color: var(--mint);
}

.taskCard.skipped .taskMeta p.taskDueInline .dueRemainingLine {
  color: var(--muted);
}

.taskDueMeta {
  display: none !important;
}

.completedPlaceholderSection {
  margin-top: 12px !important;
  border: 1px solid rgba(25,210,143,.16) !important;
  background: rgba(255,255,255,.92) !important;
}

.completedPlaceholderSection .sectionHeader {
  cursor: pointer !important;
}

.completedEmptyText {
  margin: 0 14px 14px !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
  background: rgba(25,210,143,.08) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.completedMirrorCard {
  min-height: 92px !important;
}

.completedMirrorCard .taskMeta {
  padding-right: 96px !important;
}

.completedMirrorActions {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  width: 76px !important;
  z-index: 4 !important;
}

.completedMirrorActions .restoreCompletedTask {
  width: 76px !important;
  min-height: 46px !important;
  border-radius: 17px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  background: var(--lime) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
}

.completedMirrorActions .restoreCompletedTask small {
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}

@media (max-width: 430px) {
  .focusCard > .focusDueMeta {
    display: flex !important;
    top: 50px !important;
    right: 10px !important;
    max-width: 138px !important;
  }

  .taskCard {
    padding-right: 10px !important;
  }

  .taskMeta {
    padding-right: 70px !important;
  }

  .taskMeta h3 {
    font-size: 18px !important;
  }

  .taskMeta p.taskDueInline {
    max-width: min(205px, 100%) !important;
    font-size: 15px !important;
    gap: 5px !important;
  }

  .taskMeta p.taskDueInline .dueTimeLine,
  .taskMeta p.taskDueInline .dueRemainingLine {
    font-size: 15px !important;
  }

  .completedMirrorCard .taskMeta {
    padding-right: 92px !important;
  }
}