/* ASMTutor ARM for the browser - styled after the original ASMTutor 1.0 (MFC) window */
:root {
  --face: #f0f0f0;
  --shadow: #a0a0a0;
  --dkshadow: #696969;
  --light: #ffffff;
  --workspace: #ababab;
  --grid: #000000;
  --hilite: #0078d7;
  --ui-font: "Segoe UI", Tahoma, "Microsoft Sans Serif", Arial, sans-serif;
  --dlg-font: "Microsoft Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--face); color: #000; overflow: hidden; }
body { font: 12px var(--ui-font); -webkit-user-select: none; user-select: none; }
input, select, textarea { -webkit-user-select: text; user-select: text; }
u { text-decoration: underline; }

#app { display: flex; flex-direction: column; height: 100vh; min-width: 320px; }

/* ---------- title bar ---------- */
#titlebar { height: 30px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 9px;
  background: #fff; border-bottom: 1px solid #e5e5e5; font-size: 12px; }
#titlebar img { width: 16px; height: 16px; image-rendering: pixelated; }

/* ---------- menus ---------- */
#menubar { height: 20px; flex: none; display: flex; background: #fff; position: relative; z-index: 50; }
.menu { position: relative; }
.mlabel { display: block; padding: 1px 7px 2px; line-height: 17px; cursor: default; }
.menu.open > .mlabel, .menu:not(.open) > .mlabel:hover { background: #cce8ff; }
#menubar:not(.alt) .mlabel u { text-decoration: none; }
.dropdown { display: none; position: absolute; left: 0; top: 20px; min-width: 190px; background: #f2f2f2;
  border: 1px solid #ccc; box-shadow: 2px 2px 3px rgba(0,0,0,.25); padding: 2px; z-index: 60; }
.menu.open > .dropdown { display: block; }
.subdrop { left: 100%; top: -3px; }
.mi.sub:hover > .subdrop, .mi.sub.open > .subdrop { display: block; }
.mi { display: flex; align-items: center; height: 22px; padding: 0 20px 0 30px; position: relative; white-space: nowrap; cursor: default; }
.mi .mt { flex: 1; padding-right: 28px; }
.mi .mk { min-width: 40px; }
.mi:hover, .mi.hot { background: #91c9f7; }
.mi.disabled { color: #6d6d6d; }
.mi.disabled:hover { background: #e6e6e6; }
.mi.sub::after { content: ""; position: absolute; right: 8px; top: 7px; border: 4px solid transparent; border-left: 5px solid #000; }
.mi .ico { position: absolute; left: 5px; top: 3px; width: 18px; height: 17px; padding: 1px; border: 1px solid transparent; }
.mi .ico i { display: block; width: 16px; height: 15px; background: url(res/toolbar.png) no-repeat; }
.mi.checked .ico { border-color: #3399ff; background: #cce8ff; }
.mi.disabled .ico i { filter: grayscale(1) opacity(.45); }
.mi.check::before { content: "\2713"; position: absolute; left: 10px; top: 3px; font-size: 13px; }
.sep { height: 1px; background: #ccc; margin: 3px 2px 3px 30px; }
.popup { position: fixed; background: #f2f2f2; border: 1px solid #ccc; box-shadow: 2px 2px 3px rgba(0,0,0,.25); padding: 2px; z-index: 300; min-width: 170px; }

/* ---------- toolbar ---------- */
#toolbar { flex: none; display: flex; align-items: center; height: 28px; padding: 1px 2px 2px; background: var(--face);
  border-top: 1px solid #fff; border-bottom: 1px solid var(--shadow); }
#toolbar.text { height: 42px; }
.grip { width: 3px; height: 20px; margin: 0 3px 0 1px; border-left: 1px solid #fff; border-right: 1px solid var(--shadow); }
.tbsep { width: 2px; height: 20px; margin: 0 4px; border-left: 1px solid var(--shadow); border-right: 1px solid #fff; }
.tb { width: 23px; height: 22px; padding: 0; margin: 0; border: 1px solid transparent; background: transparent;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font: 11px var(--dlg-font); color: #000; }
.tb i { display: block; width: 16px; height: 15px; background: url(res/toolbar.png) no-repeat; flex: none; }
#toolbar.text .tb { width: auto; min-width: 50px; height: 38px; padding: 1px 3px; }
.tb span { display: none; margin-top: 2px; white-space: nowrap; }
#toolbar.text .tb span { display: block; }
.tb:hover:not(:disabled) { border-color: #fff var(--shadow) var(--shadow) #fff; }
.tb:active:not(:disabled), .tb.checked { border-color: var(--shadow) #fff #fff var(--shadow); }
.tb.checked { background: repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; }
.tb:disabled i { filter: grayscale(1) opacity(.4) drop-shadow(1px 1px 0 #fff); }
.tb:disabled span { color: var(--shadow); }

/* ---------- run bar (registers) ---------- */
#runbar { flex: none; position: relative; height: 90px; background: var(--face); font: 13px var(--mono);
  border-bottom: 1px solid var(--shadow); }
#runbar[hidden] { display: none; }
#runbar .rl, #regs .rl { position: absolute; white-space: nowrap; line-height: 16px; }
#speed { position: absolute; width: 236px; height: 18px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; }
#speed::-webkit-slider-runnable-track { height: 4px; background: #e7eaea; border: 1px solid #d6d6d6; border-radius: 0; }
#speed::-moz-range-track { height: 4px; background: #e7eaea; border: 1px solid #d6d6d6; }
#speed::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 18px; margin-top: -8px; background: #007ad9;
  border: none; clip-path: polygon(0 0,100% 0,100% 70%,50% 100%,0 70%); }
#speed::-moz-range-thumb { width: 11px; height: 18px; background: #007ad9; border: none; border-radius: 0; }
#regs .rv { position: absolute; width: 100px; height: 20px; padding: 1px 3px; background: #fff; white-space: nowrap; overflow: hidden;
  border: 1px solid; border-color: var(--shadow) #fff #fff var(--shadow); box-shadow: inset 1px 1px 0 #e3e3e3; line-height: 16px; }

/* ---------- program grid ---------- */
#view { flex: 1 1 auto; min-height: 60px; overflow: auto; background: var(--workspace); position: relative; }
#grid { border-collapse: collapse; table-layout: fixed; background: #fff; font: 13px var(--mono); cursor: default; }
#grid th, #grid td { height: 19px; padding: 0; border: 1px solid #000; overflow: hidden; white-space: nowrap; line-height: 17px; }
#grid thead th { position: sticky; top: 0; z-index: 2; background: var(--face); font-weight: normal; text-align: left; padding: 0 3px;
  border-color: #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--shadow); text-overflow: ellipsis; }
#grid thead th.cur { font-weight: bold; }
#grid td.b { background: var(--face); text-align: center; vertical-align: middle; }
#grid td.b img { display: block; margin: 0 auto; width: 18px; height: 17px; }
#grid td.a { background: var(--face); padding: 0 4px 0 18px; }
#grid tr.focus td.a { font-weight: bold; }
#grid td.a.err { background: #ff3b3b; }
#grid td.a.pc { background: #22ee22; }
#grid td.a.sp { background: #ffff00; }
#grid tr.sel td { background: #0078d7 !important; color: #fff; }
#grid td.c input { width: 100%; height: 17px; border: 0; margin: 0; padding: 0 3px; font: 13px var(--mono); background: transparent; color: #000; outline: none; }
#grid td.c input:focus { box-shadow: inset 0 0 0 2px #000; }
#grid td.c input[readonly] { cursor: default; }
#grid.run td.c input:focus { box-shadow: inset 0 0 0 1px #000; }
#grid col.cb { width: 22px; } #grid col.ca { width: 70px; } #grid col.ci { width: 44px; }
#grid col.co { width: 220px; } #grid col.cm { width: 404px; } #grid col.cl { width: 84px; }
#grid col.cw { width: 96px; } #grid.bin col.cw { width: 270px; }

/* ---------- output & status ---------- */
#splitter { flex: none; height: 5px; background: var(--face); cursor: ns-resize; border-top: 1px solid #fff; border-bottom: 1px solid var(--shadow); }
#output { flex: none; height: 200px; overflow: auto; background: #fff; padding: 2px 4px; font: 11px var(--dlg-font); white-space: pre-wrap;
  border: 1px solid; border-color: var(--shadow) #fff #fff var(--shadow); -webkit-user-select: text; user-select: text; }
#statusbar { flex: none; height: 22px; display: flex; align-items: center; gap: 2px; padding: 2px 3px; background: var(--face); font: 12px var(--ui-font); }
#statusbar[hidden] { display: none; }
#status { flex: 1; white-space: nowrap; overflow: hidden; }
#statusbar .ind { width: 36px; height: 18px; border: 1px solid; border-color: var(--shadow) #fff #fff var(--shadow); text-align: center; line-height: 16px; }

/* ---------- windows & dialogs ---------- */
.win { position: fixed; z-index: 100; background: var(--face); border: 1px solid #7a7a7a; box-shadow: 0 6px 22px rgba(0,0,0,.28);
  font: 11px var(--dlg-font); }
.win[hidden] { display: none; }
.win.modal { z-index: 210; }
.win .cap { height: 30px; display: flex; align-items: center; justify-content: space-between; padding-left: 10px; background: #fff;
  font: 12px var(--ui-font); cursor: default; }
.win.inactive .cap { color: #888; }
.win .x { width: 44px; height: 29px; border: 0; background: transparent; font-size: 13px; color: #000; }
.win .x:hover { background: #e81123; color: #fff; }
.win .body { position: relative; }
.win .body > * { position: absolute; }
.btn { font: 11px var(--dlg-font); color: #000; background: #e1e1e1; border: 1px solid #adadad; padding: 0 6px; }
.btn:hover:not(:disabled) { background: #e5f1fb; border-color: #0078d7; }
.btn:active:not(:disabled) { background: #cce4f7; border-color: #005499; }
.btn:focus-visible, .btn.default { outline: none; border: 1px solid #0078d7; box-shadow: inset 0 0 0 1px #0078d7; }
.btn:disabled { color: #a0a0a0; background: #ccc; border-color: #bfbfbf; }
.edit { font: 11px var(--dlg-font); border: 1px solid #7a7a7a; background: #fff; padding: 1px 3px; outline: none; }
.edit:focus { border-color: #0078d7; }
.lbl { white-space: nowrap; }
.lbl.note { color: #555; }
.center { text-align: center; line-height: 14px; white-space: pre-line; }
.tabs { display: flex; z-index: 2; }
.tab { padding: 2px 8px 3px; border: 1px solid #adadad; border-bottom: none; background: var(--face); margin-right: -1px; cursor: default; position: relative; top: 2px; }
.tab.active { background: #fff; top: 0; padding-bottom: 6px; z-index: 3; }
.tabpage { border: 1px solid #adadad; background: #fff; }
.tabpage > * { position: absolute; }
.tabpage[hidden] { display: none; }
.focusbox { border: 1px dotted #000; padding: 0 1px; }
#opt-trace { vertical-align: middle; margin: 0 0 0 10px; }

#mappeddisplay { background: #000; align-items: center; justify-content: center; border: 1px solid; border-color: var(--shadow) #fff #fff var(--shadow); display: flex; padding: 1px; }
#mappeddisplay span { flex: none; width: 23px; height: 35px; background: url(res/glyphs.png) no-repeat; background-size: 920px 35px; image-rendering: pixelated; }
#keypanel { background: #808080; }
#keys button { position: absolute; padding: 0; font: 11px var(--dlg-font); background: #e1e1e1; border: 1px solid #adadad; }
#keys button:hover { background: #e5f1fb; border-color: #0078d7; }
#keys button:active { background: #cce4f7; }

.msgbody { background: #fff; min-width: 300px; max-width: 520px; }
.msgrow { display: flex; gap: 14px; align-items: flex-start; padding: 22px 26px 22px 18px; font: 12px var(--ui-font); }
#msg-text { white-space: pre-wrap; line-height: 16px; padding-top: 6px; }
.msgicon { width: 32px; height: 32px; flex: none; }
.msgicon.info { background: radial-gradient(circle at 40% 35%, #4a90e2, #0b5cb8 70%); border-radius: 50%; position: relative; }
.msgicon.info::after { content: "i"; position: absolute; inset: 0; color: #fff; font: bold 20px Georgia, serif; text-align: center; line-height: 32px; }
.msgicon.warn { background: linear-gradient(#ffd54a, #f2b705); clip-path: polygon(50% 3%, 98% 95%, 2% 95%); position: relative; }
.msgicon.warn::after { content: "!"; position: absolute; inset: 0; color: #000; font: bold 18px Arial; text-align: center; line-height: 38px; }
.msgicon.ask { background: radial-gradient(circle at 40% 35%, #4a90e2, #0b5cb8 70%); border-radius: 50%; position: relative; }
.msgicon.ask::after { content: "?"; position: absolute; inset: 0; color: #fff; font: bold 20px Arial; text-align: center; line-height: 32px; }
.msgbuttons { background: var(--face); padding: 11px 12px; display: flex; justify-content: flex-end; gap: 8px; }
.msgbuttons .btn { min-width: 75px; height: 23px; }

#open-list, #help-tree { background: #fff; border: 1px solid #7a7a7a; overflow: auto; padding: 2px; }
#open-list { display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; }
.fitem { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 3px; margin-right: 16px; white-space: nowrap; cursor: default; }
.fitem.sel { background: #0078d7; color: #fff; }
.fitem .fi { width: 16px; height: 14px; flex: none; }
.fi.folder { background: linear-gradient(#ffe48a, #f7c948); border: 1px solid #c9a227; border-radius: 1px 3px 1px 1px; }
.fi.file { width: 12px; background: #fff; border: 1px solid #555; box-shadow: inset 0 3px 0 #2050a0; }
.hitem { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 3px; white-space: nowrap; cursor: default; }
.hitem.sel span { background: #0078d7; color: #fff; }
.hitem.page { padding-left: 22px; }
.hi { width: 16px; height: 14px; flex: none; }
.hi.book { background: linear-gradient(90deg, #7a1f1f 0 3px, #b33 3px); border: 1px solid #511; }
.hi.book.open { background: linear-gradient(90deg, #b33 0 7px, #fff 7px 8px, #b33 8px); }
.hi.pg { width: 12px; background: #fff; border: 1px solid #555; position: relative; }
.hi.pg::after { content: "?"; position: absolute; inset: 0; font: bold 9px Arial; color: #00f; text-align: center; line-height: 12px; }

.win.sizable { display: flex; flex-direction: column; resize: both; overflow: hidden; min-width: 300px; min-height: 200px; }
.win.sizable[hidden] { display: none; }
.helpbar { flex: none; display: flex; gap: 4px; padding: 4px; background: var(--face); border-bottom: 1px solid var(--shadow); }
.helpbar .hb { height: 23px; min-width: 70px; }
.helptopic { flex: 1; overflow: auto; background: #fff; padding: 10px 14px; font: 13px Arial, Helvetica, sans-serif; line-height: 1.35;
  -webkit-user-select: text; user-select: text; }
.helptopic h1 { font: bold 16px Arial; color: #0000c0; margin: 0 0 8px; }
.helptopic p { margin: 0; min-height: 0; }
.helptopic p.blank { height: .7em; }
.helptopic p.c { text-align: center; }
.helptopic .h { color: #0000ff; }
.helptopic a { color: #008000; text-decoration: underline; cursor: pointer; }
.helptopic .htab { display: inline-block; width: 2.2em; }
.helptopic img { max-width: 100%; }
.helptopic table.ht { border-collapse: collapse; margin: 6px 0; font-size: 12px; }
.helptopic table.ht th, .helptopic table.ht td { border: 1px solid #888; padding: 3px 6px; vertical-align: top; text-align: left; }
.helptopic table.ht th { background: #e8e8e8; }
.helptopic table.ht .htab { width: 1em; }

#tooltip { position: fixed; z-index: 400; background: #fff; border: 1px solid #767676; padding: 2px 6px; font: 12px var(--ui-font);
  box-shadow: 1px 1px 2px rgba(0,0,0,.25); pointer-events: none; white-space: nowrap; }
#tooltip[hidden] { display: none; }
#modal-shade { position: fixed; inset: 0; z-index: 200; background: transparent; }
#modal-shade[hidden] { display: none; }

#print-area { display: none; }
@media print {
  body { overflow: visible; background: #fff; }
  #app, .win, #tooltip, #modal-shade, .popup { display: none !important; }
  #print-area { display: block; font: 10pt "Courier New", monospace; }
  #print-area h2 { font: bold 12pt Arial; margin: 0 0 8px; }
  #print-area table { border-collapse: collapse; width: 100%; }
  #print-area td, #print-area th { border: 1px solid #000; padding: 1px 4px; text-align: left; white-space: pre; }
}
@media (max-width: 760px) {
  #output { height: 120px; }
}
.helptopic pre { font: 13px "Courier New", Courier, monospace; background: #f4f4f4; border: 1px solid #ddd; padding: 4px 8px; margin: 6px 0; }