/* Arcade BASIC playground: the page layout, then the themes. Each theme is a set
   of colour variables on <html data-theme="…">; the editor (editor.js) takes its
   colours from the same variables, so switching theme is one attribute. */

/* -- Themes ------------------------------------------------------------------ */

:root, [data-theme="midnight"] {
  color-scheme: dark;
  --ui-font: system-ui, sans-serif;
  --code-font: ui-monospace, Menlo, Consolas, monospace;
  --bg: #101114; --bar: #16181d; --bar-text: #e6e6e6; --panel: #181a1f; --menu: #1d2026;
  --text: #e6e6e6; --muted: #9aa0a6; --accent: #55ff55; --on-accent: #0b0c0e;
  --border: #2a2d34; --hover: #262a31; --danger: #ff6b6b; --warn: #ffcc66;
  --status: #16181d; --status-text: #9aa0a6; --glow: none;
  --ed-bg: #14161a; --ed-text: #e6e6e6; --ed-gutter: #14161a; --ed-gutter-text: #5c6370;
  --ed-line: #1b1e24; --ed-sel: #2c3a55; --ed-cursor: #55ff55; --ed-match: #2f3b2f;
  --ed-error-line: rgba(255, 90, 90, .18);
  --ed-paused-line: rgba(255, 204, 102, .16); --paused: #ffcc66; --bp: #e5484d;
  --syn-kw: #82aaff; --syn-fn: #4fd6be; --syn-str: #c3e88d; --syn-num: #ffc777;
  --syn-com: #6f7787; --syn-label: #8b93a3; --syn-op: #89ddff; --syn-var: #e6e6e6; --syn-punct: #a0a8b8;
  --syn-kw-weight: normal;
}

[data-theme="daylight"] {
  color-scheme: light;
  --bg: #eef0f3; --bar: #ffffff; --bar-text: #1f2328; --panel: #ffffff; --menu: #ffffff;
  --text: #1f2328; --muted: #57606a; --accent: #1a7f37; --on-accent: #ffffff;
  --border: #d0d7de; --hover: #eaeef2; --danger: #cf222e; --warn: #9a6700;
  --status: #f6f8fa; --status-text: #57606a; --glow: none;
  --ed-bg: #ffffff; --ed-text: #1f2328; --ed-gutter: #f6f8fa; --ed-gutter-text: #8c959f;
  --ed-line: #f3f6f9; --ed-sel: #cde4ff; --ed-cursor: #1f2328; --ed-match: #d6f0dc;
  --ed-error-line: #ffe3e0;
  --ed-paused-line: #fff3bf; --paused: #bf8700; --bp: #cf222e;
  --syn-kw: #0550ae; --syn-fn: #8250df; --syn-str: #116329; --syn-num: #953800;
  --syn-com: #6e7781; --syn-label: #8c959f; --syn-op: #cf222e; --syn-var: #1f2328; --syn-punct: #57606a;
  --syn-kw-weight: normal;
}

/* The MS-DOS QBasic editor: grey on blue, a grey menu bar and a cyan status line. */
[data-theme="qbasic"] {
  color-scheme: dark;
  --ui-font: var(--code-font);
  --bg: #0000aa; --bar: #aaaaaa; --bar-text: #000000; --panel: #000000; --menu: #aaaaaa;
  --text: #aaaaaa; --muted: #aaaaff; --accent: #ffffff; --on-accent: #0000aa;
  --border: #aaaaaa; --hover: #ffffff; --danger: #ff5555; --warn: #ffff55;
  --status: #00aaaa; --status-text: #000000; --glow: none;
  --ed-bg: #0000aa; --ed-text: #aaaaaa; --ed-gutter: #0000aa; --ed-gutter-text: #5555ff;
  --ed-line: #0000c4; --ed-sel: #00aaaa; --ed-cursor: #ffffff; --ed-match: #0000ff;
  --ed-error-line: #aa0000;
  --ed-paused-line: #00aaaa; --paused: #ffff55; --bp: #ff5555;
  --syn-kw: #ffffff; --syn-fn: #55ffff; --syn-str: #ffff55; --syn-num: #55ff55;
  --syn-com: #00aaaa; --syn-label: #ff55ff; --syn-op: #aaaaaa; --syn-var: #aaaaaa; --syn-punct: #aaaaaa;
  --syn-kw-weight: normal;
}

