/* * Overrides for CodeMirror 5 so the editor blends into the Tailwind-themed container * instead of painting its own (light) background. Loaded after codemirror.min.css. * Dark mode is class-based (`.dark` on ), matching tailwind.input.css. */ .CodeMirror { background: transparent !important; color: #1f2937; /* gray-800 */ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.8125rem; /* ~13px */ line-height: 1.5; } /* * highlight.css declares a global `pre { background:#282c34 !important; ... }` (the One Dark * code theme). CodeMirror renders every line as 
, so that rule
 * bleeds in and paints the editor dark (and distorts line metrics). Reset pre INSIDE the
 * editor with matching !important + higher specificity so the transparent background wins.
 */
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like,
.CodeMirror pre {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

.CodeMirror-gutters {
    background: transparent;
    border-right: 1px solid #e5e7eb; /* gray-200 */
}

.CodeMirror-linenumber { color: #9ca3af; }                 /* gray-400 */
.CodeMirror-cursor { border-left: 1px solid #1f2937; }
.CodeMirror-selected { background: rgba(59, 130, 246, 0.15); }
.CodeMirror-activeline-background { background: rgba(0, 0, 0, 0.03); }

/* Syntax tokens — tuned to read on a light background. */
.cm-tag       { color: #2563eb; }   /* blue-600   */
.cm-attribute { color: #7c3aed; }   /* violet-600 */
.cm-string    { color: #16a34a; }   /* green-600  */
.cm-comment   { color: #9ca3af; font-style: italic; }
.cm-bracket,
.cm-meta      { color: #6b7280; }   /* gray-500   */

/* ---- Dark mode ---- */
.dark .CodeMirror { color: #e5e7eb; }                      /* gray-200 */
.dark .CodeMirror-gutters { border-right-color: #374151; } /* gray-700 */
.dark .CodeMirror-linenumber { color: #6b7280; }           /* gray-500 */
.dark .CodeMirror-cursor { border-left-color: #e5e7eb; }
.dark .CodeMirror-selected { background: rgba(96, 165, 250, 0.25); }
.dark .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.04); }

.dark .cm-tag       { color: #60a5fa; }   /* blue-400   */
.dark .cm-attribute { color: #c4b5fd; }   /* violet-300 */
.dark .cm-string    { color: #86efac; }   /* green-300  */
.dark .cm-comment   { color: #6b7280; }
.dark .cm-bracket,
.dark .cm-meta      { color: #9ca3af; }   /* gray-400   */