:root {
    --vh:  -webkit-fill-available;


    --bkg:          var(--creig);
    --text:         var(--black);
    --menu:         var(--black);
    --link:         var(--brred);
    --lowlink:      var(--grock);
    --action:       var(--orange);
    --input:        var(--white);
    --hover:        var(--brood);
    --click:        var(--black);
    --textaction:   var(--white);
    --highlight:    var(--beige);
    --lowlight:     var(--brown);
    --inactive:     var(--grey);
    --oops:         var(--yellow);
    --shadow:       var(--grey);
    --placehold:    var(--cafe);

    --notif:        var(--orange);
    --edit:         var(--orange);
    --fs-text:      var(--yellow);

    /* Interaction code */
    --youSay:       var(--turquoise);
    --editBl:       var(--pink);
    --weGuid:       var(--yellow);
    --youCan:       var(--apple);
    --dragBl:       var(--brown);

    /* Status class */
    --on:           var(--orange);
    --off:          var(--grey);
    --live:         var(--apple);
    

}


code 			{ display: block; height: 30em; overflow: scroll; width: 100%; max-width: 64vw; margin: 1em auto; border: 1px solid; padding: 1em; background-color: var(--white); }
code.truncate   { max-height: 10vh; overflow: scroll; }
code.truncate.expand   { max-height: 70vh; }



/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////////  -------   ACTIONS  -------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */

.pop            { /* listen  */ }
.genEpSave      { /* listen  */ }


/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////////  -------   EFFECTS  -------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.genius                             { display: flex; place-items: center; margin: 1em auto; }
.genius input + label               { margin: auto; }
.genius input + label svg           { margin: auto; width: 1em; height: 1em;  transition: width 0.3s; transition: height 0.3s; }
.genius input:checked + label svg   { width: 2.5em; height: 2.5em; transition: width 0.3s; transition: height 0.3s; }



/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////////  -------   DEPLOY   -------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */

.deploy.checklist       { grid-template-columns: 1fr; grid-gap: 0.5em; width: 36rem; margin: 0 auto; }
.deploy.checklist > *   { margin: 0; }



/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////////  -------   ADMFORM  -------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.admForm                         { position: fixed; height: 100vh; width: 100vw; background-color: rgba(0, 0, 0, 0.3); top: 0; color: var(--action); display: grid; place-content: center; padding: 6em 2em; }
.admForm > div                   { width: 36rem; max-width: calc(100vw - 6em); margin: auto; background-color: rgba(0, 0, 0, 0.85); color: var(--cream); padding: 2em 1.5em; box-shadow: 1px 1px 3px #333; }
.admForm *[contenteditable]      { background-color: transparent; border: 0.3px dashed var(--action); padding: 0; text-align: left; }
.admForm *[contenteditable]:focus{ outline: none; border-style: solid; }
.admForm h3                      { padding: 0.5em 0 1.5em; }
.admForm h4                      { font-variation-settings: "wght" 750; text-align: left; font-size: 0.9em; padding-top: 0.4em; }
.admForm p                       { text-align: left; }
.admForm input + label           { display: inline-block; margin: 0 1em 0 0;  }
.admForm label svg               { display: inline-block; margin: 0 0.5em 0 0; top: 0.1em; padding: 0.15em; width: 0.8em; height: 0.8em; border: none; }
.admForm input + label           { font-variation-settings: "wght" 200;  }
.admForm input:checked + label   { font-variation-settings: "wght" 700;  }
.admForm input:checked + label svg  { padding: 0; }

.admForm button[type=submit]     { grid-column: 1 / 3; padding: 0.4em 0.8em; background-color: var(--action); color: var(--textaction); margin: 2em auto 0; width: auto; border: none; }


.admForm .sidelabel              { max-width: unset; place-items: start; }
.admForm .sidelabel label        { font-weight: unset;  }

.admForm .close                  { bottom: 0.8em; background-color: black; }



@media only screen and (max-width: 609px) { 
    .admForm > div                { min-width: 70vw; width: 100%; }
}


/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////////  -------   S0RTER   -------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.sorter      		{ display: grid; grid: 1fr / repeat(auto-fill, 12em); max-width: unset; width: 140em; overflow-x: scroll; position: relative; column-gap: 0.5em; padding: 1em; min-height: 80vh; }
.sorter > div 		{ width: 100%; padding: 0.7em; text-align: left; background-color: var(--beige); height: calc(100vh - 17em); overflow: scroll; }
.sorter > div > h3  { padding: 0 0 1.5em; margin: 0; font-variation-settings: "wght" 750; text-align: left; font-size: 0.9em; }
.sorter ul 			{ display: inline-grid; grid-gap: 0.3em; margin: 0 0 2em; }
.sorter ul li 		{ width: 100%; margin: 0 0 auto; padding: 0.7em; }
.sorter label 		{ width: 100%; text-align: left; }
.sorter input[type=checkbox] + label { display: block; }
.sorter .newObj 	{ border: 1px dotted; padding: 0; margin: 0.2em 0 0; }
.sorter .newObj svg { width: 1em; height: 1em; padding: 0.15em; }
.sorter li input[type=checkbox] + label svg 		{ border: none; }
.sorter li input[type=checkbox]:checked + label svg { color: var(--turquoise); background-color: transparent; }

.sorter li div svg  { width: 1em; height: 1em; }



/* /////////////////////////////////////////////////////// */
/*                                                         */
/* ////////////  --------   EPICS   --------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.epics  				{ font-size: 0.8em; }
.epics > div 			{ padding: 0.5em; background-color: var(--beige); }
.epics li 				{ display: grid; grid-template-columns: 1fr auto; width: 100%; background-color: var(--cream); }
.epics li *  			{ padding: 0; text-align: left; }
.epics li div 			{ position: relative; }
.epics li h2			{ font-size: 1.1em; }
.epics li p 			{ max-height: 2.5em; overflow: hidden; }
.epics li span 			{ width: 100%; text-align: left; }
.epics li svg 			{ margin: auto; }

.epics .F, .epics .S, .epics .P 	{ border-left: 4px solid; }
.epics .F 				{ border-color: var(--red); }
.epics .S 				{ border-color: var(--yellow); }
.epics .P 				{ border-color: var(--turquoise); }

svg.F, svg.S, svg.P     { width: 0.8em; height: 0.8em; border: none; }
svg.F                   { color: var(--red); }
svg.S                   { color: var(--yellow); }
svg.P                   { color: var(--turquoise); }






.contained .sideside  { grid-gap: 3em; }