/* Styles needed for SAVE Home Page
 *   Clear margins and padding */

body, dd, div, dl, dt, h1, h2, h3, h4, h5, img, li, ol, p, ul {
    margin: 0;
    padding: 0; }

/* Org sets some classes and ids that are not easy to change, but can
 *  easily be styled.
 */

/* Site-wide style variables */

:root {
    --explore-background-color: #D7ECDA;
}

/* sorting selectors by increasing specificity */

body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 15px;
    background: #2f9778; }

caption { padding-top: .5rem; }

li { list-style-position: outside; }

ol, ul {
    padding-top: 0;
    padding-left: 2rem;
    padding-bottom: 1rem; }

p { padding: .5em 0;
    padding-bottom: 1em;
    text-indent: 0; }

table { margin: 2rem auto; }

table td { text-align: center; }

.content {
    background: #FCFFF0;
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    padding: .5em 2em;
    width: 80%; }

.figure { padding: 0; }

.title { display: none; }

/* SVG type selectors */

body > svg {
    display: none; }

svg {
    stroke: black;
    fill: black; }

svg > rect {
    stroke: black;
    fill: none; }

svg use {
    stroke: black;
    fill: black; }

/* Starting GPS naming convention */

.g-buttons { stroke: #46f; }

.g-static { cursor: not-allowed; }

.g-draggable,
.g-draggable-group { cursor: crosshair; }

.g-header {
    padding-top: 10px;
    margin-bottom: 25px;
    min-height: 160px; }

.g-header img {
    width: 160px;
    float: left;
    padding-right: 10px; }

.g-header .g-figure {
    padding: 0;
    margin: 0; }

.g-header h2 { font-size: 2em; }

.g-header h2,
.g-header p { padding: 0 0 5px; }

nav.g-top-navigation-items a {
    /* font-size: 1em;
     * line-height: 1.0;
     * padding: 0; */

    text-decoration: none;
    text-align: center; }

/* Wrapping for pan-zoom buttons and direct input controls */
div#a-pz-div,
div#s1-pz-div,
div#s2-pz-div {
    display: flex;
    flex-wrap: wrap; }

/* Width of pan-zoom direct input fields */
div#s1-pz-direct > * > input[type="number"],
div#s2-pz-direct > * > input[type="number"],
div#a-pz-direct > * > input[type="number"] {
    width: 2.75rem; }


/* This next selector has @media variants */

/* DBG: TODO(tec) consider using "flex-flow: row wrap" instead of grid */
nav.g-top-navigation-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.2rem 0.2rem; }

/* The GPS docs specifically say to nest @media queries, but that is not
 * yet part of Native CSS, and I don't want to add anything new to this
 * mix.  This is a reminder to put nesting in when browser support it.
 */

/* 240px is about 15rem  (/ (* 15 316) 240) 19 */
@media screen and (width >= 20rem) { /* initially 16rem */
    nav.g-top-navigation-items {
        grid-template-columns: 1fr 1fr; } }

/* 240px is about 15rem  (/ (* 15 408) 240) 25 */
@media screen and (width >= 26rem) {
    nav.g-top-navigation-items {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    } }


/* 240px is about 15rem  (/ (* 15 464) 240) 29 */
@media screen and (width >= 29rem) {
    nav.g-top-navigation-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } }

/* 240px is about 15rem  (/ (* 15 515) 240.0)32.1875 */
@media screen and (width >= 32rem) {
    nav.g-top-navigation-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } }

@media screen and (width >= 33.6rem) {
    nav.g-top-navigation-items {
        grid-template-columns: 1fr 1fr; } }

@media screen and (width >= 40.4rem) {
    nav.g-top-navigation-items {
        /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */
        grid-template-columns: 1fr 1.2fr 1.2fr 1.1fr 1fr 1fr; } }

/* End of @media variants */

nav.g-top-navigation-list a {
    display: block;
    width: 15%; }

ul.g-top-navigation-list p.final { padding-right: 0; }

foreignObject * { pointer-events: none; } /* Unused so far */

@media screen and (width >= 400px) {
    figure { margin-inline: 40px 40px; } }

.results {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; }

rect.rect-e { fill: #fcfff0; }

polygon.voter,
rect.voter,
ellipse.voter,
circle.voter { fill: yellow; }

polygon.indifference,
rect.indifference,
ellipse.indifference,
circle.indifference { fill: none; }

g.g-cross { touch-action: none; }

g.g-cross circle {
    fill: yellow;
    fill-opacity: 0.25; }

g.motion.in-drag text { stroke: gray; }

/* ID-based selectors */

/* - moved to individual files : DBG: TODO(tec) remove this comment
#tourney-explore,
#spatial-explore,
#profile-explore,
#profile-ctrl,
#p-sim-tournaments-exp.copeland,
#p-sim-tournaments-exp.pair-results,
#p-sim-tournaments-exp.distance,
#p-sim-profiles-exp.copeland,
#p-sim-profiles-exp.pair-results,
#p-sim-profiles-exp.distance,
#p-sim-tournaments-exp figure,
#p-sim-profiles-exp figure,
#p-sim-spatial-exp.copeland,
#p-sim-spatial-exp.pair-results,
#p-sim-spatial-exp.distance { text-align: center; }
#p-sim-tournaments-exp input { width: 3.0rem; } -- DBG: TODO(tec) check this
#p-sim-spatial-exp figure { margin-inline-start: 10%;
                             margin-inline-end: 10%; }
#spatial-explore > figure, {display: grid;}
#s-mg-a circle,
#s-mg-b circle,
#s-mg-c circle {fill: none;}
@media {#spatial-explore}
*/

#voronoi-explore,
#vm-voter-metric-explore,
#a-aggregate-explore,
#s1-save01-explore,
#s2-save02-explore {
    background-color: var(--explore-background-color);
    padding: 0.25rem;
    margin-bottom: 1rem; }

#p-save-what input { width: 2.0rem; }

div#postamble p {
    padding: 0;
    margin: 0; }

.g-top-navigation-list p#here {
    font-size: 1em;
    font-weight: bold; }

#p-save-what dl,
#p-home dl {
    display: grid;
    grid-template-columns: 1fr 3fr;
    row-gap: 0.5rem; }

#p-save-what dt,
#p-home dt { grid-column-start: 1; }

#p-save-what dd,
#p-home dd { grid-column-start: 2; }

#p-cell-tower #cell-tower-abcd { height: 15rem; }

#p-save-what figure { margin-inline: 10% 10%; }

#voter-metric-explore > figure,
#save-01-explore > figure {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(10px, auto);
    row-gap: 10px; }

g.motion circle { fill: none; }

#p-save-what svg { /* Drakon stylings */
    font-size: 1rem;
    font-family: monospace;
    font-weight: lighter;
    fill: white;
    stroke: black;
    stroke-width: 1; }

#voronoi-svg g.motion circle { fill: black; }

#voronoi-explore g.clearable > g.leader > circle,
#voronoi-explore g.clearable > g.leader > text {
    stroke: #268BD2;
    fill: #268BD2; }

#voronoi-explore g.clearable > g.winner > circle,
#voronoi-explore g.clearable > g.winner > text {
    stroke: #FFB000;
    fill: #FFB000; }

#voronoi-explore g.clearable > g.last > circle,
#voronoi-explore g.clearable > g.last > text {
    stroke: #F00;
    fill: #F00; }

#voronoi-explore g.clearable > g.eliminated > circle,
#voronoi-explore g.clearable > g.eliminated > text {
    stroke: #BBB;
    fill: #BBB; }