/* =====================================================================
   Joining: the "Circle me up" button, the person's ticket, the pay page.
   ===================================================================== */
.join-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-join .btn-mark { width: 20px; height: 20px; color: currentColor; }
.btn-join .btn-mark .mark-dot { fill: var(--cmu-marigold); }
.btn-join:hover .btn-mark { transform: rotate(-30deg); transition: transform var(--dur-base) var(--ease-join); }
.solo-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14.5px; color: var(--text-muted); }
.solo-check input { width: 18px; height: 18px; accent-color: var(--cmu-lagoon); }
.btn-success-soft { --bs-btn-bg: var(--wash-lagoon); --bs-btn-color: var(--success); --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--wash-lagoon); --bs-btn-hover-color: var(--success); --bs-btn-hover-border-color: var(--success); }

.my-ticket { margin-block: var(--space-5); }
.ticket-card { display: grid; gap: var(--space-4); grid-template-columns: 1fr; padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.ticket-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--cmu-lagoon); }
.ticket-qr { display: grid; justify-items: center; gap: 6px; padding: var(--space-3); border-radius: var(--radius-md);
  background: #fff; border: 1px dashed var(--line-strong); align-self: start; justify-self: center; }
.ticket-qr img { width: 160px; height: 160px; }
.ticket-qr small { color: #5D576E; }
@media (min-width: 768px) { .ticket-card { grid-template-columns: 1fr auto; } }
.code-input { font-family: var(--font-display); font-size: 22px; letter-spacing: .3em; max-width: 9ch; text-align: center; }
.cancel-box summary { cursor: pointer; color: var(--text-muted); }

.pay-box { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); }
.pay-box .amount { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; }
.pay-timer { font-variant-numeric: tabular-nums; }

/* Host tools: attendees and scanner */
.people-list { display: grid; gap: 8px; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--line); }
.person-row img, .person-row .ph { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--tint); flex: none; }
.person-row .who { flex: 1; min-width: 0; }
.scan-video { width: 100%; max-width: 420px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--cmu-ink); }

/* QR swap */
.swap-qr { display: grid; place-items: center; width: 200px; height: 200px; margin: 0 auto 8px; padding: 8px;
  background: #fff; border-radius: var(--radius-md); border: 1px dashed var(--line-strong); }
.swap-qr svg { width: 100%; height: 100%; }
.swap-qr .loader { width: 48px; height: 48px; color: var(--cmu-ink); }

/* People: Premium note and groups under a mutual */
.mutual-extra { padding: 10px 12px 14px 64px; margin-top: -6px; }
@media (max-width: 575px) { .mutual-extra { padding-left: 12px; } }
.pick-sm span { min-height: 32px; padding: 4px 12px; font-size: 13.5px; }
.going-mark { margin-block: var(--space-5); }

/* Join flow, day screen, Open Circle info */
.join-summary { display: flex; gap: 16px; align-items: center; }
.join-dots { width: 72px; flex: none; color: var(--text); }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.check-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check-row input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--cmu-lagoon); flex: none; }
.youre-in { padding-top: var(--space-5); display: grid; justify-items: center; }
.join-mark { width: 120px; height: 120px; color: var(--text); margin-bottom: var(--space-4); }
.join-mark .mark-dot { fill: var(--cmu-marigold); }
.join-mark.is-new circle:first-child { stroke-dashoffset: 213; animation: ring-draw .9s var(--ease-standard) forwards; }
.join-mark.is-new .mark-dot { transform-origin: 74px 26px; transform: scale(0); animation: dot-pop .35s var(--ease-join) .8s forwards; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes dot-pop { to { transform: scale(1); } }
.sheet-dialog .modal-content { border-radius: var(--radius-lg); }
@media (max-width: 575.98px) { .sheet-dialog { margin: 0; position: fixed; bottom: 0; left: 0; right: 0; height: auto; }
  .sheet-dialog .modal-content { border-radius: var(--radius-lg) var(--radius-lg) 0 0; height: auto; } }
.seg-wrap { display: flex; flex-wrap: wrap; border-radius: var(--radius-md); }
.st { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.st-late { background: var(--cmu-marigold); } .st-here { background: var(--cmu-lagoon); } .st-cant { background: var(--cmu-petal); }
.oc-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 12px; }
.oc-steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 2px 12px; }
.oc-steps li::before { content: counter(s); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cmu-marigold-light); color: var(--cmu-ink); font-weight: 800; font-size: 14px; }
.oc-steps span { color: var(--text-muted); font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) { .join-mark.is-new circle:first-child { stroke-dashoffset: 0; } .join-mark.is-new .mark-dot { transform: none; } }

/* Play-once moment (mutual reveal) */
.moment { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: var(--space-4);
  background: var(--scrim); animation: fade-in var(--dur-base) var(--ease-standard); }
.moment-card { max-width: 420px; width: 100%; text-align: center; background: var(--cmu-ink); color: var(--cmu-paper);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-float); }
.moment-card .display { color: var(--cmu-paper); }
.moment-card .lead { color: var(--on-ink-muted); }
.moment-rings { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.moment-rings .cmu-mark { width: 72px; height: 72px; color: var(--cmu-paper); animation: ring-meet .8s var(--ease-join) both; }
.moment-rings .cmu-mark + .cmu-mark { color: var(--cmu-marigold); margin-left: -18px; animation-name: ring-meet-r; }
.moment-rings .mark-dot { fill: var(--cmu-petal); }
@keyframes ring-meet { from { transform: translateX(-40px); opacity: 0; } }
@keyframes ring-meet-r { from { transform: translateX(40px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* Scanner */
.scan-box { position: relative; width: 100%; max-width: 420px; overflow: hidden; border-radius: var(--radius-lg); }
.scan-box .scan-video { display: block; }
.scan-box .scan-video[hidden] + .scan-frame { display: none; }
.scan-frame { position: absolute; inset: 18%; border: 3px solid var(--cmu-marigold); border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 999px rgba(28, 24, 40, .35); }