/* ============================================================
   CoachMate — Organization / League signup (org-signup.html)
   Matches the premium landing system (landing.css) and builds
   on the shared design tokens in styles.css (loaded first).
   Page-shell classes are prefixed `os-`. Functional classes the
   inline JS depends on (.alert, .form-group, .btn, …) keep
   their names and are restyled here.
   ============================================================ */

/* ---------- Page shell ---------- */
body.os-body{
  min-height:100dvh;
  background:var(--bg-gradient);
  display:flex; flex-direction:column;
}

.os-bg{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.os-bg__mesh{
  position:absolute; inset:0;
  background:
    radial-gradient(820px 480px at 12% -6%, rgba(var(--mint-rgb),.14), transparent 60%),
    radial-gradient(640px 440px at 92% 8%, rgba(var(--purple-rgb),.08), transparent 60%),
    radial-gradient(560px 400px at 60% 110%, rgba(var(--accent-gold-rgb),.05), transparent 60%);
}
.os-bg__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%, #000 25%, transparent 78%);
  mask-image:radial-gradient(ellipse 85% 65% at 50% 0%, #000 25%, transparent 78%);
}

/* ---------- Top bar (full-width, matches index.html nav) ---------- */
.os-top{
  position:relative; z-index:2; width:100%;
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.os-top__inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1240px; margin:0 auto;
  padding:14px clamp(18px, 4vw, 32px);
}
.os-top__brand{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--text);
}
.os-top__brand img{height:40px; width:auto; border-radius:8px}
.os-top__brand strong{font-size:17px; font-weight:900; letter-spacing:-.02em}
.os-top__back{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:9px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
  transition:color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.os-top__back:hover{color:var(--text); border-color:rgba(255,255,255,.20); background:rgba(255,255,255,.08)}
.os-top__back:focus-visible{outline:2px solid var(--mint); outline-offset:3px}

/* ---------- Two-column shell ---------- */
.os-shell{
  position:relative; z-index:1; flex:1;
  display:grid; grid-template-columns:minmax(340px, 460px) minmax(0, 720px);
  gap:clamp(28px, 4.5vw, 64px); justify-content:center; align-items:start;
  max-width:1240px; width:100%; margin:0 auto;
  padding:clamp(22px, 4vw, 44px) clamp(18px, 4vw, 32px) 64px;
}

/* ---------- Left: pitch panel ---------- */
.os-side{position:sticky; top:28px; display:grid; gap:18px}

.os-eyebrow{
  display:inline-flex; align-items:center; gap:9px; width:fit-content;
  padding:7px 13px; border-radius:999px;
  background:rgba(var(--mint-rgb),.08); border:1px solid rgba(var(--mint-rgb),.25);
  color:var(--mint); font-weight:800; font-size:12.5px;
}
.os-eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 4px rgba(var(--mint-rgb),.18);
}
.os-side h1{
  font-size:clamp(28px, 3vw, 40px); line-height:1.08; letter-spacing:-.03em;
  margin:0; font-weight:900;
}
.os-side h1 .os-grad{
  background:linear-gradient(100deg, var(--mint) 10%, #8be3bf 55%, var(--mint2) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.os-side__lead{color:var(--muted); font-size:15.5px; line-height:1.7; margin:0}
.os-side__lead strong{color:var(--text)}

.os-sportchips{display:flex; gap:9px; flex-wrap:wrap}
.os-sportchip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:var(--text); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.os-sportchip i{font-size:15px}
.os-sportchip--soccer i{color:var(--mint)}
.os-sportchip--basketball i{color:#ff9d5c}
.os-sportchip--football i{color:var(--accent-gold)}

/* Benefits card — ul#features-list content is (re)rendered by JS as
   plain <li> items, so the icon treatment lives in CSS. */
.os-benefits{
  border-radius:18px; padding:22px 22px 20px;
  background:linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(var(--mint-rgb),.20);
  box-shadow:var(--shadow-md);
}
.os-benefits__title{
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:900; margin-bottom:13px;
}
.os-benefits__title i{color:var(--mint); font-size:17px}
.os-benefits ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.os-benefits li{
  position:relative; padding-left:26px;
  color:var(--muted); font-size:13.5px; line-height:1.55;
}
.os-benefits li::before{
  content:"✓"; position:absolute; left:0; top:0;
  width:17px; height:17px; border-radius:6px;
  display:grid; place-items:center;
  font-size:10.5px; font-weight:900; color:var(--mint);
  background:rgba(var(--mint-rgb),.13); border:1px solid rgba(var(--mint-rgb),.24);
}

.os-trust{display:grid; gap:11px}
.os-trust__item{display:flex; align-items:flex-start; gap:11px; color:var(--muted2); font-size:13px; line-height:1.5}
.os-trust__item i{
  color:var(--mint); font-size:15px; flex:none; margin-top:1px;
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:rgba(var(--mint-rgb),.08); border:1px solid rgba(var(--mint-rgb),.16);
}
.os-trust__item strong{color:var(--text); font-weight:700}

/* ---------- Right: form card ---------- */
.os-card{
  position:relative; border-radius:22px;
  background:linear-gradient(168deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 36px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:clamp(24px, 3.4vw, 42px);
}
.os-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  border-radius:22px 22px 0 0;
  background:linear-gradient(90deg, var(--mint), rgba(var(--mint-rgb),.15) 55%, transparent);
}
.os-card__head{margin-bottom:24px}
.os-card__head h2{font-size:22px; letter-spacing:-.02em; margin:0 0 7px; font-weight:900}
.os-card__head p{color:var(--muted); font-size:14px; line-height:1.6; margin:0}

/* Section dividers inside the form */
.os-section{margin:30px 0 0; padding-top:26px; border-top:1px solid rgba(255,255,255,.07)}
.os-section:first-of-type{margin-top:0; padding-top:0; border-top:0}
.os-section__head{display:flex; align-items:flex-start; gap:13px; margin-bottom:18px}
.os-section__num{
  flex:none; width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center;
  font-size:12.5px; font-weight:900; color:var(--mint);
  background:rgba(var(--mint-rgb),.10); border:1px solid rgba(var(--mint-rgb),.26);
}
.os-section__head h3{font-size:16px; font-weight:800; letter-spacing:-.01em; margin:0 0 3px}
.os-section__head p{color:var(--muted2); font-size:13px; line-height:1.55; margin:0}

/* ---------- Form controls ---------- */
.form-group{margin-bottom:18px}
.form-group:last-child{margin-bottom:0}
.form-group label{
  display:block; margin-bottom:7px;
  font-weight:700; color:var(--text); font-size:13.5px;
}
.form-group input,
.form-group select{
  width:100%; padding:13px 15px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  color:var(--text); font-size:14.5px; font-family:inherit;
  transition:border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing:border-box;
}
.form-group input::placeholder{color:var(--field-placeholder)}
.form-group input[type="password"]{letter-spacing:.08em}
.form-group input:hover,
.form-group select:hover{border-color:rgba(255,255,255,.22)}
.form-group input:focus,
.form-group select:focus{
  outline:none;
  border-color:var(--mint);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(var(--mint-rgb),.16);
}
.form-group input:disabled{opacity:.6; cursor:not-allowed}
.form-group input:invalid:not(:placeholder-shown):not(:focus){
  border-color:rgba(var(--danger-rgb),.55);
}

.form-group select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px;
  padding-right:40px; cursor:pointer;
}
.form-group select option{
  background:#10241c; color:#fff; padding:12px;
}
.form-group select[multiple]{
  background-image:none; padding:8px; min-height:0; height:auto;
}
.form-group select[multiple] option{
  padding:8px 11px; border-radius:8px; margin:1px 0; font-size:13.5px;
  background:rgba(255,255,255,.03);
}
.form-group select[multiple] option:checked{
  background:rgba(var(--mint-rgb),.85) linear-gradient(0deg, rgba(var(--mint-rgb),.85), rgba(var(--mint-rgb),.85));
  color:var(--ink);
}

.form-group small{
  color:var(--muted); font-size:13px; line-height:1.6;
  margin-top:7px; display:block;
}

.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* Slug preview pill — JS rewrites #slug-help innerHTML with a <strong>. */
#slug-help strong{
  display:inline-block; margin-top:5px;
  font-family:'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace;
  font-size:12px; font-weight:600; color:var(--mint);
  background:rgba(var(--mint-rgb),.09);
  border:1px solid rgba(var(--mint-rgb),.22);
  border-radius:8px; padding:5px 10px;
  word-break:break-all;
}

/* League note injected block keeps its inline accent styling; soften the wrapper */
#leagueFields .form-group{box-shadow:none}

/* ---------- Alerts (classes used by inline JS) ----------
   The JS appends a <strong> + text node directly into .alert,
   so the layout must be block-flow (flex would split them into
   separate columns). The icon is absolutely positioned. */
.alert{
  position:relative; display:block;
  padding:14px 16px 14px 47px; border-radius:13px; margin-bottom:18px;
  font-size:13.5px; line-height:1.6;
}
.alert::before{
  position:absolute; left:15px; top:14px;
  width:21px; height:21px; border-radius:7px;
  display:grid; place-items:center;
  font-size:12px; font-weight:900; line-height:1;
}
.alert-success{
  background:rgba(var(--mint-rgb),.10); color:#9fe8c8;
  border:1px solid rgba(var(--mint-rgb),.30);
}
.alert-success::before{
  content:"✓"; color:var(--mint);
  background:rgba(var(--mint-rgb),.16); border:1px solid rgba(var(--mint-rgb),.3);
}
.alert-success strong{color:var(--mint)}
.alert-error{
  background:rgba(var(--danger-rgb),.10); color:#ffb3b3;
  border:1px solid rgba(var(--danger-rgb),.32);
}
.alert-error::before{
  content:"!"; color:#ff8a8a;
  background:rgba(var(--danger-rgb),.16); border:1px solid rgba(var(--danger-rgb),.3);
}

/* ---------- Legal acceptance ---------- */
.legal-acceptance-box{
  border:1px solid rgba(var(--mint-rgb),.20);
  border-radius:14px; padding:17px 17px 14px;
  background:rgba(var(--mint-rgb),.04);
  margin-top:6px; margin-bottom:18px;
}
.legal-acceptance-box .legal-title{
  font-size:12.5px; color:var(--mint); font-weight:800; margin-bottom:11px;
  display:flex; align-items:center; gap:7px;
}
.legal-acceptance-row{
  display:flex; gap:11px; align-items:flex-start;
  margin-bottom:11px; color:var(--muted); font-size:13px; line-height:1.55;
  cursor:pointer;
}
.legal-acceptance-row:last-child{margin-bottom:0}
.legal-acceptance-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:19px; height:19px; margin-top:1px; flex-shrink:0; cursor:pointer;
  border-radius:6px; border:1.5px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.03);
  display:grid; place-items:center;
  transition:background var(--transition-fast), border-color var(--transition-fast);
}
.legal-acceptance-row input[type="checkbox"]:checked{
  background:var(--mint); border-color:var(--mint);
}
.legal-acceptance-row input[type="checkbox"]:checked::after{
  content:"✓"; font-size:12px; font-weight:900; color:var(--ink); line-height:1;
}
.legal-acceptance-row input[type="checkbox"]:focus-visible{
  outline:2px solid var(--mint); outline-offset:2px;
}
.legal-acceptance-row a{color:var(--mint); text-decoration:none; font-weight:600}
.legal-acceptance-row a:hover{text-decoration:underline}

