/* controls visibility of "beta-only" settings */
html:not(.beta) .beta-only {
    display: none !important;
}

/* the button */
input#show-menu-toggle {
    display: none;
}
label[for="show-menu-toggle"] {
    z-index: 1;
    position: fixed;
    /* top: 5px; */
    /* left: 17px; */
    --size: var(--ui-size);
    font-size: var(--size);
    top: 0;
    left: 0;
    padding: 5px; 
    padding-bottom: 15px; /* bigger hitbox, nonvisible */
    padding-left: 8px;
    cursor: pointer;
    /* width: 2em; */
    opacity: 0.5;
    transition: opacity 0.3s, transform 0.3s;
    /* transform: rotateX(180deg) scale(2.5, 1.25); */
    /* transition: none; /\* interferes with save animation on safari (1/2) *\/ */
}
label[for="show-menu-toggle"]:hover {
    opacity: 1;
}
label[for="show-menu-toggle"]:active {
    transform: translateY(15%);
}
.loading-app label[for="show-menu-toggle"],
.hide-ui label[for="show-menu-toggle"] {
    pointer-events: none;
    opacity: 0;
}

/* label[for="show-menu-toggle"]:after { */
/*     content: 'menu'; */
/*     display: inline-block; */
/*     font: inherit; */
/*     font-size: 1.15em; */
/*     text-transform: capitalize; */
/*     text-decoration: underline; */
/*     text-decoration-style: double; */
/*     text-decoration-thickness: 0.5px; */
/* } */
label[for="show-menu-toggle"]:before {
    content: '^';
    display: block;
    font-size: 2em;
    line-height: 0.25em;
    /* font-size: 40px; */
    /* line-height: 10px; */
    /* transform: scaleX(2) rotateX(180deg); */
    transform: scaleY(0.5) rotateX(180deg); /* use scale(0.5) instead for clearer picture */
    transition: transform 0.5s;
}
/* now using focus-within to delegate blur/hiding menu to browser */
#settings-menu:active + label[for="show-menu-toggle"],
#settings-menu:focus-within + label[for="show-menu-toggle"] {
    pointer-events: none;
    opacity: 1;
    /* transform: scale(2.5, 1.25) translateY(25%); */
    /* transition: transform 0.5s; /\* but we can still do it in one direction! (2/2) *\/ */
}

/* also animating :before directly b/c this has less animation errors (concurrently w/filters, safari) */
#settings-menu:active + label[for="show-menu-toggle"]:before,
#settings-menu:focus-within + label[for="show-menu-toggle"]:before {
    transform: scaleY(0.5) translateY(12.5px);
}

/* #show-menu-toggle:checked + label[for="show-menu-toggle"] { */
/*     transform: scale(2.5, 1.25) translateY(25%); */
/*     transition: transform 0.5s; /\* but we can still do it in one direction! (2/2) *\/ */
/* } */

/* #show-menu-toggle:checked + label[for="show-menu-toggle"]:after { */
/*     transform: scaleX(2); */
/* } */

/* the menu */
#settings-menu:after {
    content: 'menu';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    font: inherit;
    font-size: 1.15em;
    text-transform: capitalize;
    text-decoration: underline;
    text-decoration-style: double;
    text-decoration-thickness: 0.5px;
    transform: translateY(-100%);
}

#settings-menu {
    z-index: 2;
    position: fixed;
    /* top: 25px; */
    --top: calc(1.3 * var(--ui-size));
    top: var(--top);
    /* left: 8px; */
    left: calc(var(--ui-size) / 3);
    /* width: 8em; */
    /* height: 10em; */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1em;
    /* --border-radius: 1em; */
    background-color: transparent;
    border: 1px solid;
    border-color: var(--shadow-color);
    box-shadow: 0 0 2px 1px var(--shadow-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* transform: translateY(calc(-100% - var(--top))); */
    transform: translateY(calc(-100% - 4px - var(--top))); /* now compensates for box shadow */
    transition: transform 0.3s;
    pointer-events: none;
}
/* #show-menu-toggle:checked ~ #settings-menu { */
#settings-menu:active,
#settings-menu:focus-within {
    transform: none;
    pointer-events: auto;
}

