/* ============================================================
   XITA Playground — Figma-style free-form canvas
   Self-contained styles. No dependency on main site CSS.
   ============================================================ */

:root {
    --bg:          #0e1014;
    --bg-canvas:   #14171c;
    --bg-elev:    #1a1e25;
    --fg:          #e7ebf1;
    --fg-mute:     #8a93a6;
    --accent:      #5d9cec;
    --accent-h:    #7cb1f7;
    --line:        #262b34;
    --line-strong: #353c48;
    --grid:        rgba(255,255,255,.04);
    --hover:       #5d9cec;
    --select:      #ffc857;
    --shadow:      0 8px 24px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--fg);
    font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* ── Toolbar ─────────────────────────────────────── */
.pg-toolbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: 52px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--line);
    z-index: 100;
}
.pg-toolbar-left, .pg-toolbar-center, .pg-toolbar-right {
    display: flex; align-items: center; gap: 8px;
}
.pg-toolbar-center { gap: 4px; }
.pg-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px;
    color: var(--fg-mute); text-decoration: none;
    transition: background .15s, color .15s;
}
.pg-back:hover { background: var(--line); color: var(--fg); }
.pg-title {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.pg-badge {
    background: var(--accent);
    color: #0a0c10;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: .05em;
}

.pg-tool {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: transparent;
    color: var(--fg-mute);
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.pg-tool:hover {
    background: var(--line);
    color: var(--fg);
}
.pg-tool i { font-size: 16px; }
.pg-tool span { font-size: 12px; }
.pg-tool-sep {
    width: 1px; height: 22px;
    background: var(--line);
    margin: 0 4px;
}

.pg-zoom-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--fg-mute);
    cursor: pointer;
    transition: background .12s;
}
.pg-zoom-btn:hover { background: var(--line); color: var(--fg); }
.pg-zoom-display {
    min-width: 52px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--fg-mute);
    user-select: none;
}

/* ── Canvas viewport ─────────────────────────────── */
.pg-canvas {
    position: fixed;
    top: 52px; left: 0; right: 0; bottom: 28px;
    background: var(--bg-canvas);
    overflow: hidden;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}
body.pg-panning .pg-canvas { cursor: grab; }
body.pg-panning-active .pg-canvas { cursor: grabbing; }

/* The stage is the transformed plane. Objects sit inside it so a
   single transform handles pan + zoom for everything at once. */
.pg-canvas-stage {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0; /* objects positioned absolutely so this can stay 0×0 */
    transform-origin: 0 0;
    will-change: transform;
}

/* Repeating dot grid extending across the entire stage. Lives at
   the stage root and is sized via a huge absolute box so it pans
   with the canvas. Background size scales naturally with the stage
   transform. */
