/* Microsoft's 6502 BASIC's page (web/microsoft-basic/page.js): the screen at the page's width, its dots
   kept square; the terminal's paper and ink, light or dark with the page */
#msbasic { --ms-paper: #f6f1e3; --ms-ink: #2a2622; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #msbasic { --ms-paper: #1d1b17; --ms-ink: #e9e2cf; } }
:root[data-theme="dark"] #msbasic { --ms-paper: #1d1b17; --ms-ink: #e9e2cf; }
#msbasic .ms-screen { position: relative; }
#msbasic canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 8px; border: 5px solid #000; box-sizing: border-box; outline: none; }
#msbasic canvas:focus-visible { border-color: #b8892b; }
#msbasic .ms-keys { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; }
#msbasic .ms-builds { display: flex; flex-wrap: wrap; gap: 8px; }
#msbasic .ms-builds button { font: inherit; padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; opacity: 0.7; }
#msbasic .ms-builds button[aria-pressed="true"] { opacity: 1; font-weight: 600; }
#msbasic .ms-help { font-size: 15px; }
#msbasic .ms-testing { min-height: 1.4em; margin: 6px 0 0; font-size: 14px; font-style: italic; opacity: 0.75; }
/* the screen and, beside it on a wide page, the 6502 as BASIC runs it (chip.js) */
#msbasic .ms-machine { display: grid; gap: 16px; align-items: stretch; }
#msbasic .ms-left { display: grid; gap: 12px; align-content: start; }
@media (min-width: 900px) { #msbasic .ms-machine { grid-template-columns: minmax(0, 1fr) 240px; } }
#msbasic .ms-chip { margin: 0; }
#msbasic .ms-chip svg { display: block; width: 100%; height: auto; font: 11px var(--sans, system-ui, sans-serif); }
#msbasic .ms-chip .part rect { fill: color-mix(in srgb, var(--gold, #b8892b) calc(var(--lit, 0) * 70%), transparent); stroke: var(--line, #ccc); transition: fill 80ms; }
#msbasic .ms-chip .decoder rect { fill: none; }
#msbasic .ms-chip .label { fill: var(--muted, #666); }
#msbasic .ms-chip .value { fill: var(--ink, #222); font: 600 18px ui-monospace, Menlo, monospace; }
#msbasic .ms-chip .value.op { font-size: 13px; }
#msbasic .ms-chip .flag circle, #msbasic .ms-chip .bit { fill: none; stroke: var(--muted, #666); }
#msbasic .ms-chip .flag.on circle, #msbasic .ms-chip .bit.on { fill: var(--gold, #b8892b); stroke: var(--gold, #b8892b); }
#msbasic .ms-chip .flag text { fill: var(--ink, #222); font: 600 10px ui-monospace, Menlo, monospace; }
#msbasic .ms-chip .flag.on text { fill: #fff; }
#msbasic .ms-chip figcaption { font-size: 13px; color: var(--muted, #666); margin-top: 6px; }
#msbasic .ms-controls button:disabled { opacity: 0.35; cursor: default; }
#msbasic .ms-controls button { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; margin: 2px 2px 0 0; }
/* three bounded areas: the screen, the strip under it (what this machine is, its buttons, the
   PDP-10's DDT), and the 6502 */
#msbasic .ms-card { border: 1px solid var(--line, #ccc); border-radius: 10px; background: var(--surface, #fff); padding: 10px; box-sizing: border-box; }
#msbasic .ms-screen.ms-card { padding: 8px; background: #000; border-color: #000; }
#msbasic .ms-screen canvas { border: 0; border-radius: 4px; }
#msbasic .ms-screen:focus-within { outline: 2px solid #b8892b; outline-offset: 2px; }
#msbasic .ms-strip { display: grid; gap: 16px; }
#msbasic .ms-strip.with-ddt { grid-template-columns: auto minmax(0, 1fr); }
#msbasic .ms-strip .ms-ddt { margin: 0; min-width: 24ch; height: calc(12 * 1.45em); font: 12px/1.45 ui-monospace, Menlo, monospace; white-space: pre; overflow: hidden; color: var(--ink, #222); }
#msbasic .ms-strip h3 { margin: 0 0 4px; font-size: 15px; }
#msbasic .ms-strip p { margin: 0 0 8px; }
#msbasic .ms-strip .ms-help, #msbasic .ms-strip .ms-ddt-state { font-size: 14px; }
#msbasic .ms-strip .ms-testing { margin: 0; min-height: 0; }
#msbasic .ms-strip .ms-testing:empty { display: none; }
#msbasic .ms-chip { margin: 0; }
#msbasic .ms-chip figcaption { margin-top: 8px; }

/* a program as BASIC keeps it (page.js, ./program.js): its lines typed, a button */
#ms-program textarea { font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); max-width: 100%; }
#ms-program .ms-show { font: inherit; padding: 6px 14px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; font-weight: 600; }