/* ================================================================
   BytePaint — voidcore-scoped styles
   --------------------------------------------------------------
   Source: ~/projects/bytepaint/styles.css (standalone @ bf44be6).

   Stripped from source (voidcore provides):
     • @font-face × 4 (Inter + JetBrains Mono — voidcore /assets/fonts/)
     • :root { ... } variables (voidcore tokens.css)
     • * { box-sizing } (voidcore reset)
     • html/body styling (voidcore window-body owns layout)
     • body grid + .topbar (we own a window-internal grid + .bp-topbar)
     • .brand / .brand__* / .brand::before (titlebar handles wordmark)
     • .info-shell / .info-* / .lang-toggle (voidcore Legal-App)
     • Mobile reflow (Phase 1 = desktop-only via mobile-shell graceful-fail)

   Token mapping (BytePaint → voidcore):
     --bg              → var(--byte-bg)
     --bg-canvas-area  → var(--byte-ink-950)
     --fg              → var(--byte-text)
     --fg-muted        → var(--byte-text-muted)
     --border          → var(--byte-border-strong)
     --border-soft     → var(--byte-border)
     --surface         → var(--byte-surface)
     --surface-2       → var(--byte-surface-2)
     --accent          → var(--byte-primary)
     --accent-fg       → #ffffff (no voidcore equivalent)
     --radius          → var(--byte-r-sm)

   All rules scoped via [data-window="bytepaint"] .bytepaint to prevent
   bleed into other apps. Window min-size is a hard floor on the .window
   itself (matches the grid track requirements).
   ================================================================ */

/* ---- Window hard-floor: toolbar(56) + sidebar(200) + min-canvas + status row ---- */
.window[data-window="bytepaint"] {
    min-width: 480px;
    min-height: 360px;
}

/* ---- Body grid (replaces the standalone body grid) ---- */
.window[data-window="bytepaint"] .bytepaint {
    display: grid;
    grid-template-areas:
        "tbar  tbar  tbar"
        "tools canvas side";
    grid-template-rows: 40px 1fr;
    grid-template-columns: 56px 1fr 180px;
    height: 100%;
    background: var(--byte-bg);
    color: var(--byte-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 14px;
    /* NO overflow here — voidcore hartregel: .canvas-area scrolls internally. */
}

/* ─── In-app topbar (New / Open / Save / Undo / Redo) ─── */
.window[data-window="bytepaint"] .bytepaint .bp-topbar {
    grid-area: tbar;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--byte-surface);
    border-bottom: 1px solid var(--byte-border-strong);
}
.window[data-window="bytepaint"] .bytepaint .bp-topbar button {
    padding: 5px 10px;
    border: 1px solid var(--byte-border-strong);
    border-radius: var(--byte-r-sm);
    background: var(--byte-surface);
    cursor: pointer;
    font-size: 12px;
    color: var(--byte-text);
    font-family: inherit;
}
.window[data-window="bytepaint"] .bytepaint .bp-topbar button:hover:not(:disabled) {
    background: var(--byte-surface-2);
}
.window[data-window="bytepaint"] .bytepaint .bp-topbar button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.window[data-window="bytepaint"] .bytepaint .bp-topbar .sep {
    width: 1px;
    height: 22px;
    background: var(--byte-border-strong);
    margin: 0 4px;
}

/* ─── Toolbar (left, vertical) ─── */
.window[data-window="bytepaint"] .bytepaint .toolbar {
    grid-area: tools;
    display: flex;
    flex-direction: column;
    background: var(--byte-surface);
    border-right: 1px solid var(--byte-border-strong);
    padding: 8px 6px;
    gap: 4px;
}
.window[data-window="bytepaint"] .bytepaint .tool {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--byte-r-sm);
    background: transparent;
    cursor: pointer;
    color: var(--byte-text);
    transition: background 0.08s, color 0.08s;
}
.window[data-window="bytepaint"] .bytepaint .tool:hover {
    background: var(--byte-surface-2);
}
.window[data-window="bytepaint"] .bytepaint .tool[data-active] {
    background: var(--byte-primary);
    color: #ffffff;
}

/* ─── Canvas stage ─── */
.window[data-window="bytepaint"] .bytepaint .canvas-area {
    grid-area: canvas;
    overflow: auto;
    background: var(--byte-ink-950);
    padding: 16px;
    display: grid;
    place-items: start center;
}
.window[data-window="bytepaint"] .bytepaint .canvas-stage {
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
    background: white;
    line-height: 0;
}
.window[data-window="bytepaint"] .bytepaint #bp-paint,
.window[data-window="bytepaint"] .bytepaint #bp-overlay {
    display: block;
}
.window[data-window="bytepaint"] .bytepaint #bp-paint {
    background: white;
    touch-action: none;
    cursor: crosshair;
}
.window[data-window="bytepaint"] .bytepaint #bp-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* ─── Sidebar (right) ─── */
.window[data-window="bytepaint"] .bytepaint .sidebar {
    grid-area: side;
    background: var(--byte-surface);
    border-left: 1px solid var(--byte-border-strong);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.window[data-window="bytepaint"] .bytepaint .panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* don't stretch children to sidebar width */
    gap: 6px;
}
.window[data-window="bytepaint"] .bytepaint .panel-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--byte-text-muted);
    font-weight: 600;
}
/* Compact "current color" chip — explicit square so there's no pill-shape
   possible (height==width with small radius reads as button, not pill).
   Force-fill the inner ::webkit-color-swatch so the selected color reaches
   the chip edges (Chrome default has wrapper padding which would show the
   surface BG as an empty right side). */
