: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: 20dvw;
    }
}

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

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

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

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

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

span.accent {
    color: blue !important;
}

span.error {
    color: red !important;
}