#settings-menu .option {
    position: relative;
    margin: 0;
    padding: 0.5em;
    font: inherit;
    font-family: var(--menu-font);
    border: none;
    background: none;
    cursor: pointer;
}
#settings-menu .option > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.3s;
}
#settings-menu .option:hover > div {
    transform: scale(0.9);
}

/* #settings-menu .option:first-of-type { */
/*     border-top-left-radius: var(--border-radius); */
/*     border-top-right-radius: var(--border-radius); */
/* } */
/* #settings-menu .option:last-of-type { */
/*     border-bottom-left-radius: var(--border-radius); */
/*     border-bottom-right-radius: var(--border-radius); */
/* } */
#settings-menu .option + .option {
    border-top: 1px solid;
    /* border-color: var(--font-color); */
    border-color: var(--shadow-color);
}
#settings-menu .option:hover {
    box-shadow: inset 0 0 1em currentcolor;
    transition: box-shadow 0.3s;
    /* backdrop-filter: blur(3px); */
    /* -webkit-backdrop-filter: blur(3px); */
}
#settings-menu .option:focus {
    outline: none;
    text-decoration: underline;
}

/* the panel */
#settings-container.panel {
    /* display: none !important; */
    /* visibility: hidden; */
    /* z-index: 1; */
    z-index: 4;
    position: fixed;
    bottom: 0;
    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    /* width: 50%; */
    /* height: 100%; */
    height: 50%;
    width: 100%;
    margin: 0;
    /* background: inherit; */
    /* box-shadow: 0 -2em 2em var(--bg-color); */
    box-shadow: 0 1em 3em var(--fg-color);
    border: none;
    border-top: 2px double var(--fg-color);
    outline: none;
    --per: 100px;
    transform-origin: bottom center;
    /* backdrop-filter: blur(5px); */
    /* -webkit-backdrop-filter: blur(5px); */
    transform: translateY(calc(100% + 4em)); /* 2em offset + 2em blur */
    /* transform: translateX(100%); */
    /* transform: perspective(var(--per)) rotateX(90deg); */
    transition: transform 0.3s;
}
/* #settings-container.panel .focus-checkbox { */
/*     position: absolute; */
/*     top: 0; */
/*     left: 0; */
/*     pointer-events: none; */
/*     opacity: 0; */
/* } */
/* #show-settings-toggle:checked ~ #settings-container.panel { */
#settings-container.panel:focus-within,
#settings-container.panel:hover,
#settings-container.panel:active {
    /* transform: none; */
    transform: perspective(var(--per));
    /* pointer-events: auto; */
}

/* #show-settings-toggle ~ #settings-container.panel ~ #top-container { */
/*     width: fit-content; */
/*     min-width: 50vw; */
/*     margin: auto; */
/* } */

/* #show-settings-toggle ~ #settings-container.panel ~ #top-container, */
#show-settings-toggle ~ #settings-container.panel ~ #wrapper {
    /* will-change: transform; */
    transform: translateX(0);
}
/* #show-settings-toggle:checked ~ #settings-container.panel ~ #top-container, */
/* #show-settings-toggle:checked ~ #settings-container.panel ~ #wrapper { */
/* #settings-container.panel:focus-within ~ #top-container #title, */
/* #settings-container.panel:focus-within ~ #wrapper { */
    /* transform: translateX(50%) !important; */
    /* transform: translateX(50%); */
/* } */
#settings-container.panel ~ #top-container #title {
    --settings-offset: 0;
}

/* END BETA UI OVERHAUL */






/* BETA (efficient/60fps settings animation) */
/* only triggered when #show-settings-toggle is moved OUT of #top-container */
/* body > input#show-settings-toggle + label { */
/*     z-index: 3; */
/* } */
/* #show-settings-toggle ~ #top-container, #show-settings-toggle ~ #wrapper { */
/*     will-change: transform; */
/*     transform: translateY(-50vh); */
/* } */
/* #show-settings-toggle:checked ~ #top-container, #show-settings-toggle:checked ~ #wrapper { */
/*     transform: translateY(0); */
/* } */
/* #show-settings-toggle:checked ~ #top-container div#title { /\* title w/settings *\/ */
/*     transform: translateY(0); */
/* } */
/* #show-settings-toggle ~ #top-container div#title { /\* title w/o settings *\/ */
/*     /\* transform: translateY(var(--settings-offset)); *\/ */
/* } */
/* #show-settings-toggle:checked ~ #top-container #settings-container { */
/*     opacity: 1; */
/*     pointer-events: auto; */
/* } */
/* #show-settings-toggle ~ #top-container #settings-container { */
/*     opacity: 0; */
/*     pointer-events: none; */
/* } */

