/*
 * WALIDHASSAN.COM
 * FINAL SINGLE-BOX DASHBOARD + POLISHED METAL SHINE
 *
 * Core rules:
 * - Only genuine outer cards/panels receive metal-surface.
 * - Dashboard field wrappers are never converted into extra cards.
 * - Inputs and textareas receive only their own animated border.
 * - No pseudo-element is placed above text.
 * - Publication control text cannot be crossed or covered.
 */

:root {
    --final-glass:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.064),
            rgba(255, 255, 255, 0.018) 38%,
            rgba(255, 255, 255, 0.010) 70%,
            rgba(0, 0, 0, 0.17)
        );

    --final-glass-strong:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.088),
            rgba(255, 255, 255, 0.020) 34%,
            rgba(255, 255, 255, 0.010) 64%,
            rgba(0, 0, 0, 0.23)
        );

    --final-field:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.054),
            rgba(255, 255, 255, 0.012) 48%,
            rgba(0, 0, 0, 0.20)
        );

    --final-white: #ffffff;
    --final-muted: rgba(232, 237, 247, 0.77);
    --final-silver: rgba(236, 241, 248, 0.78);
}

@property --final-metal-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes finalMetalOrbit {
    to {
        --final-metal-angle: 360deg;
    }
}

/*
 * Used on controls and real fields. A bright white reflection and a narrow
 * gold reflection travel around the four edges without creating a fill.
 */
@keyframes finalEdgeShine {
    0%,
    100% {
        border-color: rgba(239, 243, 249, 0.88);

        box-shadow:
            inset 6px 0 8px -5px rgba(255, 211, 91, 1),
            inset 2px 0 4px -3px rgba(255, 255, 255, 1),
            inset -1px 0 5px -5px rgba(172, 182, 197, 0.50),
            -4px 0 13px -10px rgba(255, 217, 122, 0.80),
            0 0 12px -8px rgba(248, 251, 255, 0.82),
            0 9px 22px rgba(0, 0, 0, 0.20);
    }

    25% {
        border-color: rgba(255, 255, 255, 1);

        box-shadow:
            inset 0 6px 8px -5px rgba(255, 211, 91, 1),
            inset 0 2px 4px -3px rgba(255, 255, 255, 1),
            inset 0 -1px 5px -5px rgba(172, 182, 197, 0.50),
            0 -4px 13px -10px rgba(255, 217, 122, 0.80),
            0 0 12px -8px rgba(248, 251, 255, 0.82),
            0 9px 22px rgba(0, 0, 0, 0.20);
    }

    50% {
        border-color: rgba(239, 243, 249, 0.88);

        box-shadow:
            inset -6px 0 8px -5px rgba(255, 211, 91, 1),
            inset -2px 0 4px -3px rgba(255, 255, 255, 1),
            inset 1px 0 5px -5px rgba(172, 182, 197, 0.50),
            4px 0 13px -10px rgba(255, 217, 122, 0.80),
            0 0 12px -8px rgba(248, 251, 255, 0.82),
            0 9px 22px rgba(0, 0, 0, 0.20);
    }

    75% {
        border-color: rgba(255, 255, 255, 1);

        box-shadow:
            inset 0 -6px 8px -5px rgba(255, 211, 91, 1),
            inset 0 -2px 4px -3px rgba(255, 255, 255, 1),
            inset 0 1px 5px -5px rgba(172, 182, 197, 0.50),
            0 4px 13px -10px rgba(255, 217, 122, 0.80),
            0 0 12px -8px rgba(248, 251, 255, 0.82),
            0 9px 22px rgba(0, 0, 0, 0.20);
    }
}

/* =========================================================
   BLACK COSMIC BACKGROUND
========================================================= */

html {
    background: #000000 !important;
}

body {
    background: transparent !important;
}

.cosmos {
    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(120, 126, 142, 0.070),
            transparent 30%
        ),
        radial-gradient(
            circle at 84% 32%,
            rgba(255, 213, 116, 0.030),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #050607 0%,
            #000000 55%,
            #020203 100%
        ) !important;
}

