/* ══════════════════════════════════════════════════════════════════
   css/gates.css
   The upgrade modal shown when a free coach hits a Pro feature.

   Tone matters here. This appears at the exact moment someone is trying to
   do their job, so it reads as an offer, not a wall: it says what they get,
   not what they are missing, and it closes on click-outside and Escape.
   ══════════════════════════════════════════════════════════════════ */

.vcp-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(14, 17, 24, .55);
  backdrop-filter: blur(4px);
  animation: vcpGateFade .16s ease-out;
}
@keyframes vcpGateFade { from { opacity: 0 } to { opacity: 1 } }

.vcp-gate {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  padding: 30px 30px 24px;
  box-shadow: 0 40px 80px -30px rgba(14, 17, 24, .6);
  animation: vcpGateRise .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes vcpGateRise { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }

.vcp-gate-x {
  position: absolute;
  top: 14px; right: 16px;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #9aa1ad;
  cursor: pointer;
  border-radius: 8px;
}
.vcp-gate-x:hover { background: #f2f4f8; color: #14171f }

.vcp-gate-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3a55e6, #2b40c4);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vcp-gate h2 {
  margin: 16px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #14171f;
}
.vcp-gate p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5b626f;
}

.vcp-gate-list {
  margin: 18px 0 0;
  padding: 16px 18px;
  list-style: none;
  background: #f7f8fb;
  border: 1px solid #e9ecf3;
  border-radius: 14px;
}
.vcp-gate-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  font-weight: 600;
  color: #2c313b;
  line-height: 1.5;
}
.vcp-gate-list li + li { margin-top: 9px }
.vcp-gate-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 12px; height: 7px;
  border-left: 2.5px solid #3a55e6;
  border-bottom: 2.5px solid #3a55e6;
  transform: rotate(-45deg);
}

.vcp-gate-actions { margin-top: 22px }
.vcp-gate-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 13px;
  background: linear-gradient(135deg, #3a55e6, #2b40c4);
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 16px 32px -18px #3a55e6;
}
.vcp-gate-btn:hover { filter: brightness(1.06) }
.vcp-gate-btn:active { transform: translateY(1px) }

.vcp-gate-link {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #2b40c4;
  text-decoration: none;
}
.vcp-gate-link:hover { text-decoration: underline }

.vcp-gate-fine {
  margin-top: 14px !important;
  text-align: center;
  font-size: 12.5px !important;
  color: #9aa1ad !important;
}

@media (max-width: 520px) {
  .vcp-gate { padding: 26px 22px 20px; border-radius: 16px }
  .vcp-gate h2 { font-size: 19.5px }
}

/* ── In-page teaser ────────────────────────────────────────────────────
   Stands in for a Pro-only analytics section. It occupies roughly the
   space the real thing would, so the page keeps its shape and the coach
   can see what sits where — but no locked number is ever written to the
   DOM, so there is nothing to read out of devtools.

   It sits inside the app's light panels, so it is deliberately not given
   a dark-mode variant: a dark card in the middle of a white analytics
   sheet reads as a rendering fault, not a design. */
