: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); --youSay: var(--turquoise); --editBl: var(--pink); --weGuid: var(--yellow); --youCan: var(--apple); --dragBl: var(--brown); --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; }
.pop { }
.genEpSave { }
.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.checklist { grid-template-columns: 1fr; grid-gap: 0.5em; width: 36rem; margin: 0 auto; }
.deploy.checklist > * { margin: 0; }
.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%; }
}
.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 { 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; }