body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: tahoma;
  font-size: clamp(15px, 1.5vw, 25px);
}

/* Moved from an inline style="overflow:hidden" on <html> in index.html. */
html {
  overflow: hidden;
}

/* Generic utility classes, used to replace one-off inline styles that
   were previously scattered across index.html. */
.hidden {
  display: none;
}

.float-left {
  float: left;
}

.form-control-large {
  font-size: larger;
}

iframe {
  flex-grow: 1;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 80vh;
  height: 80dvh;
}

#indexMainDiv {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
}


button {
  /*background-color: white !important;*/
  font-size: clamp(15px, 1.5vw, 25px);
}

#appMainDiv {
  width: 100%;
  margin: 0;
  padding: 0;
}

#appContentDiv {
  width: 100%;
  left: 3px;
  right: 3px;
}

#lblMovementList {
  vertical-align: top;
}

#movementsSelection {
  width: 100%;
  box-sizing: border-box;
}

#txtMovementNumber {
  width: 100%;
  box-sizing: border-box;
}

#pageSize {
  width: 100%;
  box-sizing: border-box;
  font-size: larger;
}

/* Moved from inline style="width:100%; box-sizing:border-box" on these
   two elements in index.html. */
#summary,
#lines {
  width: 100%;
  box-sizing: border-box;
}

/* Moved from an inline style on the <select> and its two <option>s in
   the Languages modal in index.html. */
#languagesSelect {
  font-size: large;
  width: 100%;
  padding-top: 1%;
  padding-bottom: 1%;
}

#languagesSelect option {
  padding-top: 1%;
  padding-bottom: 1%;
  margin: 2%;
  font-size: 40px;
}

/* Moved from inline style="float:left; width:25%/75%" on these two <li>
   elements (frame back-button vs. frame title) in index.html. */
.frame-menu-back {
  float: left;
  width: 25%;
}

.frame-menu-title {
  float: left;
  width: 75%;
}

.modal-bottoms {
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
}

.fixed-bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
}

/* MusicSheetView.setPageByMedia() hides these (display:none) in
   landscape and shows them (display:block) in portrait, but only after
   its JavaScript actually runs -- so on first paint, before that runs,
   these were visible-by-default for a moment even on a landscape
   laptop, then disappeared. Matching the same default here in CSS
   means the correct state (hidden on landscape, shown on portrait) is
   there from the very first frame, with no flash. The JS still runs
   afterward and keeps things in sync if the orientation changes later
   (e.g. rotating a tablet), since its `style.display` (inline) simply
   confirms the same value this CSS already set. */
.navigate {
  display: none;
}

@media (orientation: portrait) {
  .navigate {
    display: block;
  }
}

div.navigate {
  float: left;
  width: 50%;
}

/* Sized the same way as the top menu buttons (.mainMenuItem button in
   menu.css: padding: 3.5vh 3px 3.5vh 3px), rather than a fixed height,
   so the two bars end up genuinely identical in height -- not just
   two different numbers that happen to look close. */
button.navigateButton {
  width: 100%;
  padding: 3.5vh 3px 3.5vh 3px;
  padding: 3.5dvh 3px 3.5dvh 3px;
  /* NOTE: the top menu buttons (li button in menu.css) already got this
     reset when they were converted from <a> to <button>, because iOS
     WebKit (Safari and Chrome-on-iOS, which is WebKit under the hood)
     applies its own native appearance/sizing to <button> elements that
     can conflict with custom padding -- but these nav buttons never
     got the same treatment. This is the most likely explanation for
     why they still render smaller specifically on iOS, even after
     ruling out the vh/dvh viewport issue.
     Unlike the menu buttons (which sit on a black bar and rely on
     white-on-black contrast, not a bordered box, to look like
     buttons), these sit on a plain white background -- their light
     gray box-and-border look currently comes entirely from each
     browser's own native default button styling. Stripping appearance
     without replacing that would make them invisible, so a background
     and border are set explicitly here instead, to keep them looking
     like buttons consistently on every browser (rather than however
     each one's native default happens to render). */
  -webkit-appearance: none;
  appearance: none;
  background-color: #efefef;
  border: 1px solid #999;
  box-sizing: border-box;
  font: inherit;
  cursor: pointer;
  margin: 0;
}

input[type='checkbox'] {
  width: 20px;
  height: 30px;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  /*position: fixed;  Stay in place */
  z-index: 1;
  /* Sit on top */
  /* NOTE: these were unitless numbers (e.g. "left: 5;"), which is invalid
     CSS for a length and gets silently dropped by the browser. Also had
     no effect either way since `position` above is commented out, so
     these properties have no positioning context to apply to. Given
     valid units so they're at least syntactically correct. */
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #fefefe;
  /*padding: 10px;*/
}


/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  /*position: fixed;*/
  padding: 10px;
  border: 1px solid #888;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}


/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-button {
  width: 50%;
  height: 14vh;
  height: 14dvh;
}

#divSummary {
  margin-top: 5vh;
  margin-top: 5dvh;
}

#divLines {
  margin-top: 5vh;
  margin-top: 5dvh;
}

/* The navigation buttons are only ever visible in portrait orientation
   -- see MusicSheetView.setPageByMedia(), which hides them
   (display:none) whenever `window.matchMedia('(orientation:landscape)')`
   matches. So whether the note image needs to leave room for that
   `position:fixed` bottom bar depends on orientation, not on how wide
   the window happens to be (a laptop window can be narrow and still be
   landscape, with the buttons hidden). Matching that same condition
   here, rather than a width breakpoint, avoids reserving scroll space
   for buttons that aren't actually there. */
#noteViewer {
  overflow-y: auto;
  padding-bottom: 5pt;
}

@media (orientation: landscape) {

  /* Buttons hidden: nothing fixed at the bottom to avoid, so let the
     image use most of the viewport instead of scrolling unnecessarily. */
  #noteViewer {
    max-height: 80vh;
    max-height: 80dvh;
  }
}

@media (orientation: portrait) {

  /* Buttons visible and pinned to the bottom: keep the image clear of
     them. */
  #noteViewer {
    max-height: 35vh;
    max-height: 35dvh;
  }
}

/* On narrow (mobile) screens, vertical space is scarce enough that the
   note image needed constant manual scrolling to read even one line.
   Reclaim space from the things that don't strictly need it (the top
   margins, the description box) so more of it goes to the image
   instead. Left untouched on desktop, where space isn't as tight. */
@media (max-width: 600px) {

  #divSummary,
  #divLines {
    margin-top: 2vh;
    margin-top: 2dvh;
  }

  #summary {
    height: 8vh;
    height: 8dvh;
  }
}

@media (max-width: 600px) and (orientation: portrait) {

  /* Small phones in portrait specifically can spare a bit more than
     the general portrait rule above. */
  #noteViewer {
    max-height: 45vh;
    max-height: 45dvh;
  }
}

/* Hides content visually while keeping it available to screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}