/* ---------------------------------------- */
/* 26-May-2025. try to stop all mobile
/* browsers from resizing the text when the
/* screen is rotated
/* ---------------------------------------- */

html {
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------- */
/* hide body. JavaScript will unhide after
/* page is fully loaded. also set monospace
/* font
/* ---------------------------------------- */

body {
  display: none;
  font-family: monospace;
}

/* ---------------------------------------- */
/* narrow screens don't get controls for
/* setting the width of results areas. the
/* definition of "narrow" depends on the
/* body's font size. check from high to low
/* ---------------------------------------- */

@media (max-width: 48em) {
  body[style*="font-size: x-large;"] .small_control_group.results_width {
    display: none;
  }
}

@media (max-width: 40em) {
  body[style*="font-size: large;"] .small_control_group.results_width {
    display: none;
  }
}

@media (max-width: 33em) {
  body:not([style*="font-size:"]) .small_control_group.results_width,
  body[style*="font-size: medium;"] .small_control_group.results_width {
    display: none;
  }
}

@media (max-width: 28em) {
  body[style*="font-size: small;"] .small_control_group.results_width {
    display: none;
  }
}

@media (max-width: 23em) {
  body[style*="font-size: x-small;"] .small_control_group.results_width {
    display: none;
  }
}

/* ======================================== */
/* wide screens display results panels
/* side-by-side instead of stacked, and
/* offer a side-by-side viewer in document
/* trees. the definition of "wide" depends
/* on the body's font size
/* ======================================== */

/* ---------------------------------------- */
/* a wide screen, from low high
/* ---------------------------------------- */

@media (min-width: 44em) {
  body[style*="font-size: x-small;"] .side_by_side {
    display: flex;
    width: 100%
  }

  body[style*="font-size: x-small;"] .side_by_side fieldset div.results, body[style*="font-size: medium;"] .stick_to_top {
    position: sticky;
    top: 10px;
  }

  body[style*="font-size: x-small;"] .side_by_side > fieldset {
    margin-right: 1em;
  }

  body[style*="font-size: x-small;"] .panels_link {
    position: absolute;
    top: -3em;
    right: -3em;
  }
}

@media (min-width: 53em) {
  body[style*="font-size: small;"] .side_by_side {
    display: flex;
    width: 100%
  }

  body[style*="font-size: small;"] .side_by_side fieldset div.results, body[style*="font-size: medium;"] .stick_to_top {
    position: sticky;
    top: 10px;
  }

  body[style*="font-size: small;"] .side_by_side > fieldset {
    margin-right: 1em;
  }

  body[style*="font-size: small;"] .panels_link {
    position: absolute;
    top: -3em;
    right: -3em;
  }
}

@media (min-width: 63em) {
  body:not([style*="font-size:"]) .side_by_side,
  body[style*="font-size: medium;"] .side_by_side {
    display: flex;
    width: 100%
  }

  body:not([style*="font-size:"]) .side_by_side fieldset div.results, body:not([style*="font-size:"]) .stick_to_top,
  body[style*="font-size: medium;"] .side_by_side fieldset div.results, body[style*="font-size: medium;"] .stick_to_top {
    position: sticky;
    top: 10px;
  }

  body:not([style*="font-size:"]) .side_by_side > fieldset,
  body[style*="font-size: medium;"] .side_by_side > fieldset {
    margin-right: 1em;
  }

  body:not([style*="font-size:"]) .panels_link,
  body[style*="font-size: medium;"] .panels_link {
    position: absolute;
    top: -3em;
    right: -3em;
  }
}

@media (min-width: 76em) {
  body[style*="font-size: large;"] .side_by_side {
    display: flex;
    width: 100%
  }

  body[style*="font-size: large;"] .side_by_side fieldset div.results, body[style*="font-size: medium;"] .stick_to_top {
    position: sticky;
    top: 10px;
  }

  body[style*="font-size: large;"] .side_by_side > fieldset {
    margin-right: 1em;
  }

  body[style*="font-size: large;"] .panels_link {
    position: absolute;
    top: -3em;
    right: -3em;
  }
}

@media (min-width: 91em) {
  body[style*="font-size: x-large;"] .side_by_side {
    display: flex;
    width: 100%
  }

  body[style*="font-size: x-large;"] .side_by_side fieldset div.results, body[style*="font-size: medium;"] .stick_to_top {
    position: sticky;
    top: 10px;
  }

  body[style*="font-size: x-large;"] .side_by_side > fieldset {
    margin-right: 1em;
  }

  body[style*="font-size: x-large;"] .panels_link {
    position: absolute;
    top: -3em;
    right: -3em;
  }
}

/* ---------------------------------------- */
/* not a wide screen, from high to low
/* ---------------------------------------- */

@media (max-width: 91em) {
  body[style*="font-size: x-large;"] .panels_link {
    position: absolute;
    bottom: -1.5em;
    right: 0;
  }

  body[style*="font-size: x-large;"] iframe[id$=_viewer] {
    display: none;
  }
}

@media (max-width: 76em) {
  body[style*="font-size: large;"] .panels_link {
    position: absolute;
    bottom: -1.5em;
    right: 0;
  }

  body[style*="font-size: large;"] iframe[id$=_viewer] {
    display: none;
  }
}

@media (max-width: 63em) {
  body:not([style*="font-size:"]) .panels_link,
  body[style*="font-size: medium;"] .panels_link {
    position: absolute;
    bottom: -1.5em;
    right: 0;
  }

  body:not([style*="font-size:"]) iframe[id$=_viewer],
  body[style*="font-size: medium;"] iframe[id$=_viewer] {
    display: none;
  }
}

@media (max-width: 53em) {
  body[style*="font-size: small;"] .panels_link {
    position: absolute;
    bottom: -1.5em;
    right: 0;
  }

  body[style*="font-size: small;"] iframe[id$=_viewer] {
    display: none;
  }
}

@media (max-width: 44em) {
  body[style*="font-size: x-small;"] .panels_link {
    position: absolute;
    bottom: -1.5em;
    right: 0;
  }

  body[style*="font-size: x-small;"] iframe[id$=_viewer] {
    display: none;
  }
}

/* ---------------------------------------- */
/* critical notice
/* ---------------------------------------- */

.critical_notice {
  font-size: 1.1em;
  color: red;
}

/* ---------------------------------------- */
/* dark?
/* ---------------------------------------- */

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  } 
}

