/* Treatly — the deadline countdown
 *
 * A lock-in gets one shot: when the clock runs out the row is gone for good,
 * with nothing to renew. So the last stretch is a colour, not a texture — the
 * frame warms six hours out, turns danger red at an hour, and breathes through
 * the final ten minutes. Nothing is drawn over the card, so it stays fully
 * usable right up to the second it disappears.
 *
 * Loaded last on purpose: the engraved task rows set their own borders with
 * !important, and running out of time has to beat a category tint. */

.task-expiring {
  --task-danger: var(--danger, #C0392B);
  --task-danger-rgb: var(--danger-rgb, 192, 57, 43);
}

/* Two selector groups per tier: the engraved home rows (which carry category
 * borders at high specificity) and the plain inline-styled feed cards. */
body:not(.biz-company-open) .person-feed-tasks .task-row.task-expiring--warn:not(.task-row--done):not(.expired-card),
[data-taskcard].task-expiring--warn {
  border-color: rgba(var(--task-danger-rgb), .45) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--task-danger-rgb), .16) !important;
}
body:not(.biz-company-open) .person-feed-tasks .task-row.task-expiring--danger:not(.task-row--done):not(.expired-card),
[data-taskcard].task-expiring--danger {
  border-color: var(--task-danger) !important;
  box-shadow: inset 0 0 0 1.5px rgba(var(--task-danger-rgb), .45),
              0 3px 16px rgba(var(--task-danger-rgb), .2) !important;
}
body:not(.biz-company-open) .person-feed-tasks .task-row.task-expiring--critical:not(.task-row--done):not(.expired-card),
[data-taskcard].task-expiring--critical {
  border-color: var(--task-danger) !important;
  animation: taskDeadlinePulse 1.15s ease-in-out infinite;
}
@keyframes taskDeadlinePulse {
  0%, 100% {
    box-shadow: inset 0 0 0 2px var(--task-danger), 0 0 0 0 rgba(var(--task-danger-rgb), .45);
  }
  60% {
    box-shadow: inset 0 0 0 2px var(--task-danger), 0 0 0 8px rgba(var(--task-danger-rgb), 0);
  }
}

/* The readout. It was another chip in the run of chips, which is why it read
   as clutter — a label about the task rather than the clock on it. It sits at
   the far end of the line now, on its own, with the number set in figures and
   the unit dropped underneath in small caps. Quiet while there is room, loud
   once there isn't. */
.task-deadline {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding: 1px 2px 1px 8px;
  border-radius: 0;
  white-space: nowrap;
  line-height: 1;
}
.task-deadline b {
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--t2);
}
.task-deadline i {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--t4);
  margin-top: 1px;
}
/* Colour arrives in the figures first, then takes the whole readout. */
.task-deadline--warn b { color: var(--danger, #C0392B); }
.task-deadline--warn i { color: rgba(var(--danger-rgb, 192, 57, 43), .75); }
.task-deadline--danger b,
.task-deadline--critical b {
  color: var(--danger, #C0392B);
  font-size: 13.5px;
}
.task-deadline--danger i,
.task-deadline--critical i { color: var(--danger, #C0392B); opacity: .8; }
.task-deadline--critical b { animation: taskDeadlineBlink 1.15s ease-in-out infinite; }
.task-deadline--gone b {
  font-size: 10px;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── the fuse ───────────────────────────────────────────────────────────────
   A hairline along the bottom edge of the row that empties as the last day
   runs down. It is the same information as the readout, told as a length
   instead of a number, so a list of rows shows at a glance which one is
   closing — without any of them shouting. Nothing renders outside the final
   twenty-four hours. */
.task-fuse {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.task-fuse i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(var(--danger-rgb, 192, 57, 43), .35) 0%,
    rgba(var(--danger-rgb, 192, 57, 43), .7) 100%);
  transition: width 1s linear;
}
.task-expiring--danger .task-fuse i,
.task-expiring--critical .task-fuse i {
  background: linear-gradient(90deg,
    rgba(var(--danger-rgb, 192, 57, 43), .6) 0%,
    var(--danger, #C0392B) 100%);
}
.task-expiring--critical .task-fuse i {
  animation: taskFusePulse 1.15s ease-in-out infinite;
}
@keyframes taskFusePulse {
  0%, 100% { opacity: 1; }
  55% { opacity: .55; }
}
/* The chip never fades — the most urgent state must never read as the
 * faintest one. It pulses a ring instead, so it stays solid at every frame. */
@keyframes taskDeadlineBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb, 192, 57, 43), .55); }
  70% { box-shadow: 0 0 0 5px rgba(var(--danger-rgb, 192, 57, 43), 0); }
}

/* Time's up. The row slides out of the list and does not come back. */
.task-gone {
  animation: taskGone .62s cubic-bezier(.4, 0, .7, .3) forwards;
  pointer-events: none;
}
@keyframes taskGone {
  0% { opacity: 1; transform: translateX(0) scale(1); }
  25% { opacity: .9; transform: translateX(-4px) scale(.995); filter: saturate(.4); }
  100% { opacity: 0; transform: translateX(28px) scale(.94); filter: saturate(0) blur(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .task-deadline--critical b,
  .task-fuse i { animation: none !important; }
  body:not(.biz-company-open) .person-feed-tasks .task-row.task-expiring--critical:not(.task-row--done):not(.expired-card),
  [data-taskcard].task-expiring--critical {
    animation: none !important;
    box-shadow: inset 0 0 0 2px var(--task-danger) !important;
  }
  .task-gone { animation: taskGoneCalm .3s linear forwards; }
  @keyframes taskGoneCalm { to { opacity: 0; } }
}