pokemon-color-search/nearest.css

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

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

.hide {
    display: none !important;
}

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.start-justified {
    justify-content: flex-start;
}

.panel {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.center-text {
    text-align: center;
}

.config {
    width: 100%;
    margin-bottom: 16px;
}

.dropdown {
    flex: 1;
    justify-content: space-between;
    align-items: center;
}

.dropdown > select {
    margin-top: 8px;
    margin-right: 8px;
    margin-left: 8px;
}

.center-aligned {
    align-items: center;
}

.center-justified {
    justify-content: center;
}

.start-justified {
    justify-content: flex-start;
}

.eqn-label {
    margin-right: 0.5em;
}

#reveal-definitions {
    display: none;
}

#reveal-definitions:checked ~ .definitions {
    display: block;
}

#reveal-definitions:checked ~ * > .definitions {
    display: block;
}

#reveal-definitions:checked ~ #reveal-def-label > #reveal-def-hide {
    display: block;
}

#reveal-definitions:checked ~ #reveal-def-label > #reveal-def-show {
    display: none;
}

#reveal-def-hide {
    display: none;
    margin-bottom: 0.5em;
}

#reveal-def-show {
    display: block;
    margin-bottom: 0.5em;
}

.definitions {
    display: none;
    /* evil trick to allow running into margins */
    max-width: 0px;
    overflow: visible;
}

.math-section {
    border: 2px solid var(--highlight);
    padding: 0.3em;
    margin-bottom: 0.2em;
    align-self: stretch;
}

#obj-fn {
    display: inline-flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.padded {
    padding-left: 16px;
    padding-right: 16px;
}

.title {
    font-weight: 1000;
}

.control {
    height: 32px;
    align-items: flex-end;
}

.control > * {
    flex: 1;
}

.control > button {
    margin-left: 16px;
    margin-right: 16px;
}

.control > input {
    max-width: 10em;
}

#bulba-wrapper {
    display: flex;
    justify-content: center;
}

label {
    white-space: nowrap
}

.hideable_control {
    display: flex;
    flex-flow: row nowrap;
}

.hideable_control--hidden {
    display: none;
}

.pkmn-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 8px;
    width: 100%;
}

#search-space-button {
    width: 3em;
}

#controls {
    max-width: var(--tile-width);
    display: grid;
    gap: 4px 16px;
    grid:
        "bulb qvec qvec"
        "inpt qvec qvec"
        "rand liml limt"
        "metr objf objf" 3em
        "clst scal scal"
        ".    iner coef"
        ".    norm coef"
        "warn warn warn"
        "togg togg .   "
        "defs clsd clsd"
        "srch name btns"
        "rslt rslt rslt"
        /10em 10em 1fr
    ;
    justify-items: stretch;
    align-items: center;
    margin-right: 60px;
}

/* Pokemon Tile */

.pkmn_tile {
    width: var(--tile-width);
    display: grid;
    gap: 2px 2px;
    margin-top: 4px;
    margin-bottom: 4px;
    grid:
        "img  name name fn" 1.2em
        "img  mu   mu   mu" 1fr
        "tog  mu   mu   mu" 1fr
        ".    k1   k2   k3" auto
        /60px 1fr  1fr 1fr
    ;
}

.pkmn_tile-true_mean {
    grid-area: mu;
    font-size: 12px;
    display: grid;
    grid:
        ".     mu  mus mut"
        ".     in  mud mup"
        /0.1fr 3fr 1fr 1fr
    ;
    gap: 2px 2px;
    align-items: center;
}

.pkmn_tile-true_mean-value {
    grid-area: mu;
    display: grid;
    grid:
        "mul mux muv"
        /2em 6em auto
    ;
    align-items: center;
}

.pkmn_tile-true_mean-inertia {
    grid-area: in;
}

.pkmn_tile-true_mean-mu_label {
    grid-area: mul;
    justify-self: end;
    padding-right: 2px;
}

.pkmn_tile-true_mean-mu_hex {
    grid-area: mux;
}

.pkmn_tile-true_mean-mu_vec {
    grid-area: muv;
}

.pkmn_tile-true_mean-stat {
    margin-left: 8px;
}

.pkmn_tile-true_mean-stat-sigma {
    grid-area: mus;
}

.pkmn_tile-true_mean-stat-theta {
    grid-area: mut;
}

.pkmn_tile-true_mean-stat-delta {
    grid-area: mud;
}

.pkmn_tile-true_mean-stat-phi {
    grid-area: mup;
}

.pkmn_tile-img {
    grid-area: img;
}

.pkmn_tile-name {
    grid-area: name;
    font-weight: 1000;
}

.pkmn_tile-fn {
    grid-area: fn;
    justify-self: end;
}

.pkmn_tile-cluster {
    display: none;

    font-size: 12px;
    grid:
        "lbl  lbl  lbl lbl lbl" 1em
        "mu   mux  mux mux mux"
        "muv  muv  muv muv muv"
        "pi   piv  .   th  thv"
        "dl   dlv  .   ph  phv"
        /2fr  4fr  1fr 2fr 4fr
    ;
    gap: 5px 0px;
    padding-top: 4px;
    padding-bottom: 8px;
}

.pkmn_tile-cluster-top_label {
    font-weight: 1000;
    font-size: 14px;
    justify-self: center;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}

.pkmn_tile-cluster-stat_label {
    justify-self: end;
    padding-right: 2px;
}

/* Cluster Hiding Logic */

.pkmn_tile-reveal_clusters {
    display: none;
}

.pkmn_tile-reveal_clusters:checked ~ .pkmn_tile-cluster {
    display: grid;
}

.pkmn_tile-reveal_clusters:checked ~ .pkmn_tile-reveal_clusters_label > .pkmn_tile-reveal_clusters_label--closed {
    display: none;
}

.pkmn_tile-reveal_clusters_label--closed {
    display: block;
}

.pkmn_tile-reveal_clusters:checked ~ .pkmn_tile-reveal_clusters_label > .pkmn_tile-reveal_clusters_label--open {
    display: block;
}

.pkmn_tile-reveal_clusters_label--open {
    display: none;
}

.pkmn_tile-reveal_clusters_label {
    font-size: 16px;
    text-align: center;
    grid-area: tog;
}

.pkmn_tile-reveal_clusters--hide {
    display: none;
}

.pkmn_tile-reveal_clusters--show {
    display: block;
}