:root {
    --menu-font: 'Avenir', 'Helvetica Neue', 'Helvetica', sans-serif;
    --script-font: 'Courier New', 'Courier', serif;
    --title-font: 'American Typewriter', 'Courier New', 'Courier', serif;
    --font-size: 23px;
    --ui-size: 24px;
    --font-scale: 1;
    --scaled-font-size: font-size: calc(var(--font-scale) * min(4vw, var(--font-size)));
    --scaled-font-size: calc(var(--font-scale) * clamp(8px, 4vw, var(--font-size)));
    /* --font-color: inherit; */
    --highlight-color: #ff9;
    --highlight-light: yellow;
    --highlight-dark: purple;
    /* --sidepanel-color: rgba(247, 240, 207, 0.6); */
    --main-glyph: '\22B1'; /* rune "goat's head" */
    /* --main-glyph: '\22B3'; /\* triangle *\/ */
    /* --main-glyph: '\2022'; /\* bullet point *\/ */
    --sub-glyph: '\227B';
    
    --gradient1: white;
    --gradient2: white;


    --floating-selector-bg-light: gainsboro;
    --floating-selector-bg-dark: hsl(0, 0%, 15%);
    /* --ui-bg-color: hsla(0, 0%, 0%, 0.7); */
    /* --ui-fg-color: hsla(0, 0%, 87%, 0.875); */
    /* --ui-text-color: hsla(0, 0%, 100%, 1); */

    /* --save-color: rgba(204, 235, 250, 0.95); */
    /* --save-color: rgba(204, 235, 250, 1); */
    /* --save-color-dark: rgb(63, 121, 185); */
    /* --load-color: rgba(215, 249, 215, 1); */
    /* --load-color-dark: darkgreen; */
    /* --save-color: rgba(101, 117, 127, 0.5); */
    
    --spacing-size: 20px;
    --editor-width: 70%;
    color-scheme: light dark;
}

html.font-printed {
    --menu-font: 'Avenir', 'Helvetica Neue', 'Helvetica', sans-serif;
    --script-font: 'Courier New', 'Courier', serif;
    --title-font: 'Josefin Slab', 'Courier New', 'Courier', serif;
    /* --title-font: 'American Typewriter', 'Courier New', 'Courier', serif; */
    
    --main-glyph: '\00A7'; /* section sign */
    --sub-glyph: '\00B6'; /* paragraph sign */
}
html.font-modern {
    --menu-font: 'Avenir', 'Helvetica Neue', 'Helvetica', sans-serif;
    --script-font: var(--menu-font);
    --title-font: var(--menu-font);
    
    --main-glyph: '\22B3'; /* triangle */
    --sub-glyph: '\25CC'; /* dotted bullet point */
}
html.font-written {
    --menu-font: 'Avenir', 'Helvetica Neue', 'Helvetica', sans-serif;
    --script-font: fantasy;
    --title-font: cursive;
    
    --main-glyph: '\0E5B'; /* runic design > */
    --sub-glyph: '\22B1'; /* rune "goat's head" */
    /* --main-glyph: '\22B1'; /\* rune "goat's head" *\/ */
    /* --sub-glyph: '\227B'; /\* curved > *\/ */
}

