/* Chrome around the compiled app: the header bar, the ruleset editor, and
   the drag-and-drop overlay. Loaded by app/index.html, which is generated —
   this file is hand-written source, edit it directly.
   Colours match style.css and entlab/config.py. */

:root {
    --el-bg: #000;
    --el-board: #0f0f0f;
    --el-line: #171717;
    --el-edge: #262626;
    --el-edge-lit: #3d3d3d;
    --el-ink: #e8e8e8;
    --el-dim: #9a9a9a;
    --el-faint: #6b6b6b;
    --el-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
    --el-bar: 34px;
}
@media (pointer: coarse) { :root { --el-bar: 46px; } }

/* ───────────────────────────────────────────────────── header bar ─────── */

#entlab-bar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--el-bar);
    z-index: 100000;
    display: flex; align-items: center; gap: 14px;
    padding: 0 10px; box-sizing: border-box;
    background: var(--el-bg); border-bottom: 1px solid var(--el-line);
    font: 400 13px var(--el-mono);
    -webkit-user-select: none; user-select: none;
}
#entlab-bar a, #entlab-bar button {
    color: var(--el-dim); text-decoration: none; white-space: nowrap;
    background: none; border: 0; padding: 6px 2px; cursor: pointer;
    font: inherit;
}
#entlab-bar a:hover, #entlab-bar button:hover { color: var(--el-ink); }
#entlab-bar .home { color: var(--el-ink); font-weight: 700;
                    display: flex; align-items: center; gap: 8px; }
#entlab-bar img { width: 18px; height: 18px; display: block; border-radius: 2px; }
#entlab-bar .sp { margin-left: auto; }
@media (pointer: coarse) {
    #entlab-bar { font-size: 15px; gap: 16px; }
    #entlab-bar img { width: 22px; height: 22px; }
    #entlab-bar a, #entlab-bar button { padding: 10px 2px; }
}
@media (max-width: 560px) {
    #entlab-bar {
        gap: 6px;
        padding-inline: 8px;
        overflow: visible;
        font-size: 13px;
    }
    #entlab-bar a, #entlab-bar button { padding-block: 7px; }
    #entlab-bar .home { gap: 0; }
    #entlab-bar .el-brand-label { display: none; }
    #entlab-bar .sp { margin-left: 0; }
    #entlab-bar .el-secondary { display: none; }
    #el-menu-pop {
        position: fixed;
        top: calc(var(--el-bar) + 5px);
        left: 8px;
        max-height: calc(100dvh - var(--el-bar) - 16px);
        overflow-y: auto;
    }
}
/* the app fills everything under the bar */
canvas#canvas { top: var(--el-bar) !important; bottom: 0 !important;
                margin: 0 auto !important; }

/* The app draws at the screen's real resolution now (see entlab/render.py),
   so the canvas is displayed one backing pixel per device pixel and there is
   nothing left to smooth. No image-rendering override: on the odd screen
   that reports 1.5x we draw at 2x and let the browser come back down, and
   that downscale wants the smooth filter, not a hard one. */

/* No focus ring on the canvas or the page. Pressing space inside the app is
   play/pause, not "activate the focused thing" — but the browser still drew
   its blue outline around the whole viewport, which looked like the page had
   broken. Keyboard focus still works; it just isn't painted over the app. */
canvas#canvas, canvas#canvas:focus, canvas#canvas:focus-visible,
body:focus, body:focus-visible, :root:focus, :root:focus-visible {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* narrow screens: the labels go, the icons stay */
@media (max-width: 560px) { .el-wide { display: none; } }

/* ─────────────────────────────────────────────────────── loading ──────── */

/* pygbag supplies its own Downloading/Loading boxes. EntLab's loader below
   replaces both so visitors do not see two different loading screens. */
#transfer, #infobox { visibility: hidden !important; }

#entlab-loading {
    position: fixed;
    inset: var(--el-bar) 0 0;
    z-index: 90000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    box-sizing: border-box;
    background: var(--el-bg);
    color: var(--el-ink);
    text-align: center;
    font: 400 14px/1.5 var(--el-mono);
    opacity: 1;
    transition: opacity .2s ease;
}
#entlab-loading.done { opacity: 0; pointer-events: none; }
#entlab-loading .mark {
    width: 42px;
    height: 42px;
    padding: 8px;
    margin-bottom: 4px;
    border: 1px solid var(--el-edge);
    border-radius: 7px;
    background: var(--el-board);
}
#entlab-loading img { display: block; width: 100%; height: 100%; }
#entlab-loading strong { font-size: 17px; }
#entlab-loading span { max-width: 420px; color: var(--el-dim); }

