/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

:root {
  --margin: 8px;
  color-scheme: dark;
  --doc_fg:  #FFFFFF; --doc_bg:  #000000; --alt_bg: #666666;
  --lnk1_fg: #EEBB66; --lnk2_fg: #33BBFF;
  --info_fg: #000000; --info_bg: #22AA22;
  --warn_fg: #000000; --warn_bg: #DDBB22;
  --err_fg:  #000000; --err_bg:  #DD2222;
  --shade: rgba(0.0,0.0,0.0,0.6);
}

body.light {
  color-scheme: light;
  --doc_fg:  #000000; --doc_bg:  #FFFFFF; --alt_bg: #DDDDDD;
  --lnk1_fg: #2244EE; --lnk2_fg: #CC6633;
  --info_fg: #000000; --info_bg: #22AA22;
  --warn_fg: #000000; --warn_bg: #DDBB22;
  --err_fg:  #000000; --err_bg:  #DD2222;
  --shade: rgba(0.0,0.0,0.0,0.3);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body {
  margin: var(--margin);
  border: 0px;
  padding: 0px;
  background-color: var(--doc_bg);
  color: var(--doc_fg);
  font-family: sans-serif;
}

button, input, label, select, option { font: inherit; }
hr { margin: 4px 0px; }
input[type="range"]     { width: 8ch; touch-action: none; }
input[type="text"]      { width: 8ch; }
input[type="password"]  { width: 8ch; }

.link, a[href], a[href]:link, a[href]:visited,
a[href]:hover, a[href]:focus, a[href]:active {
  /* font-weight: bold; */
  text-decoration: none;
  cursor: pointer;
  color: var(--lnk1_fg);
}

h1 {
  background-color: var(--alt_bg);
  font-size: 125%;
  font-weight: bold;
  border-style: solid;
  border-width: 4px;
  padding:5px;
}

h2 {
  background-color: var(--alt_bg);
  font-size: 100%;
  font-weight: bold;
  border-style: solid;
  border-width: 1px;
  padding: 5px;
}

#curtain {
  background-color: var(--doc_bg);
  margin: var(--margin);
  position: fixed; 
  z-index: 1000; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  overflow: auto; 
}

#commands {
  display: grid;
  column-gap: 2ch;
  grid-template-columns: max-content 1fr max-content 1fr max-content;
  row-gap: 0ch;
  grid-template-rows: 3ch 3ch;
  width: 100%;
  align-items: start;
}
#commands div { display: flex; align-items: center; }
#commands > div:nth-child(5n) { justify-self: end; }

#lock      { cursor: pointer; font-size: 125%; }
#light     { cursor: pointer; font-size: 150%; }
#log_count { cursor: pointer; }

#display { overflow: scroll; font-size: 100%; }

.hidden { display: none; }

.log_tag {
  font-weight: bold;
  font-family: monospace;
  padding: 0.25ch 0.5ch;
  border-radius: 0.5ch;
}

.info_tag { color: var(--info_fg); background-color: var(--info_bg); }
.warn_tag { color: var(--warn_fg); background-color: var(--warn_bg); }
.err_tag  { color: var(--err_fg);  background-color: var(--err_bg);  }

.log_file  { color: var(--lnk2_fg); }
.log_sheet { color: var(--lnk1_fg); }
.log_row   { color: var(--lnk2_fg); }
.log_msg   { color: var(--doc_fg);  }

.table_display {
  font-family: monospace;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0px;
}
.table_display th {
  position: sticky;
  top: 0px;
  background-color: var(--doc_bg);
}
.table_display td, .table_display th {
  vertical-align: top;
  border: 1px solid var(--doc_fg);
  padding: 0.25ch 0.5ch;
}
.table_display tr:nth-of-type(odd) td { background-color: var(--alt_bg); }

ul { list-style-type: disc; padding-left: 1.2em; }
div > ul { margin-top: 0; margin-bottom: 0; }

#modal_curtain {
  position: fixed; 
  z-index: 500; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: var(--shade);
}
#modal_content {
  background-color: var(--doc_bg);
  margin: 15% auto; 
  padding: 20px;
  border: 4px solid var(--lnk1_fg);
  width: 60%;
  position: relative;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/