/* ==========================================================
   ARCHIVE V2.1
   Main Stylesheet
   Theme variables come from theme.css
==========================================================*/


/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:

        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    overflow-x:hidden;

    transition:

        background .7s ease,
        color .6s ease;

}



/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,h2,h3,h4{

    font-weight:700;

    letter-spacing:.5px;

}

p{

    line-height:1.7;

    color:var(--text);

}

small{

    color:var(--muted);

}



/* ==========================================================
   LINKS
========================================================== */

a{

    color:var(--accent);

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:var(--accent2);

}



/* ==========================================================
   RAINBOW BAR
   Changes with every dog's theme
========================================================== */

.rainbow-bar{

    width:100%;

    height:6px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            var(--accent2),

            var(--accent-soft)

        );

}



/* ==========================================================
   HEADER
========================================================== */

.top-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    padding:35px 6%;

    border-bottom:

        1px solid var(--border);

    background:

        rgba(0,0,0,.15);

    backdrop-filter:blur(10px);

}

.top-header h1{

    margin-top:8px;

    font-size:

        clamp(2rem,5vw,3rem);

}

.top-header small{

    text-transform:uppercase;

    letter-spacing:3px;

}



/* ==========================================================
   CLEARANCE BADGE
========================================================== */

.clearance{

    padding:

        12px 22px;

    border-radius:999px;

    border:

        1px solid var(--border);

    background:

        rgba(255,255,255,.04);

    font-size:.9rem;

    transition:.3s;

}

.clearance strong{

    color:var(--accent);

}



/* ==========================================================
   DOG SELECTOR
========================================================== */

.dog-selector{

    padding:

        30px 6%;

}

.dog-selector h3{

    margin-bottom:18px;

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--icon);

}



/* ==========================================================
   DOG BUTTON CONTAINER
========================================================== */

#dog-list{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}



/* ==========================================================
   DOG BUTTON
========================================================== */

.dog-button{

    cursor:pointer;

    padding:

        12px 22px;

    border-radius:999px;

    border:

        1px solid var(--border);

    background:

        linear-gradient(

            180deg,

            var(--panel),

            var(--panel2)

        );

    color:var(--text);

    transition:

        .25s;

}

.dog-button:hover{

    border-color:

        var(--accent);

    color:

        var(--accent);

    transform:

        translateY(-2px);

}

.dog-button i{

    margin-right:8px;

    color:var(--icon);

}



/* ==========================================================
   MAIN CONTENT
========================================================== */

main{

    width:

        min(1200px,92%);

    margin:auto;

    padding:

        35px 0 60px;

}



/* ==========================================================
   HERO
========================================================== */

.profile-hero{

    position:relative;

    overflow:hidden;

    min-height:420px;

    display:flex;

    align-items:center;

    padding:70px;

    border-radius:22px;

    background:

        linear-gradient(

            135deg,

            var(--hero-start),

            var(--hero-end)

        );

    margin-bottom:35px;

}



/* ==========================================================
   HERO GLOW
   Every dog gets a different glow colour
========================================================== */

.profile-hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    top:-280px;

    right:-180px;

    opacity:.12;

    filter:blur(90px);

    background:

        radial-gradient(

            circle,

            var(--glow),

            transparent 70%

        );

}



/* ==========================================================
   HERO CONTENT
========================================================== */

.profile-hero > div{

    position:relative;

    z-index:2;

}



/* ==========================================================
   STATUS BADGE
========================================================== */

.status-badge{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}



.status-badge i{

    animation:pulse 1.5s infinite;

}
.status-item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:

        6px 14px;


    border-radius:999px;


    border:

        1px solid var(--status-container);


    color:

        var(--status-container);


    background:

        rgba(255,255,255,.03);


    box-shadow:

        0 0 10px var(--status-container);

}



.status-item i{

    color:

        var(--status-container);


    filter:

        drop-shadow(
            0 0 6px var(--status-container)
        );


}


/*
==========================================================

    MULTI STATUS SYSTEM

==========================================================
*/


.status-item{


    display:flex;


    align-items:center;


    gap:8px;


    margin:5px 0;


    font-size:.85rem;


    color:var(--text);


}