#settings-container {
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    overflow: hidden;
    height: 50vh;
    width: 100%;
    margin: 0.5em;
    margin-bottom: 0;
    background-color: var(--bg-color);
    color: var(--fg-color);
    border: 1px solid;
    border-color: darkgrey;
    border-radius: 5px;
    will-change: opacity;
    transition: opacity 200ms;
    /* will-change: height; */
    /* transition: height 200ms, border 200ms ease-in-out 200ms; */
}
/* .glass #settings-container { /\* to ensure contrast/readability *\/ */
/*     /\* mix-blend-mode: difference; *\/ */
/*     color: white; */
/*     text-shadow: 0.07em 0 black, 0 0.07em black, -0.07em 0 black, 0 -0.07em black */
/* } */

#settings-container > input[type="radio"] {
    display: none;
}
/* #settings-container > input[type="radio"] + label[for="tab3"] { */
/*     flex-grow: 0.2; */
/*     padding: 0 1em; */
/* } */
/* #settings-container input[type="radio"] + label[for="tab2"]:after { */
/*     content: 'Beta'; */
/*     position: absolute; */
/*     font-size: 0.4em; */
/*     bottom: 50%; */
/*     text-decoration: none !important; */
/* } */
/* for some reason last/first-child selectors don't work here */
/* #settings-container input[type="radio"] + label:not([for="tab1"]) { */
/*     border-left: 1px solid darkgrey; */
/* } */
#settings-container > input[type="radio"] + label {
    display: none;
}
/* #settings-container > input[type="radio"] + label { */
/*     order: -1; */
/*     flex-grow: 1; */
/*     position: relative; */
/*     height: min-content; */
/*     font-size: 20px; */
/*     font-family: sans-serif; */
/*     border-bottom: 1px solid darkgrey; */
/*     cursor: pointer; */
/*     transition: border-bottom 200ms, background-color 300ms; */
/* } */
/* #settings-container > input[type="radio"]:not(:checked) + label:hover { */
/*     /\* background-color: aliceblue; *\/ */
/*     text-decoration: underline; */
/*     text-decoration-color: lightgrey; */
/* } */
/* #settings-container > input[type="radio"]:checked + label { */
/*     user-select: none; */
/*     -webkit-user-select: none; */
/*     border-bottom: 1px solid transparent; */
/*     text-decoration: underline; */
/* } */
#settings-container > input[type="radio"] + label+.settings-tab-content {
    display: none; /* is overriden below by "visible" content rule */
    order: 2;
    width: 100%;
    /* height: calc(100% - 1em); */
    height: 100%;
}
#settings-container > input[type="radio"]:checked + label+.settings-tab-content {
    display: flex;
}

/* NEW: "persistent" about button */
/* #settings-container input#tab1:checked ~ label[for="tab3"] { */
/*     display: block !important; */
/*     position: absolute; */
/*     right: 0; */
/*     bottom: 0; */
/*     margin: 0.5em; */
/*     cursor: pointer; */
/* } */
/* END "persistent" about button */

.settings-tab-content {
    flex-direction: column;
    flex-wrap: wrap;
}

