/* =========================================================
   MoveDone Update 038
   Checklist mark = scaled version of the main MoveDone mark
   ========================================================= */

:root {
  --md-mark-green: #2cab6f;
}

/* Checklist base mark — same angled rounded-square silhouette as logo */
.generated-task-status {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;

  border: 2px solid var(--md-mark-green) !important;
  border-radius: 10px 12px 11px 9px !important;

  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;

  transform: rotate(-4deg) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.generated-task-status::before,
.generated-task-status::after {
  content: none !important;
}

/* Completed = same playful MoveDone tick family */
.generated-task.completed .generated-task-status,
.generated-task-status.is-complete,
.generated-task-status[aria-label*="Mark task incomplete" i] {
  border-color: var(--md-mark-green) !important;
  background: var(--md-mark-green) !important;
  box-shadow: 0 6px 15px rgba(44, 171, 111, 0.18) !important;
}

.generated-task.completed .generated-task-status::before,
.generated-task-status.is-complete::before,
.generated-task-status[aria-label*="Mark task incomplete" i]::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 18px !important;
  width: 13px !important;
  height: 6px !important;
  border-radius: 3px !important;
  background: #fff !important;
  transform: rotate(43deg) !important;
  transform-origin: center !important;
}

.generated-task.completed .generated-task-status::after,
.generated-task-status.is-complete::after,
.generated-task-status[aria-label*="Mark task incomplete" i]::after {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 11px !important;
  width: 24px !important;
  height: 7px !important;
  border-radius: 3px !important;
  background: #fff !important;
  transform: rotate(-55deg) !important;
  transform-origin: left center !important;
}

.generated-task {
  grid-template-columns: 46px 1fr auto !important;
  align-items: center !important;
}

/* Plan-ready mark = same mark family, larger */
.generated-success {
  position: relative !important;
  width: 70px !important;
  height: 70px !important;
  display: block !important;

  border-radius: 18px 21px 19px 17px !important;
  background: var(--md-mark-green) !important;

  color: transparent !important;
  font-size: 0 !important;

  transform: rotate(-4deg) !important;
  box-shadow: 0 10px 24px rgba(44, 171, 111, 0.18) !important;
}

.generated-success::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 34px !important;
  width: 23px !important;
  height: 10px !important;
  border-radius: 5px !important;
  background: #fff !important;
  transform: rotate(43deg) !important;
}

.generated-success::after {
  content: "" !important;
  position: absolute !important;
  left: 28px !important;
  top: 20px !important;
  width: 43px !important;
  height: 11px !important;
  border-radius: 5px !important;
  background: #fff !important;
  transform: rotate(-55deg) !important;
  transform-origin: left center !important;
}

@media (max-width: 620px) {
  .generated-task-status {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .generated-task {
    grid-template-columns: 40px 1fr !important;
  }

  .generated-task.completed .generated-task-status::before,
  .generated-task-status.is-complete::before,
  .generated-task-status[aria-label*="Mark task incomplete" i]::before {
    left: 7px !important;
    top: 16px !important;
    width: 11px !important;
    height: 5px !important;
  }

  .generated-task.completed .generated-task-status::after,
  .generated-task-status.is-complete::after,
  .generated-task-status[aria-label*="Mark task incomplete" i]::after {
    left: 13px !important;
    top: 10px !important;
    width: 22px !important;
    height: 6px !important;
  }
}