/* Trainer workspace: profile administration lives only inside the coach board. */
.coach-profile-strip {
  margin: 26px 0 32px;
  flex-wrap: wrap;
}

/* Player account: identity is visible, but is intentionally read-only. */
.player-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 20px 0 0;
}

.player-identity-avatar {
  width: 48px;
  height: 48px;
  font-size: 17px;
}

.player-identity strong,
.player-identity small {
  display: block;
}

/* SportKids player card: a football-game inspired snapshot, built from the
   player's real profile and current 0–100 scores. */
.hero-visuals {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(250px, 1.1fr);
  align-items: stretch;
  gap: 14px;
}

/* The two visual cards need a real minimum width. Above the tablet breakpoint
   the hero reserves space for them; below it they become a clean one-column
   stack instead of overflowing across the copy. */
.hero {
  grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr);
  gap: 40px;
}

.hero-visuals .hero-score-card { min-width: 0; }

.player-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 350px;
  padding: 20px 18px 16px;
  color: var(--ink);
  border: 1px solid #c7e544;
  border-radius: 24px 24px 62px 62px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.93), rgba(224,255,91,.94) 45%, rgba(183,222,60,.98)),
    var(--lime);
  box-shadow: 0 18px 34px rgba(7,29,25,.16), inset 0 0 0 5px rgba(255,255,255,.31);
}

.player-card:before,
.player-card:after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 22px solid rgba(7,29,25,.08);
}

.player-card:before { width: 260px; height: 260px; left: -120px; top: 46px; }
.player-card:after { width: 150px; height: 150px; right: -74px; top: -54px; }
.card-glow { position: absolute; inset: 0; z-index: -1; opacity: .45; background: repeating-linear-gradient(-35deg, transparent 0 18px, rgba(255,255,255,.26) 18px 20px); }

.player-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #274137;
  font: 800 9px Manrope;
  letter-spacing: 1.2px;
}

.player-card-top span:last-child { color: var(--green); }

.player-card-rating {
  position: relative;
  z-index: 2;
  display: grid;
  width: 74px;
  margin-top: 18px;
  line-height: 1;
}

