/*` HTML AND BODY SIZE */
html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}
body {
    display: grid;
    /* position: absolute; */
}
body.siteTemplate {
    grid-template-rows: auto 1fr auto;
}
body.pageOnly {
    grid-template-rows: 1fr;
}
body.noCursor {
    cursor: none;
}


/*` HEADER */
#siteHeader {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    column-gap: 10px;
    padding: 2px 5px 5px 5px;

    max-width: 100%;
    width: 100%;

    --icon-height: clamp(
        0.7 * var(--header_height),
        8vw,
        0.9 * var(--header_height)
    );

    height: var(--header_height);
}

#siteHeader > .logo { height: calc( var(--header_height) * 0.8 ) }
#siteHeader > .logo svg { height: 100% }


#siteHeader > .mid {
    position: relative;
    display: grid; 
    align-items: center;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    white-space: nowrap;
}

#headerText {
    font-size: 1.2em;
}
#siteHeader > .rhs {
    display: grid;
    grid-auto-flow: column;
    gap: clamp(5px, 1.5vw, 10px);
    height: var(--icon-height);
}
#siteHeader > .rhs svg {
    height: clamp(1rem, 1rem + 3vw, 2rem);
    width: clamp(1rem, 1rem + 3vw, 2rem);
}


#headerText-ul {
    position: absolute;
    top: calc( 0.6 * var(--header_height));
    left: 0;
    width: 100%;
    height: clamp( 6px, 1.5vw, 10px );
    margin: 0;
    z-index: -99999;
    border: none;
    transform: skewX(50deg);
    background: linear-gradient(-90deg, var(--trim-top), transparent calc(100% - 100px));
}


/*` SITE MENU */
#siteMenuContainer {
    position: absolute;
    width: 100%;
}
#siteMenu {
    position: fixed;
    z-index: 99999;
    top: calc( 5px + var(--header_height) );
    right: -100%;
    
    min-width: clamp( 125px, 30vw, 175px  );
    max-width: 98vw;
    border-style: solid none solid solid;
    border-radius: 25px 0px 0px 25px;
    border-width: 1px 0px 1px 1px;
    border-style: solid;
    overflow-y: auto;
    padding: 10px;
    padding-top: 5px;
    text-align: right;
    display: grid;
    row-gap: 20px;
    opacity: 0.97;
    background: linear-gradient( 180deg, 
        var(--menu_background_top) calc(100% - 50px), 
        var(--menu_background_bot) calc(100% + 10px)
    );

    pointer-events: none;
    transition: right 0.4s ease-in;
}

#siteMenu.visible {
    pointer-events: all;
    transition: right 0.2s ease-out;
    right: 0%;
}

#siteMenu {
    border-color: var(--bd-use);
    --bd-use: var(--bd-dark);
    --bd-dark: var(--llllgray);
    --bd-light: var(--ddddgray);
}
[data-theme="light"] #siteMenu { --bd-use: var(--bd-light) }

#siteMenu, 
#siteMenu a {
    color: var(--color-use);
    --color-use: var(--color-dark);
    --color-dark: var(--llllgray);
    --color-light: var(--ddgray);
}
[data-theme="light"] #siteMenu, 
[data-theme="light"] #siteMenu a { --color-use: var(--color-light) }

#siteMenu > div {
    display: grid;
    grid-template-rows: auto auto 1fr;
}

#siteMenu > div header {
    direction: rtl;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 25px;
    font-size: 1.2em;
    font-weight: 600;
    font-style: italic;
}

#siteMenu > div hr {
    height: 6px;
    transform: skewX(-30deg);

    width: 100%;
    opacity: 0.5;
    margin: 2px 5px;
    border: none;

    border-color: var(--menu_trim);
    background: linear-gradient(90deg, var(--menu_trim) 0%, rgba(0,0,0,0.05) 99%, transparent);
}

#siteMenu svg {
    width: 100%;
    aspect-ratio: 1/1;
}


