/* main.css
 *
 * This file is part of wasm_float
 * https://codeberg.org/christopherphan/float_wasm
 *
 * Christopher Phan <https://chrisphan.com/>
 * 2026-W17
 *
 * Copyright 2026 Christopher L. Phan, Ph.D.
 * See LICENSE for details.
 *
 * SPDX-License-Identifier: MIT */

/* general */

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

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

.help_radio label,
#mode_change label {
  font-family: sans-serif;
  font-size: 12pt;
}

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: sans-serif;
  font-size: 28pt;
  font-weight: bold;
  color: #006;
  display: inline;
}

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

h3 {
  font-family: 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;
}

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

@media (width >= 1320px) and (height >= 650px) {
  #main {
    display: grid;
    height: 95vh;
    max-height: 95%;
    grid: 5vh 20vh 5vh 60vh / 10vw 19vw 10vw 59vw;
    grid-gap: 5px;
  }
}

@media (width >= 1120px) and (height >= 650px) {
  #main:has(#all_off:checked) {
    display: grid;
    height: 95vh;
    max-height: 95%;
    grid: 5vh 20vh 5vh 60vh / 10vw 19vw 10vw 59vw;
    grid-gap: 5px;
  }
}

#main.wasm_error {
  visibility: hidden;
}

#main.wasm_error button {
  visibility: hidden;
}

/* first-order subdivisions */

#wasm_error {
  font-size: 30pt;
  font-weight: bold;
  padding: 1em;
  color: red;
  border: thick solid red;
  background-color: white;
}

#wasm_error.disabled {
  visibility: hidden;
}

/* wide mode with help overlay */
@media (width >= 1320px) and (height >= 650px) {
  #app_info {
    grid-area: 1 / 3 / 2 / 5;
  }

  #main:not(.wasm_error):has(#normal_radio:checked) #display_area,
  #main:not(.wasm_error):has(#rpn_radio:checked) #display_area {
    grid-area: 1 / 1 / 3 / 5;
  }

  #float_info {
    grid-area: 2 / 4 / 5 / 5;
  }

  #main:has(#off_radio:checked):has(#all_off:checked) #float_info {
    grid-column-start: 1;
  }

  #main:has(#normal_radio:checked) #float_info,
  #main:has(#rpn_radio:checked) #float_info {
    grid-row-start: 4;
  }

  #main:has(#normal_radio:checked):has(#all_off:checked) #float_info,
  #main:has(#rpn_radio:checked):has(#all_off:checked) #float_info {
    grid-column-start: 3;
  }

  #calculator_keypad {
    grid-area: 4 / 1 / 5 / 3;
  }

  #main:has(.overlay_toggle:checked) #calculator_keypad {
    display: none;
  }

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

  #main:has(#off_radio:checked) #mode_change {
    grid-row: 1;
  }

  #main:has(#normal_radio:checked) #app_info,
  #main:has(#rpn_radio:checked) #app_info {
    grid-area: 3 / 4 / 4 / 5;
  }

  .help_overlay {
    grid-area: 4 / 1 / 5 / 4;
  }
}

/* wide mode with no help overlay */

@media (width >= 1120px) and (height >= 650px) {
  #main:has(#all_off:checked) #app_info {
    grid-area: 1 / 3 / 2 / 5;
  }
  #main:has(#normal_radio:checked):has(#all_off:checked) #app_info,
  #main:has(#rpn_radio:checked):has(#all_off:checked) #app_info {
    grid-area: 3 / 4 / 4 / 5;
  }
  #main:not(.wasm_error):has(#normal_radio:checked):has(#all_off:checked)
    #display_area,
  #main:not(.wasm_error):has(#rpn_radio:checked):has(#all_off:checked)
    #display_area {
    grid-area: 1 / 1 / 3 / 5;
  }

  #main:has(#all_off:checked) #float_info {
    grid-area: 2 / 4 / 5 / 5;
  }

  #main:has(#off_radio:checked):has(#all_off:checked) #float_info {
    grid-column-start: 1;
  }

  #main:has(#normal_radio:checked):has(#all_off:checked) #float_info,
  #main:has(#rpn_radio:checked):has(#all_off:checked) #float_info {
    grid-row-start: 4;
  }

  #main:has(#normal_radio:checked):has(#all_off:checked) #float_info,
  #main:has(#rpn_radio:checked):has(#all_off:checked) #float_info {
    grid-column-start: 3;
  }

  #main:has(#all_off:checked) #calculator_keypad {
    grid-area: 4 / 1 / 5 / 3;
  }

  #main:has(#all_off:checked) #mode_change {
    grid-row: 3;
    grid-column: 1 / 4;
  }

  #main:has(#off_radio:checked):has(#all_off:checked) #mode_change {
    grid-row: 1;
  }
}

