/* Background-aware glass pass for Cadence task cards.
   These overrides deliberately avoid universal white rims. Controls inherit the card's
   status color and use backdrop-filter so the live card color remains visible through them. */

.task.not-started {
  --glass-source: rgb(213 127 123);
  --glass-source-deep: rgb(170 82 79);
  --glass-source-light: rgb(239 177 171);
}
.task.started {
  --glass-source: rgb(215 184 98);
  --glass-source-deep: rgb(166 126 35);
  --glass-source-light: rgb(241 222 162);
}
.task.completed {
  --glass-source: rgb(116 174 129);
  --glass-source-deep: rgb(61 126 78);
  --glass-source-light: rgb(180 216 187);
}

/* Remove the universal white optical overlays inside colored cards. */
.task::before,
.task::after,
.task .glassControl::before,
.task .glassControl::after,
.taskFooter button::before,
.taskFooter button::after,
.cardSteps li::before,
.cardSteps li::after {
  content: none !important;
}

/* Keep the card itself rich and dimensional without a white halo. */
.liquidCard {
  border-color: color-mix(in srgb, var(--glass-source, #789) 62%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--glass-source-light, #fff) 58%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--glass-source-deep, #333) 22%, transparent),
    0 12px 28px rgba(38, 55, 44, .14),
    0 2px 5px rgba(38, 55, 44, .08);
}

.task.not-started {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--glass-source-light) 72%, transparent),
    color-mix(in srgb, var(--glass-source) 86%, transparent) 48%,
    color-mix(in srgb, var(--glass-source-deep) 70%, transparent));
}
.task.started {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--glass-source-light) 74%, transparent),
    color-mix(in srgb, var(--glass-source) 88%, transparent) 48%,
    color-mix(in srgb, var(--glass-source-deep) 66%, transparent));
}
.task.completed {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--glass-source-light) 72%, transparent),
    color-mix(in srgb, var(--glass-source) 88%, transparent) 48%,
    color-mix(in srgb, var(--glass-source-deep) 66%, transparent));
}

/* Lens controls: the surface is mostly transparent so backdrop-filter is reading the
   actual red / amber / green underneath, while the rim is derived from the same hue. */
.taskFooter button,
.task .linkedTutorial,
.task .chip,
.task .cardSteps li,
.task .cardSteps li > b {
  backdrop-filter: blur(7px) saturate(135%) contrast(104%);
  -webkit-backdrop-filter: blur(7px) saturate(135%) contrast(104%);
  background:
    radial-gradient(120% 90% at 50% 118%,
      color-mix(in srgb, var(--glass-source-deep) 18%, transparent) 0%,
      transparent 58%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--glass-source-light) 18%, transparent),
      color-mix(in srgb, var(--glass-source) 12%, transparent) 52%,
      color-mix(in srgb, var(--glass-source-deep) 16%, transparent));
  border-color: color-mix(in srgb, var(--glass-source) 74%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--glass-source-light) 72%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--glass-source-deep) 34%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--glass-source-light) 24%, transparent),
    0 4px 10px rgba(35, 52, 41, .07);
}

/* The button's curved rim gets a source-colored optical fringe instead of white plastic. */
.taskFooter button {
  position: relative;
  overflow: hidden;
}
.taskFooter button > svg {
  position: relative;
  z-index: 2;
}
.taskFooter button::after {
  content: "" !important;
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(70% 45% at 50% -8%,
      color-mix(in srgb, var(--glass-source-light) 46%, transparent),
      transparent 68%),
    radial-gradient(90% 52% at 50% 112%,
      color-mix(in srgb, var(--glass-source-deep) 22%, transparent),
      transparent 70%);
  opacity: .72;
}
.taskFooter button:hover {
  background:
    radial-gradient(120% 90% at 50% 118%,
      color-mix(in srgb, var(--glass-source-deep) 21%, transparent) 0%,
      transparent 58%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--glass-source-light) 24%, transparent),
      color-mix(in srgb, var(--glass-source) 16%, transparent) 52%,
      color-mix(in srgb, var(--glass-source-deep) 19%, transparent));
  border-color: color-mix(in srgb, var(--glass-source) 88%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--glass-source-light) 82%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--glass-source-deep) 42%, transparent),
    0 7px 14px rgba(35, 52, 41, .10);
}

/* Keep expanded steps integrated with the card instead of inserting white tiles. */
.task .cardSteps {
  background: color-mix(in srgb, var(--glass-source) 10%, transparent);
  border-top-color: color-mix(in srgb, var(--glass-source-deep) 20%, transparent);
}
.task .cardSteps li {
  color: var(--ink);
}
.task .cardSteps li > b {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-source-light) 55%, transparent);
}
.task .linkedTutorial {
  color: color-mix(in srgb, var(--glass-source-deep) 72%, #173328 28%);
}
.task .taskFooter {
  border-top-color: color-mix(in srgb, var(--glass-source-deep) 19%, transparent);
}

/* Avoid the generic white glass treatment leaking into card children. */
.task .glassControl {
  border-color: color-mix(in srgb, var(--glass-source) 74%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .taskFooter button,
  .task .linkedTutorial,
  .task .chip,
  .task .cardSteps li,
  .task .cardSteps li > b {
    background: rgba(255,255,255,.10);
    border-color: rgba(60,60,60,.12);
  }
}