html {
    color-scheme: light;
    --font-color: black;
    --panel-color: aliceblue;
    
    /* --bg-color: hsla(0, 0%, 100%, 1); */
    --bg-color: hsla(0, 0%, 96%, 1);
    --bg-color-editor: transparent;
    --bg-color-stark: white;
    /* --raised-color: var(--bg-color); */
    --raised-color: hsla(0, 0%, 99%, 0.4);
    --fg-color: hsla(0, 0%, 0%, 1);

    --shadow-color: #0004;
    
    --ui-bg-color-opaque: hsla(0, 0%, 30%, 1);
    --ui-bg-color: hsla(0, 0%, 0%, 0.7);
    --ui-fg-color: hsla(0, 0%, 87%, 0.875);
    --ui-fg-color-opaque: hsla(0, 0%, 87%, 1);
    --ui-text-color: hsla(0, 0%, 100%, 1);

    --floating-selector-bg: var(--floating-selector-bg-light);
    
    /* --highlight-color: #ff08; */
    --highlight-color: #fff600ff;
    
    --save-hue: 203;
    --load-hue: 124;
    --save-color: hsla(var(--save-hue), 100%, 90%, 0.85);
    --save-color-opaque: hsla(var(--save-hue), 100%, 90%, 1);
    --save-color-border: hsla(var(--save-hue), 100%, 80%, 1);
    --save-color-dark: hsla(var(--save-hue), 100%, 50%, 1);
    --load-color: hsla(var(--load-hue), 100%, 90%, 0.85);
    --load-color-opaque: hsla(var(--load-hue), 100%, 90%, 1);
    --load-color-border: hsla(var(--load-hue), 100%, 70%, 1);
    --load-color-dark: hsla(var(--load-hue), 100%, 40%, 1);
}
html.ui-dark {
    color-scheme: dark;
    --font-color: white;
    --panel-color: #005;
    
    /* --bg-color: #444; */
    --bg-color: #3a3a3a;
    --bg-color-editor: #00000030;
    --bg-color-stark: black;
    /* --raised-color: #444; */
    --raised-color: #5556;
    --fg-color: white;

    --shadow-color: #0008;
    
    --ui-bg-color-opaque: hsla(0, 0%, 80%, 1);
    --ui-bg-color: hsla(0, 0%, 75%, 0.8);
    --ui-fg-color: hsla(0, 0%, 15%, 0.875);
    --ui-fg-color-opaque: hsla(0, 0%, 15%, 1);
    --ui-text-color: hsla(0, 0%, 0%, 1);

    --floating-selector-bg: var(--floating-selector-bg-dark);
    
    /* --highlight-color: #9100ff61; */
    --highlight-color: #8900ffff;
    
    --save-hue: 203;
    --load-hue: 124;
    --save-color: hsla(var(--save-hue), 100%, 15%, 0.85);
    --save-color-opaque: hsla(var(--save-hue), 100%, 15%, 1);
    --save-color-border: hsla(var(--save-hue), 100%, 30%, 1);
    --save-color-dark: hsla(var(--save-hue), 100%, 60%, 1);
    --load-color: hsla(var(--load-hue), 100%, 15%, 0.85);
    --load-color-opaque: hsla(var(--load-hue), 100%, 15%, 1);
    --load-color-border: hsla(var(--load-hue), 100%, 25%, 1);
    --load-color-dark: hsla(var(--load-hue), 100%, 50%, 1);
}
/* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) {
    /* defaults to dark theme */
    html {
        color-scheme: dark;
        --font-color: white;
        --panel-color: #005;
        
        /* --bg-color: #444; */
        --bg-color: #3a3a3a;
        --bg-color-editor: #00000030;
        --bg-color-stark: black;
        /* --raised-color: #444; */
        --raised-color: #5556;
        --fg-color: white;
    
        --shadow-color: #0008;
        
        --ui-bg-color-opaque: hsla(0, 0%, 80%, 1);
        --ui-bg-color: hsla(0, 0%, 75%, 0.8);
        --ui-fg-color: hsla(0, 0%, 15%, 0.875);
        --ui-fg-color-opaque: hsla(0, 0%, 15%, 1);
        --ui-text-color: hsla(0, 0%, 0%, 1);

        --floating-selector-bg: var(--floating-selector-bg-dark);

        
        /* --highlight-color: #9100ff61; */
        --highlight-color: #8900ffff;
        
        --save-hue: 203;
        --load-hue: 124;
        --save-color: hsla(var(--save-hue), 100%, 15%, 0.85);
        --save-color-opaque: hsla(var(--save-hue), 100%, 15%, 1);
        --save-color-border: hsla(var(--save-hue), 100%, 30%, 1);
        --save-color-dark: hsla(var(--save-hue), 100%, 60%, 1);
        --load-color: hsla(var(--load-hue), 100%, 15%, 0.85);
        --load-color-opaque: hsla(var(--load-hue), 100%, 15%, 1);
        --load-color-border: hsla(var(--load-hue), 100%, 25%, 1);
        --load-color-dark: hsla(var(--load-hue), 100%, 50%, 1);
    }
    /* Override dark mode with light mode styles if the user decides to swap */
    html.ui-light {
        color-scheme: light;
        --font-color: black;
        --panel-color: aliceblue;
        
        /* --bg-color: hsla(0, 0%, 100%, 1); */
        --bg-color: hsla(0, 0%, 96%, 1);
        --bg-color-editor: transparent;
        --bg-color-stark: white;
        /* --raised-color: var(--bg-color); */
        --raised-color: hsla(0, 0%, 99%, 0.4);
        --fg-color: hsla(0, 0%, 0%, 1);
    
        --shadow-color: #0004;
        
        --ui-bg-color-opaque: hsla(0, 0%, 30%, 1);
        --ui-bg-color: hsla(0, 0%, 0%, 0.7);
        --ui-fg-color: hsla(0, 0%, 87%, 0.875);
        --ui-fg-color-opaque: hsla(0, 0%, 87%, 1);
        --ui-text-color: hsla(0, 0%, 100%, 1);

        --floating-selector-bg: var(--floating-selector-bg-light);

        
        /* --highlight-color: #ff08; */
        --highlight-color: #fff600ff;
        
        --save-hue: 203;
        --load-hue: 124;
        --save-color: hsla(var(--save-hue), 100%, 90%, 0.85);
        --save-color-opaque: hsla(var(--save-hue), 100%, 90%, 1);
        --save-color-border: hsla(var(--save-hue), 100%, 80%, 1);
        --save-color-dark: hsla(var(--save-hue), 100%, 50%, 1);
        --load-color: hsla(var(--load-hue), 100%, 90%, 0.85);
        --load-color-opaque: hsla(var(--load-hue), 100%, 90%, 1);
        --load-color-border: hsla(var(--load-hue), 100%, 70%, 1);
        --load-color-dark: hsla(var(--load-hue), 100%, 40%, 1);
    }
}
html {
    padding: 0;
    height: 100%;
}