/* general settings pane styling */
.settings-tab-content button {
    display: inline;
    font-size: 15px;
    white-space: nowrap;
    color: currentcolor;
    background-color: var(--ui-fg-color);
    border: 2px solid;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: background-color 300ms, border-radius 300ms;
}
.settings-tab-content button:hover {
    background-color: var(--ui-bg-color);
    border-color: var(--ui-bg-color-opaque);
    color: var(--ui-text-color);
    border-radius: 20px;
}
.settings-tab-content input {
    min-width: 0;
    box-sizing: border-box;
    margin: auto 0.1em;
}
.settings-tab-content input[type="text"] {
    position: relative;
    height: 2.2em;
    max-width: min-content; /* was there a reason i didn't add this before? */
    /* padding: 0.2em; */
    /* margin: 0 0.1em; */
    border-radius: 3px;
    border: 1px solid;
    border-color: grey;
    background-color: #FFF2;
    color: inherit;
    /* vertical-align: middle; */
    text-align: center;
}
.settings-tab-content input[type="color"] {
    /* -webkit-appearance: none; */
    position: relative;
    /* width: 100%; */
    /* border: none; */
    border-radius: 3px;
    border: 1px solid;
    border-color: gainsboro;
    /* background: var(--selected-color); */
    background: transparent;
    color: inherit; /* so :after can inherit too */
    outline: none;
    cursor: pointer;
}
.settings-tab-content input[type="color"]:after {
    content: 'click to edit';
    position: absolute;
    left: 0;
    right: 0;
    /* top: 0; */
    top: 0.5px;
    /* opacity : 0.6; */
    width: fit-content;
    margin: auto;
    padding: 0 0.25em;
    /* text-align: center; */
    text-transform: uppercase;
    font-size: 0.65em;
    /* color: var(--header-foreground); */
    color: var(--fg-color);
    border-radius: 1em;
    border: inherit;
    /* background-color: var(--header-background); */
    background-color: var(--bg-color);
    transform: translateY(calc(-100% + 0.5em));
    cursor: pointer;
    transition: opacity 300ms;
    /* animation: perk-up 1s 0.1s 2; */
}
#top-container.glass .settings-tab-content input[type="color"]:after {
    opacity: 0;
    /* background-color: gainsboro; */
    /* color: var(--font-color); */
}

/* @keyframes perk-up { */
/*     to { */
/*         transform: translateY(-100%); */
/*     } */
/* } */

.settings-tab-content input[type="number"] {
    border-radius: 3px;
    border: none;
    background-color: #FFF2;
    font: inherit;
    text-align: left;
    padding-left: 0.2em;
    /* width: min-content; */
    width: 3em;
}

/* end general styling */

/* FIRST TAB */
.settings-tab-content#tab1-content {
    flex-direction: row;
    /* height: 90%; */
    /* height: 80% !important; */
    overflow: scroll;
}

.settings-tab-content#tab1-content > div {
    /* flex-grow: 1; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.settings-tab-content#tab1-content > div > label {
    display: block;
}

#tab1-content h3 {
    z-index: 1;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    margin: 0;
    margin-bottom: 0.5em;    
    padding: 0.2em;
    grid-column: 1 / 3;
    opacity: 0.9;
    order: -1;
    background-color: var(--bg-color);
}
#tab1-content .knob-option {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 0.2fr;
    align-self: center;
    width: 70%;
    margin-top: 0.2em;
    /* text-align: right; */
    order: 2;
}
#tab1-content .knob-toggle {
    cursor: pointer; /* needs js for being clickable */
}



/* SETTINGS HELPTEXT */
#settings-helptext:before {
    content: 'mouseover a setting for details below';
    font-size: 0.7em;
    position: absolute;
    top: 0;
    transform: translateY(-50%); 
    background: var(--bg-color);
    border: 1px dotted var(--fg-color);
    border-radius: 1em;
    padding: 0 0.5em;
}
#settings-helptext {
    position: sticky;
    position: -webkit-sticky;
    z-index: 1;
    /* position: absolute; */
    bottom: 0;
    /* left: 0; */
    /* right: 0; */
    margin-top: 4em;
    padding: 0.5em 1em;
    align-items: center;
    justify-content: center !important;
    /* flex-grow: 1; */
    /* flex-basis: 50%; */
    font-size: 1.2em;
    width: 100%;
    /* height: 20%; */
    height: 4em;
    color: var(--fg-color);
    background-color: var(--bg-color);
    opacity: 0.9;
    border: none;
    border-top: 1px dotted var(--fg-color);
    /* box-shadow: 0 -10px 10px 5px var(--bg-color); */
    overflow: visible;
    text-overflow: ellipsis;
}


/* SECOND TAB */
.settings-tab-content#tab2-content {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* font-family: sans-serif; */
    /* below lines add scrollbars on non-mac devices ...ugh */
    /* max-height: calc(100% - 1.5em); */
    overflow: scroll;
}

