/* 2026-09-06 — A4-inspired circular timer for the live prayer player. */
.prayer-stage .player-timer-wrap{
  width:240px;
  height:240px;
  margin:18px auto 14px;
  position:relative;
}

.prayer-stage .countdown{
  width:240px;
  height:240px;
  border-radius:50%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 22px;
  font-size:3.375rem;
  line-height:1;
  color:var(--ink);
  background:var(--paper);
  box-shadow:none;
}

/* Give the passage reference a little more breathing room before the ring. */
.prayer-stage .player-passage-reference + .player-timer-wrap{
  margin-top:12px;
}

/* The old conic-gradient ring has been replaced with SVG. SVG keeps the
   circle crisp at different display densities and lets the moving edge have
   a genuinely rounded cap rather than a square 90-degree cut. */
.prayer-stage .countdown::before{
  content:none;
}

.prayer-stage .a4-timer-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  shape-rendering:geometricPrecision;
}

.prayer-stage .a4-timer-track,
.prayer-stage .a4-timer-segment{
  fill:none;
  stroke-width:9;
}

.prayer-stage .a4-timer-track{
  stroke:var(--line);
}

.prayer-stage .a4-timer-segment{
  stroke-linecap:butt;
}

.prayer-stage .a4-timer-single{
  stroke:var(--blue);
  stroke-linecap:round;
}

.prayer-stage .a4-timer-warmup{
  stroke:var(--stage-warmup,var(--purple));
}

.prayer-stage .a4-timer-day{
  stroke:var(--stage-world);
}

.prayer-stage .a4-timer-cont{
  stroke:var(--stage-scripture);
}

.prayer-stage .a4-timer-colloquy{
  stroke:var(--stage-colloquy);
}

.prayer-stage .a4-timer-cap{
  r:4.5;
}

.prayer-stage .countdown::after{
  content:"Time remaining";
  position:absolute;
  left:0;
  right:0;
  top:58%;
  text-align:center;
  font-size:13px;
  line-height:1;
  font-weight:500;
  color:var(--muted-light);
  letter-spacing:.01em;
}

/* Pause/resume is positioned over the lower part of the timer circle, but it
   is a sibling of .countdown so the app's once-per-second text update cannot
   remove it from the DOM. Keep it completely flat and slightly separated
   from the "Time remaining" label. */
.prayer-stage .player-timer-wrap .timer-pause-control{
  position:absolute;
  left:50%;
  top:76%;
  transform:translate(-50%,-50%);
  z-index:4;
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  padding:0;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--paper);
  color:var(--ink);
  box-shadow:none;
  font-size:1.3125rem;
  line-height:1;
}

.prayer-stage .player-timer-wrap .timer-pause-control svg{
  display:block;
  width:22px;
  height:22px;
}

.prayer-stage .player-timer-wrap .timer-pause-control:hover{
  background:var(--soft);
  box-shadow:none;
}

.prayer-stage .player-timer-wrap .timer-pause-control:focus-visible{
  outline:var(--focus-outline);
  outline-offset:0;
  background:var(--soft);
}

.prayer-stage .time-columns{
  max-width:560px;
  margin:4px auto 18px;
  grid-template-columns:repeat(3,1fr);
}

.prayer-stage .time-col{
  padding:9px 12px;
}

.prayer-stage .time-col span{
  font-size:0.9375rem;
  line-height:1.2;
}

.prayer-stage .time-col b{
  display:block;
  margin-top:3px;
  font-size:1rem;
  line-height:1.15;
}

@media(max-width:640px){
  .prayer-stage .player-timer-wrap,
  .prayer-stage .countdown{
    width:212px;
    height:212px;
  }
  .prayer-stage .player-timer-wrap{
    margin-top:14px;
  }
  .prayer-stage .player-passage-reference + .player-timer-wrap{
    margin-top:11px;
  }
  .prayer-stage .countdown{
    font-size:2.9375rem;
  }
  .prayer-stage .countdown::after{
    font-size:12px;
  }
  .prayer-stage .player-timer-wrap .timer-pause-control{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }
  .prayer-stage .player-timer-wrap .timer-pause-control svg{
    width:20px;
    height:20px;
  }
  .prayer-stage .time-columns{
    margin-bottom:14px;
  }
  .prayer-stage .time-col{
    padding:7px 5px;
  }
  .prayer-stage .time-col span,
  .prayer-stage .time-col b{
    font-size:0.8125rem;
  }
}


/* The live player keeps the pause button inside .countdown. */
.prayer-stage .countdown{
  margin:18px auto 14px;
  font-variant-numeric:tabular-nums;
  font-weight:600;
}
.prayer-stage .countdown .timer-pause-control{
  position:absolute;
  left:50%;
  top:76%;
  transform:translate(-50%,-50%);
  z-index:4;
  width:auto;
  height:auto;
  min-width:44px;
  min-height:44px;
  padding:8px 12px;
  border:0;
  border-radius:var(--radius-pill);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:none;
  font-size:0.9375rem;
  font-weight:500;
  white-space:nowrap;
  line-height:1.2;
}
.prayer-stage .countdown .timer-pause-control svg{
  display:block;
  width:22px;
  height:22px;
}
.prayer-stage .countdown .timer-pause-control:hover{
  background:var(--soft);
  box-shadow:none;
}
.prayer-stage .countdown .timer-pause-control:focus{
  outline:none;
}
.prayer-stage .countdown .timer-pause-control:focus-visible{
  outline:var(--focus-outline);
  outline-offset:2px;
}
@media(max-width:640px){
  .prayer-stage .countdown{
    margin:14px auto 12px;
  }
  .prayer-stage .countdown .timer-pause-control{
    width:auto;
    height:auto;
    min-width:44px;
    min-height:44px;
  }
  .prayer-stage .countdown .timer-pause-control svg{
    width:20px;
    height:20px;
  }
}