/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-computer-science-blockly-web-page-builder
 */
/* blockly-web-page-builder — Scratch-style block workspace + live preview/code.
 * Uses the shared maths-activity theme variables so it matches the platform. */

.bwpb-stage {
    padding: 4px;
}

.bwpb-panel {
    background: var(--maths-surface, #fff);
    border: 1px solid var(--maths-border, #c7cfdb);
    border-radius: 12px;
    padding: 12px 14px;
}

/* ONE full-width box; tabs switch between Blocks / Your web page / HTML / CSS,
 * so the block workspace and the live page each get the whole area. */
.bwpb-io {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    height: 620px;
}

/* The block workspace fills the Blocks tab. */
.bwpb-workspace {
    width: 100%;
    height: 100%;
}

.bwpb-tabs {
    display: flex;
    border-bottom: 1px solid var(--maths-border, #c7cfdb);
    flex: 0 0 auto;
}

.bwpb-tab {
    padding: 11px 18px;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--maths-ink-muted, #556070);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
}
.bwpb-tab:hover { color: var(--maths-ink, #1f2933); }
.bwpb-tab.is-active {
    color: var(--maths-primary, #1f6fb2);
    border-bottom-color: var(--maths-primary, #1f6fb2);
}

.bwpb-views { flex: 1 1 auto; position: relative; min-height: 0; }

.bwpb-view { position: absolute; inset: 0; }
.bwpb-view[hidden] { display: none; }

.bwpb-preview {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 12px 12px;
    background: #fff;
}

.bwpb-view-code {
    background: #1e1e2e;
    border-radius: 0 0 12px 12px;
    overflow: auto;
}

/* A textarea, not a <pre>: the learner can type their own HTML/CSS here. Sized to
 * fill the tab so the whole file is editable without an inner scroll container. */
.bwpb-code {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    border: none;
    resize: none;
    background: transparent;
    color: #e6e6f0;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre;
    tab-size: 2;
}
.bwpb-code:focus {
    outline: 2px solid var(--maths-primary, #1f6fb2);
    outline-offset: -2px;
}

/* Shown once the code has been edited by hand — the blocks stop driving the page. */
.bwpb-codenotice {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 8px 14px;
    background: var(--maths-warn-soft, #fff4e0);
    border-bottom: 1px solid var(--maths-border, #c7cfdb);
    color: var(--maths-ink, #1f2933);
    font-size: 0.85rem;
    font-weight: 600;
}
.bwpb-codenotice[hidden] { display: none; }
.bwpb-codenotice-text { flex: 1 1 auto; }
.bwpb-backtoblocks { flex: 0 0 auto; white-space: nowrap; }

.bwpb-savestatus {
    margin-right: 10px;
    color: var(--maths-ink-muted, #556070);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.bwpb-savestatus[hidden] { display: none; }

.bwpb-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .bwpb-io { height: 520px; }
}