@charset "utf-8";
/* ============================================================
   svg-tools.css — shared by the SVG editor (index.html) and the
   SVG optimizer (optimize.html). Loaded after /css/w3style.css.

   Holds only what the two tools have in common and w3style.css
   can't express: the accent blue used on the canvas, the code
   theme (Dracula, dark in both site themes), the dark preview
   surface and the drop-zone highlight. Layout and chrome are
   w3 classes in the markup; each page keeps a small <style>
   for its own layout.
   ============================================================ */

:root {
    --accent:        #2196F3;   /* w3-blue: selection, handles, highlights */
    --accent-tint:   rgba(33,150,243,.22);

    /* Code theme — Dracula */
    --code-font:     'Cascadia Code','JetBrains Mono','Fira Code',Consolas,monospace;
    --code-size:     11.5px;
    --code-bg:       #282a36;
    --code-gutter:   #21222c;
    --code-line:     #3a3a44;
    --code-fg:       #f8f8f2;   /* plain text, brackets, punctuation */
    --code-muted:    #6272a4;   /* comments, fold markers, placeholder */
    --code-lineno:   #555770;
    --code-tag:      #ff79c6;
    --code-attr:     #50fa7b;
    --code-string:   #f1fa8c;
    --code-number:   #bd93f9;
    --code-meta:     #ffb86c;   /* <?xml …?>, <!DOCTYPE> */
    --code-link:     #8be9fd;
    --code-select:   rgba(68,71,90,.9);

    /* Dark preview surface (editor "Dark" background, optimizer previews) */
    --preview-dark:  #181b22;
}

/* ---------- Code panes ---------- */
/* Any pane showing code: Dracula fill, dark native scrollbars. */
.svgt-code {
    background-color: var(--code-bg) !important;
    color: var(--code-fg) !important;
    color-scheme: dark;
}

/* Editor: CodeMirror with the Dracula theme */
.CodeMirror {
    flex: 1;
    height: 100% !important;
    font-family: var(--code-font) !important;
    font-size: var(--code-size) !important;
    line-height: 1.6 !important;
    background: var(--code-bg) !important;
    color-scheme: dark;
}
.CodeMirror-scroll { height: 100% !important; }
.CodeMirror-gutters { background: var(--code-gutter) !important; border-right: 1px solid var(--code-line) !important; }
.CodeMirror-linenumber { color: var(--code-lineno) !important; }
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded { color: var(--code-muted) !important; cursor: pointer; }
.cm-s-dracula .cm-tag       { color: var(--code-tag) !important; }
.cm-s-dracula .cm-attribute { color: var(--code-attr) !important; }
.cm-s-dracula .cm-string    { color: var(--code-string) !important; }
.cm-s-dracula .cm-bracket   { color: var(--code-fg) !important; }
.cm-s-dracula .cm-comment   { color: var(--code-muted) !important; font-style: italic; }
.cm-s-dracula .cm-number    { color: var(--code-number) !important; }
.cm-s-dracula .cm-meta      { color: var(--code-meta) !important; }

/* Optimizer: transparent textarea (w3-code-overlay) over a highlighted <pre>,
   both using the same font box so the caret lines up with the colors. */
.hl-font {
    font-family: var(--code-font);
    font-size: var(--code-size);
    line-height: 1.6;
    tab-size: 2;
    white-space: pre;
    word-wrap: normal;
    padding: 12px;
    margin: 0;
}
.hl-pre { pointer-events: none; overflow: hidden; color: var(--code-fg); background: transparent; border: none; }
.hl-ta  { --w3-code-caret: var(--code-fg); overflow: auto; }
.hl-ta::selection   { background: var(--code-select); }
.hl-ta::placeholder { color: var(--code-muted); }
.hl-punct   { color: var(--code-fg); }
.hl-tag     { color: var(--code-tag); }
.hl-attr    { color: var(--code-attr); }
.hl-val     { color: var(--code-string); }
.hl-num     { color: var(--code-number); }
.hl-comment { color: var(--code-muted); font-style: italic; }
.hl-pi      { color: var(--code-meta); }
.hl-cdata   { color: var(--code-link); }
.hl-url     { color: var(--code-link); text-decoration: underline; }

/* ---------- Previews ---------- */
.svgt-preview-dark { background-color: var(--preview-dark); }

/* ---------- Drop zones ---------- */
/* .svgt-drop wraps a .w3-dropzone card; the scripts add .drag-over. */
.svgt-drop:hover .w3-dropzone,
.svgt-drop.drag-over .w3-dropzone { border-color: var(--accent); }