/* Estrutura do aplicativo. Uma única grade governa a moldura inteira. */

.app {
    display: grid;
    grid-template-columns: var(--rail-width) var(--ruler-size) 1fr var(--panel-width);
    grid-template-rows: var(--header-height) var(--ruler-size) 1fr var(--status-height);
    grid-template-areas:
        'header header header header'
        'rail   corner rulerh panels'
        'rail   rulerv stage  panels'
        'status status status status';
    height: 100vh;
}

/* Sem réguas a grade colapsa as duas faixas em zero: nada de esconder com
   display:none, que deixaria uma coluna vazia ocupando espaço. */
.app.no-rulers {
    grid-template-columns: var(--rail-width) 0 1fr var(--panel-width);
    grid-template-rows: var(--header-height) 0 1fr var(--status-height);
}

.app.no-rulers .ruler,
.app.no-rulers .ruler-corner {
    display: none;
}

.ruler {
    background: var(--surface-shell);
    border-color: var(--line);
    border-style: solid;
    cursor: crosshair;
    touch-action: none;
}

.ruler-h {
    grid-area: rulerh;
    border-width: 0 0 1px;
}

.ruler-v {
    grid-area: rulerv;
    border-width: 0 1px 0 0;
}

.ruler-corner {
    grid-area: corner;
    background: var(--surface-shell);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.ruler-tick {
    stroke: var(--line-strong);
    stroke-width: 1;
}

.ruler-label {
    fill: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: 0.5625rem;
}

.ruler-guide-marker {
    stroke: #4fd1c5;
    stroke-width: 1.5;
}

.app-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    padding: 0 var(--gap-3);
    background: var(--surface-shell);
    border-bottom: 1px solid var(--line);
}

.brand {
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.brand span {
    color: var(--accent);
}

.tool-rail {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--gap-1) 0;
    background: var(--surface-shell);
    border-right: 1px solid var(--line);
    overflow-y: auto;
}

.workspace {
    grid-area: stage;
    position: relative;
    overflow: hidden;
    background: var(--surface-stage);
    /* Padrão sutil marca a área fora da prancheta sem competir com a arte. */
    background-image: radial-gradient(circle, #1a1a1d 1px, transparent 1px);
    background-size: 1.5rem 1.5rem;
    touch-action: none;
}

.canvas-stage {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    background: #ffffff;
    /* Borda de 1px em vez de sombra: a prancheta é um objeto técnico, não físico. */
    outline: 1px solid var(--line-strong);
}

.canvas-stage.is-checkered {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e2e2e6 25%, transparent 25%),
        linear-gradient(-45deg, #e2e2e6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e2e6 75%),
        linear-gradient(-45deg, transparent 75%, #e2e2e6 75%);
    background-size: 1rem 1rem;
    background-position: 0 0, 0 0.5rem, 0.5rem -0.5rem, -0.5rem 0;
}

.canvas-layer {
    position: absolute;
    inset: 0;
    display: block;
}

#overlay-canvas {
    /* O overlay é irmão do canvas, nunca filho: alças não vazam para o export. */
    pointer-events: none;
    overflow: visible;
}

/* O overlay inteiro é transparente ao ponteiro, exceto o que precisa ser
   agarrado: alças de transformação, nós de traçado e alças de curvatura. */
#overlay-canvas [data-handle],
#overlay-canvas [data-node-index] {
    pointer-events: auto;
}

#grid-overlay {
    pointer-events: none;
}

.panels {
    grid-area: panels;
    display: flex;
    flex-direction: column;
    background: var(--surface-panel);
    border-left: 1px solid var(--line);
    overflow-y: auto;
}

.status-bar {
    grid-area: status;
    display: flex;
    align-items: center;
    gap: var(--gap-4);
    padding: 0 var(--gap-3);
    background: var(--surface-shell);
    border-top: 1px solid var(--line);
}