.status-item i{


    color:

        var(--status-color);


    filter:

        drop-shadow(
            0 0 8px var(--status-color)
        );


    animation:

        pulse 2s infinite;


}

/* ==========================================================
   HERO TITLE
========================================================== */

.profile-hero h1{

    font-size:

        clamp(3rem,9vw,6rem);

    text-transform:uppercase;

    letter-spacing:5px;

    margin-bottom:10px;

}

.profile-hero h2{

    font-weight:400;

    color:var(--muted);

    margin-bottom:22px;

}

#quote{

    max-width:650px;

    font-size:1.2rem;

    font-style:italic;

    color:var(--accent-soft);

}

/* ==========================================================
   Main Stylesheet
   ----------------------------------------------------------
   Panels
   Cards
   Stats
   Attributes
   Tags
==========================================================*/


/* ==========================================================
   PANELS
========================================================== */

.panel{

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(

            180deg,

            var(--panel),

            var(--panel2)

        );

    border:

        1px solid var(--border);

    border-radius:22px;

    padding:30px;

    margin-bottom:24px;

    transition:

        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .5s ease;

}



/* ----------------------------------------------------------
   Subtle accent glow
---------------------------------------------------------- */

.panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.03),

            transparent 40%

        );

    pointer-events:none;

}



/* ----------------------------------------------------------
   Hover
---------------------------------------------------------- */

.panel:hover{

    transform:

        translateY(-4px);

    border-color:

        var(--accent);

    box-shadow:

        0 0 30px rgba(0,0,0,.35);

}



/* ==========================================================
   PANEL HEADERS
========================================================== */

.panel h2{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:24px;

    color:var(--accent);

}



.panel h2 i{

    color:var(--icon);

}





/* ==========================================================
   PROFILE INFO GRID
========================================================== */

#stats{

    display:grid;

    grid-template-columns:

        repeat(

            auto-fit,

            minmax(220px,1fr)

        );

    gap:18px;

}





/* ==========================================================
   INFO CARDS
========================================================== */

.info-card{

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.03),

            rgba(255,255,255,.015)

        );

    border:

        1px solid var(--border);

    border-radius:16px;

    padding:20px;

    transition:

        .25s;

}



.info-card:hover{

    border-color:

        var(--accent);

    transform:

        translateY(-3px);

}



.info-card i{

    font-size:1.6rem;

    color:var(--icon);

    margin-bottom:12px;

}



.info-card small{

    display:block;

    margin-bottom:6px;

}



.info-card h3{

    font-size:1.1rem;

    font-weight:600;

}





/* ==========================================================
   ATTRIBUTE SECTION
========================================================== */

.attribute{

    margin-bottom:22px;

}



.attribute:last-child{

    margin-bottom:0;

}





.attribute-name{

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

    font-weight:600;

}





/* ==========================================================
   PROGRESS BAR
========================================================== */

.bar{

    width:100%;

    height:12px;

    overflow:hidden;

    border-radius:999px;

    background:

        rgba(0,0,0,.45);

}





.bar span{

    display:block;

    height:100%;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            var(--accent2)

        );

    transition:

        width .8s ease;

}





/* ==========================================================
   BIO
========================================================== */

#bio{

    color:var(--text);

    line-height:1.8;

}





/* ==========================================================
   TAGS
========================================================== */

.tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        9px 16px;

    margin:

        5px;

    border-radius:999px;

    border:

        1px solid var(--border);

    background:

        rgba(255,255,255,.04);

    transition:

        .25s;

}



.tag:hover{

    border-color:

        var(--accent);

    color:

        var(--accent);

}





/* ==========================================================
   GENERIC ENTRY CARD
========================================================== */

.entry{

    padding:

        18px 20px;

    margin-bottom:14px;

    border-left:

        4px solid var(--accent);

    border-radius:

        0 14px 14px 0;

    background:

        rgba(255,255,255,.03);

    transition:

        .25s;

}



.entry:last-child{

    margin-bottom:0;

}



.entry:hover{

    transform:

        translateX(6px);

    background:

        rgba(255,255,255,.05);

}



.entry strong{

    display:block;

    color:var(--accent);

    margin-bottom:8px;

    font-size:1.05rem;

}





/* ==========================================================
   ACHIEVEMENTS
========================================================== */