.singularity {
    filter:
        drop-shadow(0 0 38px rgba(255, 184, 87, 0.15))
        drop-shadow(0 0 80px rgba(255, 225, 160, 0.045)) !important;
}

.disc {
    background:
        radial-gradient(
            ellipse at center,
            transparent 0 24%,
            rgba(255, 255, 255, 0.88) 25% 28%,
            rgba(255, 228, 174, 0.88) 29% 35%,
            rgba(255, 180, 76, 0.48) 36% 45%,
            rgba(255, 225, 156, 0.07) 52%,
            transparent 65%
        ) !important;
}

.photon-ring {
    background:
        radial-gradient(
            ellipse at center,
            transparent 0 52%,
            rgba(255, 255, 255, 0.90) 53% 55%,
            rgba(255, 222, 144, 0.86) 56% 60%,
            rgba(255, 158, 60, 0.15) 61% 67%,
            transparent 70%
        ) !important;
}

.event-horizon {
    background:
        radial-gradient(
            circle at 52% 46%,
            #000000 0 57%,
            rgba(1, 1, 2, 0.99) 60% 70%,
            transparent 74%
        ) !important;

    box-shadow:
        0 0 0 1px rgba(255, 248, 231, 0.26),
        0 0 12px rgba(255, 228, 170, 0.34),
        0 0 38px rgba(255, 171, 57, 0.18) !important;
}

.grid-warp {
    opacity: 0.14 !important;

    background-image:
        linear-gradient(
            rgba(205, 215, 230, 0.14) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(205, 215, 230, 0.14) 1px,
            transparent 1px
        ) !important;
}

.vignette {
    background:
        radial-gradient(
            ellipse at center,
            transparent 38%,
            rgba(0, 0, 0, 0.22) 75%,
            rgba(0, 0, 0, 0.54) 100%
        ) !important;
}

body.login-page::before {
    background:
        radial-gradient(
            circle at 76% 30%,
            rgba(255, 184, 75, 0.075),
            transparent 20%
        ),
        radial-gradient(
            circle at 12% 14%,
            rgba(140, 149, 167, 0.055),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.10),
            rgba(0, 0, 0, 0.62)
        ) !important;
}

/* =========================================================
   TRUE OUTER SURFACES ONLY
========================================================= */

.metal-surface,
.login-card {
    position: relative !important;
    isolation: isolate !important;

    border:
        1px
        solid
        var(--final-silver) !important;

    background:
        var(--final-glass) !important;

    background-clip:
        padding-box !important;

    color:
        #ffffff !important;

    box-sizing:
        border-box !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 18px 42px rgba(0, 0, 0, 0.27) !important;

    backdrop-filter:
        blur(9px)
        saturate(118%)
        brightness(0.98) !important;

    -webkit-backdrop-filter:
        blur(9px)
        saturate(118%)
        brightness(0.98) !important;
}

/*
 * The polished metal is a border-only masked layer behind all content.
 * All direct content is explicitly above it.
 */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .metal-surface::before,
    .login-card::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 0 !important;
        inset: -1px !important;
        border-radius: inherit !important;
        padding: 2px !important;

        background:
            conic-gradient(
                from var(--final-metal-angle),

                #343840 0deg,
                #737b87 45deg,
                #f8fbff 62deg,
                #ffffff 70deg,
                #aeb6c1 79deg,
                #464b54 96deg,

                #88641f 110deg,
                #ffd35e 118deg,
                #fff8d9 124deg,
                #b88729 132deg,

                #3a3f47 148deg,
                #858d99 205deg,
                #f9fbff 224deg,
                #ffffff 232deg,
                #9da6b2 242deg,
                #3a3f47 265deg,

                #6f5421 286deg,
                #ffcf57 294deg,
                #fff9df 300deg,
                #99722a 307deg,

                #343840 326deg,
                #343840 360deg
            ) !important;

        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0) !important;

        -webkit-mask-composite:
            xor !important;

        mask-composite:
            exclude !important;

        filter:
            brightness(1.16)
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.84))
            drop-shadow(0 0 5px rgba(255, 208, 87, 0.42)) !important;

        animation:
            finalMetalOrbit
            4.2s
            linear
            infinite !important;

        pointer-events:
            none !important;
    }

    .metal-surface > *,
    .login-card > * {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Delete old card shine layers from inline or earlier CSS. */
.metal-surface::after,
.login-card::after,
#publications .pub.glass::after,
#publications .empty.glass::after {
    content:
        none !important;

    display:
        none !important;
}