/* DARK MODE DISABLED FOR NOW */
/* @media(prefers-color-scheme: dark) { */
/*     body { /\* read by js *\/ */
/*         --prefers-dark: 'true'; */
/*     } */
/* } */

/* body.zoom { */
/*     zoom: 150%; */
/* } */
/* @media only screen */
/* and (min-device-width: 320px) */
/* and (max-device-width: 480px) */
/* { */
/*     body.zoom { */
/*         zoom: 120%; */
/*     } */
/* } */
/* body.zoomed { */
/*     zoom: 150%; */
/* } */

body {
    --selection-color: var(--highlight-color);
    margin: 0;
    max-width: 100vw;
    text-align: center;
    font-family: var(--menu-font);
    background-color: var(--bg-color);
    color: var(--fg-color);
    will-change: scroll-position; /* should be for body.auto-scroll only */
    /* overflow: hidden; */
    transition: background-color 0.3s, color 0.3s;
}
body.reduce-transparency {
    --sidepanel-color: rgba(247, 240, 207, 1);
    --ui-bg-color: var(--ui-bg-color-opaque);
    --save-color: var(--save-color-opaque);
    --load-color: var(--load-color-opaque);
}
body.loading-app {
    background-color: grey;
    overflow: hidden;
    cursor: wait;
}

/* for that webapp feel */
button {
    outline: none; 
}

/* why isn't this default? */
label {
    user-select: none;
    -webkit-user-select: none;
}

#top-container {
    /* z-index: 2; */
    /* position: sticky; */
    /* position: -webkit-sticky; */
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    top: 0;
    /* padding-top: 5px; */
    /* padding-bottom: 10px; */
    width: 100%;
    max-width: 100%; /* for persistent-sidepanel transition */
    /* overflow-x: scroll; */
    /* overflow-y: hidden; */
    white-space: nowrap;
    /* transition: background-color 300ms linear, box-shadow 300ms linear; */
    transition: max-width 0.5s,
                background-color 300ms linear,
                box-shadow 300ms linear,
                transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#top-container {
    --header-foreground: var(--fg-color);
    --header-background: var(--bg-color);
    color: var(--header-foreground);
    /* background-color: var(--header-background); */
    /* box-shadow: 0 0 10px 15px var(--header-background); */
    pointer-events: none;
}
#top-container > * {
    pointer-events: all;
}

#top-container #title-before {
    display: none;
}

#top-container.saving {
    z-index: 3; /* should be > screen-fader & <= show-menu-toggle */
    transform: translateY(10vh) scale(0.8);
}

#top-container #save-panel {
    width: 100%;
    --title-height: calc(1.2 * var(--font-size) + 0.8em);
    /* padding-top: calc(var(--title-height) * 2); */
    padding-top: 0;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

#top-container.saving #save-panel {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(calc(var(--title-height) * -3));
}
#top-container.saving #title {
    background: none;
    box-shadow: none;
    border: none;
    text-decoration: underline;
    text-decoration-style: double;
    text-decoration-thickness: 0.5px;
    /* transform: translateY(calc(100% + 1em)); */
}
/* #top-container #title:before { */
/*     content: 'title'; */
/*     position: absolute; */
/*     left: 0; */
/*     right: 0; */
/*     margin: auto; */
/*     text-transform: capitalize; */
/*     text-decoration: underline; */
/*     transform: translateY(-100%); */
/*     opacity: 0; */
/*     transition: opacity 0.5s; */
/* } */

/* #top-container.saving #title:before { */
/*     opacity: 1; */
/* } */





/* to make sure title is always flush with top-container */
/* NOW LOCATED IN SETTINGS.CSS */
/* #show-settings-toggle ~ #title { */
/*     transform: translateY(var(--settings-offset)); */
/* } */
/* #show-settings-toggle:checked ~ #title { */
/*     transform: translateY(- var(--settings-offset)); */
/* } */
body.hide-ui:not(.loading-app) #title {
    transform: translateY(calc(-200%)) !important;
    transition-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56) !important;
}
body.loading-app #title { /* needed since font size could change during loading animation, ruining it */
    /* font-size: 27.6px; /\* original --font-size * 1.2 *\/ */
    transition: font-size 0.1s; /* just this is even better */
}
#title {
    z-index: 1;
    max-height: 1.2em; /* scales with font size, unlike if set via animation "closure" */
    /* --height: 1.2em; */
    max-width: 1.2em;
    /* --width: calc(100% - 4 * var(--font-size)); */
    --width: calc(100% - 4 * var(--ui-size) - 40px);
    /* padding: 0 0.4em; */
    margin: 0 auto;
    margin-top: 0.2em;
    font-size: calc(1.2 * var(--font-size));
    /* font-size: calc(1.2 * var(--font-size)); */
    font-family: var(--title-font);
    font-weight: bold;
    --scroll-left-duration: 300; /* in ms, used in js scrollLeft animate onblur */
    
    padding: 0.4em;
    --padding: 0.4em 0.8em;
    box-shadow: 0 0.1em 5px var(--shadow-color);
                      
    border: 0.5px dotted;
    border-color: transparent;
    border-radius: 50%;
    --border-radius: 0.25em;
    outline: none;
    outline-color: currentcolor;
    outline-offset: -2px;
    /* outline-offset: -0.2em; */
    /* font-size: 25px; */
    overflow: hidden;
    text-overflow: ellipsis;
    /* --settings-offset: -0.25em; */
    --settings-offset: -0.35em;
    transform: translateY(var(--settings-offset));
    transition: transform 0.2s linear, background-color 0.3s, color 0.3s, opacity 0.3s;
    animation: moveDown 1s cubic-bezier(0.175, 0.885, 0.32, 1.275),
               finalize 0.5s 0.8s cubic-bezier(0.86, 0, 0.07, 1) forwards;
    /* animation: moveDown 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), */
    /*            finalize 0.7s 0.5s cubic-bezier(0.77, 0.3, 0.2, 0.85) forwards; */
}