.pg-grid {
    position: absolute;
    left: -10000px; top: -10000px;
    width: 20000px; height: 20000px;
    background-image: radial-gradient(circle, var(--grid) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

/* ── Objects ─────────────────────────────────────── */
.pg-obj {
    position: absolute;
    background: var(--bg-elev);
    border: 1px solid transparent;
    color: var(--fg);
    border-radius: 4px;
    overflow: hidden;
    /* Helps with crisper edges + transform-only motion */
    will-change: transform;
}
.pg-obj[data-type="text"] {
    padding: 12px 16px;
    background: transparent;
    border: 1px dashed transparent;
    line-height: 1.4;
    color: var(--fg);
}
.pg-obj[data-type="circle"] {
    border-radius: 50%;
}
.pg-obj[data-type="image"] {
    background-size: cover;
    background-position: center;
}
.pg-obj:hover { outline: 1px solid var(--hover); outline-offset: 0; }
.pg-obj.is-selected { outline: none; }

/* ── Selection overlay (above stage; screen-space sized) ─ */
.pg-selection {
    position: absolute;
    border: 1.5px solid var(--select);
    pointer-events: none; /* container; only handles intercept */
    z-index: 50;
}
.pg-handle {
    position: absolute;
    width: 10px; height: 10px;
    background: #fff;
    border: 1.5px solid var(--select);
    pointer-events: auto;
    box-sizing: border-box;
}
.pg-handle[data-handle="nw"] { left: -5px; top: -5px; cursor: nwse-resize; }
.pg-handle[data-handle="n"]  { left: 50%; top: -5px; transform: translateX(-50%); cursor: ns-resize; }
.pg-handle[data-handle="ne"] { right: -5px; top: -5px; cursor: nesw-resize; }
.pg-handle[data-handle="e"]  { right: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.pg-handle[data-handle="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }
.pg-handle[data-handle="s"]  { left: 50%; bottom: -5px; transform: translateX(-50%); cursor: ns-resize; }
.pg-handle[data-handle="sw"] { left: -5px; bottom: -5px; cursor: nesw-resize; }
.pg-handle[data-handle="w"]  { left: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

/* Marquee (drag-to-select rectangle on empty canvas) */
.pg-marquee {
    position: absolute;
    border: 1px solid var(--accent);
    background: rgba(93,156,236,.08);
    pointer-events: none;
    z-index: 40;
}

/* Hover outline (shown when pointer enters an unselected object) */
.pg-hover-outline {
    position: absolute;
    border: 1.5px solid var(--hover);
    pointer-events: none;
    z-index: 30;
}

/* ── Right inspector ─────────────────────────────── */
.pg-inspector {
    position: fixed;
    top: 60px; right: 16px;
    width: 220px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 14px 10px;
    box-shadow: var(--shadow);
    z-index: 60;
}
.pg-inspector-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fg-mute);
}
.pg-field {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}
.pg-field label {
    font-size: 11px;
    color: var(--fg-mute);
    min-width: 50px;
}
.pg-field input[type="number"] {
    width: 90px;
    padding: 6px 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--fg);
    border-radius: 5px;
    font: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.pg-field input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
}
.pg-field input[type="color"] {
    width: 90px; height: 28px;
    padding: 2px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 5px;
    cursor: pointer;
}

/* Number input arrow buttons are noisy — we strip the spinner
   so the inspector stays clean and matches Figma. */
.pg-field input[type="number"]::-webkit-inner-spin-button,
.pg-field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pg-field input[type="number"] { -moz-appearance: textfield; }

/* ── Footer hint strip ───────────────────────────── */
.pg-hint {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 28px;
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
    background: var(--bg-elev);
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--fg-mute);
    z-index: 100;
}
.pg-hint kbd {
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: 2px 6px;
    font: inherit;
    font-size: 10px;
    color: var(--fg);
    margin-right: 4px;
}

/* ── Light theme (mirror main site's data-theme="light") ── */
[data-theme="light"] {
    --bg:          #f7f8fa;
    --bg-canvas:   #fff;
    --bg-elev:     #fff;
    --fg:          #0a0c10;
    --fg-mute:     #6b7280;
    --line:        #e5e7eb;
    --line-strong: #cbd5e0;
    --grid:        rgba(0,0,0,.06);
    --shadow:      0 4px 12px rgba(0,0,0,.08);
}

/* ── Mobile / narrow viewport ───────────────────── */
/* Toolbar gets crowded under ~720px (4 add tools + 2 buttons +
   zoom triple — total ~700px desktop). Make it horizontally
   scrollable so nothing gets clipped, and let the inspector
   become a bottom sheet that the user can ignore until they
   want precision. Hint footer collapses to a hamburger-ish
   tag because keyboard shortcuts aren't reachable from a touch
   device anyway. */
@media (max-width: 720px) {
    .pg-toolbar {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pg-toolbar::-webkit-scrollbar { display: none; }
    .pg-toolbar-left,
    .pg-toolbar-center,
    .pg-toolbar-right {
        flex-shrink: 0;
    }
    .pg-tool span { display: none; } /* icons only — saves ~280px */
}

@media (max-width: 640px) {
    /* Inspector becomes a thin bottom sheet so it doesn't sit
       on top of the canvas content the user is trying to move. */
    .pg-inspector {
        top: auto;
        right: 0; left: 0; bottom: 28px;
        width: 100%;
        border-radius: 12px 12px 0 0;
        border-left: none; border-right: none; border-bottom: none;
        padding: 12px 14px 10px;
        max-height: 35vh;
        overflow-y: auto;
        box-shadow: 0 -4px 16px rgba(0,0,0,.3);
    }
    .pg-inspector-title { margin-bottom: 8px; font-size: 11px; }
    .pg-field { margin-bottom: 6px; }
    .pg-field label { min-width: 40px; font-size: 10px; }
    .pg-field input[type="number"],
    .pg-field input[type="color"] { width: 76px; font-size: 11px; }

    /* Hint footer carries desktop shortcuts that don't apply on
       touch. Hide on coarse pointers. */
    .pg-hint { display: none; }
    .pg-canvas { bottom: 0; }

    /* Make the canvas honor touch interactions instead of native
       browser scroll/zoom. */
    .pg-canvas { touch-action: none; }
}

@media (pointer: coarse) {
    /* Desktop shortcut hint is meaningless on touch devices. */
    .pg-hint { display: none; }
    .pg-canvas { bottom: 0; touch-action: none; }
}