/* ────────────────────────────────────────────────── the page's Menu ───── */
/* This bar already looks like a menu bar, so the app's own menu drops out
   of it instead of being a second menu of a different shape inside the
   canvas. Rows match the in-app menu one for one. */

#entlab-bar .wrap { position: relative; display: flex; align-items: center; }
/* display:flex would otherwise beat the browser's own rule for [hidden] */
#entlab-bar .wrap[hidden] { display: none; }
#entlab-bar #el-menu { color: var(--el-ink); }

#el-menu-pop {
    display: none; position: absolute; top: calc(100% + 5px); left: 0;
    min-width: 244px; z-index: 100001;
    padding: 5px; border-radius: 7px;
    background: var(--el-board); border: 1px solid var(--el-edge);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .66);
}
#el-menu-pop.on { display: block; }
#entlab-bar #el-menu-pop button {
    display: block; width: 100%; text-align: left; white-space: nowrap;
    padding: 9px 12px; border-radius: 4px; color: var(--el-ink);
}
#entlab-bar #el-menu-pop button:hover { background: #171717; }
#entlab-bar #el-menu-pop button.danger { color: #ff9c8a; }
#el-menu-pop hr { border: 0; border-top: 1px solid var(--el-line);
                  margin: 5px 10px; }
@media (pointer: coarse) {
    #entlab-bar #el-menu-pop button { padding: 13px 14px; }
}

/* ───────────────────────────────────────────── leaving confirmation ───── */

#entlab-ask {
    position: fixed; inset: 0; z-index: 250000; display: none;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .72);
    font: 400 13px var(--el-mono);
}
#entlab-ask.on { display: flex; }
#entlab-ask .box {
    max-width: min(460px, calc(100vw - 32px));
    padding: 20px 22px; border-radius: 9px;
    background: var(--el-board); border: 1px solid var(--el-edge);
}
#entlab-ask h2 { margin: 0 0 10px; font-size: 17px; color: var(--el-ink); }
#entlab-ask p { margin: 0 0 18px; color: var(--el-dim); line-height: 1.6; }
#entlab-ask p b { color: var(--el-ink); }
#entlab-ask .row { display: flex; gap: 8px; flex-wrap: wrap; }
#entlab-ask button {
    font: inherit; padding: 9px 14px; border-radius: 5px; cursor: pointer;
    border: 1px solid var(--el-edge); background: transparent;
    color: var(--el-ink);
}
#entlab-ask button:hover { border-color: var(--el-dim); background: #151515; }
#entlab-ask button.primary { background: var(--el-ink); color: #000;
                             border-color: var(--el-ink); font-weight: 700; }
#entlab-ask button.primary:hover { background: #fff; }

/* ──────────────────────────────────────────────────────── editor ──────── */

#entlab-ed {
    position: fixed; inset: 0; z-index: 200000;
    display: none; flex-direction: column;
    background: var(--el-bg);
    font: 400 13px var(--el-mono);
}
#entlab-ed.open { display: flex; }

#entlab-ed .head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border-bottom: 1px solid var(--el-line);
}
#entlab-ed .title { color: var(--el-ink); font-weight: 700; }
#entlab-ed .title small { color: var(--el-faint); font-weight: 400; }
#entlab-ed .grow { margin-left: auto; }
#entlab-ed button {
    font: inherit; padding: 8px 12px; border-radius: 5px;
    border: 1px solid var(--el-edge); background: var(--el-board);
    color: var(--el-ink); cursor: pointer;
}
#entlab-ed button:hover { border-color: var(--el-dim); background: #151515; }
#entlab-ed button.primary { background: var(--el-ink); color: #000;
                            border-color: var(--el-ink); font-weight: 700; }