@keyframes moveDown {
    0% {
        opacity: 0;
        transform: translateY(25vh) scale(0.01);
    }
    50% {
        opacity: 1;
        transform: translateY(35vh) scale(1.5);
    }
    100% {
        /* transform: inherit; */ /* <- works for safari but not chrome */
        transform: translateY(var(--settings-offset));
        /* transform: unset; */
    }
}
@keyframes finalize {
    0% {
        /* background-color: var(--fg-color); */
    }
    100% {
        /* background-color: inherit; */
        max-width: var(--width);
        /* max-height: var(--height); */
        padding: var(--padding);
        border-radius: var(--border-radius);
    }
}

#title:hover {
    border-color: currentcolor;
}
#title:focus {
    border-style: dashed;
    border-color: currentcolor;
    overflow: scroll;
    text-overflow: unset;
}

#title.default {
    background-color: var(--bg-color);
    mix-blend-mode: initial;
}
#title.glass {
    background-color: transparent;
    color: var(--font-color);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;
}
#title.night {
    background-color: #111;
    color: whitesmoke;
    mix-blend-mode: normal;
}
#title.invert {
    color: black;
    -webkit-backdrop-filter: invert();
    backdrop-filter: invert();
}
#title.match {
    background-color: var(--panel-color);
    color: var(--highlight-color);
    text-shadow: 0 0 1px var(--font-color);
    mix-blend-mode: difference;
}



/* wrapper for main script container (#textContainer) */
#wrapper {
    /* margin-bottom: 50vh; */
    padding-top: calc(3 * var(--font-size) + 0.8em);
    padding-bottom: 30vh; /**/
    text-align: center;
    position: relative;
    max-width: 100%; /* for persistent-sidepanel transition */
    transition: transform 0.3s, opacity 0.3s, max-width 0.5s;
    /* transition: transform 0.3s, opacity 0.3s; */
    --border-radius-mult: 0.25;
    --box-spacing-mult: 1;
    --line-spacing-mult: 1;
    --line-spacing-mult-min: 0.5;
    /* --first-line-offset: 1em; */
    --left-padding: 1em;
    --first-line-offset: 1em;
    /* --left-padding: 2em; */
    --min-padding: 0.2em;
    --warning-color: orange;
    --error-color: rgba(255, 0, 0, 0.579);
    --error-2-color: rgba(252, 255, 104, 0.529);
    --loading-color: rgb(106, 166, 255);
    --loaded-color: #00ff003f;
    --loaded2-color: #00ffc348;
    --quota-color: rgba(128, 128, 128, 0.401);
}
.loading-app #wrapper {
    pointer-events: none;
    display: none;
    /* opacity: 0.1; */
}

