/* ================================================================
   AUTHOR WALLPAPER — NO TINT
   ================================================================ */

html,
body {
    background-color: #000 !important;

    background-image:
        url("/author-wallpaper.png?v=transparent-final") !important;

    background-position:
        center top !important;

    background-size:
        cover !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;
}

html::before,
html::after,
body::before,
body::after {
    content: none !important;
    display: none !important;

    background: transparent !important;

    opacity: 0 !important;

    filter: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ================================================================
   LOGO
   NO LONGER FIXED TO THE BROWSER WINDOW.
   It stays at the TOP OF THE DOCUMENT and scrolls away normally.
   ================================================================ */

#nmtdc-author-top-logo {
    position: absolute !important;

    top: 18px !important;
    left: 105px !important;

    width: 155px !important;
    height: 108px !important;

    object-fit: contain !important;

    z-index: 50 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: none !important;

    filter:
        drop-shadow(0 0 5px #ffe58d)
        drop-shadow(0 0 12px #ffb000)
        drop-shadow(0 0 25px rgba(255,135,0,.72))
        drop-shadow(0 5px 7px rgba(0,0,0,.95))
        !important;
}


/* ================================================================
   TOP AREA — COMPLETELY CLEAR
   ================================================================ */

header,
.header,
.site-header,
.page-header,
.topbar,
.top-bar,
.navbar,
.nav-bar,
.masthead,
.hero,
.hero-header,
#header,
#top,
#topbar,
#nmtdc-author-header,
#author-clean-header {

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    filter:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    box-shadow:
        none !important;
}


/* Thin gold line is okay */
header,
.header,
.site-header,
#nmtdc-author-header,
#author-clean-header {

    border-bottom:
        2px solid rgba(255,183,0,.90) !important;
}


/* ================================================================
   REMOVE BROWN / BLACK PANEL BLOCKS

   rgba(..., .05) = roughly 95% CLEAR.
   ================================================================ */

.panel,
.card,
.ai-panel,
.author-panel,
.writer-panel,
.interactive-panel,
.revision-panel,
.container,
.content,
.wrapper {

    background:
        rgba(0,0,0,.05) !important;

    background-color:
        rgba(0,0,0,.05) !important;

    background-image:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    filter:
        none !important;
}


/* ================================================================
   TEXT / ENTRY AREAS — ALSO ALMOST CLEAR
   ================================================================ */

textarea,
input[type="text"],
input:not([type]),
select,
#conversation,
#bookOutput,
#revisionInstructions,
.output,
.response,
.messages,
.message,
.editor,
.manuscript {

    background:
        rgba(0,0,0,.05) !important;

    background-color:
        rgba(0,0,0,.05) !important;

    background-image:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    filter:
        none !important;
}


/* Keep the useful gold edges */
textarea,
input,
select,
#conversation,
#bookOutput,
#revisionInstructions,
.panel,
.card {

    border-color:
        rgba(255,181,0,.92) !important;
}


/* ================================================================
   TEXT READABILITY
   Since the backgrounds are now nearly transparent,
   give the letters shadows instead of covering the wallpaper.
   ================================================================ */

body,
p,
span,
label,
small,
li,
div {

    text-shadow:
        0 1px 2px rgba(0,0,0,1),
        0 2px 5px rgba(0,0,0,.85);
}


h1,
h2,
h3,
h4 {

    text-shadow:
        0 2px 4px rgba(0,0,0,1),
        0 0 8px rgba(0,0,0,.70);
}


/* ================================================================
   BUTTONS KEEP THEIR COLOR
   ================================================================ */

button {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 900px) {

    #nmtdc-author-top-logo {

        position: absolute !important;

        top: 10px !important;
        left: 16px !important;

        width: 94px !important;
        height: 68px !important;
    }
}