/* Shared "Sign in to take" modal — used by /packs (take-CTA path) and
   the landing-page hero deck (onTake path).  Markup is built on first
   open by /signin-modal.js so consumers only need to include this
   stylesheet + the script. */
.signin-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-family: var(--mtt-font-sans);
  animation: signin-modal-fade 140ms ease-out;
}
.signin-modal[hidden] { display: none; }
@keyframes signin-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.signin-modal .panel {
  width: 100%;
  max-width: 380px;
  background: var(--mtt-surface-panel);
  border: 1px solid color-mix(in srgb, var(--mtt-overlay) 10%, transparent);
  border-radius: var(--mtt-radius-card);
  padding: 22px 22px 20px;
  color: var(--mtt-text-bright);
  box-shadow: var(--mtt-shadow-modal);
}
.signin-modal .signin-take-preview {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--mtt-radius-lg);
  background: color-mix(in srgb, var(--mtt-brand-500) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--mtt-brand-500) 30%, transparent);
}
.signin-modal .signin-take-preview[hidden] { display: none; }

/* Optional image slot — caller hands us a structured `takeImage`
   payload and we render a player headshot (circle-cropped on a white
   plate, matches the prop card), a single team logo, or a two-team
   matchup glyph with an "@" between.  Sits above the take statement. */
.signin-modal .signin-take-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.signin-modal .signin-take-image[hidden] { display: none; }
.signin-modal .signin-take-image .single {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--mtt-radius-control);
  background: color-mix(in srgb, var(--mtt-overlay) 4%, transparent);
}
.signin-modal .signin-take-image .single.is-player {
  border-radius: 50%;
  background: #fff; /* theme-lint-ignore — white plate behind headshot cutouts */
}
.signin-modal .signin-take-image .matchup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.signin-modal .signin-take-image .matchup img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.signin-modal .signin-take-image .matchup .vs {
  font-size: var(--mtt-fs-base);
  font-weight: var(--mtt-fw-medium);
  color: var(--mtt-text-muted);
}

/* Optional eyebrow above the preview text — e.g. a pack title
   when the box is framing a pack rather than a single prop. */
.signin-modal .signin-take-eyebrow {
  font-size: var(--mtt-fs-xs);
  font-weight: var(--mtt-fw-semibold);
  letter-spacing: var(--mtt-tracking-wide);
  text-transform: uppercase;
  color: var(--mtt-brand-300);
  margin-bottom: 4px;
}
.signin-modal .signin-take-eyebrow[hidden] { display: none; }
.signin-modal .signin-take-preview .statement {
  font-size: var(--mtt-fs-md);
  font-weight: var(--mtt-fw-medium);
  color: var(--mtt-text-display);
  line-height: 1.35;
}
.signin-modal .signin-take-preview .statement[hidden] { display: none; }

/* Multi-take preview list — shown when a fan staged several picks
   before signing in.  Each staged take is a row with a small bullet so
   the box reads as "here's everything you're about to lock in". */
