/* generator-shell.css — the layout every generator page shares: app bar,
   panel + 3D view side by side, and the phone layout (view sticky under the
   app bar, panel below). Load it AFTER the tool's own stylesheet, so a
   prototype that brings its own layout rules is overridden here and every
   tool behaves the same on a phone. The tool stylesheet keeps only its
   controls, colours and extras (#cutctl and the like).

   Colours are literal, like generator-ux.css: the tools name their custom
   properties inconsistently (--ink-2 vs --ink2). */

html,body{height:100%;margin:0}
body{display:flex;flex-direction:column;overflow:hidden}

/* ---------- app bar (link back to the site) ---------- */
#appbar{flex:0 0 auto;display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;
  background:#161C23;border-bottom:1px solid #222B34}
#appbar a.back{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:#A7B2BD;text-decoration:none;padding:5px 10px;border:1px solid #222B34;border-radius:4px}
#appbar a.back:hover{color:#E8EDF2;border-color:#3a4753;background:rgba(232,237,242,.05)}
#appbar a.back svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
#appbar .crumb{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6C7883}
#appbar .crumb b{color:#A7B2BD;font-weight:700}
#appbar .spacer{flex:1}
#appbar .badge{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#FF6A2B,#C1121F);border:1px solid #C1121F;border-radius:100px;padding:3px 10px}

/* ---------- panel + view ---------- */
#app{flex:1;display:flex;flex-direction:row;min-height:0}
#panel{width:352px;flex:0 0 352px;height:100%;overflow-y:auto;border-right:1px solid #222B34;
  display:flex;flex-direction:column}
#view{flex:1;position:relative;min-width:0;height:auto;order:0}
/* generator-view.js sizes the drawing buffer only; CSS sizes the canvas. Without
   this the canvas shows at device-pixel size, 2-3x the view on a phone. */
#view canvas{display:block;width:100%;height:100%;touch-action:none}
#viewbar{position:absolute;right:16px;top:16px;display:flex;gap:5px;z-index:2}
#hud{position:absolute;left:18px;bottom:15px;pointer-events:none}

/* ---------- phones: view on top and sticky, panel scrolls under it ---------- */
@media (max-width:860px){
  body{overflow:auto;height:auto;min-height:100%}
  #appbar{position:sticky;top:0;z-index:6}
  #app{flex-direction:column;min-height:0}
  #view{height:52vh;flex:none;order:-1;position:sticky;top:44px;z-index:5}
  #panel{width:100%;flex:none;height:auto;border-right:0;overflow:visible}
}
/* the breadcrumb does not fit beside the buttons and pushed the page sideways */
@media (max-width:560px){
  #appbar{gap:8px;padding:0 10px}
  #appbar .crumb{display:none}
  #viewbar{left:10px;right:10px;flex-wrap:wrap;justify-content:flex-end}
}