.window[data-window="bytepaint"] .bytepaint input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--byte-border-strong);
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    display: block;
    flex-shrink: 0;
}
.window[data-window="bytepaint"] .bytepaint input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    width: 100%;
    height: 100%;
}
.window[data-window="bytepaint"] .bytepaint input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}
.window[data-window="bytepaint"] .bytepaint input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}
/* 4×4 square palette grid — the previous 8×2 layout was 156×36 = ~4.3:1
   aspect, which reads as a long horizontal pill no matter how small the
   swatches are. Square 4×4 (~92×92) reads as a compact color-picker block,
   not a stretched strip. Width is locked explicitly so flex parents can't
   stretch the container even if align-items defaults change. */
.window[data-window="bytepaint"] .bytepaint .palette {
    display: grid;
    grid-template-columns: repeat(4, 20px);
    grid-template-rows: repeat(4, 20px);
    gap: 4px;
    width: 92px;
    max-width: 92px;
    justify-content: start;
}
/* Sharp square swatches — border-radius rounded the 4 outer corner-swatches
   of the 4×4 grid, which read as one big rounded-rect "pill" with the
   corner colors clipped away. Sharp 0-radius matches the classic paint-app
   tile look and keeps the corner pixels fully visible. */
.window[data-window="bytepaint"] .bytepaint .swatch {
    width: 20px;
    height: 20px;
    border: 1px solid var(--byte-border-strong);
    border-radius: 0;
    cursor: pointer;
    padding: 0;
    transition: transform 0.08s;
}
.window[data-window="bytepaint"] .bytepaint .swatch:hover {
    transform: scale(1.15);
    z-index: 1;
}
/* Compact range slider — fixed 130px so the pill-shaped track doesn't
   span the whole sidebar. The "Size N px" label above shows the value;
   slider's job is selection, not measurement. */
.window[data-window="bytepaint"] .bytepaint input[type="range"] {
    width: 130px;
    max-width: 100%;
    accent-color: var(--byte-primary);
}
.window[data-window="bytepaint"] .bytepaint #bp-size-out,
.window[data-window="bytepaint"] .bytepaint #bp-font-size-out {
    font-weight: 600;
    color: var(--byte-text);
}
.window[data-window="bytepaint"] .bytepaint .shape-panel label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}
.window[data-window="bytepaint"] .bytepaint .text-panel select {
    width: auto;
    min-width: 110px;
    max-width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--byte-border-strong);
    border-radius: var(--byte-r-sm);
    background: var(--byte-surface);
    color: var(--byte-text);
    font-size: 12px;
}

/* ─── Status row (bottom of sidebar) ─── */
.window[data-window="bytepaint"] .bytepaint .status {
    margin-top: auto;
    font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    color: var(--byte-text-muted);
    line-height: 1.6;
}
.window[data-window="bytepaint"] .bytepaint #bp-status-selection {
    color: var(--byte-primary);
}
.window[data-window="bytepaint"] .bytepaint #bp-status-selection[hidden] {
    display: none;
}

/* ─── New-Canvas dialog (top-layer, native <dialog>) ───
   Scoped via the dialog ID so it inherits voidcore-tokens even though
   .showModal() renders the dialog in the top layer (outside the window
   subtree, so [data-window=…] doesn't match — ID-only scope here). */
#bp-dlg-new {
    border: 1px solid var(--byte-border-strong);
    border-radius: 8px;
    padding: 20px 22px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    max-width: 320px;
    color: var(--byte-text);
    background: var(--byte-surface);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 14px;
}
#bp-dlg-new h2 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
}
#bp-dlg-new label {
    display: block;
    margin: 10px 0;
    font-size: 12px;
    color: var(--byte-text-muted);
}
#bp-dlg-new input[type="number"] {
    display: block;
    margin-top: 4px;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid var(--byte-border-strong);
    border-radius: var(--byte-r-sm);
    background: var(--byte-surface);
    color: var(--byte-text);
    font-size: 14px;
}
#bp-dlg-new menu {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    margin: 18px 0 0;
}
#bp-dlg-new button {
    padding: 7px 14px;
    border: 1px solid var(--byte-border-strong);
    border-radius: var(--byte-r-sm);
    background: var(--byte-surface);
    color: var(--byte-text);
    cursor: pointer;
    font-size: 13px;
}
#bp-dlg-new .primary {
    background: var(--byte-primary);
    border-color: var(--byte-primary);
    color: #ffffff;
}
#bp-dlg-new::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

/* ─── Text-Tool floating input (inside canvas-stage) ─── */
.window[data-window="bytepaint"] .bytepaint #bp-text-edit {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 1px dashed var(--byte-primary);
    background: transparent;
    color: transparent;
    caret-color: var(--byte-primary);
    outline: none;
    font-family: inherit;
    line-height: 1;
    z-index: 5;
}
.window[data-window="bytepaint"] .bytepaint #bp-text-edit[hidden] {
    display: none;
}