/* terminal.css -- Terminal: the panel holds xterm.js; vendor/xterm.css does the rest */
.term-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.term-note { color: var(--text-dim, var(--text)); font: var(--ui-fs) var(--font-ui); padding: 4px 8px 0; }
.term-note:empty { display: none; }
.term-host { flex: 1; min-height: 0; padding: 10px 12px 10px 14px; background: var(--bg); }

/* the build errors above the screen (e4b.js fills it, slim.js adds the buttons): a strip, never inside the xterm text */
.term-problems { flex: 0 0 auto; max-height: 40%; overflow-y: auto; border-bottom: 1px solid var(--rule); font-size: var(--ui-fs); padding: 2px 0; }
.term-problems[hidden] { display: none; }
.term-problems .prob-row { align-items: baseline; }
.term-problems .prob-text { flex: 1 1 auto; min-width: 0; }
/* narrow strip (a phone-sized window, or a wide sidebar): the message gets a line of its own and the buttons wrap under it */
.term-problems { container-type: inline-size; }
@container (max-width: 560px) {
  .term-problems .prob-row { flex-wrap: wrap; }
  .term-problems .prob-text { flex-basis: 100%; white-space: normal; order: 3; }
  .term-problems .slim-prob-actions { margin-left: auto; flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .term-problems .slim-prob-btn { max-width: 100%; white-space: normal; }
}