/* ---------------------------------------- */
/* many pages are full of links, so all the
/* underlines and the visited vs unvisited
/* color distinctions make too much
/* business
/* ---------------------------------------- */

a {
  color: #1e90ff;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  filter: invert(50%);
}

/* ---------------------------------------- */
/* nav and footer
/* ---------------------------------------- */

nav a, footer a, body#sitemap a {
  border: 1px solid;
  border-radius: 2.5px;
  text-align: center;
  line-height: 1.5;
  padding-left: 2px;
  padding-right: 2px;
  white-space: nowrap;
}

nav a.nav_to_cur_page, footer a.nav_to_cur_page {
  filter: invert(50%);
  cursor: default;
}

nav input {
  font-size: 85%;
}

nav {
  margin-top: 1vh;
  margin-bottom: 1vh;
}

footer {
  font-size: 66.7%;
  margin-top: 5vh;
}

/* ---------------------------------------- */
/* account options
/* ---------------------------------------- */

#logged_in_as {
  filter: invert(50%);
}

/* ---------------------------------------- */
/* messages
/* ---------------------------------------- */

#message {
  white-space: pre-line;
}

/* ---------------------------------------- */
/* input choices
/* ---------------------------------------- */

.inline_input_choices span {
  white-space: nowrap;
  display: block;
  text-align: end;
  background-color: lightgray;
  color: black;
  border: 1px solid;
  border-radius: 3px;
  margin-left: 0.3em;
  margin-right: 0.3em;
  padding-left: 0.3em;
  padding-right: 0.3em;
}

.inline_input_choices span:hover, .inline_input_choices span:only-child {
  filter: invert(20%);
}

/* ---------------------------------------- */
/* right-aligned input is used to keep
/* numbers aligned on the right
/* ---------------------------------------- */

.right_aligned_input {
  text-align: right;
}

/* ---------------------------------------- */
/* articles
/* ---------------------------------------- */

article {
  max-width: 30em;
  text-align: justify;
}

article p time {
  font-style: italic;
}
article p:has(time) {
  text-align: center;
}

article h1, article h2 {
  text-align: center;
}

/* ---------------------------------------- */
/* definition lists
/* ---------------------------------------- */

