/* tools.css — shared app shell for the tools suite (maze editor, level editor, etc.)
   Builds on top of public.css tokens (--bg, --orange, --mono, etc). Mobile-first:
   base styles target phone width, larger layouts are added at min-width breakpoints. */

.tool-shell{display:flex;flex-direction:column;min-height:100vh}

.tool-topbar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(6,8,15,.97);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}
.tool-topbar a.back{font-family:var(--mono);font-size:.68rem;color:var(--text-dim);letter-spacing:.06em;white-space:nowrap}
.tool-topbar a.back:hover{color:var(--orange)}
.tool-topbar h1{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-bright);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-topbar .tb-actions{display:flex;gap:6px;flex-shrink:0}

.tool-body{flex:1;display:flex;flex-direction:column;min-height:0}

/* Tab strip — used on mobile to switch between Canvas / Controls / Export
   since side-by-side panels don't fit a phone screen */
.tool-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--panel)}
.tool-tabs button{flex:1;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);background:none;border:none;padding:11px 4px;border-bottom:2px solid transparent}
.tool-tabs button.active{color:var(--orange);border-bottom-color:var(--orange)}

.tool-panes{flex:1;position:relative;min-height:0}
.tool-pane{display:none;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tool-pane.active{display:flex;flex-direction:column}

/* Canvas area */
.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;overflow:auto;background:
  radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 1px) 0 0/16px 16px;
  background-color:var(--bg2)}
.canvas-wrap canvas{background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);touch-action:none;max-width:100%;height:auto}

/* Controls panel */
.ctrl-panel{padding:14px;display:flex;flex-direction:column;gap:16px}
.ctrl-group{display:flex;flex-direction:column;gap:8px}
.ctrl-group .cg-label{font-family:var(--mono);font-size:.62rem;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between}
.ctrl-group .cg-label .val{color:var(--orange)}
.seg-control{display:flex;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);overflow:hidden}
.seg-control button{flex:1;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;padding:9px 6px;background:none;border:none;color:var(--text-dim);border-right:1px solid var(--border2)}
.seg-control button:last-child{border-right:none}
.seg-control button.active{background:var(--orange-dim);color:var(--orange)}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:var(--border2);border-radius:2px;width:100%}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--orange);cursor:pointer;border:2px solid var(--bg)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--orange);cursor:pointer;border:2px solid var(--bg)}

.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn-row .btn{flex:1;min-width:0}
.btn-block{width:100%}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--card2);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 18px;font-family:var(--mono);font-size:.7rem;color:var(--text-bright);z-index:200;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

.export-pane{padding:14px;display:flex;flex-direction:column;gap:12px}
.code-block{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:12px;font-family:var(--mono);font-size:.66rem;line-height:1.6;color:var(--text);overflow-x:auto;white-space:pre;max-height:260px}

.saved-list{display:flex;flex-direction:column;gap:8px}
.saved-item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.saved-item .si-meta{flex:1;min-width:0}
.saved-item .si-title{font-size:.82rem;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved-item .si-sub{font-family:var(--mono);font-size:.6rem;color:var(--text-dim)}

.empty-state{padding:30px 14px;text-align:center;color:var(--text-dim);font-size:.8rem}

/* Tablet and up: split canvas + side panel instead of tabs */
@media(min-width:880px){
  .tool-tabs{display:none}
  .tool-panes{display:flex}
  .tool-pane{display:flex !important;height:auto}
  .tool-pane[data-pane=canvas]{flex:1;border-right:1px solid var(--border)}
  .tool-pane[data-pane=controls]{width:300px;flex-shrink:0;border-right:1px solid var(--border)}
  .tool-pane[data-pane=export]{width:340px;flex-shrink:0}
}
@media(min-width:1200px){
  .tool-pane[data-pane=controls]{width:320px}
  .tool-pane[data-pane=export]{width:380px}
}