/*
  PLAYRS-WORLD-PROGRESS-V1 -- segmented module progress bars inside the
  homepage ORACLE deck (owner: js/playrs-world-progress-v1.js).
  ■ complete  ▣ in progress  ▧ to come. Theme tokens; red only marks
  the module being built now.
  When startDate + deadline are present, a real-time deadline bar tracks
  elapsed time against the project window.
*/
#playrs-world-progress { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--playrs-border); display: grid; gap: 12px; }
#playrs-world-progress[hidden] { display: none; }
.pwp-row { display: grid; gap: 7px; opacity: .5; transition: opacity 240ms ease; }
.pwp-row.is-selected, #playrs-world-progress:not(.has-selection) .pwp-row { opacity: 1; }
.pwp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.pwp-name { font-weight: 700; color: var(--playrs-text); }
.pwp-count { color: var(--playrs-text-muted); font-variant-numeric: tabular-nums; }
.pwp-count b { color: var(--playrs-text); font-weight: 700; }
.pwp-bar { display: grid; grid-template-columns: repeat(var(--pwp-total, 13), minmax(0, 1fr)); gap: 3px; height: 7px; }
.pwp-seg { position: relative; border: 1px solid var(--playrs-border-strong); }
.pwp-seg.is-done { background: var(--playrs-text); border-color: var(--playrs-text); }
.pwp-seg.is-now { border-color: #e3261c; overflow: hidden; }
.pwp-seg.is-now::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: #e3261c;
  transform-origin: left center;
  animation: pwp-build 2.4s cubic-bezier(.45,0,.2,1) infinite;
}
.pwp-seg.is-now::before { content: ""; position: absolute; left: -3px; top: -3px; bottom: -3px; width: 1px; background: var(--playrs-text-muted); }
@keyframes pwp-build {
  0% { transform: scaleX(.08); opacity: .55; }
  60% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  .pwp-seg.is-now::after { animation: none; transform: scaleX(.5); }
}

/* -- deadline bar ---------------------------------------------------- */
.pwp-deadline { display: grid; gap: 4px; }
.pwp-dl-track {
  height: 2px;
  background: var(--playrs-border-strong);
  position: relative;
  overflow: hidden;
}
.pwp-dl-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--playrs-text);
  opacity: 0.45;
  transition: width 0.9s linear;
}
.pwp-dl-label {
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--playrs-text-muted);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .pwp-dl-fill { transition: none; }
}