.pro-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 34px 24px 30px;
  border: 1px dashed var(--line-strong, #d2d7e1);
  border-radius: var(--radius, 16px);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--accent-soft, #eef0fe), transparent 70%),
    var(--surface-2, #f5f6f9);
}

.pro-lock-badge {
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3a55e6, #2b40c4);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pro-lock-title {
  font-family: var(--font, inherit);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink, #14171f);
}

/* Explicit weight and family: inside the stats tables this inherits the
   semibold, tabular styling meant for numbers, which makes the sentence
   read as another data row. */
.pro-lock-note {
  /* 46ch keeps the line readable, but align-items:center makes this child
     shrink-to-fit, so a bare 46ch becomes the card's minimum width and
     overflows a phone. The min() lets it give way below that. */
  max-width: min(46ch, 100%);
  font-family: var(--font, inherit);
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: normal;
  line-height: 1.55;
  color: var(--muted, #5b626f);
}

.pro-lock-btn {
  margin-top: 6px;
  padding: 11px 22px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, #3a55e6, #2b40c4);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 26px -16px #3a55e6;
}
.pro-lock-btn:hover { filter: brightness(1.06) }
.pro-lock-btn:active { transform: translateY(1px) }

/* The table variants live in a real cell, which otherwise inherits the
   stats table's borders and padding. The row also lands as :last-child, so
   it picks up the bold grey treatment meant for the TOTALS line. */
.stats-table tbody tr.pro-lock-row,
.stats-table tbody tr.pro-lock-row:hover {
  font-weight: 400;
  background: transparent;
}
.pro-lock-cell {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}
.pro-lock-cell .pro-lock { border-radius: var(--radius-sm, 11px) }

@media (max-width: 640px) {
  .pro-lock { padding: 26px 18px 24px }
  .pro-lock-title { font-size: 15.5px }
  .pro-lock-note { font-size: 12.5px }
}

/* ── Preview variant ───────────────────────────────────────────────────
   "Show them what they are missing." A blurred sample sits behind the
   offer so the coach can see the shape and the density of the thing they
   would get, instead of reading a paragraph about it.

   The sample is FABRICATED — invented players, invented percentages. It
   is never the coach's real data. Blurring real numbers would be theatre:
   the values would still be sitting in the DOM for anyone who opens
   devtools, and CSS is not a permission system. Nothing here is a secret,
   so there is nothing to leak. */
.pro-lock--preview {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 268px;
}

.pro-lock-ghost {
  padding: 16px 16px 30px;
  filter: blur(4.5px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  /* Fades out downward so the sample looks like it continues past the
     edge rather than stopping in a hard line. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 97%);
}

/* The offer itself. Static in the plain variant, where .pro-lock is
   already a centred flex column; lifted over the sample only in the
   preview variant. */
.pro-lock-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 9px;
  width: 100%;
}
.pro-lock--preview .pro-lock-panel {
  position: absolute;
  inset: 0;
  padding: 18px;
  width: auto;
}
/* A flat veil rather than a radial scrim. The earlier version faded to
   solid in the middle, which swallowed the sample it was supposed to be
   showing off and read as a rendering fault. */
.pro-lock--preview .pro-lock-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--surface-2, #f5f6f9) 42%, transparent);
}

/* The offer. In the preview variant it is a real card floating over the
   sample: a crisp edge against the blur is what makes the whole thing look
   deliberate instead of broken. */
.pro-lock-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
}
.pro-lock--preview .pro-lock-offer {
  max-width: min(420px, 100%);
  box-sizing: border-box;
  padding: 22px 24px 24px;
  border: 1px solid var(--line, #e6e9ef);
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 0 26px 54px -26px rgba(16, 20, 35, .5);
}

/* ── The fabricated sample ──────────────────────────────────────────── */
.plg-row {
  display: grid;
  gap: 6px;
  align-items: center;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line, #e6e9ef);
}
.plg-row--head {
  border-bottom-width: 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #5b626f);
}
.plg-cell {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #14171f);
  text-align: center;
  white-space: nowrap;
}
.plg-cell--name { text-align: left; font-weight: 700 }
.plg-bar {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3a55e6, #6d8bff);
}

/* Court sample for the attack origin lock. */
.plg-court {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 0 auto;
  padding: 11px;
  border: 2px solid var(--line-strong, #d2d7e1);
  border-radius: 10px;
}
/* Tinted deliberately hard. A white-on-white court vanishes once the blur
   and the 55% opacity are applied, which defeats the whole point of
   showing a sample. */
.plg-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 34px 6px;
  border-radius: 8px;
  background: #dfe5ff;
  border: 1px solid #b9c4f7;
}
.plg-zone b { font-size: 17px; font-weight: 800; color: #2b40c4; font-variant-numeric: tabular-nums }
.plg-zone span { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #5566a8 }
.plg-zone--hot { background: linear-gradient(135deg, #9fb2ff, #7f96ff); border-color: #6d85f5 }
.plg-zone--hot b { color: #10197a }
.plg-zone--hot span { color: #26317e }

/* ── Phone: stack instead of overlay ───────────────────────────────────
   On a narrow column the offer card is as wide as the panel, so laying it
   over the sample hides the entire thing and leaves a white card floating
   in a grey box — the sample is paying for vertical space nobody can see.

   So below 640px the two stop overlapping: a short strip of the sample
   sits at the top and fades out, and the offer follows in normal flow.
   Same message, and the sample is actually visible. */
@media (max-width: 640px) {
  .pro-lock--preview { min-height: 0 }

  .pro-lock-ghost {
    height: 116px;
    overflow: hidden;
    padding: 12px 10px 0;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 100%);
  }

  .pro-lock--preview .pro-lock-panel {
    position: static;
    padding: 0 16px 22px;
    width: auto;
  }
  .pro-lock--preview .pro-lock-panel::before { display: none }

  /* No card treatment here: with nothing behind it to separate from, the
     border and shadow would just be a box inside a box. */
  .pro-lock--preview .pro-lock-offer {
    max-width: 100%;
    margin-top: -10px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
  }

  .plg-cell { font-size: 11px }
  .plg-zone { padding: 14px 4px }
}

/* Dark mode — the app ships a dark theme, and a blinding white modal over
   a dark court view at 9pm in a gym is exactly the wrong moment for it. */
@media (prefers-color-scheme: dark) {
  .vcp-gate { background: #171a21; box-shadow: 0 40px 80px -30px #000 }
  .vcp-gate h2 { color: #f2f4f8 }
  .vcp-gate p { color: #a7aebb }
  .vcp-gate-list { background: #1e222b; border-color: #2a2f3a }
  .vcp-gate-list li { color: #dfe3ea }
  .vcp-gate-x:hover { background: #262b35; color: #f2f4f8 }
}