/* ========
|  Reference overlay
|= ======== */

#dialogueArea { display: block; position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    max-width: initial; max-height: initial;
    background: rgba(0,0,0,.7); backdrop-filter: blur(3px);
    z-index: 10000; }
#dialogue     { display: block; position: absolute; left: 50%; top: 50%;
                transform: translate(-50%, -50%); min-width: 60vw; min-height: 2em;
                max-width: 90vw; max-height: 90vh; overflow-y: auto;
                padding: 1.5em 1em;
                background: var(--color-bg-normal); border-radius: .3em;
                box-shadow: 2px 2px 4px var(--color-fg-less), -2px -2px 4px var(--color-fg-less); }
#dialogue h3  { margin-top: 0; padding-top: 0; text-transform: initial; color: var(--color-fg-less); }

#confirmButtons { text-align: right; }
#dialogue .buttonLike { margin: .5em 0 .2em .5em; background: transparent; transition: background .4s, color .4s; }
#dialogue .buttonLike:hover { background: var(--color-borders-dark); color: var(--color-bg-normal); }

#dialogue input[type="text"],
#dialogue textarea   { padding: .5em; border-radius: .1em; border: 2px solid var(--color-borders); transition: border .4s; }
#dialogue input[type="text"]:hover,
#dialogue textarea:hover { border-color: var(--color-fg-normal); }
#dialogue button         { padding: .6em .8em; font-size: .8em; background: var(--color-bg-normal); border: 1px solid var(--color-borders);
                           transition: .4s; }
#dialogue button:focus,
#dialogue button:hover  { background: var(--color-fg-less); color: var(--color-bg-normal); border-color: var(--color-fg-less); }
#dialogue form > *      { display: block; width: 100%; }
#dialogue form label    { font-weight: bold; color: var(--color-fg-less); }
#dialogueClose          { float: right; display: inline-block; padding: 0 .6em .2em .6em; background: var(--color-bg-raised);
                          border-radius: 100%; cursor: pointer; transition: .4s; }
#dialogueClose:hover    { background: var(--color-fg-less); color: var(--color-bg-normal); }

#dialogue ul { margin-left: 1em; padding-left: 0; transition: .4s; }
#dialogue ul.minimized { height: 20px; background-color: var(--color-accent-normal);
    background-size: 20px 20px;
    background-image: repeating-linear-gradient(to right, var(--color-fg-normal), var(--color-fg-normal) 1px, var(--color-accent-normal) 1px, var(--color-accent-normal)); }
#dialogue ul.minimized > * { display: none; }