/* ======================================================================
   OVERNIGHT-10, JOB 2 -- what the ringing timer looks like.
   Behind `site_job2_timer`, loaded after night-polish-c.css so it needs no
   `!important`.

   IT ADDS TO ITEM 33'S POP-UP, it does not replace it. `.tmr-pop`,
   `.tmr-pop__in`, `.tmr-pop__t`, `.tmr-pop__h` and `.tmr-pop__b` keep every
   rule static/site/night-polish-c.css gives them -- same maroon ground, same
   cream words, same radius, same shadow, same clearance over the consent
   bar. What is here is only the three things this job adds: a COLUMN so more
   than one pop-up can be up at once, a STOP button big enough to hit without
   looking, and a visible "this one is ringing" state on the green pill.
   ====================================================================== */

/* (1) THE COLUMN. The pop-ups were a singleton pinned to the corner -- the
   second timer to finish removed the first one's pop-up, which is exactly
   what the brief says must not happen. The column takes the corner instead
   and the pop-ups are ordinary blocks inside it, newest at the bottom. */
.tmr-pops {
  position: fixed;
  z-index: 400;              /* above the floating bar (300), as item 33 */
  right: 24px;
  bottom: 110px;             /* clear of the consent bar, as item 33 */
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(380px, calc(100vw - 32px));
  /* the column must not swallow clicks meant for the page around it */
  pointer-events: none;
}
.tmr-pops > .tmr-pop { pointer-events: auto; }

/* inside the column a pop-up is no longer the thing that is positioned */
.tmr-pops > .tmr-pop {
  position: static;
  right: auto;
  bottom: auto;
  max-width: none;
}

/* (2) THE STOP BUTTON. "a big STOP button that silences + dismisses" -- so
   it is the full width of the pop-up and 44px tall, which is the smallest
   target the accessibility notes on this site accept for a primary action
   (ACCESSIBILITY.md). It is the same cream-on-maroon pill as item 33's
   "Got it", scaled up, rather than a new colour nobody has seen. */
.tmr-pop__stop {
  display: block;
  width: 100%;
  margin-top: 14px;
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--cream, #fffeec);
  color: var(--maroon, #51010e);
  font: inherit;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .04em;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
}
.tmr-pop__stop:hover { background: #fff; }
.tmr-pop__stop:focus-visible {
  outline: 2px solid var(--cream, #fffeec);
  outline-offset: 3px;
}

/* (3) THE PILL SAYS IT IS THE OFF SWITCH. The green TIME! pill stops the
   alarm too, and a control that does something has to look like one: while
   this timer is ringing its pill pulses and takes a pointer cursor. The
   pill's own colours, size and the X inside it are untouched. */
.tmr-run.is-ringing { cursor: pointer; animation: tmr-ring 1.6s ease-in-out infinite; }
@keyframes tmr-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 255, 255, .45); }
}
/* REDUCED MOTION IS HONOURED. Somebody who has asked for no animation still
   needs to see which pill is the live one, so the pulse becomes a steady
   ring rather than nothing at all. */
@media (prefers-reduced-motion: reduce) {
  .tmr-run.is-ringing {
    animation: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
  }
}

/* (4) THE SAFETY AUTO-STOP HAS A LOOK. After two minutes the sound stops by
   itself and the pop-up stays, because somebody who was out of the room
   still needs to be told which step finished. It must not go on claiming to
   be ringing while it is silent. */
.tmr-pop.is-quiet .tmr-pop__t::after {
  content: ' \2014 alarm stopped';
  font-weight: 400;
  font-size: 14px;
  opacity: .85;
}

@media (max-width: 600px) {
  .tmr-pops { right: 16px; left: 16px; bottom: 120px; max-width: none; }
}
/* A printed recipe has no timer and no pop-up. */
@media print { .tmr-pops { display: none; } }