/* Map designer layout */

.studio-head { margin-bottom: 1.75rem; }
.studio-head h1 { font-size: clamp(3rem, 7vw, 4.75rem); line-height: 0.9; }

.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--muted); }
.field input[type="text"] {
    width: 100%; min-height: 2.5rem; padding: 0.4rem 0.6rem;
    font: 500 1rem var(--font-body); color: var(--text);
    background: var(--bg); border: 1px solid var(--line-strong); border-radius: 0;
}
.field input[type="text"]:disabled { opacity: 0.5; }
.field input[type="file"] { color: var(--text); font: inherit; padding: 0.35rem 0; max-width: 100%; }
.check { display: flex; align-items: center; gap: 0.6rem; color: var(--text); font-size: 0.95rem; margin-top: 1rem; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--amber); }

.setup { background: var(--bg-2); border: 1px solid var(--line-strong); padding: 1.25rem; margin-bottom: 1.5rem; }
.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; }
@media (min-width: 48rem) { .setup-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.field-file { grid-column: span 2; }
.setup-actions { grid-column: span 2; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.setup-note { margin: 1rem 0 0; }
.status { margin: 0.9rem 0 0; min-height: 1.5rem; color: var(--amber); font-weight: 500; }

.studio-body { display: grid; gap: 1.5rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
/* Wide screens: the map on the left, tools on the right, so you can pick a tile and paint without scrolling. */
@media (min-width: 70rem) {
    .studio-body { grid-template-columns: minmax(0, 1fr) 24rem; }
    .studio-body > .map-panel { grid-column: 1; grid-row: 1; }
    .studio-body > .side {
        grid-column: 2; grid-row: 1;
        position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
    }
}

.panel { background: var(--bg-2); border: 1px solid var(--line-strong); padding: 0.85rem 1rem 1rem; min-width: 0; }
.panel h2 { font-size: 1.4rem; margin-bottom: 0.2rem; }
.hint { color: var(--muted); font-size: 0.95rem; margin: 0 0 0.75rem; }
.side { display: grid; gap: 1.5rem; }

/* Map and Tileset have a title bar and can pop out into a window. */
.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.panel-bar h2 { margin-bottom: 0.2rem; }
.panel-bar .icon-btn { width: 2rem; height: 2rem; flex: none; border: 1px solid var(--line-strong); }
.panel-bar .icon-btn:hover { border-color: var(--amber); }
.panel-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; border-style: dashed; color: var(--muted); }
.panel-slot p { margin: 0; }

.panel.is-floating {
    position: fixed; display: flex; flex-direction: column;
    padding: 0; overflow: hidden;
    box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.55); border-color: var(--amber);
}
.is-floating .panel-bar {
    padding: 0.15rem 0.15rem 0.15rem 0.75rem; background: var(--bg-3); border-bottom: 1px solid var(--line-strong);
    cursor: grab; touch-action: none; user-select: none;
}
.is-floating .panel-bar:active { cursor: grabbing; }
.is-floating .panel-bar h2 { font-size: 1.1rem; margin: 0; }
.is-floating .panel-body { flex: 1; min-height: 0; overflow: auto; padding: 0.75rem; }
.panel-grip {
    position: absolute; right: 0; bottom: 0; width: 1.5rem; height: 1.5rem; cursor: nwse-resize; touch-action: none;
    background: linear-gradient(135deg, transparent 50%, var(--amber) 50%, var(--amber) 58%, transparent 58%, transparent 70%, var(--amber) 70%, var(--amber) 78%, transparent 78%);
}

/* Canvases keep their natural pixel size and scroll inside the panel. */
.canvas-scroll { max-height: 34rem; overflow: auto; }
.map-panel .canvas-scroll { max-height: none; }
.tileset-panel .canvas-scroll { max-height: 22rem; }
.panel.is-floating .canvas-scroll { max-height: none; }
.canvas-scroll canvas { display: block; }
canvas.paper {
    background-color: var(--paper);
    background-image: conic-gradient(#dfe8ee 25%, transparent 0 50%, #dfe8ee 0 75%, transparent 0);
    background-size: 16px 16px;
    cursor: crosshair;
    border: 1px solid var(--line-strong);
}

.layers { margin-bottom: 1rem; border: 1px solid var(--line); }
.layer { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.layer:last-child { border-bottom: 0; }
.layer.is-selected { background: var(--bg-3); box-shadow: inset 4px 0 0 var(--amber); }
.layer-name {
    flex: 1; text-align: left; padding: 0.6rem 0.75rem; background: none; border: 0;
    color: var(--text); font: 500 1rem var(--font-body); cursor: pointer; min-height: 2.75rem;
}
.layer-name:hover { color: var(--amber); }
.icon-btn {
    width: 2.75rem; background: none; border: 0; color: var(--text); cursor: pointer;
}
.icon-btn:hover:not(:disabled) { color: var(--amber); }
.icon-btn.is-off { color: var(--muted); opacity: 0.6; }
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.add-layer { display: grid; gap: 0.6rem; }
.add-layer .btn { justify-self: start; }

.tile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }