/* main.css
 *
 * Copyright 2026 Christopher L. Phan, Ph.D. <https://chrisphan.com/>
 * See LICENSE for details.
 *
 * SPDX-License-Identifier: MIT */

@import url("https://fonts.googleapis.com/css2?family=Asap+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Asap:ital,wght@0,100..900;1,100..900&display=swap");

body {
  font-family: Asap, sans-serif;
  background-color: #ccc;
  color: #111;
  margin: 5px;
}

header {
  display: grid;
  grid-template-rows: 1fr 2fr;
  grid-template-columns: 2fr 1fr;
  max-height: 20vh;
}

main {
  max-height: 78vh;
}

#title {
  grid-row: 1;
  grid-column: 1;
}

#controls {
  grid-row: 2;
  grid-column: 1 / 3;
}

#copyright {
  grid-row: 1;
  grid-column: 2;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

ul {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  margin-left: 1em;
  list-style: square outside;
}

em {
  font-style: italic;
}

ul > li {
  display: list-item;
  padding-top: 2px;
}

code, .url {
  font-family: monospace;
}

a.button_like,
button {
  background-color: #cca;
  color: #322;
  font-family: sans-serif;
  padding: 5px;
  margin: 5px;
  text-align: center;
  border-color: #cca;
  border-width: 2px;
  border-style: outset;
  text-decoration: none;
  font-size: 12pt;
}

blockquote {
  margin-left: 1em;
  padding: 0.5em 0.5em 0.5em 1em;
  background-color: #ccc;
  border-left: 0.5em solid #ff9;
}

button:hover,
a.button_like:hover {
  background-color: #fff;
}

button:active,
a.button_like:active {
  background-color: red;
  color: white;
  border-color: violet;
  border-style: inset;
  border-width: 2px;
}

button:disabled {
  background-color: #777;
}

h1 {
  font-family: Asap, sans-serif;
  font-size: 20pt;
  font-weight: bold;
  color: black;
}

h2 {
  font-family: Asap, sans-serif;
  font-weight: bold;
  font-size: 15pt;
  padding: 0.25em;
}

h3 {
  font-family: Asap, sans-serif;
  font-weight: bold;
  font-size: 13pt;
  padding: 4px;
}

sup {
  vertical-align: super;
  font-size: 75%;
}

input {
  appearance: auto;
  border-width: 2px;
  border-color: gray;
  border-style: inset;
}

fieldset {
  display: inline;
  margin: 5px;
  border: thin solid black;
  padding: 5px;
}

button,
.button_like {
  background-color: #cca;
  color: #322;
  padding: 5px;
  margin: 5px;
  text-align: center;
  border-color: #cca;
  border-width: 2px;
  border-style: outset;
  text-decoration: none;
}

button:hover,
.button_like:hover {
  background-color: #fff;
}

button:active,
.button_like:active {
  background-color: red;
  color: white;
  border-color: violet;
  border-style: inset;
  border-width: 2px;
}

button:disabled {
  background-color: #777;
}

#show_credits {
  display: none;
}

body:has(#show_credits:checked) #credits_button {
  background-color: #3f3;
  border-color: violet;
  border-style: inset;
  border-width: 2px;
}

#credits {
  display: none;
}


#main {
  margin: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.hidden {
  display: none;
}

.wait {
  background-color: #ff0;
  color: #900;
}

.next_step {
  background-color: #f3f;
  color: black;
}

.ok {
  background-color: #0f0;
  color: black;
}

#output {
  display: grid;
  grid-template-columns: 60vw 15vw 22vw;
  grid-template-rows: 3vh 34vh 3vh 34vh;
  background: white;
  margin: 5px;
  border: thin solid black;
  padding: 5px;
}

body:has(#show_credits:checked) #heading {
  display: none;
}

body:has(#show_credits:checked) .tableview {
  display: none;
}

body:has(#show_credits:checked) .mapview {
  display: none;
}

body:has(#show_credits:checked) #credits {
  display: block;
  grid-row: 1/5;
  grid-column: 1/4;
  background-color: #eee;
  color: black;
  padding: 5vmin;
  max-height: 73vh;
  overflow: scroll;
}

#main_table {
  grid-row: 1 / 5;
  grid-column: 1 / 2;
  max-width: 59vw;
  max-height: 73vh;
  overflow: scroll;
}

#table_mini_map {
  grid-row: 1/5;
  grid-column: 2/4;
  max-width: 39vw;
}

body:has(#view-table:checked):not(:has(#show_credits:checked)) .tableview {
  display: block;
}

body:has(#view-map:checked) .tableview {
  display: none;
}

body:has(#view-table:checked) .mapview {
  display: none;
}

body:has(#view-map:checked):not(:has(#show_credits:checked)) .mapview {
  display: block;
}


#map_svg {
  grid-row: 1 / 5;
  grid-column: 1 / 3;
  max-width: 74vw;
  max-height: 73vh;
}

#output h3 {
  font-size: 2vh;
}

#county_table_header {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

#county_map_table {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  max-height: 35vh;
  overflow: scroll;
}

#pct_table_header {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

#pct_map_table {
  grid-row: 4 / 5;
  grid-column: 3 /4;
  max-height: 33vh;
  overflow: scroll;
}


.error_msg {
  color: white;
  background-color: black;
  font-family: monospace;
  font-weight: bold;
}

th {
  font-weight: bold;
}
td,
th {
  padding: 5px;
}

#location_label {
  vertical-align: bottom;
}

.votecount {
  text-align: right;
}

.colorswatch {
  width: 2em;
}

select:disabled {
  background-color: #f99;
}

input[type="radio"]:disabled {
  appearance: none;

  border-radius: 50%;
  width: 1em;
  height: 1em;
  border-color: #f99;
  border-width: 2px;
}

#main_table > tbody th:hover {
  background-color: #f3f;
}
#main_table > tbody tr.selected th {
  background-color: black;
  color: white;
}

#vote_table_header .rotate {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: right;
  padding-bottom: 1.5em;
}

#vote_table_header {
  height: 20em;
}

.table_header_0,
.table_header_1,
.table_header_2,
.table_header_3,
.table_header_4 {
  text-align: left;
}

.table_header_0 {
  background-color: #0b0;
}

.table_header_1 {
  background-color: #8b0;
  padding-left: 0.5em;
}

tr:nth-child(even) .table_header_2 {
  background-color: #af0;
  padding-left: 1em;
}

tr:nth-child(odd) .table_header_2 {
  background-color: #af6;
  padding-left: 1em;
}

tr:nth-child(even) .table_header_3 {
  background-color: #afa;
  padding-left: 1.5em;
}

tr:nth-child(odd) .table_header_3 {
  background-color: #cfa;
  padding-left: 1.5em;
}

tr:nth-child(even) .table_header_4 {
  background-color: #ffa;
  padding-left: 2em;
}

tr:nth-child(odd) .table_header_4 {
  background-color: #ffc;
  padding-left: 2em;
}

tr:nth-child(odd) .row_total {
  background-color: #aaa;
}