/*` SITE MENU LINKS */
#siteMenu .links {
    display: grid;
    place-items: center;
    row-gap: 0px;
    grid-auto-rows: 30px;
    font-size: clamp( 1.1em, 1vw, 1.2em );
}
@property --sitemenulinkcolor {
    syntax: '<color>';
    initial-value: transparent;
    inherits: true;
}
@property --sitemenulinkshadowcolor {
    syntax: '<color>';
    initial-value: transparent;
    inherits: true;
}
@property --textshadowx {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
}
@property --textshadowy {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
}
@property --textshadowblur {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
}
#siteMenu .links > a {
    display: grid;
    place-items: center;
    width: 100%;
    
    text-decoration: none;
    font-weight: lighter;
    border-radius: 30%;

    transition: 
    --sitemenulinkcolor 0.5s, 
    --sitemenulinkshadowcolor 0.5s,
    --textshadowx 0.3s ease-in,
    --textshadowy 0.3s ease-out,
    --textshadowblur 0.5s,
    font-size 0.2s, 
    font-weight 0.2s, 
    color 0.2s;

    background: linear-gradient(to right, 
        transparent 0%,
        var(--sitemenulinkcolor) 25%,
        var(--sitemenulinkcolor) 75%,
        transparent 100%
    );
    text-shadow: var(--textshadowx) var(--textshadowy) var(--textshadowblur) var(--sitemenulinkshadowcolor);
    font-weight: 400; 
}
#siteMenu .links > a:hover {
    font-size: 1.03em; 
    font-weight: 700;
    --textshadowx: 5px;
    --textshadowy: 5px;
    --textshadowblur: 5px;
    --sitemenulinkshadowcolor: var(--menu_background_top);
}

#siteMenu .links > a:hover { --sitemenulinkcolor: rgba(0,175,50,0.3) }
[data-theme="light"] #siteMenu .links > a:hover { --sitemenulinkcolor: rgba(103, 219, 255, 0.609) }

#siteMenu .links > a:hover span {color: white}
[data-theme="light"] #siteMenu .links > a:hover span {color: black}


/*` FOOTER */
#siteFooter {
    height: var(--footer_height);
    padding: 4px;
}

#siteFooter .lhs,
#siteFooter .rhs {
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    gap: 10px;
}

#siteFooter {
    color: var(--lgray);
}
#siteFooter .copyright {
    font-style: italic;
    font-weight: lighter;
    font-size: xx-small;
}









/*` DIVIDED PANES */
.dividedWithList {
    display: grid;
    width: 100%;
    height: 100%;
}
.dividedWithList>.boxItemList {
    overflow: hidden;
}
.dividedWithList>.boxItemList>.contents {
    display: grid;
    place-items: center;
    gap: 5px;
    
    grid-auto-flow: column;
    padding: 5px 0px;
    width: 100%;
    height: auto;
    
    scrollbar-width: none;
    /* -ms-overflow-style: none;   */
    overflow-x: auto;
    overflow-y: hidden;
}
.dividedWithList>.boxItemList>.contents::-webkit-scrollbar { 
    display: none;  
}
.dividedWithList>.boxItemListHandle {
    cursor: pointer;
    width: 100%;
    height: 12px;
    margin: 3px 0px;
}
.boxItem {
    font-size: clamp( 0.8em, 0.8em + 0.5vw, 1em );
}
.boxItem > .contents {
    display: grid;
    grid-template-rows: 1fr auto;
    
    --font-mult: 1;
    --size-mult: 1;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    font-size: clamp(0.8em, calc(100vw / 1000px + 0.5) * var(--font-mult) * 1em, var(--font-mult) * 1em);

    display: grid;
    height: clamp(40px, 15vw * var(--size-mult), var(--size-mult) * 100px);
    width: clamp(1.5 * 75px, 1.5 * 25vw, 1.5 * 100px);
}
.boxItem > .contents .linkText {
    text-align: center;
    align-content: center;
}
.boxItem > .contents .groupName {
    font-size: 0.7em;
    width: 100%;
    text-align: right;
    padding: 0 5px;
}
.boxItem > .contents .groupName span {
    color: var(--lgray);
}

.boxItem .contents {
    animation-name: rocker;
    animation-duration: 2.4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    transform-origin: 50% 0%;
}

@property --rockmult {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}
@keyframes rocker {
    0%, 100% { 
        transform: 
        rotateX(calc(var(--rockmult) * -3deg)) 
        rotateY(calc(var(--rockmult) * -2deg)) 
        rotateZ(calc(var(--rockmult) * -2deg)); 
    }
    50% { 
        transform: 
        rotateX(calc(var(--rockmult) * 3deg)) 
        rotateY(calc(var(--rockmult) * 2deg)) 
        rotateZ(calc(var(--rockmult) * 2deg)); 
    }
}

.dividedWithList>.boxItemList>.contents>*:not(.selected):hover {
    --font-mult: 1.05;
    /* --size-mult: 0.97; */
}


.dividedWithList.t {
    grid-template-rows: auto auto 1fr;
}

.dividedWithList.b {
    grid-template-rows: 1fr auto auto;
}

.dividedWithList.t:has(.boxIemList>.contents.hidden)>.boxItemListHandle,
.dividedWithList.b:has(.boxIemList>.contents:not(.hidden))>.boxItemListHandle {
    border-style: none none double none;
}

