/* Vector or Bitmap? (information-technology/vector-bitmap.php). The shared parts are in studio.css. On a laptop or
   desktop: the bitmap and the vector side by side, filling the height, with the controls and file sizes on the
   right; Edit has the picture on the left and the layers or bitmap tools on the right; the quiz fills the stage.
   On smaller screens everything stacks. Theme tokens only (the two formats' colours: --vb-bm
   orange, --vb-vc teal; the picture itself keeps its own colours, as an image would). */

:root{--vb-bm:var(--viz-2);--vb-vc:var(--viz-6)}

.vb-view{flex:1;min-height:0}
.vb-zoom{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,340px);gap:10px}
.vb-panes{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.vb-pane{padding:8px 10px 10px}
.vb-fmt{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.vb-pill{font:700 12.5px/1 var(--font-mono);padding:5px 9px;border-radius:999px;color:var(--on-viz)}
.vb-pill.bm{background:var(--vb-bm)}
.vb-pill.vc{background:var(--vb-vc)}
.vb-box{flex:1;min-height:0;position:relative;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.vb-box canvas,.vb-box svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vb-cap{flex:none;margin-top:6px;min-height:2.9em}
.vb-side{padding:10px 12px}
.vb-side-in{display:flex;flex-direction:column;gap:10px}
.vb-side-in h2{margin:4px 0 0}
.vb-side-in h2 .st-muted{text-transform:none;letter-spacing:0;font-weight:500}
table.vb-sizes td{vertical-align:top}
table.vb-sizes .st-mono{font-size:12px;color:var(--ink-soft)}
.vb-bars{display:flex;flex-direction:column;gap:5px}
.vb-bars div{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.vb-bars i{display:block;height:12px;border-radius:3px;min-width:2px}
.vb-bars i.bm{background:var(--vb-bm)}
.vb-bars i.vc{background:var(--vb-vc)}
.vb-verdict{padding:10px 12px;border-radius:8px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent)}

/* Edit */
.vb-edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:10px}
.vb-stage{padding:8px 10px 10px}
.vb-edit-box{background:repeating-conic-gradient(var(--panel-2) 0 25%,var(--panel) 0 50%) 0 0/20px 20px}
.vb-edit-box svg g[id]{cursor:pointer}
.vb-layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.vb-layers li{display:grid;grid-template-columns:34px 1fr 32px 32px;gap:4px;align-items:center;padding:3px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2)}
.vb-layers li.on{border-color:var(--accent);background:var(--accent-tint)}
.vb-layers li.off .vb-lname{opacity:.5;text-decoration:line-through}
.vb-layers button{font:600 13px/1.2 var(--font-body);color:var(--ink);background:transparent;border:1px solid transparent;border-radius:5px;padding:5px 6px;cursor:pointer;text-align:left;min-height:30px}
.vb-layers button:hover:not(:disabled){border-color:var(--accent)}
.vb-layers button:disabled{opacity:.3;cursor:default}
.vb-layers button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.vb-eye,.vb-mv{text-align:center !important;font-family:var(--font-mono) !important}
.vb-code{max-height:150px;white-space:pre;overflow:auto;font-size:11.5px}
.st-row .btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-tint)}

/* the quiz fills the stage */
.vb-quiz{min-height:0}
.vb-quiz .st-quiz,.vb-quiz .cq{height:100%}

@media (min-width:901px) and (max-width:1150px){
  .vb-zoom{grid-template-columns:minmax(0,1fr) minmax(270px,300px)}
  .vb-cap{min-height:0;font-size:12.5px}
  .vb-pane .st-head h2 .vb-fmt{display:none}
}
@media (max-width:900px){
  .vb-zoom,.vb-edit{display:flex;flex-direction:column}
  .vb-panes{display:flex;flex-direction:column}
  .vb-box{flex:none;aspect-ratio:1;width:100%}
  .vb-side .st-scroll{overflow:visible;flex:none}
  .vb-layers li{grid-template-columns:42px 1fr 42px 42px}
  .vb-layers button{min-height:40px}
  .vb-cap{min-height:0}
}
.vb-selbox{stroke:var(--viz-4)}   /* the chosen layer, in Edit */