#tab2-content > div {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-around;
    /* margin: 0.5em auto; */
    margin: 0.5em;
    margin-top: 1em;
    padding: 1em;
    border-radius: 0.5em;
    border: 1px solid gainsboro;
    position: relative;
}

#tab2-content > div span.settings-title {
    position: absolute;
    top: -0.5px; /* to account for parent border centering */
    /* top: 0; */
    left: 0;
    right: 0;
    margin: auto;
    width: min-content;
    padding: 0 0.5em;
    border: inherit;
    border-radius: inherit;
    /* border-radius: 0.4em; */
    color: var(--header-foreground);
    background-color: var(--bg-color);
    text-transform: uppercase;
    /* transform: translateY(calc(-50% - 0.5px)) scale(0.75); */ /* added the 0.5px to top instead */
    transform: translateY(-50%) scale(0.75);
    transition: transform 0.3s;
}
.glass #tab2-content > div span.settings-title { /* kinda unnecessary tbh */
    transform: translateY(-75%) scale(0.5);
    text-shadow: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

#tab2-content:not(.advanced-theming) .adv-only, #tab2-content.advanced-theming .adv-only-alt {
    display: none !important;
}

#light-dark-toggle {
    --item-count: 3;
}
#font-toggle {
    --item-count: 3;
}

/* first tab2 div */
#tab2-content #templating-container {
    background-color: #FFF1;
}
/* temporary fix, shouldn't be needed... */
#templating-container .knob-option { 
    margin-top: 0.5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#tab2-content #extras-toggle-container {
    justify-content: center;
    align-items: center;
    align-self: center;
    /* flex-grow: 0; */
}
#extras-toggle-container .knob-option {
    display: flex;
    justify-content: center;
    align-items: center;
}
#extras-toggle-container .floating-selector {
    width: 90%;
}
/* NEW PANEL CONTROLS */
#panel-color-toggle input#panelcolor-main-toggle ~ .floating-selector-bg label[for="panelcolor-main-toggle"]:before,
#panel-color-toggle input#panelcolor-main-toggle ~ .floating-selector-bg label[for="panelcolor-main-toggle"]:after {
    position: absolute;
    right: 0;
    left: 0;
    /* margin: var(--inner-padding) auto; */
    margin: auto;
    font: inherit;
    font-weight: bold;
}
/* All 4 blocks below just for the "No Boxes" option to be interactive */
label[for="panelcolor-main-toggle"]:before {
    content: var(--inactive-text); /* "No boxes" */
    /* content: 'No Panels'; */
}
label[for="panelcolor-main-toggle"]:after {
    content: var(--active-text);
    /* content: 'Panel Color:'; */
}
#panel-color-toggle input#panelcolor-main-toggle:checked ~ .floating-selector-bg label[for="panelcolor-main-toggle"]:before {
    visibility: hidden;
}
#panel-color-toggle input#panelcolor-main-toggle:not(:checked) ~ .floating-selector-bg label[for="panelcolor-main-toggle"]:after {
    visibility: hidden;
}
/* End of just the "No Panels" option */

/* Start of interactive "choose" function for slider option */
#panel-color-toggle input#panelcolor-manual-toggle ~ .floating-selector-bg label[for="panel-color"] {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
}
#panel-color-toggle input#panelcolor-manual-toggle:checked ~ .floating-selector-bg label[for="panel-color"] {
    visibility: hidden;
}
#panel-color-toggle input#panelcolor-manual-toggle:not(:checked) ~ .floating-selector-bg input#panel-color {
    visibility: hidden;
}
#panel-color-toggle input#panelcolor-manual-toggle ~ .floating-selector-bg input#panel-color {
    max-width: calc(100% - 2px);
    height: inherit;
    border: 1px solid;
    font: inherit;
    font-size: calc(1em - 2px);
    background-color: var(--panel-color);
    color: var(--font-color);
    text-shadow: 0.5px 0.5px 2px var(--bg-color), -0.5px -0.5px 2px var(--bg-color);
}
#panel-color-toggle input#panelcolor-manual-toggle ~ .floating-selector-bg input#panel-color[type="color"]:after {
    display: none;
}
/* End of interactive "choose"
/* END OF NEW PANEL CONTROLS */

