/* ============================================================
   workshop.css — the look of the "Build it yourself" pages
   Shared by funtime/tetris-build.html and funtime/snake-build.html.
   Black and white, like the games themselves.
   ============================================================ */
body { background: #2b2b2b; }
.container { background: #fafafa; max-width: 1250px; }
h1, .subtitle { color: #111; text-shadow: none; }
.subtitle { color: #555; }

/* ---- progress strip ---- */
.progress-wrap { text-align: center; margin-bottom: 22px; }
#progress { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 8px; }

.step-dot {
    width: 38px; height: 38px;
    font-family: monospace; font-size: 1em; font-weight: bold;
    background: #fff; color: #111; border: 3px solid #111; cursor: pointer;
}
.step-dot.current { background: #111; color: #fff; }
.step-dot.done { background: #fff; color: #111; border-color: #111; }
.step-dot.done::after { content: '✓'; font-size: 0.7em; position: relative; top: -6px; left: 1px; }
.step-dot.locked { border-color: #bbb; color: #bbb; cursor: not-allowed; }
#progress-text { font-family: monospace; color: #555; font-size: 0.95em; }

/* ---- two columns ---- */
.workshop { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.lesson-col { flex: 1 1 520px; min-width: 320px; }
.demo-col { flex: 0 0 300px; }

.panel { background: #fff; border: 3px solid #111; padding: 18px 22px; margin-bottom: 18px; }
.panel h2 { color: #111; margin: 0 0 4px; font-size: 1.5em; }
.panel h3 { color: #111; margin: 0 0 10px; }
.panel p { color: #333; margin-bottom: 10px; }
.panel ol, .panel ul { color: #333; margin: 0 0 10px 20px; }
.panel li { margin-bottom: 5px; }

.step-label { font-family: monospace; color: #666; letter-spacing: 2px; font-size: 0.85em; text-transform: uppercase; }
.step-adds { font-family: monospace; background: #111; color: #fff; display: inline-block; padding: 4px 10px; margin-bottom: 12px; }

code, .mini-code { font-family: 'Menlo', 'Consolas', monospace; }
code { background: #eee; color: #111; padding: 2px 6px; border-radius: 3px; font-size: 0.92em; }
.mini-code { display: block; background: #111; color: #fff; padding: 12px 16px; white-space: pre; overflow-x: auto; font-size: 0.9em; margin: 10px 0; }

/* ---- the spec, tucked away ----
   The same words now sit at the top of the editor as a comment, so this stays
   shut. It is still here because a student who edits that comment away needs
   somewhere to find the spec again — and open or shut is remembered as you
   move between steps, because <details> keeps its own state. */
.spec-box { background: #f4f4f4; border-left: 6px solid #111; }
.spec-box > summary {
    font-family: monospace; font-size: 0.9em; letter-spacing: 1px; color: #111;
    padding: 10px 18px; cursor: pointer; list-style: none;
}
.spec-box > summary::-webkit-details-marker { display: none; }
.spec-box > summary::before { content: '📋 ▸ '; }
.spec-box[open] > summary::before { content: '📋 ▾ '; }
.spec-box > summary:hover { background: #111; color: #fff; }

.spec { padding: 0 18px 14px; }
.spec h4 { font-family: monospace; margin: 10px 0 4px; color: #111; font-size: 0.9em; letter-spacing: 1px; }
.spec h4:first-child { margin-top: 0; }
.spec p, .spec ol { margin: 0 0 6px; color: #333; }
.spec ol { margin-left: 20px; }
.spec li { font-family: monospace; font-size: 0.9em; white-space: pre-wrap; }

.warn { background: #111; color: #fff; padding: 12px 16px; margin: 12px 0; }
.warn code { background: #fff; color: #111; }

.score-table { border-collapse: collapse; margin: 10px 0; }
.score-table th, .score-table td { border: 1px solid #111; padding: 5px 12px; font-family: monospace; }
.score-table th { background: #111; color: #fff; }

/* ---- drawings inside a step ---- */
.step-figure { margin: 18px 0; text-align: center; }
.step-figure svg { max-width: 100%; height: auto; background: #fff;
                   border: 2px solid #111; }
.step-figure figcaption { font-family: monospace; font-size: 0.84em; color: #555;
                          margin-top: 7px; line-height: 1.5; }

/* ---- editor ----
   Two layers, one on top of the other: a <pre> holding a coloured copy of the
   code, and the textarea above it with see-through text and a black cursor.
   Every measurement below has to match in BOTH, or the letters drift apart. */
.editor-wrap { position: relative; border: 3px solid #111; background: #fff; }

#code-editor, #code-highlight {
    margin: 0; padding: 14px; border: 0;
    font-family: 'Menlo', 'Consolas', monospace; font-size: 0.95em;
    line-height: 1.5; tab-size: 4;
    white-space: pre-wrap; overflow-wrap: break-word;
    box-sizing: border-box;
}

#code-highlight {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden; pointer-events: none; color: #111;
}

#code-editor {
    position: relative; display: block; width: 100%; min-height: 260px;
    background: transparent; color: transparent; caret-color: #111;
    resize: none; overflow: hidden;
}
#code-editor::selection { background: #b9d6ff; }

/* The colours. Muted on purpose — the pages are black and white, and this is
   the one place where a colour earns its keep by telling you what a word is. */
.tok-comment  { color: #8a8a8a; font-style: italic; }
.tok-string   { color: #0b6b47; }
.tok-number   { color: #9a5b00; }
.tok-keyword  { color: #111; font-weight: bold; }
.tok-builtin  { color: #1a4f8f; }
.tok-constant { color: #6b3fa0; }
.tok-call     { color: #0f5c73; }

.mono-btn {
    font-family: monospace; font-weight: bold; font-size: 1em;
    background: #fff; color: #111; border: 3px solid #111; padding: 10px 18px; cursor: pointer;
}
.mono-btn:hover:not(:disabled) { background: #111; color: #fff; }
.mono-btn:disabled { border-color: #bbb; color: #bbb; cursor: not-allowed; }
.mono-btn.small { padding: 7px 12px; font-size: 0.9em; border-width: 2px; }
.mono-btn.small.active { background: #111; color: #fff; }
.mono-btn.primary { background: #111; color: #fff; }
.mono-btn.primary:hover:not(:disabled) { background: #fff; color: #111; }
.mono-btn.primary:disabled { background: #fff; color: #bbb; border-color: #bbb; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.hint-box { background: #fffbe6; border: 2px dashed #111; padding: 12px 16px; margin-top: 12px; }
.hint-box p { margin: 0 0 6px; }

/* ---- tests ---- */
.test-summary { font-family: monospace; padding: 12px 16px; border: 3px solid #111; background: #fff; margin-top: 14px; }
.test-summary.pass { background: #111; color: #fff; }
.test-summary.fail { background: #fff; color: #111; border-style: dashed; }

#test-results { list-style: none; margin: 12px 0 0; padding: 0; }
#test-results li { padding: 8px 12px; border-left: 5px solid #111; background: #f4f4f4; margin-bottom: 6px; font-size: 0.94em; }
#test-results li.test-fail { border-left-style: dashed; background: #fff; border: 2px dashed #111; }
#test-results .detail { display: block; font-family: monospace; font-size: 0.86em; color: #444; margin-top: 4px; white-space: pre-wrap; word-break: break-word; }

/* ---- demo ---- */
.demo-col .panel { position: sticky; top: 14px; }
#demo-canvas { display: block; margin: 0 auto; background: #fff; }
.demo-status { font-family: monospace; font-size: 0.85em; text-align: center; padding: 6px; margin-bottom: 10px; border: 2px solid #111; }
.demo-status.yours { background: #111; color: #fff; }
.demo-status.goal { background: #fff; color: #111; }
.demo-status.broken { background: #fff; color: #111; border-style: dashed; }
#demo-controls { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
#demo-note { font-family: monospace; font-size: 0.85em; color: #333; text-align: center; margin-top: 10px; min-height: 2.4em; }
#demo-caption { font-size: 0.9em; color: #555; text-align: center; margin-top: 8px; }
.demo-switch { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }

.nav-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }

.finish-panel { background: #111; color: #fff; padding: 24px; text-align: center; }
.finish-panel h2, .finish-panel p { color: #fff; }
.finish-panel a { color: #fff; font-weight: bold; }

footer p { color: #444; }