:root {
  --normal-page-width: 20em;
  --header-height: 2em;
  --page-header-height: 1.5em;
  --page-footer-height: 1.5em;
}

@media only screen and (width < 120em) {
  :root {
    --normal-page-width: 20vw;
  }
}

@media only screen and (width < 100em) {
  :root {
    --normal-page-width: 25vw;
  }
}

@media only screen and (width < 80em) {
  :root {
    --normal-page-width: 33vw;
  }
}

@media only screen and (width < 60em) {
  :root {
    --normal-page-width: 50vw;
  }
}

@media only screen and (width < 40em) {
  :root {
    --normal-page-width: 100vw;
  }
}

html {
  margin: 0;
  /*scrollbar-gutter: stable both-edges;*/
}

html, button, input, textarea, label, p {
  font-family: system-ui, sans-serif;
  /*font-family: Arial, Helvetica, sans-serif;*/
  font-size: 1em;
}

@media only screen and (hover: none) {
html, button, input, textarea, label, p {
  font-size: 1.25em;
}
}

header/*#cover*/ {
  height: var(--header-height);
  display: flex;
  /*width: 100vw;*/
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: baseline;
  overflow: auto;
  overscroll-behavior-x: contain;
}

header/*#cover*/ button {
  display: inline-flex;
  border: .1em solid #eee;
  flex-grow: 0;
  flex-shrink: 0;
  flex-wrap: nowrap;
  border-top: 0;
  border-left: 0;
}

header/*#cover*/, footer {
  border: .1em solid #eee;
  /*line-height: 2.0em;*/
}


body {
  margin: 0;
  /*height: 100%;*/

  /*overflow: hidden; !* Prevents whole-page bouncing *!*/
  /*min-height: 100%;*/
  overflow-y: hidden;
}

main {
}

/* Horizontal Scroll Container */
#book {
  display: flex;
  overflow-x: auto;
  /*overflow-x: scroll;*/
  /*overflow-y: hidden;*/
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling for iOS */
  /*align-self: stretch;*/

  height: calc(100dvh - var(--header-height));
  background-color: #eee;
}

/* Individual Pages */
.page-frame {
  /*flex: 0 0 50vw; !* Keeps each page exactly the width of the screen *!*/
  flex: 1 0 auto;
  /*flex: none;*/
  width: var(--normal-page-width);
  max-width: var(--normal-page-width);
  scroll-snap-align: start; /* Tells the container where to snap */

  /*overflow-y: auto;*/
  /*height: calc(100vh - var(--header-height));*/
  border-right: .1em solid #eee;

  display: flex;
  flex-direction: column;
  /*height: 100vh;*/
  height: calc(100vh - var(--header-height));
}

header/*#cover*/, .page-frame {
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.page-header, .page-footer, .bar, .section-item, button {
  border: 0;
  border-bottom: .1em solid #eee;
}

.page-header, .page-footer {
  margin: 0;
  padding: 0;
  background-color: #fff;
  flex-grow: 0;
  flex-shrink: 0;
}

.page-body {
  /*overflow-y: auto;*/
  /*height: calc(100vh - var(--header-height) - var(--page-header-height)!*- var(--page-footer-height)*! - .5em);*/
  background-color: #eee;
  /*height: stretch;*/
  overflow-y: auto;
  /*height: calc(100vh - var(--header-height) - var(--page-header-height) - var(--page-footer-height) - 1.2em);*/
  /*height: 90vh;*/
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.section {

}

.bar {
  margin: 0;
  background-color: #fff;
  /*min-height: 1.1em;*/
}

.selected {
  background-color: #dff !important;
}

input, button, label, p {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.caption-label {
  display: block;
  padding: .3em;
}

.input-label {
}

button {
  background: none;
  margin: 0;
  padding: .3em;
  min-width: 4em;
  min-height: 1.5em;
}

button:hover {
  background-color: #eff;
}

.section-item {
  width: stretch;
  text-align: start;
  background-color: #fff;
  margin: 0;
  padding: .3em;
  min-height: 1em;
}

p.section-item {
  /*display: flow;*/
}

.bar-buttons {
  float: inline-end;
  position: relative;
}

.bar-buttons button {
  border: .1em solid #eee;
  border-top: 0;
  border-right: 0;
  /*height: 2.0em;*/
}

.icon {
  width: 1em;
  height: 1em;
}

input[type=text] {
  /*width: stretch;*/
  border: none;
  border-bottom: solid 0.1em #eee;
}

input[type=number] {
  text-align: right;
  border: none;
  border-bottom: solid 0.1em #eee;
}