/* START NEW HIGHLIGHT CONTROLS */
/* Interactive "choose" function for slider option */
#highlight-toggle input#highlight-color-toggle ~ .floating-selector-bg label label {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
}
#highlight-toggle input#highlight-color-toggle:checked ~ .floating-selector-bg label[for="highlight-color"] {
    visibility: hidden;
}
#highlight-toggle input#highlight-color-toggle:not(:checked) ~ .floating-selector-bg input#highlight-color {
    visibility: hidden;
}
#highlight-toggle input#highlight-color-toggle ~ .floating-selector-bg input#highlight-color {
    max-width: calc(100% - 2px);
    height: inherit;
    font: inherit;
    font-size: calc(1em - 2px);
    border: 1px solid;
    /* border-color: var(--highlight-color); */
    box-shadow: inset 0 0 2px 2px var(--highlight-color);
}
#highlight-toggle input#highlight-color-toggle ~ .floating-selector-bg input#highlight-color[type="color"]:after {
    display: none;
}





/* hidden tab2 divs */
#prefabs-toggle-container > div {
    border: 2px solid;
    border-radius: 2px;
    cursor: pointer;
    padding: 0.2em 1em;
    margin: 0.2em auto;
    max-width: 60%;
}

#tab2-content #background-control-container {
    display: flex;
    justify-content: center;
    /* align-items: center; */
}
/* #tab2-content input#bg-gradient1 { */
/*     flex-grow: 1; */
/*     flex-basis: 0; */
/*     order: 0; */
/* } */
#tab2-content #apply-gradient-button {
    background: linear-gradient(0.25turn, var(--gradient1), var(--gradient2));
    flex-grow: 1;
    flex-basis: 0;
    order: 0;
    margin: 0 0.1em;
}
/* #tab2-content input#bg-gradient12 { */
/*     flex-grow: 1; */
/*     flex-basis: 0; */
/*     order: 0; */
/* } */
#tab2-content #apply-gradient-button > span {
    color: #999; 
    color: #FFF;
    /* mix-blend-mode: exclusion; */
    mix-blend-mode: difference;
    transition: color 300ms;
}
#tab2-content #apply-gradient-button:hover > span {
    color: #FFF;
}
#tab2-content #apply-gradient-button:active > span {
    mix-blend-mode: overlay;
}


#bg-image-control-container {
    margin-top: 0.5em;
    display: flex;
}
#bg-image-control-container button {
    flex-grow: 1;
}
#bg-image-control-container input#bg-image {
    flex-grow: 2;
    max-width: none;
}
#clear-background-button:hover {
    background-color: red;
    color: white;
}

#clear-layout-button {
    margin: 0 25%;
}
#tab2-content #header-control-container {
    order: 2;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0.3em -1em; /* -1em to undo parent padding */
    margin-bottom: -0.75em;
    padding: 0.5em;
    border-top: inherit;
}
#tab2-content #header-control-container > div {
    font-family: inherit;
    font-weight: 100;
    text-transform: capitalize;
    text-align: center;
    cursor: default;
}

#tab2-content #header-control-container input[type="radio"] {
    display: none;
}
#tab2-content #header-control-container input[type="radio"]+label {
    flex-grow: 1;
    position: relative;
    margin: 0 0.1em;
    font-family: inherit;
    cursor: pointer;
    border: none;
    /* border: 1px solid currentcolor; */
    /* border-radius: 2px; */
}
#header-control-container input[type="radio"]+label:after {
    content: '';
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 0.2em;
    bottom: -0.1em;
    left: 0;
    background-color: currentcolor;
    will-change: transform; /* bar doesn't appear for glass button without this */
    transform: scaleX(0) translateY(100%);
    transition: transform 200ms;
}
#header-control-container input[type="radio"]+label:hover,
#header-control-container input[type="radio"]+label:active,
#header-control-container input[type="radio"]:checked+label {
    text-shadow: 0 0 1px currentcolor;
}
#header-control-container input[type="radio"]:checked+label:after {
    transform: scaleX(1) translateY(100%);
}