.player-card-rating strong { font: 700 57px/.8 "Space Grotesk"; letter-spacing: -4px; }
.player-card-rating span { margin: 7px 0 4px; color: #335248; font: 800 9px Manrope; letter-spacing: 1.3px; }
.player-card-rating small { color: var(--green); font: 800 11px Manrope; }

.player-card-photo {
  position: absolute;
  z-index: 1;
  top: 55px;
  right: 17px;
  display: grid;
  place-items: center;
  width: 126px;
  height: 158px;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,.78);
  border-radius: 44% 44% 18px 18px;
  background: linear-gradient(145deg, #0d5b4c, #082f29);
  color: var(--lime);
  font: 700 52px "Space Grotesk";
  box-shadow: 0 12px 22px rgba(7,29,25,.2);
}

.player-card-photo > #playerCardPhoto { display: grid; place-items: center; width: 100%; height: 100%; }
.player-card-photo #playerCardPhoto img { width: 100%; height: 100%; object-fit: cover; }

.coach-card-photo-control {
  position: absolute;
  inset: auto 6px 6px;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 6px 5px;
  border-radius: 6px;
  background: rgba(7,29,25,.76);
  color: #fff;
  cursor: pointer;
  font: 800 8px Manrope;
  letter-spacing: .35px;
  text-align: center;
}

.coach-card-photo-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.coach-card-photo-control:hover { background: var(--green); }
.player-only .coach-card-photo-control { display: none; }

.player-card-info { position: relative; z-index: 2; min-height: 0; margin-top: 106px; padding: 10px 0 0; border-top: 1px solid rgba(7,29,25,.18); }
.player-card-info h2 { max-width: 100%; margin: 0; font: 700 21px/1 "Space Grotesk"; letter-spacing: -1px; overflow-wrap: anywhere; }
.player-card-info p { margin: 6px 0 0; color: #39564c; font: 800 8px Manrope; letter-spacing: .7px; }

.player-card-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px 4px;
  margin-top: 17px;
}

.player-card-stats div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px; }
.player-card-stats b { font: 800 17px/1 "Space Grotesk"; letter-spacing: -1px; }
.player-card-stats span { color: #406257; font: 800 8px Manrope; letter-spacing: .55px; }

.player-identity strong {
  font-size: 15px;
}

.player-identity small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

/* The priority list should use only the height it needs. The wider SMART card
   gets the remaining space and is easier to read and complete. */
.priority-panel {
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  align-items: start;
}

.priority-list {
  align-content: start;
  align-self: start;
}

.goal-builder {
  padding: 32px;
  border-radius: 18px;
}

.goal-builder h3 {
  font-size: 30px;
  line-height: 1.08;
  margin-bottom: 22px;
}

.goal-builder label {
  font-size: 12px;
}

.goal-builder input,
.goal-builder textarea {
  font-size: 14px;
  padding: 11px 12px;
}

.goal-builder textarea {
  min-height: 100px;
}

.goal-meta {
  gap: 12px;
  margin: 14px 0;
}

.smart-guide {
  gap: 10px;
  margin-bottom: 22px;
}

.smart-guide article {
  min-height: 128px;
  padding: 13px;
}

.smart-guide b {
  font-size: 25px;
}

.smart-guide strong {
  font-size: 12px;
  line-height: 1.28;
  margin-top: 7px;
}

.smart-guide span {
  font-size: 10.5px;
  line-height: 1.38;
  margin-top: 7px;
}

@media (max-width: 900px) {
  .priority-panel {
    grid-template-columns: 1fr;
  }

  .hero-visuals { max-width: 680px; }
}

@media (max-width: 1120px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-visuals {
    max-width: 720px;
  }
}

@media (max-width: 700px) {
  .goal-builder {
    padding: 22px;
  }

  .goal-builder h3 {
    font-size: 26px;
  }

  .smart-guide article {
    min-height: 112px;
  }

  .hero-visuals { grid-template-columns: 1fr; }
  .player-card { min-height: 330px; }
  .player-card-photo { width: 132px; height: 164px; }
}

/* Mobile-first card refinement. It also prevents Safari from creating a
   horizontal scroll area when a long Ukrainian name or photo is present. */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }

  .hero {
    padding: 42px 18px 54px;
    gap: 28px;
  }

  .hero-visuals {
    width: 100%;
    max-width: none;
    gap: 12px;
  }

  .player-card,
  .hero-visuals .hero-score-card { width: 100%; }

  .player-card {
    min-height: 322px;
    padding: 17px 16px 15px;
    border-radius: 20px 20px 48px 48px;
  }

  .player-card-rating { margin-top: 15px; }
  .player-card-rating strong { font-size: 49px; }
  .player-card-photo { top: 49px; right: 14px; width: 116px; height: 144px; }
  .player-card-info { min-height: 0; margin-top: 105px; padding: 9px 0 0; }
  .player-card-info h2 { font-size: 19px; line-height: .98; letter-spacing: -.8px; }
  .player-card-info p { font-size: 7px; line-height: 1.3; }
  .player-card-stats { gap: 8px 3px; margin-top: 14px; }
  .player-card-stats b { font-size: 16px; }
  .player-card-stats span { font-size: 7px; }
  .coach-card-photo-control { font-size: 7px; }

  .hero-score-card { padding: 24px; border-radius: 17px; }
  .score-number { font-size: 62px; }
  .mini-stats { gap: 14px; }
}

@media (max-width: 390px) {
  .hero { padding-left: 14px; padding-right: 14px; }
  .player-card { min-height: 306px; }
  .player-card-photo { width: 104px; height: 130px; }
  .player-card-info { margin-top: 94px; padding-right: 0; }
  .player-card-info h2 { font-size: 17px; }
  .player-card-stats b { font-size: 14px; }
}

/* Public parent introduction. The workspaces stay hidden until their owner
   has authenticated; this page contains no player data. */
.public-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.role-public .topbar .public-nav {
  display: flex;
  margin-left: auto;
  margin-right: 0;
}

.public-nav a,
.public-nav button {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 800 13px Manrope;
  padding: 10px 12px;
  text-decoration: none;
}

.public-nav a:hover,
.public-nav button:hover { color: var(--green); }

.public-nav #playerPortalButton {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.public-nav .coach-portal {
  color: #68736e;
  font-size: 12px;
}

.welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
  gap: 64px;
  align-items: center;
  min-height: 580px;
  padding: clamp(60px, 9vw, 130px) 0 80px;
}

.welcome-copy h1 {
  max-width: 760px;
  font: 700 clamp(42px, 5.3vw, 76px)/.98 "Space Grotesk";
  letter-spacing: -3.6px;
  margin: 12px 0 22px;
}

.welcome-copy > p:not(.eyebrow):not(.welcome-note) {
  max-width: 640px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.welcome-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.welcome-note { margin: 16px 0 0; color: var(--muted); font-size: 12px; }

.welcome-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: var(--ink);
  color: #f4f6ef;
  padding: 38px;
  min-height: 390px;
  box-shadow: 0 24px 48px rgba(7,29,25,.13);
}

.welcome-card:after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  right: -86px;
  bottom: -100px;
  background: var(--lime);
}

