/* The BS-68 Duo page. It uses the tokens of ../editor/style.css and follows ../computer/computer.css. */
body { grid-template-columns: 340px 1fr; grid-template-rows: auto 1fr; }
#top .sep { width: 12px; }
#top label { display: inline-flex; gap: 4px; align-items: center; }
#top input[type=range] { width: 80px; padding: 0; }
a.btnlink { display: inline-block; padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); text-decoration: none; background: var(--panel); }
a.btnlink:hover { border-color: var(--accent); }
#btn-sound.on { background: var(--accent); color: #fff; border-color: var(--accent); }

#panel { border-right: 1px solid var(--line); }
#panel section { margin-bottom: 10px; }
.leds, .switches { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; margin: 6px 0; }
.leds.small { grid-template-columns: repeat(8, 1fr); width: 50%; margin-left: 50%; }
.leds span { display: block; height: 14px; border-radius: 50%; background: var(--led-off); border: 1px solid var(--stroke); position: relative; }
.leds span.on { background: var(--led-on); box-shadow: 0 0 6px var(--led-on); }
.leds span::after, .switches button::after { content: attr(data-n); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--muted); }
.leds { margin-bottom: 14px; }
.switches button { position: relative; height: 28px; padding: 0; background: var(--v0); border-color: var(--stroke); }
.switches button.on { background: var(--v1); }
.switches button::before { content: ''; position: absolute; left: 2px; right: 2px; height: 9px; background: #fff; border-radius: 2px; bottom: 3px; transition: bottom .1s; }
.switches button.on::before { bottom: 14px; }
.switches { margin-bottom: 16px; }
#btn-nmi.held { background: var(--accent); color: #fff; }

.regs { font-size: 11.5px; }
.regs table { width: 100%; border-collapse: collapse; }
.regs td { padding: 0 3px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.regs td.n { color: var(--muted); width: 28px; }
.regs td.chg { color: var(--accent); font-weight: 600; }
.regs .flags { display: flex; gap: 4px; margin: 4px 0; flex-wrap: wrap; }
.regs .flags span { padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.regs .flags span.on { color: #fff; background: var(--accent); border-color: var(--accent); }
ol.code { list-style: none; margin: 4px 0 0; padding: 0; font-size: 11.5px; }
ol.code li { display: grid; grid-template-columns: 54px 1fr; gap: 6px; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ol.code li.pc { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
ol.code li .lbl { color: var(--accent); }
ol.code li .a { color: var(--muted); }
#fpu-regs { font-size: 11.5px; }
#fpu-regs div { display: grid; grid-template-columns: 34px 1fr; }
#fpu-regs b { font-weight: 400; color: var(--muted); }

#machine { position: relative; overflow: auto; padding: 10px; background: var(--bg); }
#screenwrap { max-width: 840px; margin: 0 auto 10px; }
#screen { display: block; width: 100%; aspect-ratio: 4 / 3; image-rendering: pixelated; background: #000; border: 2px solid var(--stroke); border-radius: 6px; outline: none; }
#screen:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
#cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; max-width: 1100px; margin: 0 auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 8px; font-size: 12px; }
.card.wide { grid-column: 1 / -1; }
.card h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 4px; }
.bar { display: grid; grid-template-columns: 70px 1fr 48px; gap: 6px; align-items: center; margin: 2px 0; }
.bar i { display: block; height: 8px; background: color-mix(in srgb, var(--line) 60%, transparent); border-radius: 4px; position: relative; overflow: hidden; }
.bar i b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.bar.wait i b { background: var(--warn); }
.bar span:last-child { text-align: right; color: var(--muted); }
.kv2 { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; }
.kv2 b { font-weight: 400; color: var(--muted); }
.ymregs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px 4px; margin: 4px 0; }
.ymregs span { display: block; }
.ymregs small { color: var(--muted); }
.drive { display: grid; grid-template-columns: 52px 1fr auto; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--line); }
.drive:last-child { border-bottom: 0; }
.drive .act { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--led-off); margin-right: 4px; }
.drive .act.on { background: var(--led-on); }

/* Workbench: a panel that floats over the right side. It does not change the layout. */
#workbench { position: fixed; top: 44px; right: 8px; bottom: 8px; width: min(780px, calc(100vw - 360px)); z-index: 5; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px rgb(0 0 0 / .35); padding: 8px 10px; gap: 6px; }
#workbench[hidden] { display: none; }
#workbench header { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#workbench .ed { flex: 1; min-height: 120px; display: grid; grid-template-columns: auto 1fr; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg); }
#workbench .gutter { margin: 0; padding: 6px 6px 6px 8px; text-align: right; color: var(--muted); font: 12px/18px ui-monospace, Consolas, monospace; overflow: hidden; user-select: none; background: var(--panel); border-right: 1px solid var(--line); min-width: 40px; }
#workbench .gutter .bad { color: #fff; background: var(--err); }
#workbench textarea { border: 0; resize: none; padding: 6px 8px; font: 12px/18px ui-monospace, Consolas, monospace; background: var(--bg); color: var(--ink); white-space: pre; overflow: auto; tab-size: 8; outline: none; }
#workbench .out { max-height: 34%; overflow: auto; border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font-size: 12px; }
#workbench .out pre { margin: 0; font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre; }
#workbench .out li[data-line] { cursor: pointer; color: var(--err); }
#workbench .tabs { display: flex; gap: 2px; }
#workbench .tabs button.active { background: var(--bg); font-weight: 600; }
#workbench input[data-wb=org], #workbench input[data-wb=arg] { width: 76px; font-family: ui-monospace, Consolas, monospace; }

#toast { bottom: 24px; }

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; overflow: auto; height: auto; }
  #workbench { left: 8px; width: auto; }
}