/* second tab2 div */
#tab2-content #font-control-container {
    /* display: flex; */
    /* justify-content: space-between; */
    margin-top: 0.5em;
}
#font-control-container label {
    display: inline-flex;
    align-items: center;
    /* cursor: pointer; */
    cursor: e-resize; /* good idea? */
}
#font-control-container label:first-child {
    flex-grow: 1;
    margin-right: 0.5em;
}
#font-control-container label:first-child input {
    flex-grow: 1;
}
#font-control-container label[for="font-size"] input {
    color: currentcolor;
}


/* GLYPHS & OFFSET SLIDERS */
#tab2-content #glyph-control-container {
    /* margin-top: 0.5em; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 18px;
    margin: -1em;
    margin-top: 0.25em;
}
#glyph-control-container label {
    display: block;
    z-index: 0; /* fixes label desyncing with slider in safari */
    position: relative;
    /* margin: 0.5em; */
    margin: 1em 0.5em 0 0.5em;
}
#glyph-control-container label span {
    z-index: -1;
    position: absolute;
    top: 0;
    /* bottom: 0; */
    bottom: 2em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.6em;
    /* line-height: 0.5em; */
    line-height: 0.75em;
    height: 0.5em;
    opacity: 0.5;
    text-transform: uppercase;
}
#glyph-control-container label input[type="range"] {
    /* -webkit-appearance: none; */
    /* appearance: none; */
    width: calc(100% - 1em);
    border: 1px solid gainsboro;
    border-radius: 10px;
    border-bottom: none;
    background: none;
    cursor: pointer;
}
#glyph-control-container label input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    border: 1px solid;
    background-color: var(--fg-color);
    opacity: 0.5;
}
/* #glyph-control-container label.vert-spacing[for="main-vert-spacing"] { */
/*     /\* transform: translate(-75%, -400%) rotateZ(270deg); *\/ */
/*     /\* transform-origin: 0 50%; *\/ */
/*     /\* transform: translate(0%, calc(100% + 0.5em)) rotateZ(-90deg); *\/ */
/*     transform-origin: 100% 50%; */
/*     transform: translate(-100%, calc(100% + 0.5em)) rotateZ(90deg); */
/* } */
/* #glyph-control-container label.vert-spacing[for="sub-vert-spacing"] { */
/*     /\* transform: translate(75%, -400%) rotateZ(270deg) rotateY(180deg) rotateX(180deg); *\/ */
/*     transform-origin: 0% 50%; */
/*     /\* transform: translate(calc(100% - 1em), calc(100% + 0.5em)) rotateZ(90deg); *\/ */
/*     transform: translate(calc(200% - 1em), calc(100% + 0.5em)) rotateZ(-90deg); */
/* } */

#glyph-control-container label.glyph-label {
    margin: 0 1em;
    font-family: 'Helvetica Neue';
    font-weight: 200;
    /* cursor: pointer; */
    cursor: e-resize; /* good idea? */
}
#glyph-control-container label.glyph-label > input {
    font: inherit;
    font-family: var(--script-font);
    /* font-size: var(--font-size); */
    line-height: 1.7em;
    width: 1.7em;
    height: 1.7em;
    padding: 0;
    /* padding-bottom: 0.2em; */
    padding-left: 0.1em;
    text-align: center;
    border: 1px solid grey;
    border-radius: 100%;
    background-color: transparent;
    /* hide text cursor */
    color: transparent;
    text-shadow: 0 0 0 grey;
}
#glyph-control-container input:focus {
    /* outline: none; */
    animation: blink-input 1s step-end infinite;
}
@keyframes blink-input {
    50% {
        text-shadow: 0 0 0 #0003;
        /* opacity: 0.7; */
    }
}




