/* OVAL LAYOUT
- specifies struc of console, paramviewer, plotchooser, plotspace
- builds on top of frame.css
*/

.main {

  grid-template-columns: var(--side) var(--consw) var(--rsbw) var(--panl) var(--rsbw) 1.2fr 0.5fr 1.5fr 1.5fr 0.5fr 1.2fr var(--rsbw) var(--panr) var(--rsbw) var(--codew) var(--side);
  grid-template-rows: var(--toph) var(--infoh) var(--pant) var(--rsbh) 1.1fr 0.5fr 0.4fr 1.8fr 0.4fr 0.5fr 1.1fr var(--rsbh) var(--panb) var(--both);

  font-size: smaller;
  user-select: none;
  -webkit-user-select: none;


}

.console {
  grid-column: 2 / 3;
  grid-row: 3 / -2;
  z-index: +1;
}

.rs1, .rs2, .rs3, .rs4 {
  grid-row: 3 / -2;
  z-index: +1;
}

.rs1 { grid-column: 3 / 4; }
.rs2 { grid-column: 5 / 6; }
.rs3 { grid-column: -6 / -5; }
.rs4 { grid-column: -4 / -3; }

.rst, .rsb {
  grid-column: 6 / -6;
  z-index: +1;
}
.rst { grid-row: 4 / 5; }
.rsb { grid-row: -4 / -3; }

.plotspace, .cogspace {
  border: solid green 1px;
  overflow-y: none;
  overflow-x: none;
  position: relative;
  touch-action: manipulation;

  /*z-index: +2;*/
  /*text-align: center;*/
}

#plotspace {
  grid-column: 4 / -4;
  grid-row: 3 / -2;
}

#cogspace {
  grid-column: 6 / -6;
  grid-row: 5 / -4;
}

#cogspace .info {
  position: absolute;
  z-index:1;
  color: var(--pstext);
}

#psl, #psr, #pst, #psb {
  overflow-y: scroll;
  overflow-x: none;
  display: inline-block;
  z-index: +1;
}


#psl {
  grid-column: 4 / 5;
  grid-row: 3 / -2;
}
#psr {
  grid-column: -5 / -4;
  grid-row: 3 / -2;
}
#pst {
  grid-column: 6 / -6;
  grid-row: 3 / 4;
}
#psb {
  grid-column: 6 / -6;
  grid-row: -3 / -2;
}

#plotspace .info {
  position: absolute;
  z-index:1;
  color: var(--pstext);
}

.modspace, .modtitle, .ovalopts, .docspace, .parspace, .infospace {
  border: solid #4441 1px; /* just a guide - remove eventually */
  display: inline-block;
  z-index: +1; /*2*/
  margin: 0px;
}
.plot { z-index: +2;}

.modspace, .modtitle, .docspace, .parspace, .infospace {
  padding: 10px; padding-bottom: 2px;
}

/* .modtitle, .ovalopts base appearance → frame.css */

.docspace, .parspace, .codespace {
  overflow-y: scroll;

}

.modspace {
  grid-column: 7 / -7;
  grid-row: 6 / -5;
  position : relative;
  pointer-events: none;
}

.modtitle {
  padding-top: 5%;
  padding-bottom: 0px;
  box-sizing: border-box;
  vertical-align: bottom;
  grid-column: 8 / -8;
  grid-row: 7 / 8;
  font-size: larger;
}

.ovalopts {
  grid-column: 8 / -8;
  grid-row: 9 / 10;
  padding: 2px; padding-bottom: 10px;
  position: relative;
  top: -12px;
  /* not clear why have to move it up (those unicodes extra-tall?) but it helps*/
}

/* .ovalopt → frame.css */

