@import url('https://fonts.googleapis.com/css2?family=Graduate&display=swap');
body { 
    font-size: 1.2em; 
    font-family: "Graduate", sans-serif; 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 0 1em; 
    display: grid;
}
button {
    font-size: 1em;
    text-transform: uppercase;
    width: fit-content;
    justify-self: end;
}

[inert] { display: none; }

section.forms { 
    display: inline-block; 
    width: min-content;
    margin: 0 auto;
}

.league {
    grid-template-columns: 1fr 1fr;
}
.league fieldset { 
    grid-column: span 2;
    justify-self: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}
.league label {
    text-align: center;
}

.baseball {
    display: var(--baseballShow);
}
.softball {
    display: var(--softballShow);
}

#player {
    --baseballShow: block;
    --softballShow: none;
}

section.forms > fieldset {
    padding: 1em;
}

section.forms form { 
    display: grid; 
    grid-template-columns: 1fr 2fr; 
    gap:1em; 
    margin-bottom: 16px;
}

section.forms #add { 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 24px; 
}

section.forms label { text-align: right; }

a#add {
    font-size: .75em;
    float: right;
}
section.forms #add fieldset { 
    grid-column: span 2; 
    grid-row: span 2; 
    display: grid; 
    grid-template-columns: auto 10% auto 10%; 
    align-items: center;
}
li > div { 
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
}
button[type=submit], #btnLoad, #btnUnlock { 
    grid-column: 2;
}

#search #btnUnlock { display: none; }
#search[locked] #btnUnlock { display: block; }


legend { font-weight: bold;}

input { font-size: 1em; border-radius: 3px; border-color: #600; border-width: 2px; border-style: solid;}

input:focus { border-color: #003 #009;}

h1,h2,h4 { text-align: center;}

h2 { margin-top: 0; }

h4 { margin: 16px auto; }

#result { --reportAnimation: report; display: block; min-height: 2em; opacity:0; line-height: 2em; text-align: center;}
#result.report {
    animation-duration: 4s;
    animation-name: var(--reportAnimation);
}
.success { color: green; }
.failure { color: red; }
@keyframes report {
    from {
    opacity: 0;
    }
    50% {
    opacity: 1;
    }
    to {
    opacity: 0;
    }
}
ul { margin: 0 auto 1em auto; padding: 0; list-style: none; max-width: 600px; }
li { display: grid; grid-template-columns: 33% minmax(4em, 6em) auto; gap: 1em; align-items: center; margin-bottom:1em;}
li label { text-align: right;}
li input[type=text] { max-width: 5em;}
li.division, li.pitching { grid-template-columns: auto;}
li.pitching fieldset { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1em; align-items:center;}
li.division fieldset { display: grid; grid-template-columns: repeat(2, 1fr);align-items:center;}
li.division label { text-align: right;  }
input[type=number]:invalid { border: red 2px solid; background-color: rgba(255,0,0,.5);}
#lnkAdd { grid-column: span 2;}
@media (max-width: 760px) {
    body { padding: 2px; }
    section.forms { grid-template-columns: auto;}
    section.forms form { gap: .5em; }
    li.division fieldset { grid-template-columns: 1fr auto 1fr; }
    li.division label { grid-column: 2; }
}
em { font-size: .5em; }