.welcome-card .eyebrow { color: var(--lime); }
.welcome-card h2 { position: relative; z-index: 1; max-width: 300px; margin: 10px 0 28px; font: 700 32px/1.04 "Space Grotesk"; }
.welcome-score { position: relative; z-index: 1; display: grid; gap: 2px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.welcome-score strong { color: var(--lime); font: 700 45px/1 "Space Grotesk"; }
.welcome-score span { color: #b6c2bd; font-size: 12px; }
.welcome-card ul { position: relative; z-index: 1; display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 13px; }
.welcome-card li { display: flex; gap: 9px; align-items: flex-start; }
.welcome-card li:before { content: "✓"; color: var(--lime); font-weight: 900; }

/* A clearly labelled sample makes the private player card understandable to
   families before they sign in. It contains illustrative—not real—data. */
.parent-card-preview {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 305px;
  padding: 17px;
  color: var(--ink);
  border: 1px solid #c7e544;
  border-radius: 18px 18px 46px 46px;
  background: linear-gradient(145deg, #fffef6, #d9f64b 55%, #b6e137);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.33), 0 13px 25px rgba(0,0,0,.14);
}

.parent-card-preview:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  top: 38px;
  left: -116px;
  border: 21px solid rgba(7,29,25,.08);
  border-radius: 50%;
}

.preview-card-top { display: flex; justify-content: space-between; font: 800 9px Manrope; letter-spacing: 1.2px; }
.preview-card-top span:last-child { color: var(--green); }
.preview-rating { display: grid; width: 82px; margin-top: 18px; line-height: 1; }
.preview-rating strong { font: 700 63px/.8 "Space Grotesk"; letter-spacing: -4px; }
.preview-rating span { margin: 7px 0 4px; color: #335248; font: 800 9px Manrope; letter-spacing: 1.2px; }
.preview-rating small { color: var(--green); font: 800 11px Manrope; }
.preview-silhouette { position: absolute; top: 54px; right: 18px; display: grid; place-items: center; width: 125px; height: 155px; border: 4px solid rgba(255,255,255,.78); border-radius: 44% 44% 18px 18px; background: linear-gradient(150deg, #176e5b, #092d27); color: var(--lime); font: 700 52px "Space Grotesk"; box-shadow: 0 10px 20px rgba(7,29,25,.21); }
.preview-name { margin-top: 29px; padding-top: 10px; border-top: 1px solid rgba(7,29,25,.18); }
.preview-name h2 { margin: 0; color: var(--ink); font: 700 22px/1 "Space Grotesk"; letter-spacing: -1px; }
.preview-name p { margin: 6px 0 0; color: #39564c; font: 800 8px Manrope; letter-spacing: .7px; }
.preview-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px 4px; margin-top: 18px; }
.preview-stats div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px; }
.preview-stats b { font: 800 18px/1 "Space Grotesk"; letter-spacing: -1px; }
.preview-stats span { color: #406257; font: 800 8px Manrope; letter-spacing: .55px; }
.preview-caption { position: relative; z-index: 1; margin: 16px 0 0; color: #b6c2bd; font-size: 11px; line-height: 1.45; }

.benefits,
.public-steps { padding: 90px 0; border-top: 1px solid var(--line); }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.benefit-grid article { border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.55); padding: 24px; min-height: 238px; }
.benefit-grid span { color: var(--green); font: 700 13px "Space Grotesk"; }
.benefit-grid h3 { margin: 42px 0 9px; font: 700 21px/1.05 "Space Grotesk"; }
.benefit-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.52; }

.public-steps { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; padding-bottom: 110px; }
.public-steps h2 { margin: 8px 0 0; font: 700 42px/1 "Space Grotesk"; letter-spacing: -2px; }
.public-step-list { display: grid; gap: 22px; }
.public-step-list article { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; }
.public-step-list b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); font: 700 15px "Space Grotesk"; }
.public-step-list h3 { margin: 1px 0 7px; font: 700 20px/1.1 "Space Grotesk"; }
.public-step-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.52; }

@media (max-width: 900px) {
  .welcome { grid-template-columns: 1fr; gap: 38px; min-height: auto; }
  .welcome-card { max-width: 620px; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .public-steps { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 700px) {
  .topbar { gap: 10px; }
  .public-nav { gap: 0; flex-wrap: wrap; justify-content: flex-end; }
  .public-nav a,
  .public-nav button { font-size: 11px; padding: 7px; }
  .public-nav .coach-portal { display: none; }
  .welcome { padding: 54px 0 58px; }
  .welcome-copy h1 { font-size: 43px; letter-spacing: -2.3px; }
  .welcome-copy > p:not(.eyebrow):not(.welcome-note) { font-size: 16px; }
  .welcome-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .welcome-card { padding: 28px; min-height: 350px; }
  .benefits, .public-steps { padding: 58px 0; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-grid article { min-height: 0; }
  .benefit-grid h3 { margin-top: 26px; }
  .public-steps h2 { font-size: 36px; }
}

@media (max-width: 900px) {
  .role-public .topbar .public-nav { display: flex; }
}