#textContainer {
    counter-reset: sp-count; /**/
    height: max-content;
    width: 90%;
    text-align: left;
    /* overflow: scroll; */
    /* perspective: 400px; */
    /* font-family: 'opendyslexic'; */
    outline: none;
    margin: auto;
    margin-top: 1em;
    /* padding: 5px 12px 5px 12px; */
    /* padding-bottom: 30vh; */
    /* transition: opacity 0.5s, transform 0.5s; */
    transition: opacity 0.4s, transform 0.5s;
    /* NEW CHANGES to SHOW Textcontainer as UI FEATURE */
    max-width: var(--editor-width); /* gets transitioned to 90% if we pin sidepanel */
    background-color: var(--bg-color-editor);
    padding: min(4vw, 2em);
    padding: clamp(20px, 4vw, 2em);
    border-radius: 1em;
    box-shadow: inset 0 2px 4px -1px rgba(0,0,0,0.2),
        inset 0 4px 5px 0 rgba(0,0,0,0.14),
        inset 0 1px 10px 0 rgba(0,0,0,0.12);
    box-sizing: border-box;
    transition: opacity 0.4s, transform 0.5s, max-width 0.5s, background-color 0.3s; 
}
#textContainer.hidden {
    opacity: 0;
    transform: translateY(30vh);
}
#textContainer *::selection {
    background-color: var(--selection-color);
    /* background-color: var(--highlight-color); */
    border-radius: 20px;
    /* text-shadow: 0 0 1px; */
}
#textContainer > div {
    max-width: 99%;
    /* font-size: var(--font-size); */
    /* --font-scale: 1; */
    /* font-size: calc(var(--font-scale) * clamp(8px, 4vw, var(--font-size))); */
    font-size: var(--scaled-font-size);
    font-family: var(--script-font);
    color: var(--font-color);
    --status-color: rgba(155,155,155,0.2); /* for inheritance */
    caret-color: currentcolor; /* wow this isn't default */
    /* line-height: 25px; */
    line-height: calc((1em + 2px) * max(var(--line-spacing-mult-min), var(--line-spacing-mult)));
    padding: var(--min-padding);
    /* text-indent: calc(0em - var(--first-line-offset)); /\* unindent first line *\/ */
    padding-left: calc(max(0em, var(--left-padding)) + var(--min-padding)); /* indent every other line */
    padding-right: max(var(--min-padding), 0.5em);
    margin-bottom: calc(1em * max(0, var(--box-spacing-mult)));
    /* padding: 0.6em; */
    /* text-indent: -1em; /\* unindent first line *\/ */
    /* padding-left: 1.6em; /\* indent every other line *\/ */
    background-color: #0000;
    /* box-shadow: 0px 0px 4px 4px transparent; /\* so transition doesn't have to do blurring *\/ */
    outline: 0.12em dashed transparent;
    border-radius: calc(1em * var(--border-radius-mult));
    position: relative; /* for the panel psuedoelems */
    transition: background-color 0.5s,
                box-shadow 0.7s,
                /* border-radius 0.7s, */
                /* margin-bottom 0.5s linear, */
                /* padding 0.5s linear, */
                outline 0.1s,
                /* outline-color 0.1s, */
                /* line-height 0.5s linear, */
                transform 0.5s;
}

/* Helper outlines */
#textContainer.box-outlines > div:hover,
#textContainer.box-outlines > div:active {
    outline-color: var(--ui-bg-color);
    /* outline: 0.12em dashed var(--ui-bg-color); */
}
#textContainer.box-outlines:focus > div:hover,
#textContainer.box-outlines:focus > div:active {
    outline-color: var(--shadow-color);
}
/* #textContainer.box-outlines:focus > div.editing { */
/* so we don't lose border when interacting with tooltips/ellipsis menu */
/* which are within #wrapper but outside of #textContainer */
#wrapper:focus-within #textContainer.box-outlines > div.editing {
    outline-color: var(--ui-bg-color);
    outline-style: solid;
}

/* shrinks all divs but the one user is editing */
#textContainer.edit-3d:focus > div {
    transform: scale(0.9);
}
#textContainer.edit-3d:focus > div.editing {
    /* transform: scale(1.05); */
    transform: scale(1.0);
}

/* #textContainer > div.active { */
/*     box-shadow: inset 0 2px 4px -1px rgba(0,0,0,0.2), */
/*                 inset 0 4px 5px 0 rgba(0,0,0,0.14), */
/*                 inset 0 1px 10px 0 rgba(0,0,0,0.12); */
/* } */

#textContainer > div.playing {
    /* to signify that clicking the playing div will stop playback */
    cursor: pointer; 
}
#textContainer > div.start, #textContainer > div.playing {
    /* box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), */
    /*             0 4px 5px 0 rgba(0,0,0,0.14), */
    /*             0 1px 10px 0 rgba(0,0,0,0.12); */
    box-shadow: 0 2px 4px -1px var(--shadow-color),
                0 4px 5px 0 var(--shadow-color),
                0 0.5px 12px -4px var(--shadow-color);
    background-color: var(--raised-color);
    outline-color: transparent !important;
}
.highlight #textContainer > div.start {
    box-shadow: 0px 0px 4px 4px var(--highlight-color);
}
.highlight #textContainer > div.playing {
    box-shadow: 1px 0px 8px 7px var(--highlight-color);
    /* background-color: var(--highlight-color); */
    
    /* border-radius: 0px; */
    /* transform: translateZ(10px); */
}
.highlight #textContainer > div.start:after, .highlight #textContainer > div.playing:after {
    border-color: var(--highlight-color);
}
.pop-out #textContainer > div.playing {
    transform: scale(1.07);
}

/* EXPERIMENTAL (marks) (TODO) */
/* #textContainer > div mark { */
/*     background-color: transparent; */
/*     position: relative; */
/* } */
/* #textContainer > div mark:after { */
/*     content:''; */
/*     z-index: -1; */
/*     position: absolute; */
/*     top: 0; */
/*     left: 0; */
/*     width: 100%; */
/*     height: 100%; */
/*     background-color: var(--selection-color); */
/*     opacity: 0.5; */
/*     transform-origin: 0 50%; */
/*     transform: scaleX(0); */
/*     transition: transform 0.3s; */
/* } */
/* #textContainer > div mark:hover:after { */
/*     transform: scaleX(1); */
/* } */


