/* Members section, "One tap, one buzz" (Steve 2026-10-19, TW #3722), ported from the approved mockup. Staff fill
   in a push and tap Send Now, a pulse carries it to the member's phone, the member opens it and taps I'm going.
   Loaded after love.css, which keeps the panels, headings and bullets. The markup is the finished story;
   members_love_controller.js resets it (.is-armed on the section) and plays it. */
.ua-staff.is-play { animation-delay: 0s; }
.ua-members.is-play { animation-delay: 0.12s; }
.ua-panel.is-checked li:nth-child(4) .ua-check { animation-delay: 0.42s; }

.ua { --uo-amber: #e8a020; --uo-amber-hot: #ffb52e; --uo-navy: #0f1d33; --uo-green: #1f9d55; --uo-blue: #2160c4; --uo-muted: #5a6778; --uo-line: #d6dce5; }
.ua-panels { position: relative; }
.ua-stage { position: relative; height: 560px; padding: 28px 20px; overflow: hidden; }

/* Whose turn it is, side by side: a gold ring on the box that is playing. */
@media (min-width: 821px) {
  .ua-stage { transition: box-shadow 0.35s ease; }
  .ua-panel.is-turn .ua-stage { box-shadow: 0 0 0 3px var(--uo-amber), 0 18px 40px -18px rgba(232, 160, 32, 0.55); }
}

/* ---- Staff: the compose card ---- */
.uo-card {
  display: grid;
  gap: 12px;
  width: min(380px, 100%);
  padding: 18px 18px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px -14px rgba(15, 29, 51, 0.35);
  font-family: var(--love-body);
  text-align: left;
  color: #1d2433;
  transition: transform 0.35s ease;
}
.uo-card-top { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--uo-muted); }
.uo-card-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--uo-amber); }
.uo-fld { display: grid; gap: 4px; }
.uo-lbl { font-size: 0.72rem; font-weight: 500; color: var(--uo-muted); }
.uo-box { display: flex; align-items: center; min-height: 42px; padding: 9px 11px; border: 1.5px solid var(--uo-line); border-radius: 10px; font-size: 1rem; font-weight: 500; }
.uo-msg { min-height: 40px; font-weight: 400; color: var(--uo-muted); }
.uo-caret { display: none; width: 2px; height: 1.1em; margin-left: 1px; background: #1d2433; animation: uo-blink 1s steps(1) infinite; }
.uo-card.is-typing .uo-caret { display: inline-block; }
@keyframes uo-blink { 50% { opacity: 0; } }
.uo-sel { position: relative; }
.uo-aud { justify-content: space-between; gap: 8px; transition: border-color 0.2s, box-shadow 0.2s; }
.uo-aud.is-open { border-color: var(--uo-amber); box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.25); }
.uo-aud-txt { color: #98a2b3; font-weight: 400; }
.uo-aud-txt.is-val { display: inline-flex; align-items: center; gap: 7px; color: inherit; font-weight: 500; }
.uo-aud-txt svg { width: 15px; height: 15px; color: #7a5203; }
.uo-chev { flex: none; width: 16px; height: 16px; color: var(--uo-muted); transition: transform 0.2s; }
.uo-aud.is-open .uo-chev { transform: rotate(180deg); }
.uo-opts {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 6;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1.5px solid var(--uo-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 30px -12px rgba(15, 29, 51, 0.35);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: 50% 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.uo-opts.is-open { opacity: 1; transform: none; }
.uo-opt { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 0.92rem; font-weight: 500; }
.uo-opt small { font-size: 0.8rem; font-weight: 400; color: var(--uo-muted); }
.uo-opt.is-hi { background: #fff4dd; color: #7a5203; }
.uo-btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.uo-send, .uo-sched { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 12px; font-size: 1rem; font-weight: 700; }
.uo-send { background: var(--uo-navy); color: #fff; letter-spacing: 0.02em; transition: transform 0.12s, background 0.3s; }
.uo-send svg, .uo-sched svg { width: 18px; height: 18px; }
.uo-send.is-hover { background: #18305a; }
.uo-send.is-press { transform: scale(0.95); }
.uo-send.is-done { background: var(--uo-green); }
.uo-send.is-done .uo-send-ico { display: none; }
.uo-sched { gap: 8px; border: 1.5px solid var(--uo-line); background: #fff; color: #1d2433; }
.uo-stamp {
  position: absolute;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--uo-navy);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
}
.uo-stamp svg { width: 16px; height: 16px; }
.uo-stamp b { color: var(--uo-amber-hot); }
.uo-stamp.is-on { opacity: 1; transform: none; }
.uo-tap { position: absolute; z-index: 5; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--uo-amber); border-radius: 50%; background: rgba(232, 160, 32, 0.35); opacity: 0; pointer-events: none; }
.uo-tap.is-go { animation: uo-tap 0.55s ease-out; }
@keyframes uo-tap { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.25); } }

/* ---- Member: the phone ---- */
.uo-phone { position: relative; width: 236px; height: 480px; padding: 10px; border-radius: 40px; background: #0b0b0d; box-shadow: 0 22px 44px -18px rgba(15, 29, 51, 0.6), inset 0 0 0 2px #2b2b30; }
.uo-phone.is-buzz { animation: uo-buzz 0.5s linear; }
@keyframes uo-buzz { 0%, 100% { transform: none; } 10%, 50%, 90% { transform: translateX(-3px) rotate(-1deg); } 30%, 70% { transform: translateX(3px) rotate(1deg); } }
.uo-scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 31px; background: radial-gradient(120% 80% at 30% 10%, #2b4a7a, #0f1d33 70%); font-family: -apple-system, BlinkMacSystemFont, var(--love-body); text-align: left; }
.uo-island { position: absolute; top: 9px; left: 50%; z-index: 4; width: 78px; height: 22px; translate: -50% 0; border-radius: 12px; background: #000; }
.uo-lock { position: absolute; inset: 0; padding-top: 46px; text-align: center; color: #fff; transition: opacity 0.35s; }
.uo-date { font-size: 0.78rem; opacity: 0.8; }
.uo-time { font-size: 3.6rem; font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.uo-push {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 118px;
  z-index: 3;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  align-items: start;
  padding: 10px 11px;
  border-radius: 16px;
  background: rgba(245, 245, 247, 0.93);
  backdrop-filter: blur(8px);
  color: #111;
  opacity: 0;
  transform: translateY(-140px);
  transition: transform 0.45s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.25s, box-shadow 0.3s;
}
.uo-push.is-in { opacity: 1; transform: none; }
.uo-push.is-glow { box-shadow: 0 0 0 2px var(--uo-amber), 0 0 22px rgba(255, 181, 46, 0.7); }
.uo-icon { width: 30px; height: 30px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.uo-meta { display: flex; justify-content: space-between; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6b70; }
.uo-h { font-size: 0.82rem; font-weight: 700; line-height: 1.25; }
.uo-b { font-size: 0.76rem; line-height: 1.35; color: #333; }
.uo-app { position: absolute; inset: 0; display: grid; align-content: start; gap: 10px; padding: 44px 12px 14px; background: #f2f2f7; color: #111; opacity: 0; transform: scale(0.94); transition: opacity 0.35s, transform 0.35s; }
.uo-app.is-on { opacity: 1; transform: none; }
.uo-bar { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 700; }
.uo-bar span { font-size: 1.2rem; line-height: 1; color: var(--uo-blue); }
.uo-bubble, .uo-ev { border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.uo-bubble { display: grid; gap: 3px; padding: 10px 11px; }
.uo-bubble .uo-h { font-size: 0.86rem; }
.uo-bubble .uo-b { font-size: 0.8rem; color: #444; }
.uo-ev { overflow: hidden; }
.uo-ev-top { display: grid; gap: 2px; padding: 10px 11px; background: var(--uo-navy); color: #fff; }
.uo-k { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--uo-amber-hot); }
.uo-n { font-family: var(--love-display); font-size: 1.05rem; font-weight: 700; line-height: 1.15; }
.uo-w { font-size: 0.72rem; opacity: 0.85; }
.uo-act { padding: 10px 11px; }
.uo-going { display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 10px; background: var(--uo-blue); color: #fff; font-size: 0.85rem; font-weight: 700; transition: background 0.3s, transform 0.12s; }
.uo-going svg { display: none; width: 14px; height: 14px; margin-right: 8px; }
.uo-going.is-press { transform: scale(0.95); }
.uo-going.is-yes { background: var(--uo-green); }
.uo-going.is-yes svg { display: block; }

/* ---- The pulse, from Send Now to the phone ---- */
.uo-pulse, .uo-trail { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; pointer-events: none; }
.uo-pulse { z-index: 20; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: radial-gradient(circle, #fff 0 25%, var(--uo-amber-hot) 45%, rgba(232, 160, 32, 0) 72%); box-shadow: 0 0 18px 6px rgba(255, 181, 46, 0.55); }
.uo-trail { z-index: 19; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--uo-amber-hot); }

@media (max-width: 820px) {
  .ua-staff .ua-stage { align-items: flex-start; padding-top: 40px; }   /* room under the card for the open Audience list */
}
@media (max-width: 480px) {
  .ua-stage { padding: 24px 14px; }
  .ua-staff .ua-stage { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .ua-stage, .uo-card, .uo-caret, .uo-aud, .uo-opts, .uo-send, .uo-stamp, .uo-tap, .uo-phone, .uo-lock, .uo-push, .uo-app, .uo-going {
    animation: none !important;
    transition: none !important;
  }
}