/* CSS for Spatial model explorable styles */

/*
 *  div#s-content { }
 *  div#spatial-explore { }
 *  div#spatial-explore > figure { }
 *  div#spatial-explore > figure > div#s-ctrl { }
 *  div#spatial-explore > figure > div#s-ctrl > button.cycle { }
 *  div#spatial-explore > figure > div#s-ctrl > button.uniform { }
 *  div#spatial-explore > figure > div#s-ctrl > button.normal { }
 *  div#spatial-explore > figure > div#s-display { }
 *  div#spatial-explore > figure > div#s-display > svg#s-spatial-svg { }
 *  div#spatial-explore > figure > div#s-display > div.s-results { }
 *  d#s-e > f > div#s-display > div.s-results > div.pair-results { }
 *  d#s-e > f > div#s-display > div.s-results > div.tourney-svg { }
 *  d#s-e > f > div#s-display > div.s-results > div.copeland { }
 *  d#s-e > f > div#s-display > div.s-results > div.distance { }
 *  div#spatial-explore > figure > figcaption { }
 */

body#p-sim-stubs > svg:first-of-type {
    display: none;
}

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

div#spatial-explore > figure {
    margin-inline: 5% 5%; }

div#s-ctrl {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around; }

#s-mg-a circle,
#s-mg-b circle,
#s-mg-c circle { fill: none; }

div#s-display {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around; }

div#s-display > svg#s-spatial-svg {
    min-width: 100%; }

div#s-display > div.s-results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(10px, auto);
    gap: 5%;
    margin-top: -0.5rem; }

div#s-display > div.s-results > div.pair-results {
    grid-column: 1;
    grid-row: 1; }

div#s-display > div.s-results > svg.tourney-svg {
    grid-column: 2;
    grid-row: 1; }

div#s-display > div.s-results > div.copeland {
    grid-column: 1;
    grid-row: 2; }

div#s-display > div.s-results > div.distance {
    grid-column: 2;
    grid-row: 2; }

div#s-display > div.s-results p {
    padding-bottom: 0;
}

@media screen and (width >= 38rem) {
    div#s-display {
        display: grid;
        grid-template-columns: 4fr 1fr;
        grid-auto-rows: minmax(6rem, auto);
        gap: 10px; }

    svg#s-spatial-svg {
        grid-column: 1;
        grid-row: 1; }

    div#s-display > div.s-results {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(4rem, auto);
        gap: 0%; }

    div#s-display > div.s-results > div.pair-results {
        grid-column: 1;
        grid-row: 1; }

    div#s-display > div.s-results > svg.tourney-svg {
        grid-column: 1;
        grid-row: 2; }

    div#s-display > div.s-results > div.copeland {
        grid-column: 1;
        grid-row: 3; }

    div#s-display > div.s-results > div.distance {
        grid-column: 1;
        grid-row: 4; } }