#entlab-ed button.primary:hover { background: #fff; }

#entlab-ed .msg { padding: 0 10px 8px; color: var(--el-faint); min-height: 0; }
#entlab-ed .msg.err { color: #ff9c8a; white-space: pre-wrap;
                      font-size: 12px; max-height: 6em; overflow: auto; }
#entlab-ed .msg.ok { color: var(--el-dim); }

/* the editor proper: a highlighted <pre> with a transparent <textarea>
   sitting exactly on top of it, so you get real text editing (and a real
   mobile keyboard) with colour underneath */
#entlab-ed .pane {
    flex: 1; display: flex; min-height: 0;
    border-top: 1px solid var(--el-line);
    background: var(--el-board);
}
#entlab-ed .gutter {
    padding: 12px 8px 12px 12px; text-align: right;
    color: var(--el-faint); background: var(--el-bg);
    border-right: 1px solid var(--el-line);
    overflow: hidden; -webkit-user-select: none; user-select: none;
    white-space: pre;
}
#entlab-ed .code { position: relative; flex: 1; overflow: auto; }
#entlab-ed pre, #entlab-ed textarea {
    margin: 0; padding: 12px;
    font: inherit; font-size: 13px; line-height: 1.55;
    tab-size: 4; white-space: pre; word-wrap: normal;
    border: 0; outline: 0;
}
#entlab-ed .gutter { font-size: 13px; line-height: 1.55; }
/* the line an error blamed, so it stays findable after you scroll */
#entlab-ed .gutter .bad { color: #ff9c8a; font-weight: 700; }
#entlab-ed pre {
    pointer-events: none; min-width: 100%; min-height: 100%;
    color: var(--el-ink); background: transparent;
}
#entlab-ed textarea {
    position: absolute; inset: 0; width: 100%; height: 100%;
    resize: none; background: transparent;
    color: transparent; caret-color: var(--el-ink);
    overflow: hidden;                /* .code does the scrolling */
    -webkit-text-fill-color: transparent;
}
#entlab-ed textarea::selection { background: #2b4a63; -webkit-text-fill-color: transparent; }

/* Python highlighting — monochrome-ish, in keeping with the rest */
.t-com { color: #5f6f5f; font-style: italic; }
.t-str { color: #9fb8a0; }
.t-key { color: #cfd8ff; font-weight: 700; }
.t-num { color: #d8c69f; }
.t-bui { color: #a8c4d8; }

@media (pointer: coarse) {
    #entlab-ed { font-size: 15px; }
    #entlab-ed button { padding: 12px 14px; }
    #entlab-ed pre, #entlab-ed textarea, #entlab-ed .gutter { font-size: 14px; }
}

/* ─────────────────────────────────────────────────── drop overlay ─────── */

#entlab-drop {
    position: fixed; inset: 0; z-index: 300000; display: none;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .82);
    font: 400 15px var(--el-mono); color: var(--el-ink);
    pointer-events: none;
}
#entlab-drop.on { display: flex; }
#entlab-drop div {
    border: 2px dashed var(--el-edge-lit); border-radius: 10px;
    padding: 28px 38px; text-align: center; background: var(--el-board);
}
#entlab-drop small { display: block; color: var(--el-faint); margin-top: 6px; }

/* ────────────────────────────────────────────────────────── toast ─────── */

#entlab-toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 18px; z-index: 400000;
    background: var(--el-board); border: 1px solid var(--el-edge);
    border-radius: 6px; padding: 9px 16px;
    font: 400 13px var(--el-mono); color: var(--el-ink);
    opacity: 0; transition: opacity .18s; pointer-events: none;
    max-width: 90vw; text-align: center;
}
#entlab-toast.on { opacity: 1; }