#app_info {
  display: grid;
  grid: 1fr / 7fr 8fr repeat(2, 2fr);
  margin: 1px;
  grid-gap: 2px;
}

#display_area {
  display: none;
}

#main:not(.wasm_error):has(#normal_radio:checked) #display_area,
#main:not(.wasm_error):has(#rpn_radio:checked) #display_area {
  height: 25vh;
  display: grid;
  grid: repeat(4, 1fr) / 7fr 6fr 1fr;
  margin: 1px;
  grid-gap: 0px;
}

#float_info {
  display: grid;
  grid: repeat(9, 1fr) / 2fr 4fr 16fr 15fr 5fr;
  margin: 1px;
  grid-gap: 0px;
}

#calculator_keypad {
  display: grid;
  grid: repeat(8, 1fr) / repeat(4, 1fr);
  margin: 1px;
  grid-gap: 2px;
  visibility: visible;
}

#calculator_keypad button {
  font-size: 18pt;
}

#main:has(#off_radio:checked) #calculator_keypad {
  display: none;
}

#mode_change {
  font-size: 12pt;
  padding: 0.5em;
}

/* App info */

#title_copyright {
  grid-area: 1 / 1 / 2 / 3;
  text-align: center;
}

#copyright {
  color: black;
  font-size: 12pt;
  font-family: sans-serif;
  margin-left: 1em;
}
#copyright a {
  color: black;
  text-decoration: underline;
}

#license_button {
  grid-area: 1 / 3 / 2 / 4;
}
#source_code_button {
  grid-area: 1 / 4 / 2 / 5;
}

/* display_area */

#last_display {
  background-color: #111;
  color: #fcc;
  font-family: monospace;
  font-size: 10vh;
  padding: 1vh;
  grid-area: 1 / 1 / 3 / 3;
}

#display {
  background-color: #111;
  color: #ccc;
  font-family: monospace;
  font-size: 10vh;
  padding: 1vh;
  grid-area: 3 / 1 / 5 / 3;
}

#main:has(#rpn_radio:checked) #display {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
  font-size: 5vh;
}

#main:has(#rpn_radio:checked) #last_display {
  display: none;
}
#main:has(#rpn_radio:checked) #op_display {
  display: none;
}

#op_display {
  background-color: #111;
  color: #4af;
  font-family: monospace;
  font-size: 10vh;
  padding: 1vh;
  grid-area: 1 / 3 / 5 / 4;
}

.rpnstack {
  display: none;
  background-color: #111;
  border: solid 1px pink;
  padding: 5px;
  font-size: 5vh;
  font-family: monospace;
  color: #fcc;
}

#main:has(#rpn_radio:checked) #display_area .rpnstack {
  display: block;
}

#stack_1,
#stack_3,
#stack_5 {
  grid-column-start: 2;
  grid-column-end: 4;
}
#stack_2,
#stack_4,
#stack_6 {
  grid-column: 1;
}

#stack_6,
#stack_5 {
  grid-row: 1;
}
#stack_4,
#stack_3 {
  grid-row: 2;
}
#stack_2,
#stack_1 {
  grid-row: 3;
}

/* float_info */

#float_display_title {
  grid-row: 1;
  grid-column: 1 / 5;
  color: #040;
  text-align: center;
}

#empty_stack {
  grid-area: 3 / 1 / 10 / 6;
  visibility: hidden;
  background-color: #ff3;
  color: black;
  font-size: 14pt;
  font-family: sans-serif;
  padding: 2vh;
}

#empty_stack h3 {
  font-size: 20pt;
  margin-bottom: 10px;
}

#empty_stack p,
#empty_stack li {
  font-size: 14pt;
}

#float_info.empty_stack {
  visibility: hidden;
}

#float_info.empty_stack .es {
  visibility: visible;
}

#float_info .disp {
  font-family: sans-serif;
  font-size: 14pt;
  padding: 6px;
  background-color: #131;
  color: white;
}

#float_info .value_alt p {
  font-size: 14pt;
}

#float_info .label {
  color: #040;
  grid-column: 2;
}

#float_info .help_radio {
  grid-column: 1;
  padding: 0.5em;
}

#float_info .disp {
  grid-column: 3 / 6;
  line-height: 1.25;
}

.floathex {
  grid-row: 2;
}

.bits_part {
  grid-row: 3;
}

