/* =========================================================================
   CanvaTool — editor shell
   Full-viewport app layout: top bar, icon rail, sliding panel, canvas stage.
   ========================================================================= */

.editor-body { height: 100dvh; overflow: hidden; background: var(--surface-2); }

.editor {
    display: grid;
    grid-template-rows: 56px 1fr;
    height: 100dvh;
}

/* ------------------------------------------------------------------ top bar */

.ed-top {
    display: flex; align-items: center; gap: .4rem; padding-inline: .6rem;
    background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0;
}
.ed-top__home { display: inline-flex; padding: .2rem; border-radius: 8px; }
.ed-top__title {
    width: clamp(120px, 22vw, 280px); padding: .35rem .55rem; font-size: .92rem; font-weight: 600;
    border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); color: var(--ink);
}
.ed-top__title:hover { border-color: var(--line); }
.ed-top__status { font-size: .78rem; color: var(--ink-3); min-width: 96px; white-space: nowrap; }
.ed-top__spacer { flex: 1; }
.ed-top__group { display: inline-flex; align-items: center; gap: .15rem; padding-inline: .3rem; border-inline-start: 1px solid var(--line); }
.ed-top__zoom { font-size: .8rem; color: var(--ink-2); }
.ed-top__zoom span { min-width: 46px; text-align: center; }

.ed-icon {
    width: 32px; height: 32px; display: inline-grid; place-items: center;
    border: 1px solid transparent; border-radius: 8px; background: transparent;
    color: var(--ink-2); cursor: pointer; font-size: 1rem; line-height: 1;
}
.ed-icon:hover { background: var(--surface-3); color: var(--ink); }
.ed-icon.is-active { background: var(--brand-100); color: var(--brand-600); }
.ed-icon[disabled] { opacity: .35; pointer-events: none; }

/* --------------------------------------------------------------- body/rail */

.ed-body { display: flex; min-height: 0; }

.ed-rail {
    width: 76px; flex: 0 0 76px; background: var(--surface); border-inline-end: 1px solid var(--line);
    display: flex; flex-direction: column; padding-block: .4rem; overflow-y: auto;
}
.ed-rail__btn {
    display: grid; gap: .15rem; justify-items: center; padding: .55rem .25rem;
    border: 0; background: transparent; cursor: pointer; color: var(--ink-3); font-size: .68rem;
}
.ed-rail__btn:hover { color: var(--ink); background: var(--surface-2); }
.ed-rail__btn.is-active { color: var(--brand-600); background: var(--brand-100); }
.ed-rail__glyph { font-size: 1.15rem; line-height: 1; }
.ed-rail__label { line-height: 1.15; text-align: center; }

.ed-panel {
    width: 320px; flex: 0 0 320px; background: var(--surface); border-inline-end: 1px solid var(--line);
    position: relative; overflow-y: auto; overscroll-behavior: contain;
}
.ed-panel__close {
    position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; z-index: 2;
    width: 28px; height: 28px; border: 0; border-radius: 999px; background: var(--surface-3);
    cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--ink-2);
}
.ed-panel__body { padding: 1rem .9rem 2rem; }
.ed-panel h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 1.2rem 0 .5rem; }
.ed-panel h3:first-child { margin-top: 0; }

/* --------------------------------------------------------------- the stage */

.ed-stage-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

.ed-contextbar {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    padding: .4rem .6rem; background: var(--surface); border-bottom: 1px solid var(--line);
    min-height: 44px;
}
.ed-contextbar label { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--ink-3); }
.ed-contextbar input[type=number] { width: 68px; padding: .25rem .4rem; font-size: .8rem; }
.ed-contextbar input[type=color] { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.ed-contextbar select { width: auto; min-width: 96px; padding: .25rem .4rem; font-size: .8rem; }
.ed-contextbar input[type=range] { width: 90px; }
.ed-contextbar .sep { width: 1px; height: 22px; background: var(--line); }

.ed-scroll {
    flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center;
    padding: 2rem; background:
        linear-gradient(45deg, var(--surface-3) 25%, transparent 25%) 0 0/24px 24px,
        linear-gradient(-45deg, var(--surface-3) 25%, transparent 25%) 0 12px/24px 24px,
        var(--surface-2);
}

.ed-stage { position: relative; transform-origin: center center; }

.ed-canvas {
    position: relative; overflow: hidden; background: #fff;
    box-shadow: var(--shadow-lg); transform-origin: top left;
    /* Touch drags must move elements, not pan the stage: preventDefault on
       pointerdown does not cancel a browser scroll gesture, touch-action does. */
    touch-action: none;
}

.ed-overlay { position: absolute; inset: 0; pointer-events: none; transform-origin: top left; }

/* elements --------------------------------------------------------------- */

.el { position: absolute; transform-origin: center center; }
.el--locked { pointer-events: none; }
.el--hidden { display: none; }
.el__text {
    width: 100%; height: 100%; white-space: pre-wrap; word-break: break-word;
    outline: none; overflow: hidden;
}
.el__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el__svg { width: 100%; height: 100%; }
.el__svg svg { width: 100%; height: 100%; display: block; }
.el__frame { width: 100%; height: 100%; overflow: hidden; }
.el__frame img { width: 100%; height: 100%; object-fit: cover; }

/* selection UI ------------------------------------------------------------ */

.sel-box { position: absolute; border: 1.5px solid var(--brand-500); pointer-events: none; }
.sel-handle {
    position: absolute; width: 11px; height: 11px; background: #fff;
    border: 1.5px solid var(--brand-500); border-radius: 3px; pointer-events: auto; z-index: 3;
    touch-action: none;
}
.sel-handle[data-h="nw"] { cursor: nwse-resize; }
.sel-handle[data-h="ne"] { cursor: nesw-resize; }
.sel-handle[data-h="se"] { cursor: nwse-resize; }
.sel-handle[data-h="sw"] { cursor: nesw-resize; }
.sel-handle[data-h="n"], .sel-handle[data-h="s"] { cursor: ns-resize; }
.sel-handle[data-h="e"], .sel-handle[data-h="w"] { cursor: ew-resize; }
.sel-rotate {
    position: absolute; width: 20px; height: 20px; border-radius: 999px; background: #fff;
    border: 1.5px solid var(--brand-500); pointer-events: auto; cursor: grab; z-index: 3;
    touch-action: none;
    display: grid; place-items: center; font-size: .7rem; color: var(--brand-500);
}
.snap-line { position: absolute; background: var(--accent); pointer-events: none; z-index: 4; }

/* page strip -------------------------------------------------------------- */

.ed-pages {
    display: flex; align-items: center; gap: .4rem; padding: .4rem .6rem;
    background: var(--surface); border-top: 1px solid var(--line); overflow-x: auto;
}
.ed-page-btn {
    padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); font-size: .78rem; cursor: pointer; color: var(--ink-2); white-space: nowrap;
}
.ed-page-btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --------------------------------------------------------------- fragments */