/* ---------- Submit ---------- */
.btn{
  width:100%; padding:16px 28px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid transparent; border-radius:14px;
  font-weight:800; font-size:15.5px; cursor:pointer; font-family:inherit;
  color:var(--ink);
  background:linear-gradient(135deg, #6fdcab 0%, var(--mint) 45%, var(--mint2) 100%);
  box-shadow:0 8px 28px rgba(var(--mint-rgb),.30), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
}
.btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(var(--mint-rgb),.40), inset 0 1px 0 rgba(255,255,255,.35);
  filter:brightness(1.04);
}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
.btn:disabled{
  cursor:not-allowed; transform:none;
  color:var(--muted); background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  box-shadow:none; filter:none;
}
.os-submit-note{
  text-align:center; color:var(--muted2); font-size:12.5px; margin:12px 0 0;
}

/* ---------- Below-card links ---------- */
.os-after{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-top:22px;
}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600;
  transition:color var(--transition-fast);
}
.back-link:hover{color:var(--mint)}
.back-link:focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:4px}
.os-after__alt{color:var(--muted2); font-size:13px}
.os-after__alt a{color:var(--mint); text-decoration:none; font-weight:600}
.os-after__alt a:hover{text-decoration:underline}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce){
  .btn, .os-top__back, .form-group input, .form-group select,
  .legal-acceptance-row input[type="checkbox"]{transition:none !important}
  .btn:hover:not(:disabled){transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px){
  .os-shell{grid-template-columns:minmax(0, 720px); padding-bottom:48px}
  .os-side{position:static; max-width:720px}
  .os-trust{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .os-top__inner{padding-top:11px; padding-bottom:11px}
  .os-top__brand img{height:34px}
  .os-card{padding:22px 18px; border-radius:18px}
  .form-row{grid-template-columns:1fr}
  .os-trust{grid-template-columns:1fr}
  .os-side h1{font-size:27px}
  .os-side__lead{font-size:14.5px}
  .os-section{margin-top:24px; padding-top:22px}
  .os-section__head{gap:11px; margin-bottom:15px}
  .form-group{margin-bottom:16px}
  .btn{padding:15px 22px}
}