/* less cannot parse grid syntax correctly, we put these here before we move to another framework */

.focal-tileboard { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  z-index: 1000;
}

.focal-tileboard .board_ { 
  --boardWidth: 890px;

  /* note that these are the tile_ counts, not the grid col and row (which is +1 each bec of the drawer and profile) */
  --tilecol: 5;
  --tilerow: 3;
  --tilesize: 132px;
  --drawerWidth: 170px;
  --profileHeight: 170px;
  --gapx: 10px;
  --gapy: 8px;

  row-gap: var(--gapy);
  column-gap: var(--gapx);
  grid-template-columns: var(--drawerWidth) repeat( var(--tilecol), var(--tilesize)) [end];
  grid-template-rows: var(--profileHeight) repeat( var(--tilerow), var(--tilesize)) [end];
  align-content: start;

  position: absolute;
  padding: calc(2 * var(--gapy)) calc(2 * var(--gapx)) calc(2 * var(--gapy) ) 0;
  max-width: 100vw;
  /* max-height: 100vh; --- small width phone (landscape mode) will have problem with this */
}

.focal-tileboard .board_ { width: var(--boardWidth); }
  .focal-tileboard .board_ .tile_ { aspect-ratio: 1/1; }
  .focal-tileboard .board_ .drawer_ { margin: calc( var(--gapy) * -2) var(--gapx) calc( var(--gapy) * -2) 0; }
  .focal-tileboard .board_.slidein_ { left: 50%; top: 80px; opacity: 1; }
.focal-tileboard .drawer_ { grid-column: 1 / 1; grid-row: 1 / end; }
.focal-tileboard .profile_ { grid-column: 2 / end; grid-row: 1 / 1; }
.focal-tileboard .screen_.slidein_ { background-color:#000000a8; }


/* tablet, most hires phones, disable now since we set meta viewport initial-scale */
@media screen and (max-width: 0px) {
                      /* was ^^^ 890px */
  .focal-tileboard { 
    --tilecol: 4;
    --tilerow: 4;
    --tilesize: 132px;
    --drawerWidth: 130px;
    --boardWidth: 100vw;
  }

  .focal-tileboard .board_ {
    width: var(--boardWidth);
    border-radius: 0!important;
    width: 100%;
    height: 100%;
    padding-top: 60px;
  }

  .focal-tileboard .drawer_ { grid-column: 1 / 1; grid-row: 1 / end; }
  .focal-tileboard .profile_ { grid-column: 2 / end; grid-row: 1 / 1; }

  .focal-tileboard .board_.slidein_ { top: 0; }
  .focal-tileboard .board_ .drawer_ { height: 100vh; border-radius: 0!important; margin-top: -60px; }
  .focal-tileboard .board_ .drawer_ .action_ { justify-content: center; }
  .focal-tileboard .board_ .drawer_ .action_ .label_ { display: none; }
  /* .focal-tileboard .board_ .drawer_ .quicks_ { flex-flow: column; } */
  .focal-tileboard .board_ .logo_ { width:65px!important; height:65px!important; }
  .focal-tileboard .closebtn_ { top: 10px!important; right: 10px!important; }
  .focal-tileboard .boardtabs_ {  top: 10px!important; transform: none!important; left: 160px!important; }
  .focal-tileboard .boardtabs_ .tab_ {  border-radius: .5em!important; }

  /* scaling UI */
  .focal-tileboard  {
    transform: scale(0.6667);
    transform-origin: 0 0;
  }
    .focal-tileboard  { height: 100vh; width: 100vw; }
  .focal-shelf {
    width: 150vw!important;
    height: 150vh!important;
    transform: scale(0.6667);
    transform-origin: 50% 0;
  }
}

@keyframes delay-shrink {
  from { left: -40px; top: -30px; transform: scale(1); }
  to { left: -50px; top: -40px; transform: scale(0.4); }
}

@keyframes pulsate {
  0 { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: .5; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes spotpoint {
  0% { transform: scale(1) translate(-10%, -10%); }
  20% { transform: scale(.9) translate(0, 0); }
  30% { transform: scale(1) translate(-10%, -10%); }
  100% { transform: scale(1) translate(-10%, -10%); }
}