.ed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.ed-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ed-grid--4 { grid-template-columns: repeat(4, 1fr); }

.ed-tile {
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
    cursor: pointer; overflow: hidden; padding: 0; aspect-ratio: 1; display: grid; place-items: center;
    position: relative;
}
.ed-tile:hover { border-color: var(--brand-500); }
.ed-tile img { width: 100%; height: 100%; object-fit: cover; }
.ed-tile svg { width: 62%; height: 62%; }
.ed-tile .badge { inset-block-start: .25rem; inset-inline-end: .25rem; font-size: .62rem; padding: .05rem .35rem; }

.ed-template-tile { aspect-ratio: 3 / 4; }

.ed-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
.ed-swatch { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.ed-swatch.is-active { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.ed-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.ed-row > label { flex: 1; font-size: .8rem; color: var(--ink-2); }
.ed-row input[type=range] { flex: 1.4; }
.ed-row output { width: 44px; text-align: end; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.ed-textbtn {
    display: block; width: 100%; text-align: start; padding: .7rem .8rem; margin-bottom: .4rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
    cursor: pointer; color: var(--ink);
}
.ed-textbtn:hover { border-color: var(--brand-500); }

.ed-layer {
    display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer; font-size: .82rem;
}
.ed-layer:hover { background: var(--surface-2); }
.ed-layer.is-active { background: var(--brand-100); border-color: var(--brand-500); }
.ed-layer__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-layer__btn { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: .85rem; padding: .1rem .2rem; }
.ed-layer__btn:hover { color: var(--ink); }

.ed-drop {
    border: 2px dashed var(--line); border-radius: var(--radius); padding: 1.25rem; text-align: center;
    color: var(--ink-3); font-size: .85rem; cursor: pointer;
}
.ed-drop.is-over { border-color: var(--brand-500); background: var(--brand-100); }

/* ------------------------------------------------------------------ modals */

.ed-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.ed-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 18, 26, .55); }
.ed-modal__panel {
    position: relative; width: min(560px, calc(100vw - 2rem)); max-height: min(80vh, 720px);
    display: flex; flex-direction: column; background: var(--surface);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.ed-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.ed-modal__head h2 { margin: 0; font-size: 1.05rem; }
.ed-modal__body { padding: 1.1rem; overflow-y: auto; }

.ed-toast {
    position: fixed; inset-block-end: 1.25rem; inset-inline-start: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--surface); padding: .65rem 1.1rem; border-radius: 999px;
    font-size: .85rem; z-index: 300; box-shadow: var(--shadow);
}
[dir="rtl"] .ed-toast { transform: translateX(50%); }

.ed-progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-block: .5rem; }
.ed-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-600), var(--accent)); width: 0; transition: width .3s ease; }

/* erase-mask brush overlay */
.ed-mask-canvas { position: absolute; inset: 0; cursor: crosshair; z-index: 5; touch-action: none; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 860px) {
    .ed-rail { width: 60px; flex-basis: 60px; }
    .ed-rail__label { display: none; }
    .ed-panel { position: absolute; inset-block: 0; inset-inline-start: 60px; z-index: 30; width: min(300px, 78vw); flex-basis: auto; box-shadow: var(--shadow-lg); }
    .ed-top__title { width: 110px; }
    .ed-top__status { display: none; }
    .ed-top__zoom { display: none; }
}

@media (max-width: 560px) {
    .ed-top { overflow-x: auto; }
    .ed-scroll { padding: 1rem; }
}