:root{--red:#d90712;--ink:#111;--muted:#555b64;--line:#e1e3e7;--bg:#f4f5f7;--nav:14rem;color:var(--ink);background:var(--bg);font:16px/1.5 system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0}
a{color:#ad0912}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #111;outline-offset:3px}
aside{position:fixed;inset:0 auto 0 0;width:var(--nav);background:white;border-right:1px solid var(--line);padding:1.25rem;z-index:2}
.brand{display:grid;justify-items:center;gap:.5rem;color:var(--ink);text-decoration:none;font-size:1.35rem;margin-bottom:2rem}
.brand img{width:4.5rem}
nav{display:grid;gap:.4rem}
nav a{color:var(--ink);font-weight:650;text-decoration:none;padding:.75rem;border-radius:.6rem}
nav a[aria-current=page]{background:var(--red);color:white}
.signed main{margin-left:var(--nav)}
header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem clamp(1rem,3vw,2.5rem);border-bottom:3px solid var(--red);background:repeating-linear-gradient(135deg,#fff 0 14px,#f7f7fa 14px 26px)}
header strong{font-size:clamp(1rem,2.5vw,1.75rem)}
.content{max-width:80rem;margin:auto;padding:clamp(1rem,3vw,2.5rem)}
.heading,.buttons{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.heading{justify-content:space-between;margin-bottom:1rem}
h1,h2,h3{line-height:1.15;margin:0 0 .8rem;font-weight:850}
h1{font-size:clamp(1.85rem,4vw,2.6rem);text-transform:uppercase}
.heading h1{margin:0}
h3{font-size:1.5rem}
small{color:var(--muted)}
.card{min-width:0;background:white;border:1px solid var(--line);border-radius:1rem;padding:1.2rem;margin-bottom:1rem;box-shadow:0 4px 16px #11111108;overflow-wrap:anywhere}
.grid,.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.bar{background:var(--red);color:white;margin:-1.2rem -1.2rem 1.1rem;padding:.85rem 1.2rem;border-radius:.9rem .9rem 0 0}
.tag{display:inline-block;background:#f1f2f4;border-radius:99px;padding:.2rem .7rem;font-weight:650;margin:.2rem 0 .75rem}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;margin:1.4rem 0;gap:.35rem;font-size:.85rem}
.stats strong{display:block;font-size:2rem}
form{display:grid;gap:.8rem;margin-top:.85rem}
form+form{margin-top:1rem}
label{display:grid;gap:.3rem;font-weight:650;min-width:0}
input,select,textarea{width:100%;min-width:0;border:1px solid #afb3ba;border-radius:.55rem;background:white;color:var(--ink);padding:.7rem;font:inherit}
textarea{resize:vertical}
.check{display:flex;align-items:center}
.check input{width:auto}
button,.button{display:inline-block;width:fit-content;min-height:44px;padding:.58rem .85rem;background:var(--red);color:white;border:1px solid var(--red);border-radius:.55rem;font:inherit;font-weight:750;text-decoration:none;cursor:pointer}
button:hover,.button:hover{filter:brightness(.92)}
.secondary{background:white;color:var(--ink);border-color:#aeb2b9}
.rows{list-style:none;padding:0;margin:0}
.rows li{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;border-top:1px solid var(--line);padding:.7rem 0}
.rows form{margin:0}
.rows input{width:8rem}
.notice{background:#e5f5e9;border-radius:.6rem;padding:.8rem}
.error{background:#ffebeb;color:#9d0710}
.guest{min-height:100vh;display:grid;align-items:center;background:repeating-linear-gradient(135deg,#fff 0 18px,#f4f5f7 18px 34px)}
.login{max-width:28rem;margin:auto;padding:2rem;border-top:4px solid var(--red)}
.login img{display:block;width:6.5rem;margin:0 auto 1rem}
.login h1{text-align:center}
.login button{width:100%;margin-top:.4rem}
@media(max-width:850px){.grid{grid-template-columns:1fr;gap:0}}
@media(max-width:640px){
.signed main{margin-left:0;padding-bottom:calc(4.6rem + env(safe-area-inset-bottom))}
aside{inset:auto 0 0;width:auto;padding:.25rem .2rem calc(.25rem + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line)}
.brand{display:none}
nav{display:flex;justify-content:space-around;gap:.1rem}
nav a{font-size:clamp(.61rem,2.5vw,.84rem);padding:.75rem .25rem;text-align:center}
.form-grid{grid-template-columns:1fr}
header span{font-size:.83rem;text-align:right}
}
.icon{display:inline-block;vertical-align:-.2em;flex:none}
nav a{display:flex;align-items:center;gap:.65rem}
button .icon,.button .icon,h2 .icon{margin-right:.15rem}
.password-field{display:block;position:relative}
.password-field input{padding-right:3.2rem}
button.password-toggle,.login button.password-toggle{position:absolute;right:0;top:0;bottom:0;width:3rem;min-height:0;margin:0;padding:0;border:0;background:transparent;color:var(--ink)}
.password-toggle .icon{margin:0}
.remember{font-weight:500}
.charge-members{grid-column:1/-1;margin:0;min-width:0;border:1px solid var(--line);border-radius:.65rem;padding:.75rem}
.charge-members legend{font-weight:750}
.member-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.5rem;padding-top:.55rem}
.member-list label{font-weight:500}
@media(max-width:640px){nav a{flex-direction:column;gap:.2rem;padding:.35rem .15rem}nav .icon{width:18px;height:18px}}
.position-picker,.bench{min-width:0;margin:0;border:1px solid var(--line);border-radius:.75rem;padding:.75rem}
.position-picker{grid-column:1/-1;max-width:34rem;width:100%}
.position-picker legend,.bench legend{font-weight:750}
.pitch{isolation:isolate;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(4.75rem,1fr));gap:.25rem;align-items:center;padding:1rem .55rem;max-width:42rem;width:100%;border:3px solid #fff;border-radius:.85rem;outline:1px solid #b7c3ba;background:repeating-linear-gradient(0deg,#146537 0 24%,#1c7242 24% 50%);color:#fff}
.pitch::before,.pitch::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.pitch::before{inset:.45rem;border:1px solid #ffffff80;background:linear-gradient(transparent calc(50% - .5px),#ffffff80 calc(50% - .5px),#ffffff80 calc(50% + .5px),transparent calc(50% + .5px))}
.pitch::after{top:50%;left:50%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #ffffff80;border-radius:50%}
.pitch-r1{grid-row:1}.pitch-r2{grid-row:2}.pitch-r3{grid-row:3}.pitch-r4{grid-row:4}
.pitch-c1{grid-column:1}.pitch-c2{grid-column:2}.pitch-c3{grid-column:3}
.pitch-slot{text-align:center;min-width:0}
.pitch-slot label,.pitch label{justify-items:center}
.pitch-slot select{font-size:.8rem;padding:.4rem .2rem}
.pitch-badge{display:inline-grid;place-items:center;min-width:2.6rem;min-height:2.6rem;border-radius:50%;background:#fff;color:#111;font-size:.82rem;font-weight:850;border:2px solid transparent}
.pitch-name{display:block;font-size:.83rem;font-weight:750;margin-top:.25rem}
.pitch input[type=radio],.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pitch label:has(input[type=radio]){cursor:pointer}
.pitch input:checked + .pitch-badge{background:var(--red);color:#fff;border-color:white}
.pitch input:focus-visible + .pitch-badge{outline:3px solid white;outline-offset:3px}
.position-options{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;margin-top:.5rem}
.position-options p,.bench p{margin:.35rem 0}
.bench{max-width:42rem}
.bench label:has(input:disabled){opacity:.65}

.formation-picker{width:min(100%,14rem)}