/* The Commodore 64: light blue on dark blue inside a light blue border. */
[data-theme="commodore"] {
  color-scheme: dark;
  --ui-font: var(--code-font);
  --bg: #7869c4; --bar: #352879; --bar-text: #c9c2ff; --panel: #40318d; --menu: #352879;
  --text: #c9c2ff; --muted: #ffffff; --accent: #ffffff; --on-accent: #40318d;
  --border: #6c5eb5; --hover: #50419f; --danger: #ff8a80; --warn: #edf171;
  --status: #352879; --status-text: #c9c2ff; --glow: none;
  --ed-bg: #40318d; --ed-text: #a99ff0; --ed-gutter: #40318d; --ed-gutter-text: #7869c4;
  --ed-line: #47389a; --ed-sel: #6c5eb5; --ed-cursor: #c9c2ff; --ed-match: #55479f;
  --ed-error-line: rgba(255, 110, 110, .3);
  --ed-paused-line: rgba(237, 241, 113, .22); --paused: #edf171; --bp: #ff8a80;
  --syn-kw: #ffffff; --syn-fn: #9ae29b; --syn-str: #edf171; --syn-num: #6abfc6;
  --syn-com: #8a7fd6; --syn-label: #e0a0a0; --syn-op: #a99ff0; --syn-var: #a99ff0; --syn-punct: #a99ff0;
  --syn-kw-weight: normal;
}

/* A green phosphor terminal. */
[data-theme="green"] {
  color-scheme: dark;
  --ui-font: var(--code-font);
  --bg: #040704; --bar: #081008; --bar-text: #33ff66; --panel: #060d06; --menu: #081008;
  --text: #33ff66; --muted: #22a845; --accent: #8dffae; --on-accent: #031a08;
  --border: #155c27; --hover: #0f2a14; --danger: #d4ff4d; --warn: #d4ff4d;
  --status: #081008; --status-text: #22a845; --glow: 0 0 3px rgba(51, 255, 102, .55);
  --ed-bg: #040704; --ed-text: #33ff66; --ed-gutter: #040704; --ed-gutter-text: #17702f;
  --ed-line: #0a160c; --ed-sel: rgba(51, 255, 102, .25); --ed-cursor: #8dffae; --ed-match: rgba(51, 255, 102, .14);
  --ed-error-line: rgba(212, 255, 77, .16);
  --ed-paused-line: rgba(141, 255, 174, .16); --paused: #d4ff4d; --bp: #d4ff4d;
  --syn-kw: #a6ffc1; --syn-fn: #66ff8f; --syn-str: #d0ffdc; --syn-num: #66ff8f;
  --syn-com: #1f8f3d; --syn-label: #26b34c; --syn-op: #33ff66; --syn-var: #33ff66; --syn-punct: #26b34c;
  --syn-kw-weight: bold;
}

/* An amber monochrome monitor. */
[data-theme="amber"] {
  color-scheme: dark;
  --ui-font: var(--code-font);
  --bg: #0a0700; --bar: #120c00; --bar-text: #ffb000; --panel: #0d0900; --menu: #120c00;
  --text: #ffb000; --muted: #b07800; --accent: #ffd27a; --on-accent: #1a1000;
  --border: #5c3d00; --hover: #2a1b00; --danger: #ffe680; --warn: #ffe680;
  --status: #120c00; --status-text: #b07800; --glow: 0 0 3px rgba(255, 176, 0, .5);
  --ed-bg: #0a0700; --ed-text: #ffb000; --ed-gutter: #0a0700; --ed-gutter-text: #7a5200;
  --ed-line: #161000; --ed-sel: rgba(255, 176, 0, .25); --ed-cursor: #ffd27a; --ed-match: rgba(255, 176, 0, .14);
  --ed-error-line: rgba(255, 230, 128, .16);
  --ed-paused-line: rgba(255, 210, 122, .18); --paused: #ffe680; --bp: #ffe680;
  --syn-kw: #ffd27a; --syn-fn: #ffc240; --syn-str: #ffe2a8; --syn-num: #ffc240;
  --syn-com: #8f6200; --syn-label: #b77a00; --syn-op: #ffb000; --syn-var: #ffb000; --syn-punct: #b77a00;
  --syn-kw-weight: bold;
}

