/* CSS for Tournament explorable styles */

/*
 * div#t-content { }
 * div#tourney-explore { }
 * div#tourney-explore { }
 * div#tourney-explore > figure { }
 * div#tourney-explore > figure > div#t-ctrl { }
 * div#tourney-explore > figure > div#t-ctrl input#t-n-motions { }
 * div#tourney-explore > figure > div#t-ctrl > button.tournament.button { }
 * div#tourney-explore > figure > div#t-probability { }
 * div#tourney-explore > figure > div#t-probability > div.state.win { }
 * div#tourney-explore > figure > div#t-probability input#t-win-percent { }
 * div#tourney-explore > figure > div#t-probability > div.state.tie { }
 * div#tourney-explore > figure > div#t-probability input#t-tie-percent { }
 * div#tourney-explore > figure > div#t-probability > div.state.lose { }
 * div#tourney-explore > figure > div#t-probability input#t-lose-percent { }
 * div#tourney-explore > figure > div#t-pair-result-buttons { }
 * div#tourney-explore > figure > div.results { }
 * div#tourney-explore > figure > div.results > svg.tourney-svg { }
 * div#tourney-explore > figure > div.results > div.copeland { }
 * div#tourney-explore > figure > figcaption { }
 */

body > svg:first-of-type {
    display: none;
}

div#tourney-explore {
    background: var(--explore-background-color);
    padding: 1rem;
    margin-bottom: 1rem; }

div#t-ctrl,
div#t-probability {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around; }

div#t-pair-result-buttons {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); }

div#tourney-explore > figure > div#t-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

div#t-results > svg.tourney-svg {
    grid-column: 1 / 4;
    grid-row: 1;
}

div#t-results > div.copeland {
    text-align: end;
    grid-column: 4;
    grid-row: 1;
}

div#t-results > div.copeland > samp.line {
    text-decoration: underline;
}

/*
 * Styles needed for Tournaments
 * The Tournament explorable is all under div#tourneyExplore.
 * Mobile first starts at screen width of 300px
 */