/* MODEL - CONTENT struc / style
- detail of plots, params etc. that should be same across multiple layout structures and themes
*/


.console, .params, .plotchooser, .plotspace, .cogspace {
  padding: var(--padw);
  font-size: smaller;
}

.codespace {
  padding: var(--padw);
  font-size: x-small;
  overflow-x: scroll;
  overflow-y: scroll;
  resize: horizontal;
}

.console {
  white-space : pre;
  line-height: 1.2;
  display: none;
  font-size: x-small;
  overflow-x: scroll;
  overflow-y: scroll;
  resize: horizontal;
}


/*=======INFO PANE ==== */
/* beware extra positions added to each - if specify defaults, may stretch across space */
.info {
  margin: 4px;
  padding: 4px;
  display: inline-block;
  pointer-events: auto;
}

.info_closer {
  cursor: pointer;
  font-size: large;
  color: firebrick;
}

/* ===== plots ====== */
/* plots are svgs: within svg many attrs make no difference:
  border => use a rect
  color => use fill OR stroke but NOT BOTH (=> blurry!)
  stroke ...
  resize
  also bear in mind plots are scaled down by svg viewbox */

.plot {
  resize: both;
  padding: 1px;
  cursor: crosshair;
}
.miniplot {
  padding: 1px;
  cursor: pointer;
  pointer-events: auto;
}

.plot_main {
  /* cursor: crosshair; */
  /*shape-rendering: geometricPrecision;*/
  stroke-linejoin: round;
  stroke-linecap: round;
}

.plot_label {
  font-size: smaller;
}
.plot_legend {
  font-size: smaller;
  overflow-y: scroll;
}

.plot_axis {
  font-size: smaller;
  font-weight: lighter;
  stroke: black;
  fill : black;
  /* if both fill AND stroke => blurry text , but text sets stroke none */
  /*font-kerning: normal;*/
  /*cursor: all-scroll;  */
}
.plot_title {
  font-size: larger;
  /* cursor: grab;  */
}

.plot_closer {
  cursor: pointer;
  font-size: x-large;
  fill: firebrick;
}

/* ===== popups ===== */
.poplay {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
}

.popup {
  position: absolute;
  z-index: 2;
  opacity: 0.8;
  font-size: smaller;
  fill: linear-gradient(to bottom right, #fd9, #db7);
  background-color: #feb; /* goes with opacity in struc */
  background-image: linear-gradient(to bottom right, #fdb, #db7 transparent);
}

.popup ul {
  list-style-type:disc;
  margin-top: 2px;
  margin-bottom: 2px;
}
.popup div {
  margin-top: 2px;
  margin-bottom: 4px;
}

/* ======= folding modules ===== */
/* change default bullets, marigns, padding */
h3 {
  margin-bottom: 4px;
}

ul {
list-style-type: none;
margin-top: 2px;
padding-left: 16px;
}
ul.blob {
  list-style-type: circle;
}
li {
  margin: 2px;
  padding: 2px;
}

/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
content: "\25B6";
display: inline-block;
margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
display: block;
}
/* ==== PARAMS ==== */

select {
  max-width: 120px;
}

button, select {
  background: var(--backmenu);
  background: var(--backdark);
}
select option {
    /*-webkit-appearance: none; /* initial; */
    background: var(--backmenu);
    /* background: var(--backdark);   */
    /* white on white can be an issue with dark themes on linux and windows ...? */
}

input[type=range] {
  width: 150px;
}

button, input[type=button], input[type=range], input[type=checkbox], select {
  cursor: pointer;
}

output.default {
  font-size: x-small;
  display: inline;
}

datalist {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: auto;
    bottom: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    width: 150px;
    font-size: x-small;
}
datalist Label {
  font-size: x-small;
  text-align: center;
}

/* moved from oval so can use in columns */
.cog, .cogclicked {
  font-family: Papyrus;
  cursor: pointer;
  pointer-events: auto; /* because container modspace is set to none */
  user-select: none;
  -webkit-user-select: none;
}
.cog {
  filter: drop-shadow(2px 2px 6px #0006);
  fill: #fec4;
}
.cog:hover {
  filter: drop-shadow(2px 2px 10px #fffc);
  fill: #fec7;
}
.cogclicked {
  filter: drop-shadow(2px 2px 15px #ff0e);
  fill: #feca;
}
.cogexpert {
  filter: drop-shadow(2px 2px 15px #f00e);
  fill: #fcca;
}
.cogshape{
  fill: #dde;
  opacity: 0.9;
}
.cogshapeexpert{
  fill: #f00;
  opacity: 0.9;
}

/* ==== MISC CUT ====
#site { } what does this do ?

old console
  background-color: #420;
  background-image: linear-gradient(to bottom right, #642, #210);
  color: white;


.startinfo {
  font-size: smaller;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 2px dashed darkgreen;
  margin: 2px;
  padding: 2px;
}
.psinfo, .psinfoload {
  display:inline-block;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 2px brown;
  margin: 2px;
  padding: 2px;
}
.psinfoload {
  position: absolute;
  bottom: 10px;
  z-index:1;
}
  */