/* ---------- text font select ---------- */
.fontsel { display: flex; gap: 4px; align-items: center; justify-content: flex-end; margin-top: 4px; }

/* ---------- the debugger (debug68.mjs) ---------- */
#debug { max-width: 1100px; margin: 0 auto 10px; }
.dbg-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.dbg-head h3 { margin: 0 6px 0 0 !important; }
.dbg-head .spacer { flex: 1; }
.dbg-tabs { display: inline-flex; gap: 2px; }
.dbg-tabs button.on, #ch-sel button.on, #sc-follow.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dbg-msg { background: color-mix(in srgb, var(--warn) 18%, var(--panel)); border: 1px solid var(--warn); border-radius: 4px; padding: 4px 8px; margin-bottom: 6px; }
.dbg-pane { display: none; }
.dbg-pane.on { display: block; }
.dbg-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.dbg-board { display: grid; grid-template-columns: 1fr 300px; gap: 8px; }
.dbg-svgwrap { background: #0b1410; border-radius: 6px; overflow: hidden; }
#dbg-svg { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 780; touch-action: none; cursor: grab; user-select: none; }
#dbg-insp { font-size: 12px; max-height: 560px; overflow: auto; }
#dbg-insp h4 { margin: 2px 0 4px; font-size: 13px; }
#dbg-insp .sw, .sw { display: inline-block; width: 14px; height: 5px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
#dbg-insp button { padding: 1px 6px; font-size: 11.5px; margin: 1px 0; }
.dbg-tab { border-collapse: collapse; width: 100%; font-size: 11px; }
.dbg-tab th { text-align: left; color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--line); padding: 1px 4px; }
.dbg-tab td { border-bottom: 1px solid var(--line); padding: 1px 4px; white-space: nowrap; }
#dbg-svg .trace { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity .15s; }
#dbg-svg .trace.live { stroke-dasharray: 7 5; animation: dbgflow .5s linear infinite; }
#dbg-svg .trace.sel { stroke: #fde68a !important; opacity: 1 !important; }
#dbg-svg .hit { fill: none; stroke: transparent; stroke-width: 10; cursor: pointer; }
#dbg-svg .chip { cursor: pointer; }
#dbg-svg .chip:hover .body { stroke: #ffd54a; }
#dbg-svg .jn { opacity: .5; }
@keyframes dbgflow { to { stroke-dashoffset: -12; } }
#dbg-tip { position: fixed; pointer-events: none; background: rgba(15,20,18,.95); color: #e5e7eb; border: 1px solid #3b4a42; padding: 4px 8px; border-radius: 4px; font-size: 12px; display: none; z-index: 50; max-width: 290px; }
#sc-cv { display: block; width: 100%; border-radius: 6px; cursor: crosshair; touch-action: none; }
.dbg-read { font-size: 11.5px; min-height: 34px; padding: 4px 2px; }
#mm-grid { font-size: 12px; outline: none; user-select: none; }
#mm-grid:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 4px; }
.mm-hd, .mm-row { display: grid; grid-template-columns: 64px repeat(16, 24px) 1fr; gap: 0 2px; }
.mm-hd { color: var(--muted); border-bottom: 1px solid var(--line); }
.mm-row .ad { color: var(--muted); }
.mm-row span[data-a] { cursor: pointer; text-align: center; border-radius: 3px; }
.mm-row span.sel { background: var(--accent); color: #fff; }
.mm-row span.new { color: #f97316; font-weight: 700; }
.mm-row span.io { color: var(--muted); opacity: .6; }
.mm-row span.ro { opacity: .85; }
.mm-row .asc { white-space: pre; padding-left: 8px; color: var(--muted); }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 3px 10px; }
.ch-grid label { display: grid; grid-template-columns: 1fr 104px; gap: 4px; align-items: center; font-size: 11.5px; }
.ch-grid input { padding: 1px 4px; font-size: 11.5px; width: 104px; }
.ch-grid input[readonly] { opacity: .6; }
.ch-pal { display: flex; flex-wrap: wrap; gap: 4px; }
.ch-pal label { display: inline-flex; flex-direction: column; align-items: center; font-size: 10px; }
.ch-pal input { width: 34px; height: 24px; padding: 0; }
ol.code li { cursor: pointer; }
ol.code li.bp .a { color: #fff; background: #dc2626; border-radius: 3px; padding: 0 2px; }
@media (max-width: 1250px) { .dbg-board { grid-template-columns: 1fr; } #dbg-insp { max-height: none; } }