:root {
  font-size: 1.5em;
  line-height: 1.5rem;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
       appearance: textfield;
}
* {
  font-size: 1rem;
  font-family: monospace;
  border-width: calc(1rlh / 24);
  box-sizing: border-box;
}
:where(#base) * {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
:where(#base) :has(:where(input, output, div, textarea, button, select)):not(details) {
  display: grid;
  grid-auto-rows: inherit;
  grid-template: 1fr / 1fr;
  :not(:has(:where(input, output, div, textarea, button, select))) {
    width: 100%;
    height: 1rlh;
    white-space: nowrap;
  }
}
#base {
  display: grid;
  grid-auto-rows: 1rlh;
}
:root[data-variant="champions"] #base {
  grid-template-areas:
    "a a a a a a a a a a a a a"
    "b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b"
    "c c c c c c c . e e e e e"
    "c c c c c c c . e e e e e"
    "d d d d d d d . e e e e e"
    "d d d d d d d . e e e e e"
    "d d d d d d d . . . . . ."
    ". . . . . . . . . . . . ."
    "f f f f f f f f f f f f f"
    "f f f f f f f f f f f f f"
    "f f f f f f f f f f f f f"
  ;
  grid-template-rows: repeat(18, 1fr);
  grid-template-columns: repeat(13, 1fr);
}
#base {
  grid-template-areas:
    "a a a a a a a a a a a a a a a"
    "b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b"
    "c c c c c c c . e e e e e e e"
    "c c c c c c c . e e e e e e e"
    "d d d d d d d . e e e e e e e"
    "d d d d d d d . e e e e e e e"
    "d d d d d d d . . . . . . . ."
    ". . . . . . . . . . . . . . ."
    "f f f f f f f f f f f f f f f"
    "f f f f f f f f f f f f f f f"
    "f f f f f f f f f f f f f f f"
  ;
  grid-template-rows: repeat(18, 1fr);
  grid-template-columns: repeat(15, 1fr);
}
@media (orientation: landscape) {
  :root[data-variant="champions"] 
  #base {
    grid-template-areas:
      "a a a a a a a a a a a a a . . . . . . . ."
      "b b b b b b b b b b b b b . c c c c c c c"
      "b b b b b b b b b b b b b . c c c c c c c"
      "b b b b b b b b b b b b b . d d d d d d d"
      "b b b b b b b b b b b b b . d d d d d d d"
      "b b b b b b b b b b b b b . d d d d d d d"
      "b b b b b b b b b b b b b . e e e e e . ."
      "b b b b b b b b b b b b b . e e e e e . ."
      "b b b b b b b b b b b b b . e e e e e . ."
      ". . . . . . . . . . . . . . e e e e e . ."
      "f f f f f f f f f f f f f . . . . . . . ."
      "f f f f f f f f f f f f f . . . . . . . ."
      "f f f f f f f f f f f f f . . . . . . . ."
    ;
    grid-template-rows: repeat(13, 1fr);
    grid-template-columns: repeat(21, 1fr);
  }
  #base {
    grid-template-areas:
      "a a a a a a a a a a a a a a a . . . . . . . ."
      "b b b b b b b b b b b b b b b . c c c c c c c"
      "b b b b b b b b b b b b b b b . c c c c c c c"
      "b b b b b b b b b b b b b b b . d d d d d d d"
      "b b b b b b b b b b b b b b b . d d d d d d d"
      "b b b b b b b b b b b b b b b . d d d d d d d"
      "b b b b b b b b b b b b b b b . e e e e e e e"
      "b b b b b b b b b b b b b b b . e e e e e e e"
      "b b b b b b b b b b b b b b b . e e e e e e e"
      ". . . . . . . . . . . . . . . . e e e e e e e"
      "f f f f f f f f f f f f f f f . . . . . . . ."
      "f f f f f f f f f f f f f f f . . . . . . . ."
      "f f f f f f f f f f f f f f f . . . . . . . ."
    ;
    grid-template-rows: repeat(13, 1fr);
    grid-template-columns: repeat(23, 1fr);
  }
}
:is(input[type="number"], output) {
  text-align: right;
}
:not(input) {
  -webkit-user-select: none;
          user-select: none;
}
input, output {
  border-style: solid;
  border-color: GrayText;
}
output {
  color: GrayText;
  border-color: color-mix(in srgb, GrayText 30%, transparent);
}