/* PANELS are the :after elem */
#textContainer > div:after {
    z-index: -1;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    /* border: 1px solid; */
    /* border-color: var(--font-color); */
    --border-color: var(--font-color);
    box-shadow: inset 0 0 0 1px var(--border-color); /* faux border */
    background-color: var(--panel-color);
    opacity: 0;
    transform: scaleX(0);
    transition: background-color 0.2s, transform 0.4s, opacity 0.4s;
}
#textContainer.auto-panel-bg > div:after {
    --border-color: var(--panel-color, transparent);
    background-color: transparent;
    backdrop-filter:  brightness(1.5) saturate(2);
    -webkit-backdrop-filter: brightness(1.5) saturate(2);
}
#textContainer.auto-panel-text > div:after {
    --border-color: var(--panel-color, transparent);
    background-color: var(--font-color);
    filter: invert() hue-rotate(180deg);
}
#textContainer > div:nth-of-type(even):after {
    transform-origin-x: 0; /* For alternating box slide-in animation */
    /* transform: translateX(-50%); */
}
#textContainer > div:nth-of-type(odd):after {
    transform-origin-x: 100%;
    /* transform: translateX(50%); */
}
#textContainer.panel-view > div:after {
    opacity: 1;
    /* transform: translateX(0); */
    transform: none;
    /* margin-top: var(--spacing-size); */
    /* margin-top: 20px; */
    /* padding: 0.6em 2.4em; */
}
#textContainer.panel-view > div {
    background-color: transparent; /* since panels are BEHIND the divs */
}
/* END PANEL VIEW */
/* BEGIN comment/loading/warning/error view */
#textContainer > div.comment {
    opacity: 0.3;
}
#textContainer > div.resource {
    white-space: pre;
    overflow: scroll;
    text-overflow: ellipsis;
}
#textContainer > div.resource.editing {
    overflow: scroll;
    text-overflow: clip;
}


#textContainer.status-indicators > div:before {
    /* border-left: 0.3em solid;
    border-color: var(--status-color); */
    /* border-color is cheaper to animate, but box-shadow doesn't affect layout */
    box-shadow: -0.8em 0.25em 0.13em -0.12em var(--status-color)
}
#textContainer > div.warning-highlighted,
#textContainer > div.error-highlighted,
#textContainer > div.loading-highlighted {
    /* box-shadow: 1px 0px 8px 7px var(--status-color); */
}
#textContainer > div.warning-highlighted {
    --status-color: var(--warning-color);
    /* border-radius: 3px; */
    /* transform: translateZ(10px); */
}
#textContainer > div.error-highlighted {
    --status-color: var(--error-color);
    /* background-color: var(--error-color); */
    /* color: white; */
    /* border-radius: 0px; */
    /* transform: translateZ(10px); */
}
#textContainer > div.error-2-highlighted {
    --status-color: var(--error-2-color);

}
#textContainer > div.loading-highlighted {
    --status-color: var(--loading-color);
    cursor: progress;
    /* background-color: var(--error-color); */
    /* color: white; */
    /* border-radius: 0px; */
}
#textContainer > div.quota-highlighted {
    --status-color: var(--quota-color);
    cursor: help;
    /* background-color: var(--error-color); */
    /* color: white; */
    /* border-radius: 0px; */
}
#textContainer > div.loaded-status {
    --status-color: var(--loaded2-color);
}
#textContainer > div.loaded-status.new {
    --status-color: var(--loaded-color);
}

#textContainer > div.c-len-warn {
    --status-color: var(--warning-color);
}
#textContainer > div.c-len-err {
    --status-color: var(--error-color);
}

/* not used yet, but flashes a div */
/* #textContainer > div.show-edit {  */
/*     animation: 1s flash-opacity 2 step-start; */
/* } */
/* @keyframes flash-opacity { */
/*     50% { */
/*         opacity: 0.1; */
/*     } */
/* } */

/* should below be uncommented since we only increased padding to accomodate line glyphs
   but then ended up liking the higher padding anyway...because panels look centered */
/* .line-glyphs #textContainer.panel-view > div { */
/*     padding: 0.6em 2.4em; */
/* } */

/* experimenting with always having line glyphs but only conditionally showing them
   so then we can smoothly animate them (and they are not so expensive) */
