/* 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; */
    font-size: 1rem;
    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 */

svg {
    stroke: black;
    fill: black; }

body > svg {
    display: none; }

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; }

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

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

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

@media screen and (width >= 400px) {
    figure { margin-inline: 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 */

#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; }
/* DEV: TODO(tec) check this next line 1 */
#p-sim-tournaments-exp input { width: 3.0rem; }
#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;}

#voronoi-explore,
#vm-voter-metric-explore,
#a-aggregate-explore,
#sb-save-basics-explore,
#sf-save-focus-explore,
#sv-save-voters-explore {
    background-color: var(--explore-background-color);
    padding: 0.25rem;
    margin-bottom: 1rem; }

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

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

/* Stylings for description lists  */
#p-aggregation dl,
#p-change-log dl,
#p-gibbard-satterthwaite dl,
#p-home dl,
#p-not-impossible dl,
#p-save-chart dl,
#p-save-focus dl,
#p-save-intro dl,
#p-save-voters dl,
#p-save-why dl,
#p-sim-profiles-exp dl,
#p-sim-spatial-exp-1 dl,
#p-simulated-electorates dl,
#p-voronoi dl {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 1rem 2rem; }

#p-aggregation dt,
#p-change-log dt,
#p-home dt,
#p-not-impossible dt,
#p-save-chart dt,
#p-save-focus dt,
#p-save-intro dt,
#p-save-voters dt,
#p-save-why dt,
#p-sim-profiles-exp dt,
#p-sim-spatial-exp-1 dt,
#p-simulated-electorates dt,
#p-voronoi dt {
    grid-column-start: 1; }

#p-aggregation dd,
#p-change-log dd,
#p-home dd,
#p-not-impossible dd,
#p-save-chart dd,
#p-save-focus dd,
#p-save-intro dd,
#p-save-voters dd,
#p-save-why dd,
#p-sim-profiles-exp dd,
#p-sim-spatial-exp-1 dd,
#p-simulated-electorates dd,
#p-voronoi dd {
    grid-column-start: 2; }

/* Stylings for footnotes */
#p-arrow div#footnotes div#text-footnotes div.footdef,
#p-not-impossible div#footnotes div#text-footnotes div.footdef,
#p-save-why div#footnotes div#text-footnotes div.footdef,
#p-sim-profiles-exp div#footnotes div#text-footnotes div.footdef,
#p-voter-metrics div#footnotes div#text-footnotes div.footdef {
    display: grid;
    grid-template-columns: 1fr 49fr;
    column-gap: 1rem; }

#p-arrow div#footnotes div#text-footnotes div.footdef sup,
#p-not-impossible div#footnotes div#text-footnotes div.footdef sup,
#p-save-why div#footnotes div#text-footnotes div.footdef sup,
#p-sim-profiles-exp div#footnotes div#text-footnotes div.footdef sup,
#p-voter-metrics div#footnotes div#text-footnotes div.footdef sup {
    grid-column-start: 1; }

#p-arrow div#footnotes div#text-footnotes div.footdef div.footpara,
#p-not-impossible div#footnotes div#text-footnotes div.footdef div.footpara,
#p-save-why div#footnotes div#text-footnotes div.footdef div.footpara,
#p-sim-profiles-exp div#footnotes div#text-footnotes div.footdef div.footpara,
#p-voter-metrics div#footnotes div#text-footnotes div.footdef div.footpara {
    grid-column-start: 2; }

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

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

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

g.motion circle { fill: none; }

#p-save-chart 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; }