#achievements{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}





/* ==========================================================
   RELATIONSHIPS
========================================================== */

#relationships .entry{

    border-left-color:

        var(--accent2);

}





/* ==========================================================
   MEDICAL
========================================================== */

#medical .entry{

    border-left-color:

        var(--accent);

}





/* ==========================================================
   EQUIPMENT
========================================================== */

#equipment .entry{

    border-left-color:

        var(--icon);

}





/* ==========================================================
   MISSION HISTORY
========================================================== */

#missions .entry{

    border-left-width:5px;

}


/* ==========================================================
   Main Stylesheet
   ----------------------------------------------------------
   Utilities
   Notifications
   Scrollbars
   Responsive
   Finishing Polish
==========================================================*/


/* ==========================================================
   GENERIC FLEX HELPERS
========================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.wrap{

    flex-wrap:wrap;

}

.gap{

    gap:18px;

}





/* ==========================================================
   SPACING HELPERS
========================================================== */

.mt{

    margin-top:20px;

}

.mb{

    margin-bottom:20px;

}

.pt{

    padding-top:20px;

}

.pb{

    padding-bottom:20px;

}





/* ==========================================================
   TEXT HELPERS
========================================================== */

.text-muted{

    color:var(--muted);

}

.text-accent{

    color:var(--accent);

}

.text-center{

    text-align:center;

}





/* ==========================================================
   DIVIDERS
========================================================== */

hr{

    border:none;

    border-top:

        1px solid var(--border);

    margin:

        24px 0;

}





/* ==========================================================
   ARCHIVE NOTICE
   Used by app.js
========================================================== */

.archive-notice{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:99999;

    padding:

        14px 22px;

    border-radius:14px;

    border:

        1px solid var(--accent);

    background:

        linear-gradient(

            180deg,

            var(--panel),

            var(--panel2)

        );

    color:var(--text);

    box-shadow:

        0 0 30px rgba(0,0,0,.35);

    animation:

        noticePop .35s ease;

}





@keyframes noticePop{

    from{

        opacity:0;

        transform:

            translateY(20px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}





/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:

        var(--accent);

    color:#000;

}





/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:

        var(--bg);

}

::-webkit-scrollbar-thumb{

    background:

        var(--panel2);

    border-radius:20px;

    border:

        2px solid var(--bg);

}

::-webkit-scrollbar-thumb:hover{

    background:

        var(--accent);

}





/* ==========================================================
   SMOOTH TRANSITIONS
   Every theme swap becomes animated.
========================================================== */

body,

.panel,

.info-card,

.entry,

.tag,

.dog-button,

.clearance,

.profile-hero,

.status-badge,

.bar span,

.rainbow-bar,

.top-header,

.panel h2,

.panel h2 i{

    transition:

        background .55s ease,

        color .45s ease,

        border-color .45s ease,

        box-shadow .45s ease,

        transform .25s ease;

}





/* ==========================================================
   FOCUS STATES
========================================================== */

button:focus,

a:focus{

    outline:

        2px solid var(--accent);

    outline-offset:3px;

}





/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1000px){

    .profile-hero{

        padding:50px;

    }

}



@media (max-width:768px){

    .top-header{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .clearance{

        width:100%;

        text-align:center;

    }

    .profile-hero{

        min-height:auto;

        padding:40px 30px;

    }

    .profile-hero h1{

        font-size:3rem;

    }

    #stats{

        grid-template-columns:1fr;

    }

    main{

        width:95%;

    }

}



@media (max-width:560px){

    .dog-selector{

        padding:22px;

    }

    #dog-list{

        flex-direction:column;

    }

    .dog-button{

        width:100%;

        justify-content:center;

    }

    .panel{

        padding:22px;

    }

    .profile-hero{

        padding:30px 22px;

        border-radius:16px;

    }

    .profile-hero h1{

        font-size:2.3rem;

        letter-spacing:2px;

    }

    .profile-hero h2{

        font-size:1rem;

    }

    #quote{

        font-size:1rem;

    }

}





/* ==========================================================
   PRINT
========================================================== */

@media print{

    body{

        background:#fff;

        color:#000;

    }

    .rainbow-bar,

    #boot-screen,

    .dog-selector{

        display:none;

    }

}