/* #textContainer > div::before { */ /* fully embracing :not now */
#textContainer > div:not(.comment)::before {
    /* content: counter(headings); */
    content: var(--main-glyph); 
    counter-increment: sp-count;
    /* float: left; */ /* <- this makes deleting newlines inside spans broken on safari */
    position: relative;
    /* left: 0em; */
    /* transform: translateX(calc(0em - var(--left-padding))); */
    left: calc(-0.1em - max(0em, var(--left-padding)));
    height: 0.5em;
    margin-right: 0em;
    display: inline-block;
    opacity: 0;
    /* transition: margin-right 0.5s linear, left 0.5s linear, transform 0.2s, opacity 0.2s; */
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.3s;
}
.line-glyphs #textContainer > div::before {
    opacity: 1;
    margin-right: calc(var(--first-line-offset) - max(0em, var(--left-padding)));
    width: 0.5em;
    white-space: nowrap;
}
.line-glyphs #textContainer > div:-webkit-any(.start, .playing, .warning-highlighted, .error-highlighted)::before {
    /* TODO: don't use -webkit-any lol */
    /* transform: translateX(-125%); */
    transform: translateX(-175%);
    text-shadow: 1px 1px 1px var(--loading-color);
    /* transform: translateX(-0.4em); */
    /* for some reason below line fixes error of applying line glyphs while a div is highlighted */
    /* transition: margin-right 200ms, transform 200ms ease 150ms; */
}
/* show ! even if line-glyphs is off...good idea? */
#textContainer > div.warning-highlighted::before {
    content: '!';
}
#textContainer > div.error-highlighted::before {
    content: '!!';
    letter-spacing: -0.3em;
}
#textContainer > div.loading-highlighted::before {
    content: '...';
    letter-spacing: -0.3em;
}
/* .line-glyphs #textContainer > div.playing::before { */
/*     animation: bob 1s infinite; */
/*     transform: translateX(-125%); */
/* } */
/* @keyframes bob { */
/*     50% { */
/*         transform: translateX(-150%); */
/*     } */
/* } */

.line-glyphs #textContainer > div::before {
    animation: swivel 0.3s;
}
@keyframes swivel {
    from {
        /* opacity: 0.0; */
        transform: scaleY(0);
    }
    to {
        /* opacity: 1.0; */
        transform: scaleY(1);
    }
}


#tooltip {
    z-index: 1;
    position: absolute;
    /* opacity: 0; */
    opacity: 1;
    top: 0;
    left: 0;
    width: 0;
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    text-align: left;
    padding: 0.5em 1em;
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 5px;
    /* using inset box shadow as border (doesn't interpolate with regular) to make width calculation simpler */
    /* border: 1px solid; */
    /* border-color: #dddd; */
    /* box-shadow: 6px 6px 8px #4447, inset 0 0 0px 1px #dddd; */
    box-shadow: 6px 6px 5px var(--shadow-color), inset 0 0 0px 1px #dddd;
    border-color: var(--ui-fg-color);
    background-color: var(--ui-bg-color);
    color: var(--ui-text-color);
    /* font: bold 14px "American Typewriter", "Courier New", "Courier"; */
    /* font-family: var(--title-font);  */
    font-family: var(--menu-font); 
    font-size: 14px;
    text-transform: uppercase;
    /* transition: width 200ms, opacity 500ms linear; */
    transition: width 100ms ease-in-out, opacity 150ms ease-in-out;
    /* transition: width 100ms, opacity 150ms; */
}
#tooltip.fade { /* can be fading in or out */
    opacity: 0;
}
#tooltip.disabled {
    display: none;
}
#tooltip.frozen {
    /* border-color: black; */
    transition: width 100ms ease-in-out, opacity 150ms ease-in-out 75ms;
}
#tooltip.frozen span {
    outline: none;
    text-decoration: underline;
    text-decoration-color: inherit;
    animation: flash-green 1s infinite;
}
@keyframes flash-green {
    50% {
        /* color: green; */
        color: lightgreen;
    }
}

/* accessibility features for tooltip */
#tooltip.no-slide {
    width: inherit !important;
}

/* #br-tooltip { */
/*     z-index: 0; */
/*     position: absolute; */
/*     top: 0; */
/*     left: 0; */
/*     white-space: nowrap; */
/*     user-select: none; */
/*     overflow: hidden; */
/*     text-align: left; */
/*     padding: 0.5em 1em; */
/*     border-radius: 5px; */
/*     border: 1px solid #FFFC; */
/*     background-color: rgba(0,0,0,0.7); */
/*     box-shadow: 6px 6px 8px #4447; */
/*     color: white; */
/*     font: bold 14px "American Typewriter", "Courier New", "Courier"; */
/*     text-transform: uppercase; */
/*     /\* transition: width 200ms, opacity 500ms linear; *\/ */
/*     transition: width 100ms ease-in-out, opacity 150ms ease-in-out; */
/* } */
/* #br-tooltip span { */
/*     outline: none; */
/*     text-decoration: underline; */
/*     text-decoration-color: inherit; */
/*     animation: flash 1s infinite; */
/* } */
/* @keyframes flash { */
/*     50% { */
/*         color: lightgreen; */
/*     } */
/* } */