dt {
  float: left;
  clear: left;
  margin-right: 1em;
  font-weight: bold;
}

dd {
  padding: 0 0 1em 3em;
}

dd p {
  font-style: italic;
}

dd iframe {
  max-height: 30em;
  margin-bottom: 1em;
}

/* ---------------------------------------- */
/* iframes
/* ---------------------------------------- */

#login_iframe {
  max-height: 35em;
  max-width: 30em;
  border: 1px solid;
  border-radius: 5px;
  margin-top: 5px;
}

iframe fieldset:has(legend) {
  border: 1px solid;
}

iframe {
  resize: both;
  height: 85vh;
  width: 100%;
  border-radius: 5px;
  overflow: auto;
}

.viewable_file_list {
  display: flex;
  white-space: nowrap;
}

.viewable_file_list iframe {
  margin-left: 10px;
  position: sticky;
  top: 0;
}

/* ---------------------------------------- */
/* forms
/* ---------------------------------------- */

input[type="submit"].prevent_default_submit {
  display: none;
}

input, button, textarea, table {
  font-family: inherit;
  font-size: inherit;
  text-align: inherit;
}

input[id^='show_help'] {
  margin-bottom: 2em;
}

input[id^='show_help']:checked {
  margin-bottom: 0;
}

.form_help {
  max-height: 80vh;
  overflow: auto;
  text-align: justify;
  hyphens: auto;
}
.form_help h1,h2,h3,h4,h5,h6 {
  text-align: left;
}

.form_help dd {
  text-align: left;
}

div.form_help {
  padding-right: 1em;
}

aside {
  font-size: 0.90em;
  font-style: italic;
  padding-left: 2em;
  padding-right: 1em;
}

p.form_help_disabled {
  filter: invert(50%);
}

p.form_help_disabled button {
  filter: invert(0%);
}

fieldset {
  margin: 1em 0;
  width: 100%;
  max-width: 30em;
  box-sizing: border-box;
  padding: 1em;
  border-radius: 5px;
}

div.not_side_by_side {
  width: 30em;
  display: flex;
}

div.not_side_by_side fieldset {
  border: 1px solid;
  margin-top: 0;
  margin-left: 0;
}

div.not_side_by_side fieldset legend {
  zoom: 0.8;
}

div.not_side_by_side fieldset + fieldset {
  margin-left: 0.5em;
}

fieldset:has(div.form_help) {
  padding-right: 0;
}

fieldset:has(legend) {
  border: 2px solid;
}

fieldset {
  position: relative;
}

.small_control_group {
  display: inline-block;
  font-size: 80%;
  padding: 0.3em;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  width: auto;
  margin: 0;
  margin-bottom: 2px;
}

li:has(.small_control_group legend input) {
  display: flex;
}

.small_control_group:has(legend input) {
  margin-top: 0;
  margin-bottom: 0;
}

li label + .small_control_group:has(legend input) {
  margin-top: 2px;
  margin-left: 1em;
}

.small_control_group:has(legend input:not(:checked)) {
  padding-left: 0;
  padding-bottom: 0;
  border: none;
  transform: translateY(2px);
}

.small_control_group legend input {
  zoom: 0.8;
}

.small_control_group legend {
  filter: invert(25%);
}

.book_list li {
  display: inline-block;
  align-items: center;
  width: 5em;
}

.inline_list li {
  display: inline-block;
}

.inline_list li~li input {
  margin-left: 1em;
}

.inline_list li input {
  margin-right: 0;
}

@media (prefers-color-scheme: dark) {
  .inline_list li ul, .small_control_group {
    border-color: rgba(255, 255, 255, 0.3);
  }
}

small_control_group span {
  margin-left: 2px;
}

.inline_button {
  display: inline;
  padding: 0;
}

form, fieldset ul, form ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

fieldset.form_help ul {
  list-style-type: unset;
  margin-left: 1em;
}

li:not([hidden]) ~ li {
  margin-top: 1em;
}

ul.input_choices li + li {
  margin-top: 0;
}

ul.input_choices li:hover {
  filter: invert(20%);
}

fieldset fieldset {
  border: 1px solid;
  width: 100%;
}

fieldset fieldset legend {
  filter: invert(25%);
}

label {
  display: block;
}

label:has(+fieldset) {
  display: inline-block;
  align-content: end;
}