/* Home's old blue decorative layer must also be removed. */
#publications .pub.glass::before,
#publications .empty.glass::before {
    content:
        none !important;

    display:
        none !important;
}

/* Restore the new metal layer on publication cards after removing old layers. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    #publications .pub.glass.metal-surface::before,
    #publications .empty.glass.metal-surface::before {
        content: "" !important;
        display: block !important;
    }
}

.topbar__inner.metal-surface {
    border-radius:
        999px !important;
}

.footer__inner.metal-surface {
    border-radius:
        32px !important;
}

main .metal-surface,
.login-card {
    border-radius:
        34px !important;
}

/* =========================================================
   PREVENT DOUBLE DASHBOARD BOXES
========================================================= */

/*
 * A metal surface inside another metal surface is reset unless it is one
 * of the few intentional nested components.
 */
.metal-surface .metal-surface:not(.metal-nested-allowed) {
    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

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

.metal-surface .metal-surface:not(.metal-nested-allowed)::before,
.metal-surface .metal-surface:not(.metal-nested-allowed)::after {
    content:
        none !important;

    display:
        none !important;
}

/*
 * Dashboard/editor wrappers are structural only. The actual input or
 * textarea below receives the moving metal edge.
 */
.dashboard-shell .field,
.dashboard-shell .form-group,
.dashboard-shell .editor-field,
.dashboard-shell .content-field,
.dashboard-shell .setting-field,
.dashboard-shell fieldset,
.dashboard-card .field,
.dashboard-card .form-group,
.dashboard-card .editor-field,
.dashboard-card .content-field,
.dashboard-card .setting-field,
.panel .field,
.panel .form-group,
.panel .editor-field,
.panel .content-field,
.panel .setting-field {
    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    animation:
        none !important;
}

/* =========================================================
   CONTROLS — SHINING EDGE WITHOUT OVERLAYS
========================================================= */

.metal-control,
.login-submit,
#publications .pub__year,
#publications .tag,
#publications .doi-chip,
#publications .disclose {
    position: relative !important;

    border:
        1px
        solid
        rgba(239, 243, 249, 0.90) !important;

    background:
        var(--final-glass-strong) !important;

    color:
        #ffffff !important;

    box-sizing:
        border-box !important;

    text-shadow:
        none !important;

    backdrop-filter:
        blur(8px)
        saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(8px)
        saturate(115%) !important;

    animation:
        finalEdgeShine
        3.6s
        ease-in-out
        infinite !important;
}

/* No control pseudo-element may cover text. */
.metal-control::before,
.metal-control::after,
.login-submit::before,
.login-submit::after,
#publications .pub__year::before,
#publications .pub__year::after,
#publications .tag::before,
#publications .tag::after,
#publications .doi-chip::before,
#publications .doi-chip::after,
#publications .disclose::before,
#publications .disclose::after {
    content:
        none !important;

    display:
        none !important;
}

.metal-control,
.login-submit,
#publications .pub__year,
#publications .tag,
#publications .doi-chip,
#publications .disclose {
    border-radius:
        999px !important;
}

#publications .pub__foot {
    display:
        flex !important;

    align-items:
        center !important;

    flex-wrap:
        wrap !important;

    gap:
        10px 12px !important;

    overflow:
        visible !important;
}

#publications .pub__body {
    min-width:
        0 !important;
}