.sign_part {
  grid-row: 4;
}

.exp_part {
  grid-row: 5;
}

.frac_part {
  grid-row: 6;
}

.frac_part_2 {
  grid-row: 7;
}

.value_part {
  grid-row: 8;
}

.value_part_2 {
  grid-row: 9;
}

.value_alt {
  grid-row: 8 / 10;
  visibility: hidden;
}

#float_info.zero .val,
#float_info.nan .val,
#float_info.infinity .val {
  visibility: hidden;
}

#float_info.zero #value_zero {
  visibility: visible;
}

#float_info.nan #value_nan {
  visibility: visible;
}

#float_info.infinity #value_infinity {
  visibility: visible;
}

#value_nan a {
  color: white;
  text-decoration: underline;
}

#fd_value {
  grid-column: 2 / 4;
  background-color: #141;
  padding: 6px;
  font-size: 14pt;
}

#fd_value_num,
#input_fd_value_num {
  font-family: monospace;
  color: yellow;
  background-color: #141;
  font-size: 14pt;
}

#float_info.empty_stack #fd_value_num,
#input_fd_value_num::placeholder {
  font-size: 12pt;
  color: gray;
}

#complete_hex {
  grid-column: 4 / 6;
  font-family: monospace;
  font-size: 14pt;
  background-color: white;
  padding-top: 6px;
  text-align: center;
  color: black;
}

.complete {
  color: black;
}

.editable {
  /* mimic input field */
  border-width: 2px;
  border-color: gray;
  border-style: inset;
  padding: 2px;
}

#sign_dec_2,
#exp_dec_2,
#full_exp {
  font-size: 10pt;
}

#hex_1 {
  background: linear-gradient(to right, magenta, cyan);
}
#hex_2 {
  background: cyan;
}

#hex_3 {
  background: orange;
}

#permlink {
  grid-row: 1;
  grid-column: 5;
  font-size: 12pt;
  font-family: sans-serif;
  text-align: center;
}

#float_info #all_off_div {
  grid-row: 9;
  grid-column: 1/3;
}

input.complete {
  font-size: 14pt;
}

#float_info.empty_stack #complete_hex_field,
input.complete::placeholder {
  font-size: 12pt;
  color: gray;
}

#submit_frac_edit {
  visibility: hidden;
  font-size: 14pt;
  padding: 0.5vh;
  margin: 0.5vh;
}

#float_info.frac_edit #submit_frac_edit {
  visibility: visible;
}

.bin,
.hex,
.dec {
  font-family: monospace;
  font-size: 14pt;
}

.disp:not(.bits_part) .bin::before {
  content: "0b";
}

.hex::before {
  content: "0x";
}

.bits_part .bin,
.frac_part .bin {
  font-size: 12pt;
}

.sign {
  color: magenta;
  background-color: black;
}

.exp {
  color: cyan;
  background-color: black;
}

.frac {
  color: orange;
  background-color: black;
}

.fullNum,
.fullDenomExp {
  color: yellow;
  background-color: black;
}

/* mode_change */

#mode_change > button,
#mode_change > div {
  grid-row: 1;
  font-size: 12pt;
}

.rpn {
  display: none;
  visibility: hidden;
}

#main:has(#rpn_radio:checked) button.rpn {
  visibility: visible;
}

/* calculator_keypad */

#main:not(.wasm_error) #calculator_keypad button:not(.changes):not(.rpn) {
  visibility: visible;
}

#main:has(#off_radio:checked) #calculator_keypad button {
  visibility: hidden;
}

button.changes {
  visibility: hidden;
}

#main:has(#rpn_radio:checked):has(#all_off:checked) button.rpn {
  display: block;
  visibility: visible;
}

button.normal {
  display: none;
}

#main:not(.wasm_error):has(#normal_radio:checked) button.normal {
  display: block;
  visibility: visible;
}

#main:not(.wasm_error):has(#normal_radio:checked)
  #calculator_keypad:not(.eemode)
  #keypad_enterexponent,
#main:not(.wasm_error):has(#rpn_radio:checked)
  #calculator_keypad:not(.eemode)
  #keypad_enterexponent {
  visibility: visible;
}

#main:has(#normal_radio:checked) #calculator_keypad.eemode #keypad_exponentpm,
#main:has(#rpn_radio:checked) #calculator_keypad.eemode #keypad_exponentpm {
  visibility: visible;
}

#keypad_mc,
#keypad_times10,
#keypad_enterexponent,
#keypad_exponentpm,
#keypad_C,
#keypad_7,
#keypad_4,
#keypad_1,
#keypad_point {
  grid-column: 1;
}

