/*
 * Court Hub alert popup (.ch-pop) — the one quick-feedback popup for every shell and the staff /panel.
 * Runtime: public/js/ch-toast.js (window.chToast). Frosted night-navy glass in BOTH themes — the same
 * brand moment as the hero band — so it reads on the light /panel and the light public site alike.
 * Status lights follow DESIGN.md: Win Green success, Loss Red error, Teaming Amber warning,
 * Floodlight Gold info; gold also lights the link and the focus ring.
 */
.ch-pops {
  --chp-glass: rgba(18, 38, 72, .94);      /* sheet-glass */
  --chp-stroke: rgba(255, 255, 255, .12);  /* glass-stroke */
  --chp-ink: #ffffff;
  --chp-mist: #cdd1d7;
  --chp-night: #061937;                    /* glyph colour on a lit status disc */
  --chp-gold: #ffca1d;
  --chp-ok: #35d07f;
  --chp-err: #ff5c5c;
  --chp-warn: #ffb020;
  --chp-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --chp-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
  --chp-wash-x: 100%;                      /* start edge: right in RTL */

  position: fixed; z-index: 2100;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  inset-inline: 12px; margin-inline: auto; max-width: 420px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
[dir="ltr"] .ch-pops { --chp-wash-x: 0%; }

.ch-pop {
  --chp-accent: var(--chp-gold);
  position: relative; overflow: hidden; pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 12px 12px; padding-inline-end: 8px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--chp-accent) 32%, var(--chp-stroke));
  /* a soft wash of the status light spilling in from the icon side, over the navy glass */
  background:
    radial-gradient(130% 150% at var(--chp-wash-x) 50%, color-mix(in srgb, var(--chp-accent) 18%, transparent), transparent 58%),
    var(--chp-glass);
  -webkit-backdrop-filter: blur(16px) saturate(190%); backdrop-filter: blur(16px) saturate(190%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .14);
  color: var(--chp-ink); font-size: .9rem; line-height: 1.7; font-weight: 600;
  animation: ch-pop-in 300ms var(--chp-ease) both;
}
.ch-pop--ok { --chp-accent: var(--chp-ok); }
.ch-pop--error { --chp-accent: var(--chp-err); }
.ch-pop--warn { --chp-accent: var(--chp-warn); }

.ch-pop__icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--chp-accent); color: var(--chp-night);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--chp-accent) 20%, transparent);
  animation: ch-pop-icon 380ms var(--chp-spring) 60ms both;
}
.ch-pop--ok .ch-pop__icon path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ch-pop-draw 320ms var(--chp-ease) 200ms forwards;
}

.ch-pop__body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ch-pop__title { margin: 0; font-weight: 800; }
.ch-pop__msg { margin: 0; }
.ch-pop.has-title .ch-pop__msg { color: var(--chp-mist); font-size: .82rem; font-weight: 500; line-height: 1.8; }
.ch-pop__act {
  display: inline-block; margin-inline-start: .5rem; color: var(--chp-gold); font-weight: 800;
  text-decoration: none; white-space: nowrap;
}
.ch-pop__act:hover { text-decoration: underline; }

/* 28px disc with a 44px hit area */
.ch-pop__x {
  position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--chp-mist); cursor: pointer;
  transition: background 120ms, color 120ms;
}
.ch-pop__x::after { content: ""; position: absolute; inset: -8px; }
.ch-pop__x:hover { background: rgba(255, 255, 255, .16); color: var(--chp-ink); }
.ch-pop__act:focus-visible, .ch-pop__x:focus-visible { outline: 2px solid var(--chp-gold); outline-offset: 2px; }

/* the countdown: a hairline of the status light draining toward the start edge; its end closes the popup */
.ch-pop__bar {
  position: absolute; inset-inline: 18px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--chp-accent); opacity: .75;
  transform-origin: right center;
  animation: ch-pop-bar var(--chp-ms, 4000ms) linear forwards;
}
[dir="ltr"] .ch-pop__bar { transform-origin: left center; }
.ch-pop:focus-within .ch-pop__bar { animation-play-state: paused; }
@media (hover: hover) { .ch-pop:hover .ch-pop__bar { animation-play-state: paused; } }

.ch-pop.is-leaving { pointer-events: none; animation: ch-pop-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards; }

@keyframes ch-pop-in { from { opacity: 0; transform: translateY(-18px) scale(.96); } }
@keyframes ch-pop-out { to { opacity: 0; transform: translateY(-12px) scale(.96); } }
@keyframes ch-pop-bar { to { transform: scaleX(0); } }
@keyframes ch-pop-icon { from { opacity: 0; transform: scale(.55); } 60% { transform: scale(1.12); } }
@keyframes ch-pop-draw { to { stroke-dashoffset: 0; } }
@keyframes ch-pop-fade { from { opacity: 0; } }

/* Reduced motion: opacity only. The bar keeps running (invisible) because its end is what closes the popup. */
@media (prefers-reduced-motion: reduce) {
  .ch-pop { animation-name: ch-pop-fade; animation-duration: 160ms; }
  .ch-pop.is-leaving { animation-name: ch-pop-out; animation-duration: 1ms; }
  .ch-pop__icon { animation: none; }
  .ch-pop--ok .ch-pop__icon path { animation: none; stroke-dashoffset: 0; }
  .ch-pop__bar { opacity: 0; }
}