/* devtoken.tools — pen page styles (builds on ../style.css) */

/* ── Pen-specific styles ── */

/* Four panes side by side need more room than a single-column tool page */
.wrap { max-width: 1280px; }

.pen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.pen-grid .panel-header { padding: 8px 12px; }
.pen-grid .panel-title { font-size: 11px; }

.pane-editor .CodeMirror,
.preview-frame {
  height: 300px;
}

.CodeMirror {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}

.panel:focus-within {
  border-color: var(--accent-dim);
}

.preview-frame {
  display: block;
  width: 100%;
  border: 0;
  background: #ffffff; /* a blank web page is white, like a real browser tab */
}

.preview-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 20px;
}

.toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.toolbar-row .option-row {
  margin: 0 0 0 auto;
}

/* ── Console ── */
.console-body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  max-height: 180px;
  min-height: 60px;
  overflow-y: auto;
  padding: 8px 12px;
}
.console-line { white-space: pre-wrap; word-break: break-word; padding: 1px 0; }
.console-line + .console-line { border-top: 1px solid var(--border); }
.console-line.log   { color: var(--text); }
.console-line.info  { color: var(--payload); }
.console-line.warn  { color: var(--warn); }
.console-line.error { color: #fca5a5; }
.console-empty { color: var(--muted); }

.status-line {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.status-line .conflict { color: var(--warn); }

.btn-copy.small, .btn-ghost.small { padding: 3px 10px; font-size: 11px; }

@media (max-width: 900px) {
  .pen-grid { grid-template-columns: 1fr; }
  .toolbar-row .option-row { margin-left: 0; }
}

/* ── CodeMirror theme built from devtoken.tools' own palette ── */
.cm-s-devtoken.CodeMirror { background: var(--bg2); color: var(--text); }
.cm-s-devtoken .CodeMirror-gutters { background: var(--bg2); border-right: 1px solid var(--border); }
.cm-s-devtoken .CodeMirror-linenumber { color: var(--muted); }
.cm-s-devtoken .CodeMirror-cursor { border-left: 1px solid var(--accent); }
.cm-s-devtoken div.CodeMirror-selected { background: rgba(74, 222, 128, 0.15); }
.cm-s-devtoken .CodeMirror-matchingbracket { color: var(--accent) !important; }
.cm-s-devtoken .cm-keyword    { color: var(--header-col); }
.cm-s-devtoken .cm-atom       { color: var(--sig); }
.cm-s-devtoken .cm-number     { color: #93c5fd; }
.cm-s-devtoken .cm-def        { color: var(--payload); }
.cm-s-devtoken .cm-variable   { color: var(--text); }
.cm-s-devtoken .cm-variable-2 { color: var(--payload); }
.cm-s-devtoken .cm-property   { color: var(--payload); }
.cm-s-devtoken .cm-operator   { color: var(--text); }
.cm-s-devtoken .cm-comment    { color: var(--muted); font-style: italic; }
.cm-s-devtoken .cm-string     { color: #86efac; }
.cm-s-devtoken .cm-string-2   { color: #86efac; }
.cm-s-devtoken .cm-meta       { color: var(--muted); }
.cm-s-devtoken .cm-tag        { color: var(--header-col); }
.cm-s-devtoken .cm-attribute  { color: var(--payload); }
.cm-s-devtoken .cm-qualifier  { color: var(--sig); }
.cm-s-devtoken .cm-builtin    { color: var(--sig); }
.cm-s-devtoken .cm-error      { color: var(--danger); }
.cm-s-devtoken .cm-bracket    { color: var(--muted); }

/* Replaces inline styles from the old page */
.share-results { margin-bottom: 14px; }

.abuse-note { margin-top: 24px; }