/* THIRD TAB */
#tab3-content #about {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* top: 1em; */
    margin: 0.5em;
    /* padding: 0.5em; */
    color: var(--font-color);
    /* color: black; */
    border-radius: 1em;
    background-color: transparent;
    --color1: var(--panel-color);
    --color2: var(--highlight-color);
    --color3: var(--shadow-color);
    /* --color1: #fff; */
    /* --color2: #e6e6e6; */
    /* --color3: #d9d9d9; */
    box-shadow:  inset 5px 5px 10px var(--color3),
                 inset -5px -5px 10px var(--color1);
    overflow: hidden;
    cursor: nw-resize;
    /* box-shadow: inset 0 2px 2px 2px var(--shadow-color); */
    /* border: 1px solid orange; */
}
#about:before, #about:after {
    content: '';
    pointer-events: none;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: opacity 0.5s linear;
    /* animation: opacity-loop 1s ease-in-out infinite; */
}
/* @keyframes opacity-loop { */
/*     50% { */
/*         opacity 0.5; */
/*     } */
/* } */
#about:before {
    opacity: 1;
    background: linear-gradient(145deg, var(--color1), var(--color2));
    /* box-shadow:  22px 22px 26px var(--color3), */
    /*              -22px -22px 26px var(--color1); */
}
#about:hover:before {
    opacity: 0;
}
#about:hover:after {
    opacity: 1;
}
#about:after {
    background: linear-gradient(145deg, var(--color2), var(--color1));
    /* box-shadow: inset 22px 22px 26px var(--color2), */
    /*             inset -22px -22px 26px var(--color1); */
    opacity: 0;
}
#about > span {
    margin: 1em;
    font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
    font-weight: 100;
    letter-spacing: 0.05em;
}

#tab3-content #feedback-link {
    margin: 0 auto;
}
#feedback-link {
    padding: 0.2em;
    border-radius: 0.5em;
    border: 2px solid;
    border-color: var(--panel-color);
    color: var(--fg-color);
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}
#feedback-link:hover {
    background-color: var(--fg-color);
    color: var(--panel-color);
}

#tab3-content #script-stats-container {
    margin: 0.5em auto;
    opacity: 0.5;
    max-width: 85%;
    overflow: hidden;
}
#script-stats-container div {
    display: grid;
    grid-template-columns: 1fr auto;
}
#script-stats-container div span {
    grid-column: 1 / 2;
    text-align: left;
}
#script-stats-container div span + * {
    grid-column: 2 / 3;
    margin-left: 1.5em;
    color: inherit;
}
/* END SETTINGS STUFF */

#mini-settings-panel {
    z-index: 1;
    position: fixed;
    right: 0;
    top: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    --icon-transform: translateX(200%);
}
label[for="toggle-mini-settings"] {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    margin-right: 0.35em;
    margin-bottom: 0.35em;
    transform: rotate(0.1deg);
    transition: transform 0.3s;
}
label[for="toggle-mini-settings"]:hover {
    transform: rotate(30deg);

}
#toggle-mini-settings {
    position: absolute;
    visibility: hidden;
}
#toggle-mini-settings:checked ~ .mini-settings-body {
    --icon-transform: none;
    --bar-transform: none;
    --bar-opacity: 1;
}
#toggle-mini-settings:checked + label {
    opacity: 1;
    transform: rotate(270deg);
}
.mini-settings-body {
    display: flex;
    flex-direction: column;
    position: relative;
    --bar-opacity: 0;
    --bar-transform: scaleY(0.1);
}
.mini-settings-body:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.2em;
    height: 100%;
    background-color: currentColor;
    transform-origin: center top;
    transform: var(--bar-transform);
    opacity: var(--bar-opacity);
    transition: transform 0.3s, opacity 0.3s;
}
.mini-settings-icon {
    fill: currentColor;
    padding: 0;
    margin: 0.5em;
    width: 1em;
    height: 1em;
    opacity: 0.5;
    cursor: pointer;
    color: var(--fg-color);
    transform: var(--icon-transform);
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: calc(0.1s * var(--icon-ndx));
}
.mini-settings-icon svg {
    width: 100%;
    height: 100%;
}
.slashable {
    position: relative;
}
.slashable:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin-left: -35%;
    width: 130%;
    height: 0.1em;
    background-color: currentColor;
    box-shadow: 0 0 0 0.1em var(--bg-color);
    opacity: 0.2;
    transform-origin: right center;
    transform: rotate(-45deg) scaleX(0.1);
    transition: transform 0.2s, opacity 0.2s;
}
.slashable:hover:after {
    opacity: 1;
    transform: rotate(-45deg) scaleX(1);
}
.mini-settings-icon:hover {
    opacity: 0.7;
}
.mini-settings-icon:active {
    opacity: 1;
}
#mini-settings-panel:hover,
#mini-settings-panel:active,
#mini-settings-panel:focus,
#mini-settings-panel:focus-within {
    --icon-transform: none;
}