.status-bar .spacer {
    margin-left: auto;
}

/* ==========================================================================
   RESPONSIVO

   Três faixas, cada uma com um problema próprio:

   < 90rem  a prancheta fica apertada entre réguas e painel de 17rem → réguas saem
   < 62rem  não cabem barra de menus + painel fixo → menu e painéis viram gavetas,
            e a barra de ferramentas deita no rodapé, que é onde o polegar alcança
   < 30rem  tudo encolhe: rótulos somem, sobra o essencial

   Gaveta sem botão é o defeito que a versão anterior tinha: a regra existia no
   CSS e nada no HTML adicionava a classe. Aqui os dois botões são obrigatórios.
   ========================================================================== */

.menu-burger,
.panels-toggle {
    display: none;
}

.header-spacer {
    margin-left: auto;
}

@media (max-width: 90rem) {
    .app {
        grid-template-columns: var(--rail-width) 0 1fr var(--panel-width);
        grid-template-rows: var(--header-height) 0 1fr var(--status-height);
    }

    .ruler,
    .ruler-corner {
        display: none;
    }
}

@media (max-width: 62rem) {
    .app {
        grid-template-columns: 1fr;
        grid-template-rows: var(--header-height) 1fr auto var(--status-height);
        grid-template-areas:
            'header'
            'stage'
            'rail'
            'status';
    }

    /* Barra de ferramentas deitada no rodapé: alcance do polegar. */
    .tool-rail {
        flex-direction: row;
        border-right: 0;
        border-top: 1px solid var(--line);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .tool-btn {
        width: var(--rail-width);
        flex: 0 0 var(--rail-width);
    }

    .tool-btn.is-active {
        box-shadow: inset 0 2px 0 var(--accent);
    }

    .rail-divider {
        width: 1px;
        height: auto;
        margin: 0.5rem var(--gap-1);
    }

    .menu-burger,
    .panels-toggle {
        display: grid;
    }

    /* Barra de menus vira gaveta pela esquerda. */
    .menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        width: min(20rem, 86vw);
        flex-direction: column;
        gap: 0;
        padding: var(--gap-2) 0;
        background: var(--surface-panel);
        border-right: 1px solid var(--line-strong);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--transition);
        z-index: 30;
    }

    .menu.is-open {
        transform: translateX(0);
    }

    .menu-trigger {
        display: block;
        width: 100%;
        padding: var(--gap-3);
        text-align: left;
        font-size: var(--text-md);
        border-bottom: 1px solid var(--line);
    }

    /* Dentro da gaveta o submenu empurra o conteúdo em vez de flutuar sobre ele. */
    .menu-list {
        position: static;
        min-width: 0;
        border: 0;
        border-bottom: 1px solid var(--line);
        background: var(--surface-sunken);
    }

    .menu-list button {
        padding: var(--gap-3);
    }

    .panels {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        width: min(21rem, 90vw);
        border-left: 1px solid var(--line-strong);
        transform: translateX(100%);
        transition: transform var(--transition);
        z-index: 30;
    }

    .panels.is-open {
        transform: translateX(0);
    }

    .status-bar .desktop-only {
        display: none;
    }
}

@media (max-width: 30rem) {
    :root {
        --rail-width: 2.5rem;
        --header-height: 2.75rem;
    }

    .brand {
        font-size: var(--text-sm);
    }

    .status-bar {
        gap: var(--gap-2);
        font-size: var(--text-xs);
    }

    .panels {
        width: 100vw;
    }

    .dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .dialog-content {
        flex: 1;
        overflow-y: auto;
    }
}

/* Ponteiro grosseiro (toque): alvos maiores independem da largura da tela. */
@media (pointer: coarse) {
    .layer-row {
        height: 2.5rem;
    }

    .layer-action {
        width: 2rem;
        height: 2rem;
    }

    .menu-list button {
        padding: var(--gap-3);
    }
}