/*
 * Copyright (c) 2026, the web3270 contributors.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the names of the web3270 contributors nor the names of their
 *       contributors may be used to endorse or promote products derived from
 *       this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE WEB3270 CONTRIBUTORS "AS IS" AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL THE WEB3270 CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/* The IBM 3270 font (rbanffy/3270font, BSD-3-Clause/OFL; see fonts/). */
@font-face {
    font-family: "IBM 3270";
    src: local("IBM 3270"), local("3270-Regular"),
        url("fonts/3270-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Host colours, named as b3270 names them. Values follow x3270's HTML
 * screen dumps (Common/fprint_screen.c). */
:root {
    --c-neutralBlack: #000000;
    --c-blue: #00bfff;
    --c-red: #ff0000;
    --c-pink: #ffc0cb;
    --c-green: #00ff00;
    --c-turquoise: #40e0d0;
    --c-yellow: #ffff00;
    --c-neutralWhite: #ffffff;
    --c-black: #000000;
    --c-deepBlue: #0000cd;
    --c-orange: #ffa500;
    --c-purple: #a020f0;
    --c-paleGreen: #98fb98;
    --c-paleTurquoise: #aeeeee;
    --c-grey: #bebebe;
    --c-white: #ffffff;

    --chrome-bg: #15171a;
    --chrome-fg: #d8dade;
    --chrome-dim: #8a8f98;
    --key-bg: #2a2e35;
    --key-bg-active: #3d434d;
    --key-border: #444a54;
    --accent: #00bfff;
    --cursor: #00ff00;
    color-scheme: dark;
}

* { box-sizing: border-box; }

/* Elements hidden from script (keys the gateway does not allow, overlays). */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    background: var(--chrome-bg);
    color: var(--chrome-fg);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 16px 16px;
}

#bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 1100px;
    padding: 8px 0;
}
#title { font-weight: 600; }
#conn { color: var(--chrome-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#conn.state-up { color: var(--c-green); }
#conn.state-down { color: var(--c-orange); }

button {
    font: inherit;
    color: var(--chrome-fg);
    background: var(--key-bg);
    border: 1px solid var(--key-border);
    border-radius: 6px;
    padding: 6px 10px;
    min-height: 36px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
button:hover { background: var(--key-bg-active); }
button:active { background: var(--key-bg-active); transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; background: var(--key-bg); }
button.enter { border-color: var(--accent); }
button.mod[aria-pressed="true"] { background: var(--key-bg-active); border-color: var(--accent); }

/* The terminal itself. The font size is set from JS to fit the width. */
#term-wrap {
    position: relative;
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#term, #oia {
    font-family: "IBM 3270", "IBM Plex Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-variant-ligatures: none;
    line-height: 1.2;
    white-space: pre;
    background: var(--c-neutralBlack);
}

#term {
    padding: 6px 8px;
    border-radius: 6px 6px 0 0;
    cursor: text;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
}
#term.locked { cursor: progress; }
/* The gateway is signing on: the visitor watches but cannot type. */
#term.signing-on { cursor: progress; }
#term.signing-on .cursor { background: none !important; outline: none; }
:root[data-state="signing-on"] #oia-msg { color: var(--c-yellow); }
:root[data-state="queued"] #conn { color: var(--c-yellow); }

.row { display: block; height: 1.2em; }

/* Highlighting from b3270's 'gr' attribute. */
.g-underline { text-decoration: underline; }
.g-highlight { font-weight: bold; }
.g-blink { animation: blink 1s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.cursor {
    outline: 1px solid var(--cursor);
    outline-offset: -1px;
}
#term.focused .cursor {
    background: var(--cursor) !important;
    color: var(--c-neutralBlack) !important;
    outline: none;
}
#term.locked .cursor { animation: none; }

/* The operator information area, laid out on the 80-column grid like a
 * 3278/3279: the "4A" box at the left, the lock indicator, the insert
 * caret and the cursor row/column at the right. */
#oia {
    display: flex;
    align-items: baseline;
    width: 100%;
    padding: 2px 8px 4px;
    border-top: 1px solid var(--c-blue);
    border-radius: 0 0 6px 6px;
    color: var(--c-blue);
}
#oia > span { white-space: pre; }
#oia-conn { min-width: 8ch; }
#oia-conn:not(:empty) {
    min-width: 0;
    margin-right: 6ch;
    padding: 0 0.5ch;
    border: 1px solid currentColor;
    line-height: 1;
}
#oia-conn:not(:empty)::after { content: "A"; font-size: 0.6em; margin-left: 0.3ch; vertical-align: -0.2em; }
#oia-lock { min-width: 18ch; color: var(--c-white); }
#oia-msg { flex: 1; color: var(--c-red); overflow: hidden; text-overflow: ellipsis; }
#oia-ins { min-width: 3ch; color: var(--c-white); text-align: center; }
#oia-cur { min-width: 7ch; text-align: right; }

#overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 6px;
    text-align: center;
    padding: 16px;
}
#overlay[hidden] { display: none; }
#overlay p { margin: 0; font-size: 1.1rem; }
#overlay button[hidden] { display: none; }

/* Key pad. */
#keys {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.keyrow { display: flex; flex-wrap: wrap; gap: 6px; }
.keyrow button { flex: 1 1 0; min-width: 0; }
.pfgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.pfgrid button { padding: 6px 0; }

#kbd-label { display: none; color: var(--chrome-dim); font-size: 0.85rem; }
#kbd {
    display: none;
    font: inherit;
    font-size: 16px;            /* stops iOS zooming on focus */
    color: var(--chrome-fg);
    background: var(--key-bg);
    border: 1px solid var(--key-border);
    border-radius: 6px;
    padding: 8px 10px;
}

/* Touch devices: show the type-in box, PF keys in two rows of six. */
@media (pointer: coarse), (max-width: 700px) {
    #kbd, #kbd-label { display: block; }
    .pfgrid { grid-template-columns: repeat(6, 1fr); }
    button { min-height: 44px; }
}

#help {
    width: 100%;
    max-width: 1100px;
    margin-top: 12px;
    color: var(--chrome-dim);
}
#help h2 { font-size: 1rem; color: var(--chrome-fg); margin: 0 0 6px; }
#help dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; margin: 0; }
#help dt { color: var(--chrome-fg); }
#help dd { margin: 0; }