/* On-screen Minitel keyboard.
   Ported from the MiEdit project (Frédéric BISSON <zigazou@free.fr>) and
   adapted to this viewer's full-viewport column layout. */

.minitel-keyboard {
    flex: 0 0 auto;
    /* Keys scale with the viewport but stay tappable and never get silly on a
       wide desktop screen. */
    font-size: clamp(11px, 2.4vw, 17px);
    padding: 0.2em 0.2em 0.4em;
    max-height: 60vh;
    overflow-y: auto;

    /* Full width on a phone, but don't stretch the keys across a wide desktop
       screen (48em is above any phone, so this only bites on desktop). */
    width: 100%;
    max-width: 48em;
    margin: 0 auto;
    box-sizing: border-box;
}

.minitel-keyboard.hidden,
.keyboard-page.hidden {
    display: none;
}

.minitel-keyboard button {
    padding: 0;
    height: 3.2em;
    margin: 0;
    width: 100%;
    background-color: #462e22;
    color: white;
    border: 0.3em solid #202020;
    border-radius: 1em 0.4em 0.4em 0.4em;
    text-shadow: 0.05em 0.05em 0.1em black;
    font-size: 90%;
    font-family: inherit;
    /* No 300ms double-tap-zoom delay on touch screens */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.minitel-keyboard button:active {
    background-color: #6b4534;
}

.special button, .send button, .switch button {
    text-shadow: 0.05em 0.05em 0.1em #462e22;
}

.special button { background-color: #a0795a; }
.send button { background-color: #a4943c; }
.shift button { background-color: #7a5240; }
.switch button { background-color: #2b3d8f; }

.page-alpha.shifted .shift button { background-color: #a4943c; }

.minitel-keyboard>div>div {
    display: flex;
    flex-wrap: wrap;
}

.minitel-keyboard>div>div>div { flex-grow: 1; flex-basis: 0; }
.minitel-keyboard>div>div>div.switch { flex-grow: 0; flex-basis: 3em; }
.minitel-keyboard>div>div>div.space { flex-grow: 3; }

/* Settings page */

.form-config {
    color: #ddd;
    font-family: sans-serif;
    text-align: left;
    font-size: 100%;
    padding: 0.4em;
}

.config-color, .config-speed {
    display: flex;
    align-items: center;
}

.config-speed { margin-top: 0.5em; }

.form-config label { width: 33%; }
.form-config select {
    flex-grow: 1;
    font-size: 95%;
}

.config-help {
    margin-top: 1em;
    column-count: 3;
    font-size: 90%;
}

.config-help kbd {
    display: inline-block;
    width: 2em;
    margin: 0 0.3em 0.4em 0;
    text-align: center;
    font-size: 130%;
    border: 0.05em solid white;
    border-radius: 0.3em;
}

/* Show/hide toggle, floating over the top right corner of the screen */

#keyboard-toggle {
    position: fixed;
    top: 0.5em;
    right: 0.5em;
    z-index: 20;
    width: 2.2em;
    height: 2.2em;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    color: white;
    background-color: rgba(70, 46, 34, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.3em;
    opacity: 0.55;
    touch-action: manipulation;
    cursor: pointer;
}

#keyboard-toggle:hover, #keyboard-toggle:focus { opacity: 1; }
#keyboard-toggle.active { background-color: rgba(164, 148, 60, 0.9); opacity: 1; }