[hidden] {
  display: none !important;
}

:root[data-variant="champions"] {
  .standard { display: none; }
  .champions { display: initial; }
}
.standard { display: initial; }
.champions { display: none; }


:root[data-variant="champions"] {
  #label {
    grid-template-columns: 13fr;
    #lv { display: none; }
  }
  #stsTbl {
    grid-template-columns: 1fr repeat(6, 2fr);
    .iv {
      display: none;
    }
  }
  #stsIndexTbl {
    grid-template-columns: 2fr 5fr;
  }
  #copyTextArea {
    grid-template-columns: 11fr 2fr;
  }
}

#label {
  grid-area: a;
  grid-template-columns: 11fr 4fr;
}
#pokeName {
  padding: 0 calc(1rlh / 6);
}
#lv {
  grid-template-columns: repeat(2, 1fr);
}
#lv div {
  text-align: right;
}

#stsTbl {
  grid-area: b;
  grid-template: 1fr / 1fr repeat(7, 2fr);
  > * {
    grid-row: 1 / -1;
    grid-template: 1fr 6fr 1fr / 1fr;
  }
  > .ntr {
    > .body {
      select {
        width: 100%;
        height: 100%;
        font-size: 0.5rem;
        /* appearance: none; */
      }
      > .btn {
        grid-template-columns: repeat(2, 1fr);
        > button {
          border-style: solid;
        }
      }
      > .btn[data-value="1.1"] > :nth-child(1) {
        background-color: red;
        font-weight: bold;
      }
      > .btn[data-value="0.9"] > :nth-child(2) {
        background-color: blue;
        font-weight: bold;
      }
    }
  }
  #calcBest {
    font-size: 0.5rem;
  }
}
#moveTbl {
  grid-area: c;
  grid-template-columns: 1fr repeat(3, 2fr);
  > .head {
    grid-row: 1 / -1;
  }
}
#ratioTbl {
  grid-area: d;
  display: grid;
  grid-template-columns: 1fr 6fr;
  grid-template-rows: 1fr;
  .head {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
  }
  .ratio {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    > .header {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
    > .body {
      grid-row: 2 / -1;
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      > * {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        > * {
          display: grid;
          grid-template-columns: 2fr 1fr;
        }
      }
    }
  }
}
#stsIndexTbl {
  grid-area: e;
  grid-template: 1fr / 2fr 7fr;
  > * {
    grid-template-rows: 1fr 3fr;
    > :nth-child(n+2) {
      grid-template-rows: repeat(3, 1fr);
    }
  }
  > .head :not(:has(*)) {
    font-size: 0.75rem;
  }
  input {
    text-align: right;
  }
}
#copyTextArea {
  grid-area: f;
  grid-template: repeat(2, 1fr) / 13fr 2fr;
  grid-auto-rows: initial;
  grid-auto-rows: 1.5rlh;
  > textarea {
    height: 3rlh;
    grid-row: 1 / -1;
    font-size: 0.75rem;
    padding: calc(1rlh / 6);
    resize: none;
    overflow: initial;
  }
  > button {
    height: 1.5rlh;
    font-size: 0.5rem;
    white-space: normal;
  }
}
.header * {
  text-align: center;
}
:not(.head) > .header :not(input[value][type="number"], output, #calcBest) {
  font-size: 0.5rem;
  font-weight: bold;
  padding-top: 0.33rlh;
  line-height: 0.67rlh;
}



.copyText {
  width: 10rem;
  height: 1rlh;
  font-size: 0.75rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-style: solid;
  background-color: white;
  opacity: 0.875;
}



#how-to-use {
  line-height: 1.5;
  padding-top: calc(1rlh / 3);
  padding-bottom: calc(1rlh / 3);
  > summary {
    font-size: 0.75rem;
  }
  * {
    font-size: 0.625rem;
  }
  div {
    margin-left: 0.5rem;
    overflow: auto hidden;
  }
  math {
    width: max-content;
    * {
      font-size: 0.5rem;
    }
  }
}