/* ============================
   Online compiler page
   Everything here is scoped to the compiler; the page used to carry an
   inline <style> block that had grown past what belongs in a document head.
   ============================ */

/* The stylesheet has no [hidden] rule of its own, so the UA default loses to
   any author `display` — .btn, .modal-overlay, .metrics and .popover all set
   one, which left every element this page hides with `el.hidden = true` still
   on screen. This file only loads here, so the override is page-scoped. */
[hidden] { display: none !important; }

.compiler-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.compiler-head h2 { margin: 0; font-size: 1.2rem; }
.compiler-anon { display: none; margin-left: auto; font-size: 0.8rem; color: var(--text3); }
.compiler-anon a { color: var(--accent); }

@media (max-width: 700px) {
  .compiler-tagline { display: none; }
}

/* ── Layout ───────────────────────────────────────────────── */
/* The split is a real, draggable column: --split holds the editor's share and
   is persisted, so the ratio survives a reload. */
.compiler-layout {
  display: grid;
  grid-template-columns: var(--split, 1fr) 10px minmax(280px, 1fr);
  gap: 0;
  align-items: start;
}
.editor-pane, .io-pane { min-width: 0; }
.io-pane { display: flex; flex-direction: column; gap: 1rem; }

.split-handle {
  align-self: stretch;
  min-height: 200px;
  cursor: col-resize;
  position: relative;
  background: transparent;
  border-radius: 2px;
}
.split-handle::after {
  content: '';
  position: absolute;
  inset: 0 4px;
  border-radius: 2px;
  background: var(--border);
  opacity: 0;
  transition: opacity 0.15s;
}
.split-handle:hover::after, .split-handle:focus-visible::after, .split-handle.dragging::after { opacity: 1; }
.split-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* While dragging, the iframe-like Monaco surface must not eat the mousemove. */
body.splitting { cursor: col-resize; user-select: none; }
body.splitting .editor-host { pointer-events: none; }

@media (max-width: 900px) {
  .compiler-layout { grid-template-columns: 1fr; gap: 1rem; }
  .split-handle { display: none; }
}

/* ── Panels and toolbars ──────────────────────────────────── */
#compilerRoot .panel-body { padding: 0.75rem 1rem; }

.tool-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }

.lang-select {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.lang-select:focus { outline: none; border-color: var(--accent); }

.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text2);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.3rem 0.45rem;
}
.icon-btn:hover { color: var(--text); background: var(--bg3); border-color: var(--border); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* ── Editor ───────────────────────────────────────────────── */
/* Draggable height as well as the draggable width of the split handle;
   Monaco's automaticLayout picks the resize up on its own. */
.editor-host {
  height: 460px;
  min-height: 160px;
  resize: vertical;
  overflow: hidden;
}

.editor-footer {
  padding: 0.75rem 1rem;
  display: flex;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  align-items: center;
  flex-wrap: wrap;
}
.editor-footer #runBtn { flex: 1; min-width: 130px; }
.kbd-hint {
  font-size: 0.7rem;
  opacity: 0.75;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 0.25rem;
  margin-left: 0.35rem;
  white-space: nowrap;
}
.editor-stat { font-size: 0.75rem; color: var(--text3); font-variant-numeric: tabular-nums; }
.editor-footer .editor-stat:nth-of-type(1) { margin-left: auto; }

/* ── Focus mode ───────────────────────────────────────────── */
/* Not the Fullscreen API: staying in the document keeps the toasts, the
   settings popover and the snippet modal on screen with the editor. */
body.focus-mode .navbar,
body.focus-mode .compiler-head,
body.focus-mode .io-pane,
body.focus-mode .split-handle,
body.focus-mode #chat-widget,
body.focus-mode footer { display: none !important; }
body.focus-mode .compiler-layout { grid-template-columns: 1fr; }
body.focus-mode .page { padding: 0 !important; }
body.focus-mode .container { max-width: none; padding: 0; }
/* Fill the window: the editor keeps its fixed 460px otherwise, leaving most
   of a focus-mode screen empty. */
body.focus-mode .editor-pane {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
body.focus-mode .editor-host { flex: 1; height: auto; resize: none; }

/* ── Settings popover ─────────────────────────────────────── */
/* .question-panel is overflow:hidden, which would clip an absolutely
   positioned child. A fixed popover escapes that clipping (nothing here
   creates a containing block for it); JS parks it under the gear button. */
.popover {
  position: fixed;
  z-index: 60;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 250px;
  font-size: 0.85rem;
}
.popover label { display: flex; align-items: center; gap: 0.5rem; color: var(--text2); }
.popover label.check { cursor: pointer; }
.popover input[type=range] { flex: 1; }
.popover output { min-width: 2ch; text-align: right; color: var(--text); }
.popover select { margin-left: auto; }

/* ── Input options ────────────────────────────────────────── */
.mono { font-family: 'Fira Code', monospace; font-size: 0.875rem; }
#customInput { resize: vertical; }

.run-opts {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.run-opts label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text3);
  flex: 1;
  min-width: 150px;
}
.run-opts input { flex: 1; min-width: 0; padding: 0.3rem 0.5rem; font-size: 0.8rem; }

/* ── Output ───────────────────────────────────────────────── */
.status-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.status-chip.ok      { background: var(--success-dim); color: var(--success); }
.status-chip.bad     { background: var(--error-dim);   color: var(--error); }
.status-chip.warn    { background: var(--warn-dim);    color: var(--warn); }
.status-chip.running { background: var(--accent-dim);  color: var(--accent); }

.metrics {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.metric {
  font-size: 0.7rem;
  color: var(--text2);
  background: var(--bg3);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
  font-variant-numeric: tabular-nums;
}
.metric b { color: var(--text); font-weight: 600; }

.output-area {
  margin: 0;
  min-height: 120px;
  max-height: 420px;
  overflow: auto;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  color: var(--text2);
  background: var(--bg3);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  line-height: 1.6;
  white-space: pre;
  tab-size: 4;
}
.output-area.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.output-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.stderr-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--error);
  margin: 0.7rem 0 0.3rem;
  letter-spacing: 0.03em;
}
.stderr-area { color: var(--error); background: var(--error-dim); min-height: 0; }

/* Why the run stopped, kept visually apart from whatever the program printed
   before it did. */
.run-message {
  color: var(--error);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
}
/* With no stdout above it, the separator has nothing to separate. */
.output-area > .run-message:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* A compile/runtime error line the user can click to jump to in the editor. */
.err-jump {
  color: var(--error);
  text-decoration: underline dotted;
  cursor: pointer;
}
.err-jump:hover { text-decoration: underline; }

.truncated-note { color: var(--warn); font-size: 0.75rem; margin-top: 0.4rem; }

/* ── History ──────────────────────────────────────────────── */
.history-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 230px; overflow-y: auto; }
.history-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  cursor: pointer;
  font-size: 0.78rem;
  text-align: left;
  width: 100%;
  color: var(--text2);
}
.history-item:hover { background: var(--bg3); color: var(--text); }
.history-item .h-lang { font-weight: 600; color: var(--text); min-width: 4.5rem; }
.history-item .h-time { margin-left: auto; color: var(--text3); font-variant-numeric: tabular-nums; }

/* ── Snippets ─────────────────────────────────────────────── */
.save-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.save-row input { flex: 1; }
.snippet-list { display: flex; flex-direction: column; gap: 0.4rem; }
.snippet-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.snippet-row .s-name { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snippet-row .s-meta { font-size: 0.72rem; color: var(--text3); margin-left: auto; white-space: nowrap; }