/* =============================================================================
   9UY SVG Editor — styles.css
   ============================================================================= */

/* --- Block cursor (from template) ----------------------------------------- */
.block-cursor {
    display: inline-block;
    width: 0.6ch;
    height: 0.9em;
    background: #ffffff;
    vertical-align: middle;
    margin-left: 4px;
    animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.deck-link {
    transition: color 0.1s ease, transform 0.1s ease;
}
.deck-link:hover { color: #ffffff; transform: scale(1.05); }
.deck-link:active { transform: scale(0.95); }

/* --- Toolbar buttons ------------------------------------------------------- */
.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.toolbar-btn:hover  { color: #ffffff; background: #262626; }
.toolbar-btn:active { background: #1f1f1f; }
.toolbar-btn[data-active="true"] { color: #ffffff; background: #262626; }

.toolbar-sep {
    width: 1px;
    height: 16px;
    background: #262626;
    margin: 0 2px;
    flex-shrink: 0;
}

/* --- Tool palette ---------------------------------------------------------- */
.tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    color: #4b5563;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    position: relative;
}
.tool-btn:hover  { color: #e5e7eb; background: #1f2937; }
.tool-btn.active { color: #ffffff; background: #262626; }
.tool-btn.active::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 20px;
    background: #ffffff;
    border-radius: 2px;
}

.tool-sep {
    width: 24px;
    height: 1px;
    background: #262626;
    margin: 2px auto;
}

/* --- Color swatches -------------------------------------------------------- */
.color-swatch {
    width: 28px;
    height: 20px;
    border: 1px solid #374151;
    border-radius: 3px;
    cursor: pointer;
    background: none;
    padding: 1px;
}
.color-swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: 2px; }
.color-swatch::-webkit-color-swatch { border: none; border-radius: 2px; }

/* --- Canvas viewport ------------------------------------------------------- */
#canvas-viewport {
    background:
        radial-gradient(circle, #1a1a1a 1px, transparent 1px) 0 0 / 20px 20px;
    cursor: crosshair;
}

#canvas-container {
    box-shadow: 0 0 0 1px #374151, 0 8px 32px rgba(0,0,0,0.6);
    margin: 24px;
}

/* --- SVG canvas ------------------------------------------------------------ */
#svg-canvas {
    display: block;
    background: #ffffff;
}

/* --- Rulers ---------------------------------------------------------------- */
#ruler-h, #ruler-v {
    background: #0f0f0f;
    display: block;
}

/* --- Source panel ---------------------------------------------------------- */
#source-editor {
    tab-size: 2;
}

/* --- Selection handles (drawn in overlay SVG) ------------------------------ */
.sel-handle {
    fill: #fff;
    stroke: #3b82f6;
    stroke-width: 1;
    cursor: nwse-resize;
}
.sel-frame {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 1;
    stroke-dasharray: 4 3;
}
.sel-rotate {
    fill: #3b82f6;
    stroke: none;
    cursor: crosshair;
}

/* --- Draw preview ---------------------------------------------------------- */
#draw-preview .preview-shape {
    fill: rgba(59,130,246,0.12);
    stroke: #3b82f6;
    stroke-width: 1;
    stroke-dasharray: 4 3;
}
#draw-preview .preview-line {
    stroke: #3b82f6;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    fill: none;
}
#draw-preview .preview-path {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 1.5;
}
#draw-preview .preview-node {
    fill: #3b82f6;
    stroke: #fff;
    stroke-width: 1;
}

/* --- Node editing ---------------------------------------------------------- */
.node-handle {
    fill: #fff;
    stroke: #3b82f6;
    stroke-width: 1.5;
    cursor: move;
}
.node-handle.selected {
    fill: #3b82f6;
}
.node-ctrl-line {
    stroke: #6b7280;
    stroke-width: 1;
    stroke-dasharray: 2 2;
    fill: none;
}
.node-ctrl-handle {
    fill: #6b7280;
    stroke: #fff;
    stroke-width: 1;
}

/* --- Custom scrollbar ----------------------------------------------------- */
.custom-scrollbar::-webkit-scrollbar       { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #0a0a0a; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #4b5563; }

#canvas-viewport::-webkit-scrollbar       { width: 8px; height: 8px; }
#canvas-viewport::-webkit-scrollbar-track { background: #111; }
#canvas-viewport::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }

/* --- Status bar ------------------------------------------------------------ */
#status-bar {
    font-size: 9px;
    line-height: 1.2;
}

/* --- Scanline (from api.css / shared) ------------------------------------- */
.scanline { z-index: 1000; }

/* --- Responsive: hide source panel on small screens ----------------------- */
@media (max-width: 768px) {
    #source-panel { display: none !important; }
    #btn-source    { display: none; }
}