:root {
  --highlight: #ddd;
  --background: #222;
  --tile-width: 378px;
}

body {
  width: 99%;
  padding-top: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: var(--highlight);
  background-color: var(--background);
  margin: 8px;
}

math {
  font-size: 12px;
}

.hide {
  display: none !important;
}

/* Toggles */

.toggle-box {
  display: block;
}

.toggle-box .toggle-off {
  display: block;
}

.toggle-box .toggle-on {
  display: none;
}

.toggle-box > label > .toggle-off {
  display: block;
}

.toggle-box > label > .toggle-on {
  display: none;
}

.toggle-box > .toggle-button {
  display: none;
}

.toggle-box > .toggle-button:checked ~ .toggle-off {
  display: none;
}

.toggle-box > .toggle-button:checked ~ .toggle-on {
  display: block;
}

.toggle-box > .toggle-button:checked ~ :not(.toggle-box) .toggle-off {
  display: none;
}

.toggle-box > .toggle-button:checked ~ :not(.toggle-box) .toggle-on {
  display: block;
}

/* Controls */
.control-grid {
  width: 21em;
  margin-top: 16px;
  display: grid;
  gap: 4px 8px;
  grid:
    "bulb inpt rand"
    "bulb qvec qvec" 2em
    "bulb cspc cspc"
    "sort metr metr"
    "munu munu munu"
    "disp disp disp" 4em
    /5em  8em  auto
  ;
  justify-items: stretch;
  align-items: center;
}

.cluster-grid {
  width: 21em;
  margin-bottom: 16px;
  display: grid;
  gap: 4px 8px;
  grid:
    "albl albl"
    "sort metr"
    "blbl clus"
    "disp disp"
    "slbl scal"
    /10em auto
  ;
  justify-items: stretch;
  align-items: center;
}

.pkmn-list {
  list-style-type: none;
  padding: 0;
  margin-top: 8px;
  margin-left: 16px;
  margin-bottom: 16px;
  flex: 1;
}

/* Pokemon Tile */

.pkmn-tile {
  width: var(--tile-width);
  margin-top: 4px;
  margin-bottom: 4px;
  display: grid;
  gap: 2px 2px;
  grid:
    "icon name name name" 1.2em
    "icon totl totl totl" 1.2em
    "togg totl totl totl" auto
    "togg cls1 cls2 cls3" auto
    /60px 1fr  1fr  1fr
  ;
  align-items: center;
}

.pkmn-tile_label {
  width: 2em;
  text-align: right;
}

.pkmn-tile_value {
  flex: 1;
  text-align: left;
  margin-left: 4px;
}

.pkmn-tile_vector {
  flex: 2;
  text-align: left;
  margin-left: 4px;
}

.pkmn-tile_stats {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  justify-self: start;
  align-self: start;
  width: 100%;
  font-size: 12px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
}

.pkmn-tile_row {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-items: flex-start;
}