/*
    Image lightbox

    Fullscreen popup with
    blurred background
*/


.lightbox{


    position:fixed;

    inset:0;


    display:none;


    align-items:center;

    justify-content:center;


    flex-direction:column;


    background:

        rgba(0,0,0,.75);


    backdrop-filter:

        blur(12px);


    z-index:9999;


}



.lightbox.active{

    display:flex;

}



.lightbox img{


    max-width:90vw;

    max-height:80vh;


    border-radius:20px;


    box-shadow:

        0 0 40px rgba(0,0,0,.8);


}



#lightbox-title{


    margin-top:20px;


    color:white;


    font-size:1.2rem;


}



#lightbox-close{


    position:absolute;

    top:25px;

    right:35px;


    width:45px;

    height:45px;


    border-radius:50%;


    border:none;


    background:rgba(255,255,255,.1);


    color:white;


    font-size:24px;


    cursor:pointer;


}



#lightbox-close:hover{


    background:rgba(255,255,255,.25);


}


/*
    Gallery cards
    Thumbnail sizing
*/
/*
    Gallery layout
    Responsive image cards
*/

#gallery,
#fanart{


    display:grid;


    grid-template-columns:

        repeat(
            auto-fill,
            minmax(220px, 1fr)
        );


    gap:20px;


}

.gallery-card{

    overflow:hidden;

    border-radius:16px;

    background:var(--panel);

    border:1px solid var(--border);

}



.gallery-card img{


    width:100%;

    height:220px;


    object-fit:cover;


    cursor:pointer;


    display:block;


    transition:.3s;


}



.gallery-card img:hover{


    transform:scale(1.03);


}
/*
    Gallery text area
*/

.gallery-info{

    padding:15px;

    text-align:center;

}



.gallery-info strong{

    display:block;

    color:var(--accent);

    font-size:1.1rem;

}



.gallery-info small{

    display:block;

    margin-top:6px;

    color:var(--muted);

}



.gallery-info p{

    margin-top:10px;

    color:var(--text);

    line-height:1.4;

}

/*
    Archive separator
    Same width as panels
*/

.archive-separator{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    max-height:180px;

    object-fit:cover;


    border-radius:18px;


    margin:25px 0;


    box-shadow:
        0 0 25px var(--glow);


    transition:.3s;

}



.archive-separator:hover{

    transform:scale(1.02);

    box-shadow:
        0 0 40px var(--glow);

}

/*
    Preformatted archive trees
*/

.tree{

    margin-top:12px;

    margin-bottom:0;

    padding:0;


    white-space:pre-wrap;


    font-family:

        Consolas,
        monospace;


    line-height:1.5;

}
/*
==================================================
    Collapsible Panels
==================================================
*/

.panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    cursor:pointer;

    user-select:none;

}



.panel-header span{

    display:flex;

    align-items:center;

    gap:12px;

}



.panel-arrow{

    color:var(--accent);

    transition:transform .25s ease;

}



/* Rotate arrow when collapsed */

.panel.collapsed .panel-arrow{

    transform:rotate(-90deg);

}



/* Hide contents */

.panel.collapsed .panel-content{

    display:none;

}



/* Nice hover */

.panel-header:hover{

    color:var(--accent);

}

/*tooltip*/
.nickname{

    position:relative;

    cursor:help;

}


.nickname:hover::after{

    content:attr(data-tooltip);

    position:absolute;

    bottom:120%;

    left:50%;

    transform:translateX(-50%);


    background:var(--panel);

    color:var(--text);


    border:

        1px solid var(--accent);


    padding:

        8px 12px;


    border-radius:8px;


    white-space:nowrap;


    z-index:100;

}
/*fix bio \n */
#bio{
    white-space: pre-line;
}

/*registry stuff */
.archive-button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:10px;

    background:var(--accent);

    color:#000;

    text-decoration:none;

    font-weight:bold;

    transition:.2s;

}


.archive-button:hover{

    transform:translateY(-3px);

    filter:brightness(1.2);

}


.header-right{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:10px;

}


.header-right .archive-button{

    margin-right:35px;

}
/* ==========================================================
   END OF FILE
========================================================== */