/* The inspector's ELBOW view (web/js/elbow-panel.js): x86 source next to the ARM code made of it.
   x86 in bright cyan, ARM in white, in the debugger's text palette */
.eb-cap .eb-state { color: var(--c-lblue); }
.eb-cap .eb-state.lit { color: var(--c-yellow); }
.win.eb { padding: 8px 6px 7px; box-sizing: border-box; width: 0; min-width: 100%; }  /* (its long lines must not widen the inspector) */
.eb-status { display: flex; align-items: center; gap: 8px; min-height: 16px; color: var(--c-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-status b { color: var(--c-lcyan); font-weight: 400; }
.eb-dim { color: var(--c-lblue); }
.eb-status > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eb-lamp { flex: none; width: 8px; height: 8px; background: var(--c-dgray); }
.eb-lamp.x { background: var(--c-yellow); }
.eb-lamp.h { background: var(--c-brown); }
.eb-lamp.i { background: var(--c-lcyan); }
.eb-lamp.n { background: var(--c-lgray); }

/* where the time went, last ~2 s */
.eb-bar { margin: 8px 0 0; }
.eb-bar-track { display: flex; height: 8px; overflow: hidden; background: var(--c-black); }
.eb-bar-track i { display: block; min-width: 2px; }
.eb-bar i.x, .eb-legend .x::before { background: var(--c-yellow); }
.eb-bar i.h, .eb-legend .h::before { background: var(--c-brown); }
.eb-bar i.i, .eb-legend .i::before { background: var(--c-lcyan); }
.eb-bar i.n, .eb-legend .n::before { background: var(--c-lgray); }
.eb-legend { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 8px; color: var(--c-lgray); }
.eb-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px; }
.eb-legend span.off { color: var(--c-lblue); }
.eb-legend span.off::before { opacity: .35; }

.eb-head { margin: 8px -6px 8px; padding: 7px 6px 0; border-top: 1px solid var(--c-lgray); color: var(--c-lgray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.eb-head b { color: var(--c-white); font-weight: 400; }

.eb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.eb-col { min-width: 0; }
.eb-vcap { margin: 0 0 4px; color: var(--c-white); white-space: nowrap; overflow: hidden; }
.eb-list { position: relative; height: 288px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--c-cyan) var(--c-blue); white-space: pre; }
.eb-list .ln { display: flex; gap: 8px; padding: 0 2px; }
.eb-list .ad { flex: none; color: var(--c-lblue); }
.eb-list .mn { flex: none; width: 5ch; overflow: hidden; }
.eb-list .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eb-list .tx em { font-style: normal; color: var(--c-lgreen); }

/* x86: the program's own code */
.eb-x86 .mn, .eb-x86 .tx { color: var(--c-lcyan); }
.eb-x86 .ln.eb-br .mn { color: var(--c-white); }
.eb-x86 .ln.follow { border-top: 1px dashed var(--c-lblue); margin-top: 2px; padding-top: 1px; }
.eb-x86 .ln.cur { background: var(--c-cyan); }
.eb-x86 .ln.cur .mn, .eb-x86 .ln.cur .tx, .eb-x86 .ln.cur .ad { color: var(--c-black); }

/* ARM: what ELBOW made of it; lines the PC was sampled on get warmer */
.eb-arm .mn, .eb-arm .tx { color: var(--c-white); }
.eb-arm .ln.lit .mn, .eb-arm .ln.lit .tx { color: var(--c-lblue); }
.eb-arm .ln.h1 { background: #1a10a0; }
.eb-arm .ln.h2 { background: #3a1a90; }
.eb-arm .ln.h3 { background: #5a2478; }
.eb-arm .ln.h4 { background: #7a2e60; }
.eb-arm .ln.cur { background: var(--c-cyan); }
.eb-arm .ln.cur .mn, .eb-arm .ln.cur .tx, .eb-arm .ln.cur .ad { color: var(--c-black); }
.eb-arm .ln.cur.call { background: var(--c-brown); }

.eb-note { white-space: normal; padding: 4px 2px; color: var(--c-lgray); font: 15px/1.45 var(--serif); }
.eb-note b { color: var(--c-white); font: 16px/1 var(--pc); }
.eb-foot { margin-top: 8px; color: var(--c-lblue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* phones: one column above the other */
@media (max-width: 480px) {
  .eb-cols { grid-template-columns: minmax(0, 1fr); }
  .eb-list { height: 192px; }
  .eb-status, .eb-head, .eb-foot { white-space: normal; }
}