/* simonyou.dev/irb — the terminal takes the whole middle row of the frame */
@media (max-width: 959px) {
  body { height: 100dvh; overflow: hidden; display: grid; }
  .top { position: static; }
  .status { flex-wrap: nowrap; white-space: nowrap; }
}
.repl {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 0.85vw, 0.96rem);
  line-height: 1.6;
  cursor: text;
}
.repl-bar {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 1.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.82em;
  cursor: default;
}
.repl-hint kbd { padding: 0 0.35em; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--text); font-size: 0.95em; }
.progress {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.85em;
}
.bar-track { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--rose); transition: width 160ms linear; }
.repl-out {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.8rem 1.25rem 0;
}
.repl-log { white-space: pre-wrap; word-break: break-word; max-width: 120ch; }
.repl-log > div { animation: appear 140ms ease both; }
.repl-log .in    { color: var(--text); }
.repl-log .out   { color: var(--text); }
.repl-log .val   { color: var(--dim); }
.repl-log .val::first-letter { color: var(--dim); }
.repl-log .err   { color: var(--rose); }
.repl-log .bt    { color: var(--dim); }
.repl-log .note  { color: var(--dim); font-style: italic; }
.p { color: var(--gold); white-space: nowrap; }
.repl-line {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6ch;
  margin: 0 -1.25rem;
  padding: 0.35rem 1.25rem 1rem;
  background: var(--panel);
}
.repl-in {
  flex: 1; min-width: 0;
  background: transparent; border: 0; padding: 0; margin: 0;
  color: var(--text); font: inherit; caret-color: var(--rose); outline: none;
}
.repl-in:disabled { opacity: 0.5; }
.seg-state.is-ok   { color: var(--mint); }
.seg-state.is-busy { color: var(--gold); }
.seg-state.is-err  { color: var(--rose); }
.status a { color: var(--dim); }
@media (max-width: 640px) {
  .repl-hint, .seg-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .repl-log > div { animation: none; }
  .bar-fill { transition: none; }
}