/* -- Layout ------------------------------------------------------------------ */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 var(--ui-font);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input { font: inherit; color: inherit; }
kbd { font: 12px var(--code-font); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }

/* The toolbar */
header {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 12px;
  background: var(--bar); color: var(--bar-text); border-bottom: 1px solid var(--border);
}
header h1 { font-size: 15px; margin: 0 8px 0 0; letter-spacing: .5px; white-space: nowrap; }
header h1 span { color: var(--accent); }
[data-theme="qbasic"] header h1 span { color: #0000aa; }
.tool {
  background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 10px;
  cursor: pointer; color: var(--bar-text); white-space: nowrap;
}
.tool:hover:not(:disabled), .tool[aria-expanded="true"] { background: var(--hover); }
[data-theme="qbasic"] .tool:hover:not(:disabled), [data-theme="qbasic"] .tool[aria-expanded="true"] { background: #000000; color: #aaaaaa; }
.tool:disabled { opacity: .45; cursor: default; }
.tool.primary { border-color: var(--accent); color: var(--accent); }
[data-theme="qbasic"] .tool.primary { border-color: #000; color: #000; }
.tool.primary:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
header select {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
}
[data-theme="qbasic"] header select { background: #aaaaaa; color: #000; border-color: #000; border-radius: 0; }
header .sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
header .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
header label { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
#loading { color: var(--muted); }
[data-theme="qbasic"] #loading { color: #000; }

/* Menus (File, Help): a button and a list that drops down below it */
.menu { position: relative; }
.menu-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 230px; padding: 4px;
  background: var(--menu); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); display: none;
}
[data-theme="qbasic"] .menu-list { color: #000; border-radius: 0; box-shadow: 4px 4px 0 #000; }
.menu-list.open { display: block; }
.menu-list button {
  display: flex; width: 100%; justify-content: space-between; gap: 24px; padding: 6px 10px; border: 0; border-radius: 5px; white-space: nowrap;
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.menu-list button:hover, .menu-list button:focus-visible { background: var(--hover); outline: none; }
[data-theme="qbasic"] .menu-list button:hover, [data-theme="qbasic"] .menu-list button:focus-visible { background: #000; color: #aaaaaa; }
.menu-list button:disabled { opacity: .45; cursor: default; }
.menu-list .key { color: var(--muted); font-size: 12px; }
[data-theme="qbasic"] .menu-list .key { color: #555; }
.menu-list hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }

/* The views — Code, Output, Console — one at a time, chosen by the tabs above them */
#views {
  display: flex; align-items: stretch; gap: 2px; padding: 0 10px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
#views button {
  background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 6px 14px; font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}
#views button:hover { color: var(--text); background: var(--hover); }
#views button[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
#views .running { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
html.running #views .running { display: inline-block; }
#consoleBadge { font-size: 11px; font-weight: 600; }
#consoleBadge.errors { color: var(--danger); }
#consoleBadge.warnings { color: var(--warn); }
main { display: grid; min-height: 0; }
main > section { grid-area: 1 / 1; display: none; min-width: 0; min-height: 0; }
html[data-view="code"] #editorPane, html[data-view="output"] #runPane, html[data-view="console"] #consolePane { display: flex; }
#editorPane { flex-direction: column; background: var(--ed-bg); }
#runPane { flex-direction: column; align-items: center; gap: 8px; padding: 12px; overflow: hidden; outline: none; }

/* The tabs, one per open program */
#tabs {
  display: flex; align-items: stretch; overflow-x: auto; background: var(--bar); border-bottom: 1px solid var(--border);
  flex: none; scrollbar-width: thin;
}
.tab {
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-right: 1px solid var(--border);
  color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; font-size: 13px;
}
[data-theme="qbasic"] .tab { color: #000; }
.tab:hover { background: var(--hover); }
.tab.active { background: var(--ed-bg); color: var(--ed-text); box-shadow: inset 0 2px 0 var(--accent); }
[data-theme="qbasic"] .tab.active { box-shadow: inset 0 2px 0 #ffffff; }
.tab .mark { width: 8px; text-align: center; font-size: 10px; color: var(--accent); }
.tab .close {
  border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 4px; width: 20px; height: 20px;
  line-height: 18px; padding: 0; opacity: .6;
}
.tab .close:hover { opacity: 1; background: var(--hover); }
.tab.dirty .close:not(:hover)::before { content: "●"; font-size: 10px; }
.tab.dirty .close:not(:hover) span { display: none; }
#newTab { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 12px; font-size: 16px; }
[data-theme="qbasic"] #newTab { color: #000; }
#newTab:hover { background: var(--hover); color: var(--text); }

.tabRow { display: flex; align-items: stretch; background: var(--bar); border-bottom: 1px solid var(--border); flex: none; }
.tabRow #tabs { flex: 1; min-width: 0; border-bottom: 0; }
#outlineToggle, #variablesToggle { border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; padding: 0 12px; white-space: nowrap; font-size: 13px; }
#outlineToggle:hover, #outlineToggle[aria-pressed="true"], #variablesToggle:hover, #variablesToggle[aria-pressed="true"] { color: var(--text); background: var(--hover); }
[data-theme="qbasic"] #outlineToggle, [data-theme="qbasic"] #variablesToggle { color: #000; }
#editorBody { flex: 1; min-height: 0; display: flex; }
#editor { flex: 1; min-width: 0; min-height: 0; position: relative; }

/* The outline beside the editor, and Go to */
#outline { width: 220px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--bar); color: var(--bar-text); }
#outline[hidden] { display: none; }
.outlineHead { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--border); }
.outlineHead input { flex: 1; min-width: 0; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; font: 12px var(--ui-font); }
.outlineHead button { background: transparent; border: 1px solid var(--border); color: inherit; border-radius: 5px; cursor: pointer; padding: 0 6px; }
#outline .items { overflow: auto; flex: 1; padding: 4px 0; }
#outline .items p { color: var(--muted); font-size: 12px; margin: 6px 10px; }
.items .item {
  display: flex; gap: 6px; align-items: baseline; width: 100%; border: 0; background: transparent; color: inherit; text-align: left;
  padding: 2px 8px; cursor: pointer; font: 12px/1.5 var(--ui-font); white-space: nowrap;
}
.items .item span { overflow: hidden; text-overflow: ellipsis; }
.items .item i { font-style: normal; width: 12px; flex: none; text-align: center; color: var(--muted); font-family: var(--code-font); }
.items .item.level2 { padding-left: 20px; }
.items .item.section.level1 span { font-weight: 600; }
.items .item.sub i, .items .item.function i, .items .item.def i { color: var(--syn-fn); }
.items .item.picture i { color: var(--syn-str); }
.items .item:hover { background: var(--hover); }
.items .item.current, .items .item.chosen { background: var(--ed-sel); color: var(--ed-text); }
dialog.files { width: min(520px, calc(100vw - 32px)); }
dialog.export { width: min(520px, calc(100vw - 32px)); }
dialog.export .name { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
dialog.export .name input { flex: 1; }
dialog.export .icon { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
dialog.export .icon[hidden], dialog.export .icon .hint[hidden] { display: none; }
dialog.export .icon canvas {
  width: 48px; height: 48px; flex: none; border-radius: 6px;
  background: repeating-conic-gradient(var(--border) 0 25%, transparent 0 50%) 0 0 / 12px 12px;
}
dialog.export .icon label { display: flex; align-items: center; gap: 10px; }
dialog.export .icon select { max-width: 340px; }
dialog.export .icon .hint { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
dialog.export .kinds { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
dialog.export .kinds[hidden], dialog.export .after [hidden] { display: none; }
dialog.export .kind { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
dialog.export .kind:has(input:checked) { border-color: var(--accent); }
dialog.export .kind input { margin-top: 3px; }
dialog.export .kind b { display: block; }
dialog.export .kind small { color: var(--muted); font-size: 12px; }
dialog.export .status:empty { display: none; }
dialog.export .after p { margin: 6px 0; }
dialog.export .after .note { color: var(--muted); font-size: 12px; }
dialog.export code { font-family: var(--code-font); font-size: 12px; }
dialog.files .fileList { margin-bottom: 10px; }
dialog.files .fileList td { padding: 5px 8px 5px 0; vertical-align: middle; }
dialog.files .fileList .name { font-family: var(--code-font); word-break: break-all; white-space: normal; }
dialog.files .fileList .size { color: var(--muted); white-space: nowrap; }
dialog.files .fileList .actions { text-align: right; white-space: nowrap; }
dialog.files .fileList button {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px;
  margin-left: 6px; cursor: pointer;
}
dialog.files .fileList button.danger { border-color: var(--danger); color: var(--danger); }
dialog.files .buttons .spacer { flex: 1; }
dialog.files code { font-family: var(--code-font); font-size: 12px; }

dialog.goTo { width: min(520px, calc(100vw - 32px)); padding: 10px; position: fixed; top: 12vh; margin: 0 auto; }
dialog.goTo input { width: 100%; margin-bottom: 6px; }
dialog.goTo .items { max-height: 50vh; overflow: auto; }
@media (max-width: 900px) { #outline { width: 160px; } }
#editor .cm-editor { position: absolute; inset: 0; }
#editor .cm-editor.cm-focused { outline: none; }

/* The Output view: the program's screen once it draws (as large as fits; smaller when it
   prints too), what it prints, and the line it's asking for — or, before it runs, a hint */
#screen {
  width: min(100%, calc((100vh - 150px) * 5 / 3)); aspect-ratio: 5 / 3; background: #000;
  border: 1px solid var(--border); border-radius: 6px; display: block; outline: none; touch-action: none; flex: none;
}
html.drawn.printed #screen { width: min(100%, calc((100vh - 150px) * 0.65 * 5 / 3)); }
html:not(.drawn) #screen { display: none; }
#screen:focus { border-color: var(--accent); }
#hint { color: var(--muted); margin: auto; font-size: 14px; }
html.drawn #hint, html.printed #hint { display: none; }

/* A play link (#play=…): the program's screen, a bar, and nothing else. The screen shows
   once the program draws, so a program that only PRINTs is just its output. */
.playerBar, .playButton { display: none; }
html.player header > :not(h1):not(.playerBar) { display: none; }
html.player .playerBar { display: flex; flex: 1; gap: 8px; align-items: center; min-width: 0; flex-wrap: wrap; }
.playerBar .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playerBar #playerStatus { color: var(--muted); }
.playerBar .spacer { flex: 1; }
html.player footer, html.player #views, html.player #editorPane, html.player #consolePane, html.player #hint { display: none; }
html.player #runPane { display: flex; }
html.player #screen, html.player .playButton { width: min(100%, calc((100vh - 90px) * 5 / 3)); }
html.player:not(.started) .playButton {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 3; flex: none;
  background: #000; color: #fff; border: 1px solid var(--border); border-radius: 6px; font-size: 28px; cursor: pointer;
}
html.player .playButton:disabled { color: #888; cursor: default; }
html.player .playButton:not(:disabled):hover { border-color: var(--accent); }
#runPane:fullscreen { background: #000; justify-content: center; }
#runPane:fullscreen #screen { width: min(100%, calc((100vh - 20px) * 5 / 3)); border: 0; }
/* The debugger: the toolbar's controls and the Variables panel */
header .debug { display: flex; gap: 2px; }
#variables {
  width: 320px; flex: none; overflow: auto; background: var(--panel); color: var(--text);
  border-left: 1px solid var(--border); padding: 6px 8px; font: 13px/1.45 var(--code-font);
}
#variables .note { color: var(--muted); margin: 4px 2px; font-family: var(--ui-font); }
#variables .frame + .frame { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 4px; }
#variables summary { cursor: pointer; color: var(--muted); }
#variables .frame > summary { color: var(--text); font-weight: 600; }
#variables .frame > table { border-collapse: collapse; margin: 2px 0 2px 14px; }
#variables .frame > table td { padding: 1px 14px 1px 0; vertical-align: top; }
#variables .frame > table td:first-child { color: var(--syn-var); }
#variables .frame > table tr.changed td { color: var(--paused); font-weight: 600; }
#variables .unset { color: var(--muted); font-style: italic; }
#variables .elements { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 4px 0 4px 12px; max-height: 260px; overflow: auto; }
#variables .elements i { color: var(--muted); font-style: normal; }
#variables .elements span { white-space: nowrap; }
#variables table.grid { border-collapse: collapse; font-size: 12px; }
#variables table.grid td { padding: 0 4px; text-align: right; border: 1px solid var(--border); }
#variables table.grid tr:first-child td, #variables table.grid td:first-child { color: var(--muted); border-color: transparent; }
#output {
  margin: 0; width: 100%; min-height: 5em; flex: 1; overflow: auto; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
  font: 13px/1.4 var(--code-font); white-space: pre-wrap; text-shadow: var(--glow);
}
#output .error { color: var(--danger); }
#output:empty { display: none; }
#inputRow { display: none; gap: 6px; width: 100%; flex: none; }
#inputRow input {
  flex: 1; background: var(--panel); color: var(--text); border: 1px solid var(--accent); border-radius: 6px;
  padding: 5px 8px; font: 13px var(--code-font);
}
#inputRow button { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; }

/* The Console view: the program's problems, and what happened when it ran */
#consolePane { flex-direction: column; overflow: auto; padding: 4px 16px 16px; font-size: 13px; }
.consoleHead { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.consoleHead h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0; }
.consoleHead button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0; }
.consoleHead button:hover { color: var(--text); }
#problemList, #log { list-style: none; margin: 6px 0 0; padding: 0; font-family: var(--code-font); }
#problemList li, #log li { display: flex; gap: 10px; padding: 3px 6px; border-radius: 4px; align-items: baseline; }
#problemList li { cursor: pointer; }
#problemList li:hover, #log li.goes:hover { background: var(--hover); cursor: pointer; }
#problemList .none, #log .none { color: var(--muted); font-family: var(--ui-font); cursor: default; }
#problemList .none:hover { background: none; }
.sev { width: 1.2em; flex: none; text-align: center; }
.sev.error, #log .error { color: var(--danger); }
.sev.warning { color: var(--warn); }
.sev.info, #log time { color: var(--muted); }
#log time { flex: none; }
#problemList .where, #log .where { color: var(--accent); flex: none; }
#problemList .text, #log .text { white-space: pre-wrap; }

/* The status line */
footer {
  display: flex; gap: 16px; align-items: center; padding: 3px 12px; font-size: 12px; white-space: nowrap; overflow: hidden;
  background: var(--status); color: var(--status-text); border-top: 1px solid var(--border);
}
footer button { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; }
footer button:hover { text-decoration: underline; }
footer .errors { color: var(--danger); }
footer .warnings { color: var(--warn); }
[data-theme="qbasic"] footer .errors, [data-theme="qbasic"] footer .warnings { color: #000; font-weight: bold; }
#stats { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }

/* Dialogs */
dialog {
  background: var(--menu); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px 20px; max-width: min(520px, calc(100vw - 32px)); box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
}
[data-theme="qbasic"] dialog { color: #000; border-radius: 0; box-shadow: 6px 6px 0 #000; }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h2 { margin: 0 0 10px; font-size: 16px; }
dialog p { margin: 0 0 14px; color: var(--muted); }
[data-theme="qbasic"] dialog p { color: #000; }
dialog input[type="text"] {
  width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font: 14px var(--code-font); margin-bottom: 14px;
}
dialog .buttons { display: flex; justify-content: flex-end; gap: 8px; }
dialog .buttons button {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 14px; cursor: pointer;
}
dialog .buttons button.primary { border-color: var(--accent); color: var(--accent); }
dialog .buttons button.danger { border-color: var(--danger); color: var(--danger); }
dialog table { border-collapse: collapse; width: 100%; margin-bottom: 14px; }
dialog td { padding: 3px 8px 3px 0; vertical-align: top; }
dialog td:first-child { white-space: nowrap; }

/* The pixel editor */
dialog.picture { max-width: min(980px, calc(100vw - 32px)); }
.pictureBody { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.pictureCanvas canvas { display: block; cursor: crosshair; touch-action: none; border: 1px solid var(--border); image-rendering: pixelated; }
.pictureSide { display: flex; flex-direction: column; gap: 10px; min-width: 260px; max-width: 340px; }
.pictureTools { display: flex; flex-wrap: wrap; gap: 4px; }
.pictureTools button, .pictureInk button, dialog.picture .buttons button {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; cursor: pointer;
}
.pictureTools button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.pictureTools button:disabled, dialog.picture .buttons button:disabled { opacity: .4; cursor: default; }
.pictureColours { display: flex; flex-wrap: wrap; gap: 4px; }
.pictureColours .swatch {
  display: flex; align-items: center; gap: 5px; padding: 3px 7px 3px 3px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); cursor: pointer; font: 13px var(--code-font);
}
.pictureColours .swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pictureColours .chip { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(128, 128, 128, .5); }
.pictureColours .chip.clear { background: repeating-conic-gradient(#9a9a9a 0 25%, #d0d0d0 0 50%) 50% / 8px 8px; }
.pictureInk { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.pictureInk label { display: flex; align-items: center; gap: 6px; }
.pictureInk input[type="color"] { width: 34px; height: 24px; padding: 0; border: 1px solid var(--border); background: none; }
.pictureNote { margin: 0; font-size: 12px; }
.picturePreviews { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.picturePreviews figure { margin: 0; text-align: center; font-size: 11px; color: var(--muted); }
.picturePreviews canvas { display: block; image-rendering: pixelated; border: 1px solid var(--border); }
dialog.picture .buttons button.primary { border-color: var(--accent); color: var(--accent); }
dialog.picture .buttons { align-items: center; }
dialog.picture .buttons .spacer { flex: 1; }

/* Colours in the code, and the palette */
.swatchPicker { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
dialog.palette { max-width: min(640px, calc(100vw - 32px)); }
.paletteGrid { display: grid; grid-template-columns: repeat(16, 22px); grid-auto-rows: 22px; gap: 2px; margin-bottom: 12px; justify-content: center; }
.paletteGrid button { border: 1px solid rgba(128, 128, 128, .35); border-radius: 3px; padding: 0; cursor: pointer; }
.paletteGrid button.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.paletteChosen { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 13px var(--code-font); }
.paletteChosen #paletteChosen { width: 40px; height: 26px; border-radius: 5px; border: 1px solid var(--border); }
dialog .buttons .spacer { flex: 1; }

/* The tune editor */
dialog.tune { width: min(820px, calc(100vw - 32px)); max-width: none; }
#tuneText { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: 14px/1.4 var(--code-font); resize: vertical; }
.tuneError { color: var(--danger); min-height: 1.2em; margin: 4px 0 6px; font-size: 12px; }
#tuneRoll { display: block; width: 100%; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.tuneControls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.tuneControls .spacer { flex: 1; }
.tuneControls .muted { color: var(--muted); }
.tuneControls button, .tuneLengths button {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; cursor: pointer;
}
.tuneLengths { display: inline-flex; gap: 3px; }
.tuneLengths button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.tuneControls input[type="number"] { width: 64px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
.piano { position: relative; height: 92px; margin-top: 10px; user-select: none; }
.piano button { position: absolute; top: 0; border-radius: 0 0 5px 5px; cursor: pointer; padding: 0; font: 9px var(--ui-font); }
.piano .white { height: 92px; background: #f4f4f0; border: 1px solid #888; color: #666; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; }
.piano .black { height: 56px; background: #222; border: 1px solid #000; z-index: 1; }
.piano .white:active { background: var(--paused); }
.piano .black:active { background: #555; }
.tuneHelp { font-size: 12px; margin: 10px 0 14px; }

/* A file dragged over the page */
body.dropping::after {
  content: "Drop .bas files to open them"; position: fixed; inset: 12px; z-index: 50; display: grid; place-items: center;
  border: 3px dashed var(--accent); border-radius: 16px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 20px;
  pointer-events: none;
}

/* Phones and narrow windows */
[data-theme="qbasic"] #variables .frame > table tr.changed td { color: #ffff55; }
@media (max-width: 900px) {
  #variables { width: 220px; }
}