.signin-modal .signin-take-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.signin-modal .signin-take-list[hidden] { display: none; }
.signin-modal .signin-take-list li {
  position: relative;
  padding-left: 16px;
  font-size: var(--mtt-fs-base);
  font-weight: var(--mtt-fw-medium);
  color: var(--mtt-text-display);
  line-height: 1.35;
}
.signin-modal .signin-take-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mtt-brand-400);
}
.signin-modal h2 {
  font-size: var(--mtt-fs-title);
  font-weight: var(--mtt-fw-semibold);
  color: var(--mtt-text-display);
  margin: 0 0 14px;
}
.signin-modal .sub {
  font-size: var(--mtt-fs-base);
  color: var(--mtt-text-muted);
  margin: 0 0 14px;
  line-height: 1.4;
}
.signin-modal label {
  display: block;
  font-size: var(--mtt-fs-xs);
  font-weight: var(--mtt-fw-semibold);
  letter-spacing: var(--mtt-tracking-wide);
  text-transform: uppercase;
  color: var(--mtt-text-secondary);
  margin: 10px 0 6px;
}
.signin-modal input[type="tel"],
.signin-modal input[type="text"] {
  width: 100%;
  padding: 11px 12px;
  background: var(--mtt-surface-raise);
  border: 1px solid color-mix(in srgb, var(--mtt-overlay) 14%, transparent);
  border-radius: var(--mtt-radius-lg);
  color: var(--mtt-text-display);
  font: inherit;
  font-size: var(--mtt-fs-lg);
  font-variant-numeric: tabular-nums;
}
.signin-modal input[type="tel"]:focus,
.signin-modal input[type="text"]:focus {
  outline: 2px solid var(--mtt-brand-500);
  outline-offset: 1px;
  border-color: transparent;
}
.signin-modal .consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: var(--mtt-fs-xs);
  color: var(--mtt-text-muted);
  line-height: 1.4;
}
.signin-modal .consent input { margin-top: 3px; }
.signin-modal .consent a { color: var(--mtt-info-text); text-decoration: underline; }
.signin-modal .consent label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: var(--mtt-fs-xs);
  color: var(--mtt-text-muted);
}
.signin-modal .message {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--mtt-radius-md);
  font-size: var(--mtt-fs-sm);
  line-height: 1.4;
}
.signin-modal .message.error { background: color-mix(in srgb, var(--mtt-red) 10%, transparent); color: var(--mtt-danger-text); border: 1px solid color-mix(in srgb, var(--mtt-red) 35%, transparent); }
.signin-modal .message.info  { background: color-mix(in srgb, var(--mtt-sky) 10%, transparent); color: var(--mtt-info-text); border: 1px solid color-mix(in srgb, var(--mtt-sky) 35%, transparent); }
.signin-modal .row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.signin-modal button {
  appearance: none;
  font: inherit;
  font-weight: var(--mtt-fw-semibold);
  font-size: var(--mtt-fs-md);
  padding: 11px 18px;
  border-radius: var(--mtt-radius-lg);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.signin-modal button.primary {
  background: var(--mtt-brand-500);
  color: var(--mtt-surface-base);
  flex: 1;
}
.signin-modal button.primary:hover:not(:disabled) { background: var(--mtt-brand-400); }
.signin-modal button.primary:disabled { opacity: 0.55; cursor: progress; }
.signin-modal button.ghost {
  background: transparent;
  color: var(--mtt-text-muted);
  border-color: color-mix(in srgb, var(--mtt-overlay) 15%, transparent);
}
.signin-modal button.ghost:hover { color: var(--mtt-text-display); border-color: color-mix(in srgb, var(--mtt-overlay) 30%, transparent); }
.signin-modal .recaptcha { margin-top: 12px; }

/* Busy state — shown when the caller uses `keepOpenAfterSignin: true`
   and we need a real "Submitting…" indicator while post-signin work
   (e.g., POST /api/me/takes) is in flight.  Layered ABOVE the panel
   (not replacing its contents) so the underlying form listeners stay
   attached and the modal can re-open cleanly after close() tears the
   overlay down. */
.signin-modal .panel { position: relative; }
.signin-modal .signin-busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 12px;
  background: var(--mtt-surface-panel);
  border-radius: inherit;
  z-index: 1;
}
.signin-modal .signin-busy .spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--mtt-overlay) 14%, transparent);
  border-top-color: var(--mtt-brand-500);
  animation: signin-busy-spin 700ms linear infinite;
}
.signin-modal .signin-busy .label {
  font-size: var(--mtt-fs-md);
  font-weight: var(--mtt-fw-medium);
  color: var(--mtt-text-display);
  text-align: center;
}
@keyframes signin-busy-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .signin-modal .signin-busy .spinner { animation: none; }
}