#publications .pub__year,
#publications .tag,
#publications .doi-chip,
#publications .disclose {
    min-height:
        38px !important;

    height:
        auto !important;

    padding:
        8px 16px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    line-height:
        1.28 !important;

    font-size:
        0.82rem !important;

    font-weight:
        750 !important;

    max-width:
        100% !important;

    overflow:
        visible !important;

    clip-path:
        inset(0 round 999px) !important;
}

#publications .doi-chip {
    white-space:
        normal !important;

    overflow-wrap:
        anywhere !important;

    word-break:
        break-word !important;
}

#publications .tag,
#publications .disclose,
#publications .pub__year {
    white-space:
        nowrap !important;
}

/* =========================================================
   REAL INPUTS AND TEXTAREAS ONLY
========================================================= */

.metal-field,
.login-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
textarea,
select {
    border:
        1px
        solid
        rgba(238, 243, 249, 0.87) !important;

    background:
        var(--final-field) !important;

    color:
        #ffffff !important;

    box-sizing:
        border-box !important;

    text-shadow:
        none !important;

    backdrop-filter:
        blur(7px)
        saturate(112%) !important;

    -webkit-backdrop-filter:
        blur(7px)
        saturate(112%) !important;

    animation:
        finalEdgeShine
        4s
        ease-in-out
        infinite !important;
}

input::placeholder,
textarea::placeholder,
.login-input::placeholder {
    color:
        rgba(224, 230, 240, 0.51) !important;

    opacity:
        1 !important;
}

/* =========================================================
   LOGIN EYE POSITION
========================================================= */

.login-control {
    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    animation:
        none !important;
}

.login-input {
    width:
        100% !important;

    padding-left:
        52px !important;

    padding-right:
        58px !important;
}

.login-icon {
    position:
        absolute !important;

    z-index:
        6 !important;

    top:
        50% !important;

    left:
        17px !important;

    width:
        21px !important;

    height:
        21px !important;

    margin:
        0 !important;

    transform:
        translateY(-50%) !important;

    pointer-events:
        none !important;
}

.password-toggle {
    position:
        absolute !important;

    z-index:
        8 !important;

    top:
        50% !important;

    right:
        10px !important;

    width:
        42px !important;

    min-width:
        42px !important;

    max-width:
        42px !important;

    height:
        42px !important;

    min-height:
        42px !important;

    max-height:
        42px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        grid !important;

    place-items:
        center !important;

    transform:
        translateY(-50%) !important;

    border:
        0 !important;

    border-radius:
        50% !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    animation:
        none !important;

    color:
        rgba(232, 237, 247, 0.78) !important;

    overflow:
        visible !important;
}

.password-toggle::before,
.password-toggle::after {
    content:
        none !important;

    display:
        none !important;
}

.password-toggle svg,
#password-eye {
    display:
        block !important;

    width:
        21px !important;

    height:
        21px !important;

    margin:
        0 !important;

    transform:
        none !important;
}

/* =========================================================
   WHITE TEXT AND STATUS COLORS
========================================================= */

.hero,
.hero *,
#publications,
#publications *,
.metal-surface,
.metal-surface *,
.login-card,
.login-card * {
    color:
        #ffffff !important;
}

.pub__authors,
.pub__source,
.pub__abstract,
.live-intro,
.live-subtitle,
.contact-intro,
.messages-summary,
.login-subtitle,
.login-quote,
.login-mobile-quote,
.footer__meta,
.meta,
.message-card__email,
.message-card__time,
.live-count,
.live-upload__help {
    color:
        var(--final-muted) !important;
}

.live-verified {
    background:
        #238ed7 !important;

    color:
        #ffffff !important;

    animation:
        none !important;
}

.live-status__dot {
    background:
        #4fd59b !important;

    animation:
        none !important;
}

.contact-link-error.is-visible,
.live-alert--error {
    border-color:
        rgba(255, 125, 145, 0.38) !important;

    background:
        rgba(118, 25, 46, 0.23) !important;

    color:
        #ffffff !important;
}

/* =========================================================
   STRUCTURAL WRAPPERS
========================================================= */

