:root {

    --bkg:          var(--cream);
    --text:         var(--brock);
    --menu:         var(--black);
    --link:         var(--green);
    --lowlink:      var(--grock);
    --action:       var(--turquoise);
    --input:        var(--white);
    --hover:        var(--blued);
    --click:        var(--black);
    --textaction:   var(--white);
    --highlight:    var(--backlay);
    --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);
}




.feats form             { display: contents; }
.feats form li          { grid-template-rows: auto 1fr auto; grid-gap: 0.5em; place-content: start; background-color: #fffd; }
.feats form li:hover    { background-color: var(--white); color: var(--hover); }
.feats form button      { border: none; margin: 0 auto 0 0; background: transparent; }

.feats li           { border: none; aspect-ratio: 1 / 1; border-radius: 0; place-content: end; padding: 1em; grid-template-rows: 1fr; }
.feats li *         { padding: 0; }
.feats li h3        { margin: auto 0 0 auto; }
.feats li h4        { margin: auto 0 0 0; font-family: Oswald; }
.feats li p         { font-variation-settings: "wght" 180; }

.feats li span      { display: grid; grid-template-columns: auto 1fr; grid-gap: 0.3em; width: 100%; place-content: center; }
.feats li span *    { margin: auto; }
.feats li span svg  { padding: 0 0.3em 0.3em 0; }

.sidelabel .days ul { height: auto; }

.alt .sidelabel         { grid-template-columns: 1fr 3fr; margin-top: 2em; grid-gap: 3em; }
.alt .sidelabel > div   { margin: 0; width: 100%;  }

.itemlist.tight     { font-size: 0.85em; width: 100%; }

.itemlist.values li                  { grid-template-columns: 3em 1fr 2em 5em 5em; }
.itemlist.values li :first-child     { text-align: left; }
.itemlist.values li :nth-child(2)    { text-align: left; }

.sidelabel              { grid-gap: 1em; }
.sidelabel .epics li    { padding: 0.4em; -webkit-filter: drop-shadow(1px 1px 1px #222); }
.sidelabel .epics li svg.right { font-size: 1em; right: 2em; }


@media only screen and (max-width: 609px) {
    .feats          { grid-template-columns: repeat(auto-fit, minmax(8.5em, auto)); }
}


code[contenteditable]               { min-height: 5em !important; height: auto; background-color: var(--input); padding: 0.5em; }
code[name][contenteditable]:empty   { min-height: 5em; }
code[contenteditable]:focus         { min-height: 5em; }


.oneline { max-width: 70vw; margin: 2em auto; }



@media only screen and (max-width: 609px) {
    .oneline  { max-width: 100%; margin: 1em auto; }
}



.hl.fineprint    { padding: 0.8em; background-color: var(--creig); border-left: 2px solid var(--notif); text-align: left; }


svg.yes     { background-color: var(--apple); color: var(--white); margin: 0 1em; border-radius: 50%; }
svg.no      { background-color: var(--myred); color: var(--white); margin: 0 1em; border-radius: 50%; }
svg.oops    { background-color: var(--oops);  color: var(--black) !important; margin: 0 1em; border-radius: 50%; }