/* /\* "tooltip" for modifying pause lengths *\/ */
/* #br-helper { */
/*     position: absolute; */
/*     font-size: var(--font-size); */
/*     /\* --arrow-size: max(5px, 0.5em); *\/ */
/*     top: 1px; */
/*     /\* top: 2.5px; /\\* small pixel fix for arrow *\\/ *\/ */
/*     margin-top: -0.25em; /\* -(height - 1em) / 2 *\/ */
/*     left: 0.3em; */
/*     /\* use below instead if we are not using translate to move this *\/ */
/*     /\* margin-top: calc(-1.5em - 5px); /\\* height + 5px padding *\\/ *\/ */
/*     /\* margin-left: calc(-1.5em - 1em * 0.7); /\\* the 1em is how much br is left of its orig position *\\/ *\/ */
/*     /\* width: 3em; *\/ */
/*     width: 8%; */
/*     height: 1.5em; */
/*     border-radius: 10px; */
/*     background-color: white; */
/*     box-sizing: border-box; */
/*     border: 0.05em solid gainsboro; */
/*     border-right: none; */
/*     transition: transform 300ms, opacity 200ms linear; */
/* } */
/* #br-helper.hidden { */
/*     opacity: 0; */
/*     pointer-events: none; */
/*     /\* transition: transform 300ms, opacity 200ms linear 200ms; *\/ */
/*     transition: transform 300ms, opacity 200ms linear; */
/* } */
/* #br-helper:after { /\* arrow *\/ */
/*     /\* content: ''; *\/ */
/*     display: none; */
/*     position: absolute; */
/*     /\* top: 15%; *\/ */
/*     /\* left: 8vw; *\/ */
/*     top: 0.125em; /\* half 0.25em since not split btwn top/bottom *\/ */
/*     left: 100%; */
/*     /\* transform: translateX(-4px); *\/ */
/*     display: inline-block; */
/*     border-radius: 4px; */
/*     border-top: var(--arrow-size) solid #0000; */
/*     border-left: var(--arrow-size) solid green; */
/*     border-right: var(--arrow-size) solid transparent; */
/*     border-bottom: var(--arrow-size) solid transparent; */
/* } */
/* #br-helper > label{ */
/*     font-size: 0.6em; /\* inherited by the input *\/ */
/* } */
/* #br-helper > label > span { */
/*     position: absolute; */
/*     left: 0; */
/*     right: 0; */
/*     transform: translateY(-50%) scale(0.75); */
/*     margin: auto; */
/*     width: min-content; */
/*     white-space: nowrap; */
/*     padding: 0.2em; */
/*     border-radius: 5px; */
/*     border: 1px solid gainsboro; */
/*     background-color:white; */
/*     color: grey; */
/*     font-family: sans-serif; */
/* } */
/* #br-helper input { */
/*     width: 100%; */
/*     height: 100%; */
/*     font-size: inherit; */
/*     padding-left: 0.75em; */
/*     border-radius: 10px; */
/*     border: none; */
/*     text-align: center; */
/*     /\* font-family: 'Helvetica Neue', 'Helvetica', sans-serif; *\/ */
/*     /\* font-family: 'Garamond', 'Times'; *\/ */
/*     font-family: 'American Typewriter', 'Courier'; */
/*     outline: none; */
/* } */

#getscript-loading-container {
    /* display: none; /\* by default. maybe this should be in the html *\/ */
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    transform-origin: 50% 0;
    transition: opacity 0.3s, transform 0.3s;
    transition-delay: 0.2s;
}
#getscript-loading-container.hidden {
    transform: scale(0.01);
    opacity: 0;
    transition-delay: 0s;
}
#getscript-loading-container .loading-text {
    font-size: 30px;
    font-family: var(--menu-font);
    font-weight: 200;
    color: #5a5a5a;
    line-height: 100px;
}

/* https://mdjunaidalam5.github.io/SpinBolt/ */
/* #getscript-loading-container.hidden .loading-icon { */
/*     display: none; */
/* } */
.loading-icon {
    display: inline-block;
}
.loading-icon > div {
    --size: 200px;
    width: var(--size);
    height: var(--size);
    background-size: var(--size);
    background-image: url('https://i.pinimg.com/originals/c1/20/74/c12074a190e02f9e2e76b08a129543fb.png');
    animation: spin linear 2s infinite;
}
#getscript-loading-container.error .loading-icon > div,
#getscript-loading-container.hidden .loading-icon > div {
    animation-play-state: paused;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* BETA */
#spectrogram {
    /* display: none; */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 15%;
    opacity: 0.3;
    /* background: linear-gradient(0deg, var(--ui-bg-color), transparent); */
    background: transparent;
    pointer-events: none;
}

.show-spectrogram #spectrogram {
    /* display: block; */
    opacity: 0.9;
}

#toaster {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    /* height: 1em;
    background: rgba(0,0,0,0.2); */
}
.toast {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: max-content;
    padding: 1em;
    background: rgba(0,0,0,0.2);
    border: 1px solid;
    border-color: rgba(0,0,0,0.8);
    border-radius: 0.3em;
    transform: translateY(-150%);
    animation-name: show-toast, hide-toast;
    animation-duration: 2s, 5s;
    animation-delay: 0s, 2s;
    animation-timing-function: ease-in, ease-out;
    animation-fill-mode: forwards;
}
/* .toast.shown {
    animation: hide-toast 2s;
} */
@keyframes show-toast {
    25% {
        transform: translateY(30%);
    }
    75% {
        transform: translateY(35%);
    }
    100% {
        /* opacity: 1; */
        transform: translateY(60%);
    }
}
@keyframes hide-toast {
    to {
        opacity: 0.1;
    }
}