/* =========================================================
   MoveDone Update 030
   Lock in the playful angled MoveDone completion mark
   ========================================================= */

/* Header / footer brand mark */
.brand-mark,
.movedone-mark,
.logo-mark,
.site-logo-mark {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  display: inline-block !important;
  overflow: visible !important;
  border-radius: 12px 14px 13px 11px !important;
  background: #2cab6f !important;
  transform: rotate(-4deg) !important;
  box-shadow: 0 8px 18px rgba(44, 171, 111, 0.17) !important;
}

/* Hide any old icon glyph/SVG inside the mark */
.brand-mark > svg,
.brand-mark > img,
.brand-mark > span,
.movedone-mark > svg,
.movedone-mark > img,
.logo-mark > svg,
.logo-mark > img {
  opacity: 0 !important;
}

/* Big playful white tick */
.brand-mark::after,
.movedone-mark::after,
.logo-mark::after,
.site-logo-mark::after {
  content: "" !important;
  position: absolute !important;
  left: 13px !important;
  top: 5px !important;
  width: 15px !important;
  height: 27px !important;
  border-right: 7px solid #fff !important;
  border-bottom: 7px solid #fff !important;
  border-radius: 1px !important;
  transform: rotate(40deg) !important;
  transform-origin: center !important;
}

/* Keep the text/mark combination lively but balanced */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.brand .brand-mark {
  margin-left: 1px !important;
}

/* The larger "plan ready" mark uses the same family */
.generated-success {
  position: relative !important;
  width: 66px !important;
  height: 66px !important;
  border-radius: 18px 20px 19px 17px !important;
  background: #2cab6f !important;
  transform: rotate(-3deg) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 10px 24px rgba(44, 171, 111, 0.18) !important;
}

.generated-success::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 7px !important;
  width: 21px !important;
  height: 39px !important;
  border-right: 9px solid #fff !important;
  border-bottom: 9px solid #fff !important;
  border-radius: 1px !important;
  transform: rotate(40deg) !important;
}

/* Checklist: outline silhouette when incomplete */
.generated-task-status {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 2px solid #2cab6f !important;
  border-radius: 9px 11px 10px 8px !important;
  background: transparent !important;
  transform: rotate(-3deg) !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* Filled MoveDone mark when complete */
.generated-task.completed .generated-task-status,
.generated-task-status.is-complete,
.generated-task-status[aria-label*="incomplete" i] {
  background: #2cab6f !important;
  border-color: #2cab6f !important;
  box-shadow: 0 6px 15px rgba(44, 171, 111, 0.16) !important;
}

.generated-task.completed .generated-task-status::after,
.generated-task-status.is-complete::after,
.generated-task-status[aria-label*="incomplete" i]::after {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 3px !important;
  width: 11px !important;
  height: 21px !important;
  border-right: 5px solid #fff !important;
  border-bottom: 5px solid #fff !important;
  transform: rotate(40deg) !important;
}

/* Keep the logo from feeling oversized on phones */
@media (max-width: 620px) {
  .brand-mark,
  .movedone-mark,
  .logo-mark,
  .site-logo-mark {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .brand-mark::after,
  .movedone-mark::after,
  .logo-mark::after,
  .site-logo-mark::after {
    left: 11px !important;
    top: 4px !important;
    width: 13px !important;
    height: 23px !important;
    border-right-width: 6px !important;
    border-bottom-width: 6px !important;
  }
}