input[type="checkbox"]+label, input[type="radio"]+label {
  display: inline;
}

input, button, textarea, select {
  box-sizing: border-box;
  resize: vertical;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea {
  width: 100%;
  max-width: 100%;
}

textarea {
  max-height: 80vh;
}

.password_validation_state {
  padding: 0;
  margin: 0;
}

.password_validation_state_valid {
  filter: invert(50%);
}

.password_validation_state_invalid {
  color: red;
}

.for_required:after {
  content: " (required)";
  font-size: 0.90em;
  font-style: italic;
  filter: invert(20%);
}

/* ---------------------------------------- */
/* call extra attention to invalid inputs,
/* mainly because Firefox on Android
/* doesn't. See
/* https://bugzilla.mozilla.org/show_bug.cgi?id=1510450
/* ---------------------------------------- */
input:user-invalid, textarea:user-invalid {
  border: 2px solid red;
}

.for_required:has(+ input:user-invalid):after,
.for_required:has(+ textarea:user-invalid):after {
  content: " (REQUIRED)";
  font-size: 1em;
  color: red;
}
/* ---------------------------------------- */

.readonly_field {
  border: 1px solid;
  border-radius: 3px;
  border-color: gray;
  padding: 3px;
  margin-bottom: 3px;
  filter: invert(50%);
}

.for_disabled {
  filter: invert(50%);
}

.for_hidden {
  display: none;
}

.submission_notice {
  filter: invert(20%);
}

.inline_submission_notice {
  font-size: 0.90em;
  font-style: italic;
  filter: invert(20%);
}

.error_message {
  color: red;
}

#user_balance {
  font-size: 0.90em;
  filter: invert(50%);
}

div.wrap, div.nowrap {
  overflow: auto;
  resize: vertical;
  border: 1px solid;
  border-radius: 3px;
  border-color: gray;
}

div.wrap {
  white-space: break-spaces;
}

div.nowrap {
  white-space: pre;
}

/* ---------------------------------------- */
/* tables
/* ---------------------------------------- */

table {
  font-family: sans-serif;
  border-collapse: collapse;
  border: 1px solid;
  letter-spacing: 1px;
  font-size: 0.7em;
}

tbody {
  border: 1px solid;
}

td, th {
  border: 1px dotted;
  padding: 5px 10px;
}

th {
  font-size: 1.1em;
}

td {
  text-align: center;
}

/* ---------------------------------------- */
/* subpage selection
/* ---------------------------------------- */

.subpage_selectors {
  padding-bottom: 1em;
  border-bottom: 2px solid;
}

.subpage_selectors ~ * .subpage_selectors {
  border-bottom: 1px solid;
  margin-bottom: 1em;
}

/* ---------------------------------------- */
/* misc
/* ---------------------------------------- */

span.pos_tag {
  text-transform: uppercase;
  padding-left: 0.2em;
  padding-right: 0.2em;
  border-radius: 3px;
}

mark~span.error_message {
  background-color: red;
  color: black;
}

.confirm {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

.span_spacer {
  display: inline-block;
  width: 2em;
}

.invisible {
  display: none;
}

.negative_number {
  white-space: nowrap;
}

.payment_authorization {
  border: 2px solid;
  border-color: green;
  border-radius: 5px;
  text-align: center;
}

.payment_method_fieldset_legend {
  text-transform: capitalize;
}

#payment_element {
  margin-bottom: 1em;
}

div.for_results {
  width: fit-content;
  filter: invert(40%);
}

fieldset div.results + div.for_results {
  margin-top: 3px;
}

/* ---------------------------------------- */
/* this causes element.style.maxHeight and
/* element.style.maxWidth to always have
/* a numeric pixel value instead of the
/* default value "none." without this the
/* increase_results_width() and
/* increase_results_height() functions
/* fail. setting max-height to 80% of the
/* viewport height helps ensure a single
/* results div will not cover the entire
/* screen vertically
/* ---------------------------------------- */

fieldset div.results {
  max-width: 100vw;
  max-height: 80vh;
}

/* ---------------------------------------- */
/* print
/* ---------------------------------------- */

@media print {
  header,
  footer,
  nav,
  h1,
  #logged_in_as,
  #font_size,
  #user_balance,
  button,
  input[type='button'],
  input[id^='show_help'],
  label[for^="show_help"] {
    display: none !important;
  }
}