/* Phone "stage": keep each window at its desktop layout and scale the whole
   composition to the phone width, arranged as an overlapping vertical cascade
   so both windows stay visible. The scale factor, stage width and the second
   window's offset are set by the inline script in layouts/index.html. */
@media (max-width: 720px) {
  .main { overflow-x: hidden; }

  /* Bloomberg desk: vol window behind, GMM board cascaded over its lower third and in front */
  .desk { max-width: none; min-height: 0; margin-top: 12px; }
  .desk-win { position: absolute !important; margin: 0 !important; }
  /* the DLIB window's inner .bbg carries z-index:50 for desktop floating; give the
     wrapper its own stacking context so that 50 stays inside and the GMM board wins */
  #dw-vol { left: 0 !important; right: auto !important; top: 0 !important; z-index: 1 !important; }
  #dw-gmm { left: 24px !important; right: auto !important; z-index: 3 !important; }

  /* Kali terminals: binwalk behind, radare2 cascaded over its lower third and in front */
  .terms { min-height: 0; }
  .term { position: absolute !important; width: 540px; max-width: none; margin: 0 !important; }
  #term2 { left: 0 !important; top: 0 !important; z-index: 1 !important; }
  #term1 { left: 40px !important; z-index: 3 !important; }
  .term-scroll { height: 300px; }      /* undo the tablet compaction */
  .terms-hint { display: none; }       /* typing isn't available on phones */

  /* Leica desk: camera in back, the CLI cascaded onto the bottom of the camera
     and in front (kept narrow so the composition scales up, not down) */
  .leica-desk { min-height: 0; max-width: none; }
  .lwin { position: absolute !important; margin: 0 !important; width: auto !important; }
  #lw-cam  { left: 0 !important;  top: 0 !important; width: 496px !important; z-index: 1 !important; }
  #lw-term { left: 20px !important; width: 468px !important; z-index: 2 !important; }
  .lterm-scroll { height: 300px; }     /* undo the tablet compaction */
}