.dividedWithList.b:has(.boxIemList>.contents.hidden)>.boxItemListHandle,
.dividedWithList.t:has(.boxIemList>.contents:not(.hidden))>.boxItemListHandle {
    border-style: double none none none;
}


    @media screen and (min-width: 480px) {

    .dividedWithList.l,
    .dividedWithList.r {
        grid-template-rows: 1fr
    }

    .dividedWithList.l {
        grid-template-columns: auto auto 1fr
    }

    .dividedWithList.r {
        grid-template-columns: 1fr auto auto
    }

    .dividedWithList.l>.boxItemList>.contents,
    .dividedWithList.r>.boxItemList>.contents {
        grid-auto-flow: row;
        width: auto;
        height: 100%;
        padding: 5px 0px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .boxItem>.contents,
    .boxItem>.contents {
        width: clamp(75px, 35vw * var(--size-mult), 175px * var(--size-mult));
        height: clamp(75px / 1.5, 25vw / 1.5, 100px / 1.5);
    }

    .dividedWithList.l>.boxItemListHandle,
    .dividedWithList.r>.boxItemListHandle {
        width: 12px;
        height: 100%;
        margin: 0px 3px;
    }

    .dividedWithList.l:has(.boxIemList>.contents.hidden)>.boxItemListHandle,
    .dividedWithList.r:has(.boxIemList>.contents:not(.hidden))>.boxItemListHandle {
        border-style: none none none double;
    }

    .dividedWithList.r:has(.boxIemList>.contents.hidden)>.boxItemListHandle,
    .dividedWithList.l:has(.boxIemList>.contents:not(.hidden))>.boxItemListHandle {
        border-style: none double none none;
    }
}









/* COLLAPSIBLE PANES */
.collapsiblePanes {
    --skinny: true;
    --max_height: 100%;
    padding: 10px;
    gap: 10px;

    scrollbar-gutter: stable;
    scrollbar-width: thin;

    /* Original setting was auto: If errors arise, try using auto; */
    height: auto; 

    max-height:  min(70vh, var(--max_height));
    overflow-y: auto;
    overflow-x: auto;

    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 480px) {
    .collapsiblePanes {
        --skinny: false;
        height: auto;
        max-height: 100%;
    }
    .collapsiblePanes.fullHeight {
        height: 100%;
    }
} 

.collapsiblePanes .collapsible {
    --t: 0.5s;
    --tr: var(--t) ease;
    display: grid;
    transition: grid-template-rows var(--tr), flex-shrink var(--tr), flex-grow var(--tr);
    grid-template-rows: min-content 1fr;
    flex: 1 1 auto;
}
.collapsiblePanes .collapsible.collapsed {
    /* SHRINK SECOND ROW ON COLLAPSE WITH fr UNITS */
    grid-template-rows: min-content 0fr;
    /* DISALLOW GROWTH OF ELEMENT ON COLLAPSE */
    flex: 0 0 auto;
}
.collapsiblePanes.allowHeaderGrowth .collapsible.collapsed {
    /* ALLOW GROWTH OF ELEMENT WHEN COLLAPSED - THIS MAKES ANY REMAINING HEADERS IN LIST GROW TO FILL AVAILABLE SPACE */
    flex: 1 1 auto;
}

.collapsiblePanes .collapsible > header { 
    display: grid; 
    grid-template-columns: auto 1fr;
    gap: 0.3rem;
} 

.collapsiblePanes .collapsible > header,
.collapsiblePanes .collapsible > header > * {cursor: pointer;}

.collapsiblePanes .collapsible > header:focus-visible { outline: none; }
.collapsiblePanes .collapsible:has(header:focus-visible) { outline: 1px solid currentColor ; outline-offset: 2px; }

.collapsiblePanes .collapsible > header > .tri {
    display: grid;
    height: fit-content;
    font-size: 0.8rem;
    transition: 0.3s;
    transform: rotate(0deg) translate(0, 0.2rem);
}
.collapsiblePanes .collapsible.collapsed > header > .tri {
    transform: rotate(-90deg) translate(-0.2rem, 0.1rem);

}

.collapsiblePanes .collapsible > header > label {font-size: 1.1em; }

.collapsiblePanes .collapsible>.collapse {
    min-height: 0; 
    overflow: hidden;

    /* -- IN ORIGINAL - LIKELY UNNECESSARY */
    /* transition: height var(--tr); height: 100%;  */
}

.collapsiblePanes .collapsible.collapsed>.collapse {
    /* -- IN ORIGINAL - LIKELY UNNECESSARY (for related height transition) */
    /* height: 0%;  */
}
@media (prefers-reduced-motion: reduce) {
    .collapsiblePanes .collapsible { transition: none; }
    .collapsiblePanes .collapsible > .collapse { transition: none; }
}