/* Need a Fourth redesign preview only. No application behavior or backend changes. */
:root{
  --green:#176b49;
  --green-dark:#123f31;
  --court:#176b49;
  --lime:#176b49;
  --lime-dark:#125a3d;
  --ink:#17241f;
  --muted:#62716a;
  --line:#d8e0dc;
  --bg:#f4f6f4;
  --card:#ffffff;
  --amber:#176b49;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);line-height:1.45;padding-bottom:68px}
.hero{margin-top:0}
#notify-btn svg{display:none}
.wrap{max-width:760px;padding-left:18px;padding-right:18px}
header{background:#123f31;padding:18px 0 34px}
.brandrow{align-items:center}
.logo{font-size:18px;letter-spacing:0}
.logo svg circle:first-child{fill:#fff!important}
.logo svg circle:not(:first-child){fill:#123f31!important}
.logo .wordmark span{color:#fff}
.demo-pill{background:transparent;border:1px solid rgba(255,255,255,.52);color:#fff;border-radius:3px;padding:3px 8px;letter-spacing:.35px}
.heroband{margin-top:25px;gap:16px}
.hero-h{font-size:30px;line-height:1.12;letter-spacing:-.45px;font-weight:750;margin-bottom:8px}
.hero-p{color:#e1ece6;font-size:15px;max-width:38em}
.hero-art{display:none!important}
.cta{border-radius:4px;padding:10px 16px;font-size:13px}
.cta-solid{background:#fff;color:#123f31}
.cta-solid:hover{background:#edf3ef}
.cta-ghost{border:1px solid rgba(255,255,255,.5)}
.card{border-radius:5px;box-shadow:none;border:1px solid var(--line);padding:18px;margin-bottom:12px}
h1{font-size:23px;letter-spacing:-.35px;margin-bottom:4px}
h2{font-size:18px;letter-spacing:-.2px;margin-bottom:8px}
.sub{font-size:13px}
.btn{font-size:14px;padding:11px 13px;border-radius:4px;margin-top:8px}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover,.btn-green:active{background:#125a3d}
.btn-outline{color:var(--green-dark);border:1px solid var(--green)}
input,select,textarea{padding:10px 11px;border:1px solid var(--line);border-radius:4px;font-size:15px}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(23,107,73,.12)}
.filters{gap:6px;margin-bottom:11px}
.filter{padding:8px 10px;border-radius:4px;border:1px solid var(--line);font-size:12px;color:#52615a}
.filter.active{background:var(--green);border-color:var(--green);color:#fff}
.post,.court{border:1px solid var(--line);border-radius:4px;padding:12px;margin-bottom:9px;box-shadow:none}
.post-gameday{font-size:14px;color:var(--green-dark);margin-bottom:4px}
.post-when{font-size:14px;color:var(--green-dark)}
.post-body{font-size:13px;margin:4px 0 8px}
.tag{border-radius:3px;padding:2px 7px;font-size:10px;margin-right:4px}
.tag-skill,.tag-indoor,.tag-outdoor,.tag-free{background:#edf3ef;color:#244c3b;border:1px solid #d3e2d9}
.tag-past{background:#f0f2f1;color:#64716b;border:1px solid #dce1de}
.reply-btn,.rate-btn{border-radius:4px;border:1px solid var(--green);color:var(--green-dark);padding:6px 11px}
.stat{border-radius:4px;padding:7px 10px}
.price{background:#f2f6f3;border:1px solid #d5e2da;border-radius:4px;padding:10px}
.price{background:#fff!important;border:1px solid #176b49!important}
.price b{font-size:20px;color:var(--green-dark)}
#notify-panel{background:#f6f8f6!important;border:1px solid var(--line)!important;border-radius:4px!important;padding:10px!important}
.banner{background:#f5f7f5;border:1px solid var(--line);border-radius:4px;padding:9px 10px;font-size:12px;color:#58665f}
.court-name{font-size:14px}
.court-meta{font-size:12px;margin:6px 0;color:#45534c}
.map-link{font-size:12px;color:var(--green-dark)}
#posts-loading,#hire-loading{border:1px solid var(--line);border-radius:4px;background:#f8faf8;padding:17px 12px}
#posts-loading::before,#hire-loading::before{width:10px;height:10px;background:var(--green);box-shadow:none}
nav{background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav button{padding:12px 5px 13px;font-size:12px;color:#617068}
nav button .ico{display:none}
nav button.active{color:var(--green-dark);box-shadow:inset 0 2px 0 var(--green)}
footer{font-size:11px;padding:18px 0 8px}
.toast{border-radius:4px}
#install-banner{border-radius:4px;background:#123f31;box-shadow:none}
#install-banner #install-go{border-radius:4px;background:#fff;color:#123f31}
#install-banner #install-close{color:#fff}
.amb-card{border-radius:4px;border:1px solid var(--line);color:var(--green-dark)}
@media (min-width:760px){
  body{padding-bottom:0}
  .wrap{max-width:1180px;padding-left:28px;padding-right:28px}
  header{padding:20px 0 43px}
  .hero-h{font-size:36px}
  .hero-p{font-size:16px}
  nav{position:static;order:2;display:flex;justify-content:flex-start;align-self:stretch;width:100%;margin:-1px auto 0;padding:0 max(calc((100% - 1124px)/2),28px);border-top:0;border-bottom:1px solid var(--line);background:#fff;z-index:5}
  nav button{flex:none;white-space:nowrap;margin:0 24px 0 0;padding:13px 2px 12px;border-radius:0;background:transparent;color:#5c6b63;font-size:13px}
  nav button.active{background:transparent;color:var(--green-dark);box-shadow:inset 0 -2px 0 var(--green)}
  body>.wrap{order:3;margin:0 auto;padding-top:18px}
  header{order:1}
  .hero{margin-top:0}
  .tabpage.active .hero{display:block}
  .tabpage.active .hero .card{margin-bottom:12px}
  .tabpage.active .hero .card:first-child{grid-column:auto}
  .tabpage.active#tab-partner .hero{max-width:840px;margin-left:auto;margin-right:auto}
  .tabpage.active#tab-courts .hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:14px;align-items:start}
  .tabpage.active#tab-courts .hero>.card{margin-bottom:0}
  #court-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #court-list>.court{margin:0}
  .tabpage.active#tab-play .hero{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .tabpage.active#tab-play .hero>.filters,.tabpage.active#tab-play .hero>#hire-view-players,.tabpage.active#tab-play .hero>#hire-view-list{grid-column:1/-1}
  .tabpage.active#tab-play .hero .card{margin-bottom:0}
  .amb-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  footer{order:4}
  .toast{bottom:24px}
}
@media (min-width:960px){
  header{padding:20px 0 43px}
}
@media (max-width:420px){
  header{padding-top:15px;padding-bottom:27px}
  .hero-h{font-size:25px;letter-spacing:-.25px}
  .logo{font-size:17px}
  .wrap{padding-left:14px;padding-right:14px}
  .card{padding:14px;margin-bottom:10px}
  .post,.court{padding:10px}
  nav button{font-size:11px;padding-top:12px;padding-bottom:12px}
}

/* Hire tabs: clean spacing and aligned, matching flat edges */
#tab-play .hero>.filters{margin-top:10px;margin-bottom:10px;gap:8px}
#tab-play .hero>.filters .filter{border-radius:4px;border:1px solid #d8e0dc;background:#fff}
#tab-play .hero>.filters .filter.active{border-color:#176b49;background:#176b49;color:#fff}

/* Bottom nav: larger, darker labels; bold green active label and top line */
@media(max-width:759px){
 nav button{font-size:13px!important;font-weight:650!important;color:#43574e!important;line-height:1.2}
 nav button .ico{display:none!important}
 nav button.active{color:#176b49!important;font-weight:800!important;background:transparent!important;box-shadow:inset 0 2px 0 #176b49!important}
}

/* Keep all featured and regular Hire a Player listing cards consistent, including cards rendered later. */
#tab-play #hire-view-players .post{border:2px solid #16a34a!important}

/* Approved Hire a Player cleanup: remove gray intros; show descriptions at two lines. */
#tab-play #hire-view-players>.card>p.sub{display:none!important}
#tab-play #hire-view-players .post>.post-body:not([style]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}