/* FRAME LAYOUT
- root of other layouts 
- specifies base grid, top info bar, and edges 
*/

* { /*all -beware slow if put a lot here  */ 
    scroll-behavior: auto; /*smooth*/
    scrollbar-width: thin;
  }
  
  :root {
    --toph: 30px; 
    --infoh: 30px;
    --both: 20px; 
    --side: 20px; 
    --padw: 5px;
    --rsbw: 8px; /* resize bar*/
    --rsbh: 8px;
    --consw: 0fr;
    --codew: 0fr;
    --panl : 0fr; 
    --panr : 0fr;
    --pant : 0fr;
    --panb : 0fr;
    


    /* below system worked on mac but not others - due space for scrollbars  
    --pbw: calc(10px + 2 * var(--padw));
    --colh: calc(100vh - var(--toph) - 2 * var(--pbw) + 2px); */
  }
  
  /*https://markus.oberlehner.net/blog/simple-solution-to-prevent-body-scrolling-on-ios/*/
  body {
    margin:0;
    padding:0;
    height: 100vh; /* for non-safari-ios*/ 
    max-height: -webkit-fill-available; /* solves changing vh issue in ios */
    width: 100vw;
    overflow-x: hidden;  
    overflow-y: hidden;  
    position: fixed;
    top: 0;
    width: 100%;

  }
  
  .main {
    height: 100vh;
    max-height: -webkit-fill-available; 
    width: 100vw;
    overflow-x: hidden;  /* leave overflow-y due issues ios-15 menu-bar */
    overflow-x: hidden;  
    display: grid;
  }
  
  .topbar {
    /*height: var(--toph);
    width: 100vw; */
    grid-column: 2 / -2;
    grid-row: 1 / 2; 
    padding: var(--padw);
    background-image: linear-gradient(to top, var(--edge));
    /*display: inline-block; /* adds a gap below ?? */
  }
  .title {
    font-size: larger;
    vertical-align: middle;
  }
  .menus {
    font-size: smaller;
    display: inline-flexbox;
    float:right;
  }
  
  .infobar {
    grid-row: 2 / 3;
    grid-column: 2 / -2;
    padding: var(--padw);
    font-size: smaller;
    background: var(--back);
  }
  .note {
    font-size: smaller;
    font-style: italic;
  }

  #ledge {
    grid-column: 1 / 2;
    grid-row: 2 / -2; 
    background-image: linear-gradient(to left, var(--edge) );
  }
  
  #redge {
    grid-column: -2 / -1;
    grid-row: 2 / -2; 
    background-image: linear-gradient(to right, var(--edge) );
  }

  #tlc {
    grid-column: 1 / 2;
    grid-row: 1 / 2; 
    background-image: radial-gradient(farthest-side at var(--side) var(--toph), var(--edge) );
  }
  
  #trc {
    grid-column: -2 / -1;
    grid-row: 1 / 2; 
    background-image: radial-gradient(farthest-side at 0 var(--toph), var(--edge) );
  }
  
  #blc {
    grid-column: 1 / 2;
    grid-row: -2 / -1; 
    background-image: radial-gradient(farthest-side at var(--side) 0, var(--edge) );
  }
  
  #brc {
    grid-column: -2 / -1;
    grid-row: -2 / -1; 
    background-image: radial-gradient(farthest-side at 0 0, var(--edge) );
  }
  
  .footbar {
    grid-column: 2 / -2;
    grid-row: -2 / -1; 
    font-size: smaller;
    background-image: linear-gradient(to bottom, var(--edge) );
  }

  .rs1, .rs2, .rs3, .rs4 { cursor: col-resize; } 
  .rst, .rsb { cursor: row-resize; } 
  .rs1, .rs2, .rs3, .rs4, .rst, .rsb {  background: var(--back); }