.inline-form,
.actions,
.contact-grid,
.form-grid,
.live-feed,
.message-list,
.messages-list,
.pubs,
.grid,
.grid-2,
.grid-3,
.grid-4,
.login-form,
.login-field,
.login-control {
    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}

/* =========================================================
   REDUCED MOTION / MOBILE
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .metal-surface::before,
    .metal-control,
    .metal-field,
    .login-submit,
    .login-input,
    #publications .pub__year,
    #publications .tag,
    #publications .doi-chip,
    #publications .disclose,
    input,
    textarea,
    select {
        animation:
            none !important;
    }
}

@media (max-width: 760px) {
    .topbar__inner.metal-surface {
        border-radius:
            32px !important;
    }

    main .metal-surface,
    .login-card {
        border-radius:
            28px !important;
    }

    #publications .doi-chip {
        width:
            100% !important;
    }
}
/* =========================================================
   FULL-VISIBILITY LIQUID GLASS MODE
   ---------------------------------------------------------
   Changes only glass transparency and blur strength.
   Preserves:
   - current black cosmic background
   - current white text
   - current silver metal
   - current gold reflection
   - all existing animation speeds and motion settings
   - all existing box shapes and layout
========================================================= */

:root {
    /*
     * Nearly transparent neutral glass.
     * No blue or additional color is introduced.
     */
    --final-glass:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.022),
            rgba(255, 255, 255, 0.007) 42%,
            rgba(255, 255, 255, 0.003) 72%,
            rgba(0, 0, 0, 0.025)
        );

    --final-glass-strong:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.030),
            rgba(255, 255, 255, 0.009) 38%,
            rgba(255, 255, 255, 0.004) 68%,
            rgba(0, 0, 0, 0.035)
        );

    --final-field:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.026),
            rgba(255, 255, 255, 0.007) 48%,
            rgba(0, 0, 0, 0.040)
        );
}

/*
 * Outer cards and panels:
 * background remains clearly visible through the glass.
 */
.metal-surface,
.login-card {
    background:
        var(--final-glass) !important;

    backdrop-filter:
        blur(2px)
        saturate(112%)
        brightness(1.00) !important;

    -webkit-backdrop-filter:
        blur(2px)
        saturate(112%)
        brightness(1.00) !important;
}

/*
 * Buttons and publication pills:
 * retain the same silver/gold motion with a nearly clear interior.
 */
.metal-control,
.login-submit,
#publications .pub__year,
#publications .tag,
#publications .doi-chip,
#publications .disclose {
    background:
        var(--final-glass-strong) !important;

    backdrop-filter:
        blur(2px)
        saturate(112%) !important;

    -webkit-backdrop-filter:
        blur(2px)
        saturate(112%) !important;
}

/*
 * Actual input and textarea interiors:
 * clear glass while keeping white text and current border motion.
 */
.metal-field,
.login-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
textarea,
select {
    background:
        var(--final-field) !important;

    backdrop-filter:
        blur(2px)
        saturate(110%) !important;

    -webkit-backdrop-filter:
        blur(2px)
        saturate(110%) !important;
}

/*
 * Header and footer use the same full-visibility glass.
 */
.topbar__inner.metal-surface,
.footer__inner.metal-surface {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.026),
            rgba(255, 255, 255, 0.007) 52%,
            rgba(0, 0, 0, 0.030)
        ) !important;
}

/*
 * Keep nested CAPTCHA and preview areas equally transparent.
 */
.contact-captcha.metal-surface,
.live-upload__preview.metal-surface {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.020),
            rgba(255, 255, 255, 0.005),
            rgba(0, 0, 0, 0.025)
        ) !important;
}

/*
 * Fallback for browsers without backdrop-filter.
 * It remains neutral and transparent rather than introducing any color.
 */
@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
) {
    .metal-surface,
    .login-card,
    .metal-control,
    .metal-field,
    .login-submit,
    .login-input {
        background:
            rgba(0, 0, 0, 0.08) !important;
    }
}