/* The page: calculator left, options right. Below 1100px the options hide
   until the ? on the calculator is clicked. Loaded after style.css and options.css. */

html,
body {
    height: 100%;
    margin: 0;
    background: #a8a8a8; /* the calculator's grey also behind the iPhone's home bar */
    overflow: hidden;
    overscroll-behavior: none;
}

html:has(.options-open),
.options-open {
    background: #39576f;
}

.app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
}

/* ---- the calculator ---- */
.calc-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    background: #a8a8a8; /* the same as popup.html */
    padding: 4px;
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
    padding-top: max(4px, env(safe-area-inset-top));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
}

/* the calculator and the little room around it that the popup of the extension gives
   it; sized by app.js to the scaled calculator, so the pane centres what you see */
.stage {
    position: relative;
    flex: none;
    width: 388px;
    height: 586px;
}

/* The calculator, as style.css draws it in the popup, scaled by app.js from the corner
   of the stage */
#calculator {
    position: absolute;
    left: 0;
    top: 0;
    margin: 3px 4px;
    transform-origin: -4px -3px;
}

/* ---- the options ---- */
.options-pane {
    position: relative;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #39576f;
    outline: none;
    -webkit-overflow-scrolling: touch;
}

/* The options text: smaller than the extension's page, in the calculator's font.
   Everything in options.css is in em, so one font-size scales the whole page. */
.options-pane {
    font-family: 'Play', 'Russo One', sans-serif;
}

.options-pane .wrapper {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100%; /* a short page still puts the footer at the bottom */
    font-size: 13.5px;
    margin-top: 0;
    margin-bottom: 0; /* options.css leaves 7em under the page */
    padding-top: calc(2em + max(22px, env(safe-area-inset-top)));
}

/* the website's calculator draws the digits and the signs higher in the key than
   DEL and AC (its keys are scaled up from a smaller font): the guide's sign keys too */
.options-pane .wrapper .keys:not(.del-ac) {
    line-height: 28px;
}

.options-pane .footer {
    margin: auto auto 0; /* pushed to the bottom */
    padding: 3em 16px 2em; /* and kept off the text above */
    font-size: 13.5px;
}

.options-pane .footer p {
    margin-bottom: 0;
}

/* the close button stays at the top right while the options scroll; it closes the options on a small screen and hides the panel on a wide one */
.options-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    height: 0; /* takes no room: the button floats over the page */
    padding: 0 22px;
    pointer-events: none;
}

.close-options {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    margin-top: max(22px, env(safe-area-inset-top)); /* off the top; on the button, as the bar has no height to pad */
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    background: #c3cad1;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, transform 0.15s ease;
}

.close-options svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #2b4753;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.close-options:hover {
    background: #d3d9de;
    transform: scale(1.12);
}

.close-options:active {
    background: #b2bac2;
    transform: scale(1.02);
}

.close-options:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---- a small or medium screen (phone, iPad): the options open over the calculator ---- */
@media (max-width: 1099px) {
    .app {
        display: block;
    }

    /* a phone is narrow: the calculator goes almost from side to side, 2px short of each, and of the top and bottom */
    .calc-pane {
        height: 100%;
        box-sizing: border-box;
        padding: 0;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    #calculator {
        margin: 2px;
        transform-origin: -2px -2px;
    }

    .options-pane {
        position: fixed;
        inset: 0;
        z-index: 10;
        visibility: hidden;
        transform: translateY(100%);
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .options-open .options-pane {
        visibility: visible;
        transform: none;
        transition: transform 0.25s ease;
    }

    .options-pane .wrapper {
        padding-top: calc(4em + max(22px, env(safe-area-inset-top))); /* room for the close button */
    }
}

@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
    .options-pane {
        transition: none;
    }
}

/* ---- a wide screen: the ? hides the options and the calculator takes the middle ---- */
@media (min-width: 1100px) {
    .options-hidden .app {
        grid-template-columns: minmax(0, 1fr);
    }

    .options-hidden .options-pane {
        display: none;
    }
}