/* stage-38-tasks-actions-polish: calm daily checklist and primary Add action layer. */

.focus-dashboard {
  --stage38-task-accent: var(--focus-accent-sage, #5f9073);
  --stage38-add-accent: var(--focus-accent-terracotta, #c56a4b);
}

.dashboard-rail .focus-tasks-card {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.86rem;
  border-radius: var(--focus-radius-lg, 24px) !important;
  border: 1px solid color-mix(in srgb, var(--stage38-task-accent) 13%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--stage38-task-accent) 14%, transparent), transparent 13rem),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--primary, #5678f5) 9%, transparent), transparent 12rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 88%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 72%, transparent)) !important;
  box-shadow:
    0 1.2rem 3.1rem color-mix(in srgb, var(--stage38-task-accent) 12%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 14%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(24px) saturate(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(1.04);
}

.dashboard-rail .focus-tasks-card::before {
  inset: 0.72rem;
  border-radius: calc(var(--focus-radius-lg, 24px) - 8px);
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.16), transparent 43%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--stage38-task-accent) 8%, transparent), transparent 12rem);
  opacity: 0.72;
}

.focus-tasks-card .panel-title {
  align-items: center;
  min-height: auto;
  margin: 0 !important;
  padding: 0;
}

.focus-tasks-card .panel-title h2 {
  margin: 0;
  color: color-mix(in srgb, var(--primary, #5678f5) 82%, var(--stage38-task-accent) 18%);
  font-size: clamp(1.1rem, 1vw + 0.82rem, 1.36rem);
  font-weight: 760;
  letter-spacing: 0;
  text-shadow: 0 0 22px color-mix(in srgb, var(--primary, #5678f5) 18%, transparent);
}

.focus-tasks-card .panel-title::after {
  content: "";
  width: 2.55rem;
  height: 0.24rem;
  margin-left: auto;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--stage38-task-accent), color-mix(in srgb, var(--primary, #5678f5) 56%, transparent));
  box-shadow: 0 0 1rem color-mix(in srgb, var(--stage38-task-accent) 26%, transparent);
  opacity: 0.78;
}

.focus-tasks-card .plan-motto {
  margin: -0.16rem 0 0 !important;
  color: color-mix(in srgb, var(--text-muted, #6f655e) 88%, var(--stage38-task-accent) 12%);
  font-size: 0.86rem;
  font-weight: 560;
  line-height: 1.5;
}

.focus-tasks-list {
  display: grid;
  gap: 0.62rem;
  margin-top: 0.1rem;
}

.focus-task-item {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 3.64rem;
  padding: 0.72rem 0.68rem 0.72rem 0.88rem !important;
  border-radius: var(--focus-radius-md, 18px) !important;
  border: 1px solid color-mix(in srgb, var(--stage38-task-accent) 13%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #fff 26%, transparent), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 60%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 64%, transparent)) !important;
  box-shadow:
    0 0.7rem 1.65rem color-mix(in srgb, var(--text-primary, #2f2a26) 7%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.focus-task-item::before {
  inset: 0.72rem auto 0.72rem 0.52rem;
  width: 0.2rem;
  background: linear-gradient(180deg, var(--stage38-task-accent), color-mix(in srgb, var(--primary, #5678f5) 52%, transparent));
}

.focus-task-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--stage38-task-accent) 9%, transparent), transparent 8rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--focus-motion-standard, 220ms cubic-bezier(.2,.8,.2,1));
}

.focus-task-item:hover,
.focus-task-item:focus-within {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--stage38-task-accent) 31%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  box-shadow:
    0 1rem 2.1rem color-mix(in srgb, var(--stage38-task-accent) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.focus-task-item:hover::after,
.focus-task-item:focus-within::after {
  opacity: 1;
}

.focus-task-copy {
  position: relative;
  z-index: 1;
  padding-left: 0.18rem !important;
  color: var(--text-primary, #2f2a26);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.35;
}

.focus-task-actions {
  position: relative;
  z-index: 2;
  gap: 0.24rem;
  padding: 0.22rem !important;
  border-radius: 0.9rem !important;
  border: 1px solid color-mix(in srgb, var(--stage38-task-accent) 11%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background: color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 52%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.focus-task-actions .icon-action {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem;
  border-radius: 0.7rem !important;
  background-size: 66% 66% !important;
  transition:
    transform var(--focus-motion-fast, 140ms cubic-bezier(.2,.8,.2,1)),
    background-color var(--focus-motion-fast, 140ms cubic-bezier(.2,.8,.2,1)),
    box-shadow var(--focus-motion-fast, 140ms cubic-bezier(.2,.8,.2,1));
}

.focus-task-actions .icon-action:hover,
.focus-task-actions .icon-action:focus-visible {
  transform: translateY(-1px);
  background-color: color-mix(in srgb, var(--stage38-task-accent) 14%, rgba(255, 255, 255, 0.22)) !important;
  box-shadow: 0 0.62rem 1.25rem color-mix(in srgb, var(--stage38-task-accent) 16%, transparent);
}

.focus-tasks-action {
  align-self: stretch;
  min-height: 2.95rem !important;
  margin-top: 0.1rem !important;
  border-radius: 1rem !important;
  border: 1px solid color-mix(in srgb, var(--primary, #5678f5) 18%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  color: color-mix(in srgb, var(--primary, #5678f5) 88%, var(--text-primary, #2f2a26) 12%) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.26), transparent 5rem),
    linear-gradient(135deg, color-mix(in srgb, var(--primary, #5678f5) 10%, var(--surface-elevated, rgba(255,255,255,.55))), color-mix(in srgb, var(--stage38-task-accent) 8%, var(--surface-glass, rgba(255,255,255,.42)))) !important;
  box-shadow:
    0 0.8rem 1.9rem color-mix(in srgb, var(--primary, #5678f5) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.19) !important;
}

.focus-tasks-action:hover,
.focus-tasks-action:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary, #5678f5) 34%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
}

.focus-task-empty {
  min-height: 5.1rem;
  border-radius: var(--focus-radius-md, 18px) !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--stage38-task-accent) 15%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--stage38-task-accent) 10%, transparent), transparent 10rem),
    color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 38%, transparent) !important;
  font-weight: 540;
}

.top-add-button {
  --stage38-add-accent: var(--focus-accent-terracotta, #c56a4b);
  min-width: 10.4rem !important;
  height: 3.15rem !important;
  min-height: 3.15rem !important;
  padding: 0 1.05rem !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--stage38-add-accent) 28%, rgba(255,255,255,.34)) !important;
  color: color-mix(in srgb, var(--text-primary, #2f2a26) 78%, #fff 22%) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.4), transparent 5.6rem),
    linear-gradient(135deg, color-mix(in srgb, var(--stage38-add-accent) 70%, #fff 16%), color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 52%, var(--primary, #5678f5) 14%)) !important;
  box-shadow:
    0 1rem 2.4rem color-mix(in srgb, var(--stage38-add-accent) 22%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 16%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.top-add-button[aria-expanded="true"] {
  transform: translateY(-1px);
  box-shadow:
    0 1.24rem 2.9rem color-mix(in srgb, var(--stage38-add-accent) 28%, transparent),
    0 0 0 4px color-mix(in srgb, var(--stage38-add-accent) 14%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 18%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.add-menu {
  width: min(23rem, calc(100vw - 2rem));
  padding: 0.72rem !important;
  border-radius: var(--focus-radius-lg, 24px) !important;
  border: 1px solid color-mix(in srgb, var(--primary, #5678f5) 12%, var(--focus-border-elevated, rgba(255,255,255,.32))) !important;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary, #5678f5) 12%, transparent), transparent 13rem),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 13%, transparent), transparent 12rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 91%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 76%, transparent)) !important;
  box-shadow:
    0 1.7rem 4.4rem color-mix(in srgb, var(--text-primary, #2f2a26) 16%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 14%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.add-menu-head {
  padding: 0.46rem 0.48rem 0.72rem !important;
}

.add-menu button {
  min-height: 3.92rem !important;
  grid-template-columns: 2.5rem minmax(0, 1fr) !important;
  gap: 0.74rem !important;
  border-radius: 1rem !important;
  border: 1px solid color-mix(in srgb, var(--add-action, var(--primary, #5678f5)) 14%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--add-action, var(--primary, #5678f5)) 8%, var(--surface-elevated, rgba(255,255,255,.55))), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 74%, transparent)) !important;
}

.add-menu button:hover,
.add-menu button:focus-visible {
  transform: translateX(2px) translateY(-1px);
  border-color: color-mix(in srgb, var(--add-action, var(--primary, #5678f5)) 34%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
}

.add-menu-icon {
  width: 2.24rem !important;
  height: 2.24rem !important;
  border-radius: 0.86rem !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.28), transparent 1.7rem),
    linear-gradient(145deg, color-mix(in srgb, var(--add-action, var(--primary, #5678f5)) 17%, transparent), color-mix(in srgb, var(--surface-elevated, #fff) 58%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.add-menu-backdrop {
  transition: opacity var(--focus-motion-standard, 220ms cubic-bezier(.2,.8,.2,1));
}

:root[data-theme="dark"] .dashboard-rail .focus-tasks-card {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--stage38-task-accent) 16%, transparent), transparent 13rem),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--primary, #6f8cff) 12%, transparent), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.052)) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

:root[data-theme="dark"] .focus-task-item {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(19, 23, 34, 0.42) !important;
  border-color: color-mix(in srgb, var(--stage38-task-accent) 21%, rgba(255,255,255,.1)) !important;
}

:root[data-theme="dark"] .focus-task-actions {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

:root[data-theme="dark"] .add-menu {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary, #6f8cff) 15%, transparent), transparent 13rem),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 12%, transparent), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.055)) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

@media (max-width: 760px) {
  .dashboard-rail .focus-tasks-card {
    gap: 0.76rem;
    border-radius: 1.35rem !important;
  }

  .focus-task-item {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 0.72rem !important;
  }

  .focus-task-actions {
    justify-self: end;
    margin-top: 0.06rem;
  }

  .focus-task-actions .icon-action {
    width: 2.15rem !important;
    height: 2.15rem !important;
  }

  .focus-tasks-action {
    min-height: 2.8rem !important;
  }

  .top-add-button {
    width: 100%;
    min-width: 0 !important;
  }

  .add-menu-backdrop:not([hidden]) {
    background:
      radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary, #5678f5) 10%, transparent), transparent 18rem),
      color-mix(in srgb, #11151c 42%, transparent);
  }

  body.add-menu-open .add-menu {
    width: min(100%, 33rem) !important;
    max-height: min(76dvh, 34rem);
    padding: 0.78rem 0.9rem calc(1rem + env(safe-area-inset-bottom)) !important;
    border-radius: 1.8rem 1.8rem 0 0 !important;
  }

  .add-menu button {
    min-height: 4.12rem !important;
  }
}

@media (max-width: 430px) {
  .focus-tasks-card .panel-title h2 {
    font-size: 1.08rem;
  }

  .focus-task-copy {
    font-size: 0.9rem;
  }

  .add-menu button {
    grid-template-columns: 2.28rem minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .focus-task-item,
  .focus-task-item::after,
  .focus-task-actions .icon-action,
  .focus-tasks-action,
  .top-add-button,
  .add-menu,
  .add-menu button,
  .add-menu-backdrop {
    animation: none !important;
    transition: none !important;
  }

  .focus-task-item:hover,
  .focus-task-item:focus-within,
  .focus-task-actions .icon-action:hover,
  .focus-task-actions .icon-action:focus-visible,
  .focus-tasks-action:hover,
  .focus-tasks-action:focus-visible,
  .top-add-button[aria-expanded="true"],
  .add-menu button:hover,
  .add-menu button:focus-visible {
    transform: none !important;
  }
}