#keypad_mplus,
#keypad_times2,
#keypad_inf,
#keypad_backspace,
#keypad_8,
#keypad_5,
#keypad_2,
#keypad_0 {
  grid-column: 2;
}

#keypad_mminus,
#keypad_timestenth,
#keypad_ninf,
#keypad_radical,
#keypad_9,
#keypad_6,
#keypad_3,
#keypad_pm {
  grid-column: 3;
}

#keypad_mr,
#keypad_timeshalf,
#keypad_nan #keypad_dividedby,
#keypad_times,
#keypad_minus,
#keypad_plus,
#keypad_equals,
#keypad_enter {
  grid-column: 4;
}

#calculator_keypad .rpn:not(#keypad_enter) {
  grid-row: 1;
}

#keypad_mc,
#keypad_mplus,
#keypad_mminus,
#keypad_mr {
  grid-row: 1;
}

#keypad_times10,
#keypad_times2,
#keypad_timestenth,
#keypad_timeshalf {
  grid-row: 2;
}

#keypad_enterexponent,
#keypad_exponentpm,
#keypad_inf,
#keypad_ninf,
#keypad_nan {
  grid-row: 3;
}

#keypad_C,
#keypad_backspace,
#keypad_radical,
#keypad_dividedby {
  grid-row: 4;
}

#keypad_7,
#keypad_8,
#keypad_9,
#keypad_times {
  grid-row: 5;
}

#keypad_4,
#keypad_5,
#keypad_6,
#keypad_minus {
  grid-row: 6;
}

#keypad_1,
#keypad_2,
#keypad_3,
#keypad_plus {
  grid-row: 7;
}

#keypad_point,
#keypad_0,
#keypad_pm,
#keypad_equals,
#keypad_enter {
  grid-row: 8;
}

/* overlays */

.help_overlay {
  background-color: white;
  color: black;
  border: solid thick rebeccapurple;
  overflow: scroll;
  visibility: hidden;
  display: none;
}

@media (width <= 1320px) or (height <=650px) {
  #main:has(#floathex_help:checked) #floathex_help_div label::after {
    content: "\002193";
  }

  #main:has(#bits_help:checked) .bits_part.help_radio label::after {
    content: "\002193";
  }

  #main:has(#sign_help:checked) .sign_part.help_radio label::after {
    content: "\002193";
  }

  #main:has(#exp_help:checked) .exp_part.help_radio label::after {
    content: "\002193";
  }

  #main:has(#frac_help:checked) .frac_part.help_radio label::after {
    content: "\002193";
  }

  #main:has(#value_help:checked) .value_part.help_radio label::after {
    content: "\002193";
  }
}

#main:has(#off_radio:checked) .help_overlay {
  grid-row-start: 2;
}

#main:has(#floathex_help:checked) #floathex_overlay {
  display: block;
  visibility: visible;
}

#main:has(#floathex_help:checked) #floathex_help_div {
  color: white;
  background-color: rebeccapurple;
}

#main:has(#bits_help:checked) #bits_overlay {
  display: block;
  visibility: visible;
}

#main:has(#bits_help:checked) .bits_part {
  color: white;
  background-color: rebeccapurple;
}

#main:has(#sign_help:checked) #sign_overlay {
  display: block;
  visibility: visible;
}

#main:has(#sign_help:checked) .sign_part {
  color: white;
  background-color: rebeccapurple;
}

#main:has(#exp_help:checked) #exp_overlay {
  display: block;
  visibility: visible;
}

#main:has(#exp_help:checked) .exp_part {
  color: white;
  background-color: rebeccapurple;
}

#main:has(#frac_help:checked) #frac_overlay {
  display: block;
  visibility: visible;
}

#main:has(#frac_help:checked) .frac_part,
#main:has(#frac_help:checked) .frac_part_2 {
  color: white;
  background-color: rebeccapurple;
}

#main:has(#value_help:checked) #value_overlay {
  display: block;
  visibility: visible;
}

#main:has(#value_help:checked) .value_part,
#main:has(#value_help:checked) .value_part_2 {
  color: white;
  background-color: rebeccapurple;
}

.help_overlay .help_title {
  color: #c00;
  margin: 0.5em;
}

.help_overlay p {
  font-family: "Archivo", sans-serif;
  font-size: 12pt;
  margin: 0.5em;
}

.help_overlay math[display="block"] {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.help_overlay .hex {
  font-size: 11pt;
}

.help_overlay button {
  font-size: 12pt;
}