.parspace {
  display: none; /* freed by cogpopup; used in Columns layout only */
}
.infospace {
  grid-column: 8 / -8;
  grid-row: 8 / 9;
  /* overflow: hidden → frame.css */
}
.infocontent {
  /* fade-out bottom: oval can't scroll (shape-outside breaks) so fade signals overflow */
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
.infospace::before {
  content: "";
  float: left;
  width: 20%;
  height: calc(100% - 12px); /* 12px = top+bottom padding */
  shape-outside: polygon(0% 0%, 80% 0%, 35% 20%, 20% 35%, 20% 65%, 35% 80%, 80% 100%, 0% 100%);
}
.info-rfloat {
  float: right;
  width: 20%;
  height: calc(100% - 12px);
  shape-outside: polygon(100% 0%, 20% 0%, 65% 20%, 80% 35%, 80% 65%, 65% 80%, 20% 100%, 100% 100%);
}
.slider, .sliderlabel, .ticklab {
  display: block;
  float: right;
  margin: 0px;
  /*width: 100%; - this is what caused ticks to be left !*/
  /*width: 160px;
  text-align : right;
  display : inline;*/
}

.docspace {
  display: none; /* moved to side panel; infospace used in Oval */
}

.params {
  display: none;
}

.codespace {
  grid-column: -3 / -2;
  grid-row: 3 / -2;
  z-index: +1;
  display: none;
}

.plotchooser {
  /*
  grid-column: -3 / -2;
  grid-row: 3 / 8;
  overflow-y: scroll; */
  display: none;
}

/* startup blob: move infospace below the globe to avoid overlap with globe+cogs */
.infospace.startup {
  grid-column: 6 / -6;
  grid-row: -5 / -4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.infospace.startup::before {
  display: none;
}
/* ...but that row is where the lineplots are once the main model is up, and on a fast connection the
   model wins the race: Oval.appendSpans() puts infospan + puaspan in here as soon as it initialises,
   long before the globe bursts, and placePuas() fills them with anchors (aboutcogs, ovinf, nspinf)
   positioned for the *finished* oval layout - so they sit on top of the plots for the whole overlap
   phase. While .startup is on, show only wsu's own message; the handoff removes the class
   (Start.burstAndHandoff) and everything appears in its proper place. */
.infospace.startup > *:not(.startup-msg) {
  display: none;
}
/* same for the title row: InfoHandler's default showCogInfo(None) at init puts "Cogs" in titspan
   without any hover, and titlespace sits over the globe. wsu puts nothing here, so hide the lot. */
.modtitle.startup > * {
  display: none;
}


/*
.modblob, .modblobclicked {
  position : absolute;
  border-radius: 12px;
  text-align: center;
  font-family: Papyrus;
  opacity: 0.8;
}

.modblob {
  padding: 2px;
  box-shadow: 0 5px 8px 0 #000c;
  border: 1px outset blue ;
}

.modblob:hover {
  padding: 8px;
  box-shadow: 0 5px 8px 0 #fff9;
}

.modblobclicked {
  padding: 8px;
  box-shadow: 0 5px 8px 0 #ff0d;
  border: 1px outset yellow ;
}

.modbut {
  margin: 2px;
  padding: 2px;
  border-radius: 8px;
  border: 1px outset yellow ;
  box-shadow: 0 2px 2px 0 #dd0c;
  font-family: Papyrus;
}
*/
/*
slider, datalist, input {
  float: right;
}

slider::after, datalist:after, input::after {
  clear: right;
}*/

/*.ticklab {
  justify-content: right;
  color: red;
  float: right;
}
datalist, input {
  float: right;
}

datalist::after, input::after {
  clear : right;
}
label, output {
  clear : right;
}*/
/* no longer needed ?
#ovalinfo, #welcinfo, #linkinfo {
  position: absolute;
  color: var(--pstext);
  background: var(--pstextb);
  z-index: 3;
}
#ovalinfo, #welcinfo {
  top: 8px;
  left : 24px;
}
#linkinfo {
  bottom: 8px;
  right : 24px;
}
*/