=gitblit setup

Jake Vanderwerf

3 hours ago 748c931c827c09bc59b776e41d27643af9cac332

 all.css

@@ -6,8 +6,8 @@
Description: A base theme for Jake Van clients
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.5.92
Requires PHP: 8.0
Version: 1.6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jv
@@ -76,54 +76,84 @@
    Colours
    *****************************/
    --filter: grayscale(.3) sepia(.4);
    --filterNone: grayscale(0) sepia(0);

    --mix-blend-mode: darken;
    --coverBlend: overlay;
    --coverIndex: 2;
    --light-0: #fafafa;
    --light-50: #fcfbfb;
    --light-100: #f1eded;
    --light-200: #e6dfdf;
    --light-rgb: 250,250,250;
    --dark-0: #201313;
    --dark-50: #261717;
    --dark-100: #2d1b1b;
    --dark-200: #331e1e;
    --dark-rgb: 16,4,4;
    --action-0: #B7332E;
    --action-50: #a32d29;
    --action-100: #8e2824;
    --action-200: #7a221f;
    --action-contrast: var(--light-0);
    --action-rgb: 183,51,46;
    --secondary-0: #E8A737;
    --secondary-50: #e59d20;
    --secondary-100: #d48f18;
    --secondary-200: #bd7f16;
    --secondary-contrast: var(--light-0);
    --secondary-rgb: 232,167,55;
    --light-0: 239,239,239;     /* #efefef; */
    --light-50: 226,226,226;    /* #e2e2e2; */
    --light-100: 213,213,213;   /* #d5d5d5; */
    --light-200: 201,201,201;   /* #c9c9c9; */

    --success: #22C55E;
    --successBack: #d4edda;
    --successText:#155724;
    --warning: #E8A737;
    --error: #EF4444;
    --errorBack: #f8d7da;
    --errorText: #721c24;
    --dark-0: 21,21,21;         /* #151515; */
    --dark-50: 34,34,34;        /* #222222; */
    --dark-100: 46,46,46;       /* #2e2e2e; */
    --dark-200: 59,59,59;       /* #3b3b3b; */

    --action-0: 255,0,128;      /* #ff0080; */
    --action-50: 255,38,146;    /* #ff2492; */
    --action-100: 255,71,164;   /* #ff47a4; */
    --action-200: 255,107,181;  /* #ff6bb5; */
    --action-contrast: var(--light-0);

        --action-comp: oklch(from rgb(var(--action-0)) .8 .26 h);
        --action-tri: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
        --action-mono: oklch(from rgb(var(--action-0)) .3 .04 h);
    --secondary-0: 214,145,33;  /* #D69121; */
    --secondary-50: 255,196,33; /* #ffc421; */
    --secondary-100: 255,205,68;/* #ffcd44; */
    --secondary-200: 255,215,104;/* #ffd768; */
    --secondary-contrast: var(--light-0);
        --secondary-comp: oklch(from rgb(var(--secondary-0)) .8 .26 h);
        --secondary-tri: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
        --secondary-mono: oklch(from rgb(var(--secondary-0)) .3 .04 h);

    --success: 76,175,80;         /* #4CAF50; */
    --successLight: 234,246,235;    /* #eaf6eb; */
    --successDark: 14,33,15;     /* #0e210f; */
    --successBack: var(--successLight);
    --successText: var(--successDark);
    --warning: 232,167,55;    /* #E8A737; */
    --warningLight: 253,247,238;/* #fdf7ee; */
    --warningDark: 52,35,6;      /* #342306; */
    --warningBack: var(--warningLight);
    --warningText: var(--warningDark);
    --error: 183,51,46;        /* #B7332E; */
    --errorLight: 250,235,234;   /* #faebea; */
    --errorDark: 40,11,10;    /* #280b0a; */
    --errorBack: var(--errorLight);
    --errorText: var(--errorDark);

    --base: var(--light-0);
    --base-50: var(--light-50);
    --base-100: var(--light-100);
    --base-200: var(--light-200);
    --base-rgb: var(--light-rgb);

    --contrast: var(--dark-0);
    --contrast-50: var(--dark-50);
    --contrast-100: var(--dark-100);
    --contrast-200: var(--dark-200);
    --contrast-rgb: var(--dark-rgb);

    --shimmer: rgba(var(--dark-rgb),0) 0%,
    rgba(var(--dark-rgb),.05) 50%,
    rgba(var(--dark-rgb),0) 100%;


    --contrast-comp: oklch(from rgb(var(--contrast)) .8 .26 h);
    --contrast-tri: oklch(from rgb(var(--contrast)) .82 .2 calc(h - 120));
    --contrast-mono: oklch(from rgb(var(--contrast)) .3 .04 h);
    --base-comp: oklch(from rgb(var(--base)) .8 .26 h);
    --base-tri: oklch(from rgb(var(--base)) .82 .2 calc(h - 120));
    --base-mono: oklch(from rgb(var(--base)) .3 .04 h);


    --tone-a: rgb(var(--contrast));
    --tone-b: rgb(var(--base));

    --duo-dark: oklch(from var(--tone-a) .22 c h);
    --duo-light: oklch(from var(--tone-b) .78 c h);

    --shimmer: rgba(var(--contrast),0) 0%,
    rgba(var(--contrast),.05) 50%,
    rgba(var(--contrast),0) 100%;

    --op-1: .05;
    --op-2: .15;
@@ -166,8 +196,8 @@
    --radius: 4px;
    --p-outer: 1rem;
    --radius-outer: calc(var(--radius) + var(--p-outer));
    --p-y: 1rem;
    --p-x: 1rem;
    --p-y: var(--sp1);
    --p-x: var(--sp1);
    /*****************************
    Transitions
    *****************************/
@@ -196,10 +226,10 @@
    Scrollbar
    *****************************/
    --sb-width: 8px;
    --sb-track: var(--base-100);
    --sb-thumb: var(--action-0);
    --sb-thumb-hover: var(--action-50);
    --sb-thumb-border: 2px solid var(--base-50);
    --sb-track: rgb(var(--base-100));
    --sb-thumb: rgb(var(--action-0));
    --sb-thumb-hover: rgb(var(--action-50));
    --sb-thumb-border: 2px solid rgb(var(--base-50));
    --sb-radius: 4px;

    --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');
@@ -215,34 +245,37 @@
    --coverBlend: multiply;
    --coverIndex: 0;

    --action-50: #cb3933;
    --action-100: #d14c47;
    --action-200: #d6605c;
    --action-50: 219,0,110;     /* #db006e; */
    --action-100: 184,0.92;     /* #b8005c; */
    --action-200: 148,0,74;     /* #94004a; */

    --secondary-50: #ebb14e;
    --secondary-100: #edbb65;
    --secondary-200: #f0c57c;
    --secondary-50: 216,159,0;  /* #d89f00; */
    --secondary-100: 181,133,0; /* #b58500; */
    --secondary-200: 145,106,0; /* #916a00; */

    --contrast: var(--light-0);
    --contrast-50: var(--light-50);
    --contrast-100: var(--light-100);
    --contrast-200: var(--light-200);
    --contrast-rgb: var(--light-rgb);
    --contrast: var(--light-rgb);

    --base: var(--dark-0);
    --base-50: var(--dark-50);
    --base-100: var(--dark-100);
    --base-200: var(--dark-200);
    --base-rgb: var(--dark-rgb);
    --base: var(--dark-rgb);

    --successBack: #155724;
    --successText:#d4edda;
    --errorBack: #721c24;
    --errorText: #f8d7da;

    --shimmer: rgba(var(--c),0) 0%,
    rgba(var(--c),.05) 50%,
    rgba(var(--c),0) 100%;
    --successBack: var(--successDark);
    --successText: var(--successLight);
    --warningBack: var(--warningDark);
    --warningText: var(--warningLight);
    --errorBack: var(--errorDark);
    --errorText: var(--errorLight);

    --shimmer: rgba(var(--light-0),0) 0%,
    rgba(var(--light-0),.05) 50%,
    rgba(var(--light-0),0) 100%;
}
/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
@layer reset {
@@ -344,9 +377,18 @@
        inline-size: fit-content;
        margin-inline: auto;
    }
    a > img,
    figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    figcaption {
        contain: inline-size;
        font-size: 90%;
        background-color: rgba(var(--base),var(--op-3));
        text-align: center;
        font-style: italic;
    }

    input,
@@ -421,13 +463,70 @@
        padding: 1.5rem;
    }

    hr.logo::after,
    hr {
        --margin: 12.5%; /* Half of the remaining 25% */
        --baseWidth: 75%;
        border-style: solid;
        border-width: 1px 0 0;
        border-color: rgb(var(--contrast));
        color: inherit;
        height: 0;
        height: 1px;
        overflow: visible;
        margin-block: 2.5rem;
        width: var(--baseWidth);
    }

    hr.logo {
        --width: calc((rgb(var(--baseWidth)) / 2) - var(--half));
        --half: calc(var(--btn) / 2);
        width: var(--width);
        position: relative;
        margin-left: var(--margin);
    }
        hr.logo::before {
            content: '';
            --circ: calc(var(--btn) + (var(--btn) / 2));
            --rad: calc(var(--circ) / 2);
            background-color: rgb(var(--contrast-100));
            mask-image: var(--icon);
            -webkit-mask-image: var(--icon);
            mask-size: var(--btn);
            -webkit-mask-size: contain;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-position: center;
            display: block;
            width: var(--circ);
            height: var(--circ);
            position: absolute;
            border-radius: 50%;
            right: calc(-1 * (var(--circ)));
            top: 0;
            transform: translateY(-50%);

        }
    hr.logo::after {
        content: '';
        display: block;
        width: 100%;
        position: absolute;
        z-index: 0;
        top: 0;
        transform: translateY(050%);
        background-color: rgb(var(--contrast));
        height: 1px;
        right: calc((100% + var(--btn_) + 1rem) * -1);
        margin: 0;
    }
    hr.dots {
        border-color: transparent;
        display:flex;
    }
    hr.dots::before {
        content: '.\2003.\2003.';
        margin: 0 auto;
    }

    :target {
@@ -513,8 +612,8 @@
BASE
*************************************************************/
body {
    background-color: var(--base-50);
    color: var(--contrast);
    background-color: rgb(var(--base-50));
    color: rgb(var(--contrast));
    margin: 0;
    font-family: var(--body);
    font-weight: var(--fw-b);
@@ -532,7 +631,7 @@
*************************************************************/
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-x: clip;
}

@media(prefers-reduced-motion){
@@ -553,19 +652,23 @@
/*}*/

main {
    --gapNarrow: calc((var(--content) - var(--narrow)) / 2);
    --gapContent: calc((var(--wider) - var(--content)) / 2);
    --gapWide: calc((var(--wide) - var(--wider)) / 2);

    display: grid;
    grid-template-columns:
        [full-start] minmax(1rem, 1fr)
        [wide-start] minmax(0, calc((100% - var(--content)) / 2))
        [wider-start] minmax(0, calc((var(--wide) - var(--wider)) / 2))
        [content-start] minmax(0, calc((var(--wider) - var(--content)) / 2))
        [narrow-start] min(100% - 2rem, var(--narrow)) [narrow-end]
        minmax(0, calc((var(--content) - var(--narrow)) / 2)) [content-end]
        minmax(0, calc((var(--wider) - var(--content)) / 2)) [wider-end]
        minmax(0, calc((var(--wide) - var(--wider)) / 2)) [wide-end]
        minmax(0, calc((100% - var(--content)) / 2))
        minmax(1rem, 1fr) [full-end];
        [wide-start] minmax(0, var(--gapWide))
        [wider-start] minmax(0, var(--gapContent))
        [content-start] minmax(0, var(--gapNarrow))
        [narrow-start] min(calc(100% - 2rem), var(--narrow)) [narrow-end]
            minmax(0, var(--gapNarrow)) [content-end]
            minmax(0, var(--gapContent)) [wider-end]
            minmax(0, var(--gapWide)) [wide-end]
            minmax(1rem, 1fr) [full-end];
    min-height: var(--maxHeight);
    grid-auto-rows: max-content;
}
main > * {
    grid-column: content;
@@ -577,6 +680,15 @@
main > section > * {
    width: 100%;
    max-width: var(--content);
    margin: var(--sp1) auto;
}
ul {
    max-width: var(--narrow);
    margin: 1rem auto 1rem 3rem;
}
ul ul {
    padding: .25rem 0 .25rem 1rem;
    margin: 0;
}

/* Nested items can use any width */
@@ -590,10 +702,12 @@

main .align-wider {
    grid-column: wider;
    width: 100%;
}

main .align-wide {
    grid-column: wide;
    width: 100%;
}

main .align-full {
@@ -611,8 +725,8 @@
    position: sticky;
    top: 0;
    z-index: var(--z-8);
    background-color: var(--base);
    box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw-down);
    background-color: rgb(var(--base));
    box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-down);
    transition: top var(--trans-base);
}
header a[rel="home"] {
@@ -620,9 +734,8 @@
    align-items: center;
    max-height:var(--btn);
    overflow:hidden;
    margin: 0 auto;
}


.scroll-progress {
    position: absolute;
    inset-inline: 0;
@@ -632,7 +745,7 @@
    align-items: center;
    pointer-events: none;
    z-index: var(--z-3);
    background-color: var(--base-200);
    background-color: rgb(var(--base-200));
    overflow: hidden;
}

@@ -641,52 +754,21 @@
    height: 1px;
    transform-origin: left center;
    transform: scaleX(0);
    background: var(--action-0);
    background: rgb(var(--action-0));
}

aside.pre-header,
aside.sub-header,
aside.pre-footer,
aside.sub-footer {
    height: var(--chip_);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    font-size: var(--txt-x-small);
    background-color:var(--base-50);
    z-index: var(--z-7);
}
.pre-header p {
    width: max-content;
}
.pre-header {
    position: sticky;
    top: -2rem;
    transition: top var(--trans-base);
}
.scroll-up .pre-header {
    top: 0;
}
.scroll-up .pre-header ~ header {
    top: calc(var(--chip_) - 2px);
}
/*.pre-header.stuck ~ #breadcrumbs {*/
/*    margin-top: var(--chip_);*/
/*}*/

footer {
    padding: 1rem;
    background-color: var(--base-200);
    color: var(--contrast-200);
    background-color: rgb(var(--base));
    color: rgb(var(--contrast-200));
    text-align: center;
    margin: 4rem 0 0;
    position: relative;
    z-index: var(--z-7);
}
footer p {
    margin: 0 auto;
}
    footer p {
        margin: 0 auto;
    }

body:has(nav.fixed.bottom,nav.on-this-page) footer {
    padding-bottom: var(--btn_);
@@ -696,20 +778,61 @@
        padding: 1rem 2rem var(--btn_);
    }
}

*:target {
    scroll-snap-margin-top: var(--btnbtn);
    scroll-margin-top: var(--btnbtn);
    outline: double var(--action-200);
    background-color: var(--base);
    outline: double rgb(var(--action-200));
    background-color: rgb(var(--base));
}

/*************************************************************
/***********************
PRE/SUB HEADER
***********************/
aside.header,
aside.footer {
    padding: 0 1rem;
    font-size: var(--txt-x-small);
    z-index: var(--z-7);
    background-color: rgb(var(--base-50));
}
aside.header {
    height: var(--chip_);
    --wrap: nowrap;
}
aside.footer p,
aside.header p {
    width: max-content;
}
aside.footer {
    --dir: column;
    background-color:rgb(var(--base-50));
    padding: 1rem;
    border-top: 1px solid rgb(var(--base-200));
}
aside.footer + footer {
    margin-top: 0;
}
aside.header p ,aside.footer p {
    margin: 0.125rem 0;
}
aside.pre {
    position: sticky;
    top: -2rem;
    transition: top var(--trans-base);
}
.scroll-up aside.pre {
    top: 0;
}
.scroll-up .pre ~ header {
    top: calc(var(--chip_) - 2px);
}
/***********************************************************
TYPOGRAPHY
*************************************************************/
***********************************************************/
body :is(b, strong) {
    font-weight: var(--fw-b-bold);
}

:is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--heading);
    text-transform: uppercase;
@@ -721,6 +844,10 @@
:is(h1,h2,h3,h4,h5,h6), p {
    width: 100%;
}
    .group :is(h1,h2,h3,h4,h5,h6), p {
        width: max-content;
        max-width: 100%;
    }

:is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
    font-weight: var(--fw-h-bold);
@@ -739,7 +866,7 @@

:is(h1, h2, h3, h4, h5, h6).inline {
    font-size: 1.2rem;
    font-weight: 600;
    font-weight: var(--fw-h-bold);
    display: inline-block;
    margin: 0 2rem 0 0;
    letter-spacing: .05em;
@@ -750,29 +877,11 @@
    margin: .5rem 0;
}

:is(h1, h2, h3, h4, h5, h6).inline + .term-list {
    display: inline-flex;
    margin: .5rem 0;
}

h1 {
    font-size: var(--txt-xxx-large);
    font-weight: var(--fw-h);
    line-height: 1;
    margin: 0 auto .25em;
}

h1:first-of-type {
    margin-top: 10vh;
}

h1 small {
    display: block;
    font-size: var(--txt-x-small);
    font-weight: var(--fw-b);
    line-height: 1;
    margin-bottom: .75em;
    font-family: var(--body);
    margin: 10vh auto .25em;
}

h1 small + small {
@@ -795,6 +904,23 @@
p {
    line-height: 1.6;
}
    .drop-cap::first-letter {
        font-family: var(--heading);
        font-size: var(--btn);
        line-height: 1;
        background-color: rgb(var(--action-0));
        color: rgb(var(--action-contrast));
        float: left;
        font-weight: var(--fw-h-bold);
        margin: 0.1em 0.1em 0.2em 0;
        padding: 0.1em;
    }
    :not(.row >) p:has(+p) {
        margin-bottom: 0;
    }
    :not(.row >) p + p {
        margin-top: 0;
    }

.hint {
    line-height: 1.2;
@@ -802,52 +928,192 @@
    font-size: var(--txt-small);
}

/*main > * :is(h1, h2, h3, h4, h5, h6, p) {*/
/*    width: 100%;*/
/*}*/

main > * p {
    margin: .5rem 0;
mark {
    background-color: rgba(var(--action-0), var(--op-45))!important;
    color: rgb(var(--action-contrast))!important;
    border-top-left-radius: .5em;
    border-bottom-right-radius: .5em;
    padding: 0 .5em;
    corner-shape: bevel;
}

/******************************************************
LINKS
******************************************************/
a {
    color: var(--action-0);
    color: rgb(var(--action-0));
    border-radius: 4px;
    padding: .125rem;
}
    a:visited {
        color: rgb(var(--action-100));
    }
    a:hover,
    a:visited:hover {
        color: rgb(var(--contrast-50));
        text-decoration: none;
    }

ul a {
    display: inline-flex;
    :is(p, li, h1,h2,h3,h4,h5,h6, small) a:hover {
        color: rgb(var(--action-contrast));
        background-color: rgb(var(--action-0));
    }

    a.logo {
        display: inline-flex;
    }
    .logo img {
        max-width: 150px;
    }
/*****************************************************
ICONS
*****************************************************/
i.icon {
    width: var(--w);
    height: var(--w);
    display: inline-block;
    background-color: currentColor;
    mask-image: var(--icon);
    -webkit-mask-image: var(--icon);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    vertical-align: middle;
}

a:visited {
    color: var(--action-50);
/** SWITCHING ICONS **/
/**** If, say, a button has two icons, one gets hidden on one state, and one gets shown on another, add it here **/

.favourite:not(.favourited) .heart-fill,
.favourite.favourited .heart,
.notifications:not(.has) .bell-ringing,
.notifications.has .bell,
.vote button:not(.voted) .upvoted,
.vote button:not(.voted) .downvoted,
.vote .voted .upvote,
.vote .voted .downvote {
    display: none;
}

a:hover {
    color: var(--contrast-50);
    text-decoration: none;
.favourite:not(.favourited) .heart,
.favourite.favourited .heart-fill,
.notifications:not(.has) .bell,
.notifications.has .bell-ringing,
.vote button:not(.voted) .upvote,
.vote button:not(.voted) .downvote,
.vote .voted .upvoted,
.vote .voted .downvoted {
    display: block;
}

p a:hover,
li a:hover,
:is(h1, h2, h3, h4, h5, h6) a:hover {
    color: var(--action-contrast);
    background-color: var(--action-0);
}

/*******************************************************
LISTS
*******************************************************/
ol {
    list-style-type:decimal;
    list-style-type: decimal;
}

ul.terms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
    ul.terms li {
        list-style: none;
    }

.term-list.cloud {
    display: flex;
    gap: .25rem;
    margin: var(--sp2) auto;
}
    .term-list.cloud a {
        border-radius: var(--radius);
        background-color: transparent;
        color: rgb(var(--action-0));
        border: 2px solid rgb(var(--action-0));
        padding: 4px 8px;
        position: relative;
    }
        .term-list.cloud a:hover,
        .term-list.cloud a:focus {
            color: rgb(var(--action-contrast));
            background-color: rgb(var(--action-0));
        }
        .term-list a:has(.count) {
            padding-right: 1rem;
        }
        .term-list .count {
            position: absolute;
            top: .25rem;
            right: .25rem;
            /*border-radius: 50%;*/
            /*aspect-ratio: 1;*/
            font-size: var(--txt-small);
            /*background-color: rgb(var(--action-0));*/
            /*color: rgb(var(--action-contrast));*/
        }

.term-list li {
    list-style: none;
}
    .term-list a {
        display: inline-flex;
        width: max-content;
    }
/******************************************************
UTILITY
******************************************************/
.rounded { border-radius: var(--radius-outer); }
.font-small { font-size: var(--txt-x-small); }
.font-medium { font-size: var(--txt-medium); }
.font-large { font-size: var(--txt-large); }
.font-x-large { font-size: var(--txt-x-large); }
/**************************************************************
UTILITY CLASSES - SPACING
**************************************************************/
/** PADDING **/

.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.align-center { text-align: center; margin: 0 auto;}
.align-left { text-align: left; margin: 0 auto 0 0;}
.align-right { text-align: right; margin: 0 0 0 auto;}


*[hidden] { display: none!important; }

@media (max-width: 767px){
    .hide-small { display: none; }
}

.width-33,
.width-66,
.width-50,
.width-25,
.width-75 {
    width: 100%;
}

.w-full{
    width: 100%;
}
@media (min-width: 768px){
    .width-50 {
        max-width: 50%;
    }
    .width-25 {
        max-width: 25%;
    }
    .width-75 {
        max-width: 75%;
    }
    .width-33 {
        max-width: 33.333%;
    }
    .width-66 {
        max-width: 66.666%
    }
}
/** SPACING TODO: maybe scan our files for which we actually use? **/
.p-1 {padding: var(--sp1);}
.p-2 {padding: var(--sp2);}
.p-3 {padding: var(--sp3);}
@@ -956,51 +1222,204 @@
.ml-7 { margin-left: var(--sp7); }
.mb-7 { margin-bottom: var(--sp7); }

/**************************************************************
UTILITY CLASSES - TEXT & VISIBILITY
**************************************************************/
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }

*[hidden] {
    display: none!important;
/******************************************************
COLORS
******************************************************/
.base {
    --color: rgb(var(--base));
}

@media (max-width: 767px){
    .hide-small {
        display: none;
    .base-50 {
        --color: rgb(var(--base-50));
    }
    .base-100 {
        --color: rgb(var(--base-100));
    }
    .base-200 {
        --color: rgb(var(--base-200));
    }
.contrast {
    --color: rgb(var(--contrast));
}

.width-50,
.width-25,
.width-75 {
    width: 100%;
    .contrast-50 {
        --color: rgb(var(--contrast-50));
    }
    .contrast-100 {
        --color: rgb(var(--contrast-100));
    }
    .contrast-200 {
        --color: rgb(var(--contrast-200));
    }
.action {
    --color: rgb(var(--action-0));
}

.w-full{
    width: 100%;
    .action-50 {
        --color: rgb(var(--action-50));
    }
    .action-100 {
        --color: rgb(var(--action-100));
    }
    .action-200 {
        --color: rgb(var(--action-200));
    }
    .action-comp {
        --color: oklch(from rgb(var(--action-0)) l c calc(h + 180));
    }
    .action-tri {
        --color: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
    }
    .action-tri-alt {
        --color: oklch(from rgb(var(--action-0)) .82 .2 calc(h + 120));
    }
.secondary {
    --color: rgb(var(--secondary-0));
}

@media (min-width: 768px){
    .buttons li.width-50,
    .width-50 {
        width: calc(50% - .3em);
    .secondary-50 {
        --color: rgb(var(--secondary-50));
    }
    .width-25 {
        width: calc(25% - .3em);
    .secondary-100 {
        --color: rgb(var(--secondary-100));
    }
    .width-75 {
        width: calc(75% - .3em);
    .secondary-200 {
        --color: rgb(var(--secondary-200));
    }
    .secondary-comp {
        --color: oklch(from rgb(var(--secondary-0)) l c calc(h + 180));
    }
    .secondary-tri {
        --color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
    }
    .secondary-tri-alt {
        --color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h + 120));
    }
.hvr-bck:hover,
.hvr-bck:focus,
.bck {
    background-color: var(--color);
}
    .bck:not(.overlay).op-1 {
        background-color: rgba(var(--color), var(--op-1));
    }
    .bck:not(.overlay).op-2 {
        background-color: rgba(var(--color), var(--op-2));
    }
    .bck:not(.overlay).op-3 {
        background-color: rgba(var(--color), var(--op-3));
    }
    .bck:not(.overlay).op-4 {
        background-color: rgba(var(--color), var(--op-4));
    }
    .bck:not(.overlay).op-45 {
        background-color: rgba(var(--color), var(--op-45));
    }
    .bck:not(.overlay).op-5 {
        background-color: rgba(var(--color), var(--op-5));
    }
    .bck:not(.overlay).op-6 {
        background-color: rgba(var(--color), var(--op-6));
    }
.hvr-clr:hover,
.hvr-clr:focus,
.clr {
    color: var(--color);
}
.hvr-brdr:hover,
.hvr-brdr:focus,
.brdr {
    border-color: var(--color);
}

/******************************************************************
DUOTONE
*****************************************************************//******************************************************************/
.duotone {
    isolation: isolate;
    position: relative;
    overflow: hidden;
    background: rgb(var(--contrast));
}

.cover img,
.cover video,
.duotone img,
.duotone video {
    filter: grayscale(1) sepia(1) contrast(1.1) brightness(1.05);
    mix-blend-mode: multiply;
    z-index: 1;
    position: relative;
}
    /*.duotone::after,*/
    .duotone::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
    }
    .duotone::before {
        mix-blend-mode: color;
        background-color: var(--duo-dark);
        opacity: var(--op-5);
        /*z-index: 1;*/
    }
    .duotone:not(.cover)::after {
        mix-blend-mode: screen;
        background-color: var(--duo-light);
        /*z-index: 2;*/
    }


    .duotone.action {
        --tone-a: rgb(var(--action-0));
        --duo-dark: oklch(from rgb(var(--base)) .18 .02 h);
        --duo-light: oklch(from rgb(var(--action-0)) .72 .28 h);
    }

    .duotone.secondary {
        --tone-a: rgb(var(--secondary-0));
        --duo-dark: oklch(from rgb(var(--base)) .2 .03 h);
        --duo-light: oklch(from rgb(var(--secondary-0)) .82 .18 h);
    }

    .duotone.complement {
        --duo-dark: oklch(from var(--tone-a) .22 .08 calc(h + 180));
        --duo-light: oklch(from var(--tone-a) .8 .26 h);
    }
    .duotone.triadic {
        --duo-dark: oklch(from var(--tone-a) .24 .1 calc(h + 120));
        --duo-light: oklch(from var(--tone-a) .82 .2 calc(h - 120));
    }
    .duotone.monochrome  {
        --duo-dark: oklch(from var(--tone-a) .3 .04 h);
        --duo-light: oklch(from var(--tone-a) .88 .08 h);
    }
    .duotone.film {
        --duo-dark: oklch(from var(--tone-a) .35 .1 h);
        --duo-light: oklch(from var(--dark-0) .96 .02 h);
    }


/******************************************************************//******************************************************************
LAYOUT UTILITIES
******************************************************************/
.row,
.col {
/** Buttons **/
button,
[type=submit],
a.btn,
.btn + label,
li.btn,
.buttons a,
.buttons li,
/** Item Grid **/
.item-grid .item,
/** popups **/
aside.main,
/** asides **/
aside.header,
aside.footer,
/** Defaults, of course **/

.row.row,
.col.col {
    display: flex;
    justify-content: var(--justify);
    align-items: var(--align);
@@ -1011,12 +1430,16 @@
    --justify: center;
    --gap: .5rem;
    --wrap: wrap;
    width: 100%;
}
.stretch.stretch > * {
    flex: 1;
}

.col { --dir: column; }
.row { --dir: row; }
.col.rev { --dir: column-reverse; }
.row.rev { --dir: row-reverse; }
.col.col { --dir: column; }
.row.row { --dir: row; }
.col.col.rev.rev { --dir: column-reverse; }
.row.row.rev.rev { --dir: row-reverse; }

.nowrap.nowrap { --wrap: nowrap; }
.nowrap.nowrap.stack-small { --wrap: wrap;}
@@ -1024,35 +1447,46 @@
    .nowrap.nowrap.stack-small { --wrap: nowrap;}
}

.col.start,
.row.a-start { --align: flex-start; }
.col.end,
.row.a-end { --align: flex-end; }
.row.row.top,
.col.col.left { --align: flex-start; }
.col.col.top,
.row.row.left { --justify: flex-start; }

.col.a-start,
.row.start { --justify: flex-start; }
.col.a-end,
.row.end { --justify: flex-end; }
.row.row.btm,
.col.col.right { --align: flex-end; }
.col.col.btm,
.row.row.right { --justify: flex-end; }

.col.btw,
.row.btw {
    --justify: space-between;
    width: 100%;
}
.row.row.x-mid,
.col.col.y-mid { --justify: center; }
.row.row.y-mid,
.col.col.x-mid { --align: center; }

.col.even,
.row.even { --justify: space-evenly; }
.row.row.x-btw,
.col.col.y-btw { --justify: space-between; }
.row.row.y-btw,
.col.col.x-btw { --align: space-between; }

/******************************************************************
.row.row.x-even,
.col.col.y-even { --justify: space-evenly; }
.row.row.y-even,
.col.col.x-even { --align: space-evenly; }

.row.row.x-around,
.col.col.y-around { --justify: space-around; }
.row.row.y-around,
.col.col.x-around { --align: space-around; }

/*************************************************
POSITION UTILITIES
******************************************************************/
*************************************************/
.abs { position: absolute; }
*:has(>.abs) { position: relative; }

.top { top: 0; right: 0; left: 0; }
.abs.top { top: 0; right: 0; left: 0; }
.top-right { top: 0; right: 0; }
.top-left { top: 0; left: 0; }
.btm { bottom: 0; left: 0; right: 0; }
.abs.btm { bottom: 0; left: 0; right: 0; }
.btm-right { bottom: 0; right: 0; }
.btm-left { bottom: 0; left: 0; }
.edges { inset: 0; }
@@ -1073,972 +1507,222 @@
}

/******************************************************************
THEME SWITCHER & TOGGLE
THEME SWITCHER
******************************************************************/
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    left: var(--offScreen);
.field .switch {
    display: inline-flex;
}

.toggle-switch .slider {
.switch .slider {
    --trans-t: .0125s;
    position: relative;
    width: 2rem;
    height: 1rem;
    background-color: var(--base-200);
    width: var(--chipchip);
    height: var(--chip);
    background-color: rgb(var(--base-200));
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
    justify-content: space-between;
    align-items: center;
    border: 4px solid transparent;
    transition: var(--trans-t);
    box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;
    box-shadow: 0 0 .25rem 0 rgba(var(--contrast), .125) inset;
    cursor: pointer;
    margin: 5px;
    transition: var(--trans-color);
}
    .switch .slider::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgb(var(--base));
        transform: translateX(-1.5rem); /* NOTE: Tied to half of the width defined above */
        border-radius: .75rem;
        transition: var(--trans-transform);
        box-shadow: 0 0 .25rem 3px rgba(var(--contrast), .125);
    }
    .switch :checked ~ .slider::before {
        transform: translateX(1.5rem);
        box-shadow: 0 0 .25rem 3px rgba(var(--base), .25);
    }
    .switch :checked ~ .slider {
        background-color: rgb(var(--action-0));
    }

.toggle-switch .slider::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    background-color: var(--base);
    transform: translateX(-1rem);
    border-radius: .75rem;
    transition: var(--trans-transform);
    box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
}

.toggle-switch input:checked ~ .slider::before {
    transform: translateX(1rem);
    box-shadow: 0 0 .25rem 3px rgba(var(--base-rgb), .25);
}

.toggle-switch input:checked ~ .slider {
    background-color: var(--action-0);
}

.toggle-switch input:active ~ .slider::before {
    transform: translate(0);
}

#theme-switch {
    z-index: 99;
    margin: 0;
    --wrap: nowrap;
    --gap: 1rem;
}

#theme-switch .slider {
    width: var(--chipchip);
    height: var(--chip);
}

#theme-switch .slider::before {
    transform: translateX(-1.5rem);
}

#theme-switch input:checked ~ .slider::before {
    transform: translateX(1.5rem);
}

@media (max-width: 600px) {
    .switch :active ~ .slider::before {
        transform: translateX(0);
    }
    #theme-switch {
        left: 1rem;
        z-index: var(--z-6);
        margin: 0;
        --wrap: nowrap;
        --gap: 1rem;
    }
    .wp-site-blocks > header {
        padding: 0!important;
    }
        #theme-switch [type=checkbox] {
            position: absolute;
            left: var(--offScreen);
        }
        @media (max-width: 600px) {
            #theme-switch {
                left: 1rem;
            }
        }
:checked ~ .slider .icon-sun-dim {
    --w: .75em;
    margin-top: .25em;
}
.slider .icon-moon {
    --w: .666em;
    margin-top: .333em;
}
.slider .icon-sun-dim,
:checked ~ .slider .icon-moon {
    --w: 1em;
    margin-top: 0;
}
:not(:checked) ~ .slider .icon-sun-dim {
    color: rgb(var(--action-0));
}

/*********************************************************
GRIDS
*********************************************************/
.grid-view,
.item-grid {
/************************************************
GRIDS/ROWS/TABLES
************************************************/
/** GRID VIEW (default) **/
.item-grid{
    --columns: repeat(2, 1fr);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-columns: var(--columns);
    gap: 10px;
}
.item-grid.stats {
    grid-template-columns: repeat(2, 1fr);
.item-grid:empty {
    display: none;
}
@media (min-width: 768px){
    .grid-view,
    .item-grid {
        --width: 250px;
        grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
    .no-results,
    .item-grid .empty {
        height: 15vh;
        background-color: rgb(var(--base-50));
        border-radius: var(--radius);
        border: 2px dashed rgb(var(--base-200));
        font-style: italic;
    }
}
    .item-grid.stats {
        --columns: repeat(2, 1fr);
    }
    @media (min-width: 768px) {
        .item-grid {
            --width: 250px;
            --columns: repeat(auto-fill, minmax(var(--width), 1fr));
        }
        .item-grid.split-2 {
            --columns: repeat(2, 1fr);
        }
        .item-grid.split-3 {
            --columns: repeat(3, 1fr);
        }
        .item-grid.split-4 {
            --columns: repeat(4, 1fr);
        }
        .item-grid.split-5 {
            --columns: repeat(5, 1fr);
        }
        .item-grid.split-6 {
            --columns: repeat(6, 1fr);
        }
        .item-grid.split-7 {
            --columns: repeat(7, 1fr);
        }
        .item-grid.split-8 {
            --columns: repeat(8, 1fr);
        }
        .item-grid.split-9 {
            --columns: repeat(9, 1fr);
        }
    }

.grid-view .item,
.item-grid .item {
    border-radius: var(--radius-outer);
    display:flex;
    filter: none;
    position: relative;
}
    .item-grid.list-view {
        gap: 0;
    }
    .item-grid.list-view .item {
        aspect-ratio: unset;
        align-items: flex-start;
        border-radius: 4px;
        padding: 1rem 0;
    }
    .list-view .item:nth-of-type(even) {
        background-color: var(--base);
    }
    .list-view .item-select {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 18vh;
    }
        .list-view .item .col {
            padding: 0 var(--chip_) 0 1rem;
        }
        .list-view .abs {
            right:0;
            top:0;
            width:max-content;
            --dir:column-reverse;
            justify-content: flex-end;
        }
    .item.col {
        --wrap: nowrap;
    }
    .votes,
    .favourite {
    .item-grid .item .item-actions {
        --gap: .125rem;
        z-index: 1;
        position: absolute;
        z-index: var(--z-1);
        box-shadow: rgba(var(--base-rgb),var(--op-2)) var(--shdw);
        background-color: rgba(var(--base-rgb),var(--op-2));
        top: 0;
        right: 0;
        width: calc(100% - var(--btn));
    }
        .favourite .icon-heart-fi,
        .favourited .icon-heart {
            display: none;
        .item-actions button,
        .item-actions .btn + label {
            min-height: var(--chipchip);
            width: var(--chipchip);
            z-index: var(--z-1);
        }
        .favourited .icon-heart-fi,
        .favourite .icon-heart {
            display: block;
        }
.votes {
    bottom: 0;
    right: 0;
}
.favourite {
    top: 0;
    left: 0;
}
.item-grid .item .images,
.item-grid .item .images a{
.item-grid .item .images a {
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
    display: flex;
}


.item-grid button {
    --height: max-content;
    aspect-ratio: 1;
}

.grid-view img,
.item-grid img {
    border-radius: var(--radius);
}
.item-grid .item-actions button {
    min-height: var(--chipchip);
    width: var(--chipchip);
}

/** LIST VIEW **/
.item-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.item-grid.list-view .item .col {
    --gap: .5rem;
}

.item-grid.list-view img {
    width: 20%;
}

@media (min-width: 768px) {
    .item-grid,
    .grid-view {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    .item-grid.list-view .item {
        aspect-ratio: unset;
        align-items: flex-start;
        border-radius: var(--radius);
        padding: 1rem 0;
    }
}
    .list-view .item:nth-of-type(even) {
        background-color: rgb(var(--base));
    }
    .list-view img {
        width: 20%;
    }
    .item.col {
        --wrap: nowrap;
    }

/******************************************************************
INTERACTIVE ELEMENTS - BASE
******************************************************************/
li.btn,
button,
[type=submit],
a.button,
.buttons a,
.btn + label {
    --justify: center;
    --align: center;
    --dir: row;
    width: fit-content;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    background-color: var(--base-100);
    color: var(--contrast-50);
    border: 1px solid var(--base-200);
    border-radius: var(--radius);
    padding: .25rem 1rem;
    font-family: var(--heading);
    cursor: pointer;
    outline: 0;
    min-height: var(--btn);
    display: inline-flex;
    justify-content: var(--justify);
    align-items: var(--align);
    gap: var(--gap);
    flex-wrap: var(--wrap);
    flex-direction: var(--dir);
    position: relative;
    box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
}

[data-filter], .btn + label {
    width: var(--chipchip);
    height: var(--chipchip);
    min-height: var(--chipchip);
}
select[data-filter] {
    width: max-content;
    height: auto;
    min-height: 0;
}

ul.socials a {
    background-color: var(--base-100);
    color: var(--contrast-50);
    border: 1px solid var(--base-200);
    border-radius: var(--radius);
    padding: .25rem 1rem;
    cursor: pointer;
    min-height: var(--btn);
    display: inline-flex;
.empty-state {
    --w: 1.2em;
    grid-column: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
}

/******************************************************************
INTERACTIVE ELEMENTS - STATES
******************************************************************/
li.btn:hover,
li.btn:focus,
button:hover,
button:focus,
[type=submit]:hover,
[type=submit]:focus,
a.button:hover,
a.button:focus,
ul.socials a:hover,
ul.socials a:focus,
.buttons a:hover,
.buttons a:focus,
.btn + label:hover,
.btn + label:focus {
    background-color: var(--action-0);
    color: var(--action-contrast);
    box-shadow: var(--shdw-none);
}

button:disabled,
[type=submit]:disabled,
a.button:disabled,
ul.socials a:disabled,
.btn:disabled + label,
button:disabled:hover,
button:disabled:focus,
[type=submit]:disabled:hover,
[type=submit]:disabled:focus,
a.button:disabled:hover,
a.button:disabled:focus,
ul.socials a:disabled:hover,
.btn:disabled + label:hover {
    opacity: .5;
    cursor: not-allowed;
    background-color: var(--base-200);
    color: var(--contrast-200);
}

/******************************************************************
BUTTONS
******************************************************************/
.buttons {
    --wrap: wrap;
    --justify: flex-start;
    text-align: center;
    margin: 1rem auto;
    width: 100%;
    padding: 0;
    max-width: 66%;
    background-color: rgb(var(--base-100));
    border: 2px dashed rgb(var(--base-50));
    padding: 1rem;
}

.buttons.fit {
    width: fit-content;
    margin: 1rem 2rem;
}

.buttons li {
    --justify: stretch;
    --align: stretch;
    padding: 0;
    list-style: none;
    overflow:hidden;
    width: 100%;
}

.list-none {
    list-style: none;
}

@media (min-width: 768px){
    .buttons {
        max-width: var(--content);
        margin: 3rem auto;
    }
}

.buttons .outline a {
    background-color: transparent;
    color: var(--action-0);
    border: 2px solid var(--action-0);
}

.buttons .outline a:hover,
.buttons .outline a:focus {
    background-color: var(--action-0);
    color: var(--action-contrast);
    border-color: var(--action-0);
}

.buttons a {
    width: 100%;
}

details .icon {
    --w: 1.5em;
}
details .filters .icon {
    --w: 1em;
}
button.voted .icon,
button.favourite.favourited {
    animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
}

@keyframes favourite-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    75% { transform: scale(.9); }
    100% { transform: scale(1); }
}

button.filter-toggle {
    border: 1px solid var(--base-200);
    background-color: transparent;
    white-space: nowrap;
    font-size: 1rem;
    height: var(--chip_);
    width: var(--chip_);
    min-height: 0;
    padding: .35em;
    --w: 1.2em;
}

.filter-toggle:hover {
    border-color: var(--action-50);
    color: var(--action-50);
}

.filter-toggle:focus {
    background-color: var(--action-50);
    color: var(--action-contrast);
}

button.favourite:not(.favourited) .heart-fill,
button.favourite.favourited .heart,
.toggle.notifications:not(.has) .bell-ringing,
.toggle.notifications.has .bell,
.vote button:not(.voted) .upvoted,
.vote button:not(.voted) .downvoted,
.vote .voted .upvote,
.vote .voted .downvote {
    display: none;
}

button.favourite:not(.favourited) .heart,
button.favourite.favourited .heart-fill,
.toggle.notifications:not(.has) .bell,
.toggle.notifications.has .bell-ringing,
.vote button:not(.voted) .upvote,
.vote button:not(.voted) .downvote,
.vote .voted .upvoted,
.vote .voted .downvoted {
    display: block;
}

/******************************************************************
ICONS
******************************************************************/
i.icon {
    width: var(--w);
    height: var(--w);
    display: inline-block;
    background-color: currentColor;
    mask-image: var(--icon);
    -webkit-mask-image: var(--icon);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    vertical-align: middle;
}
.icon-colour {
    background: rgb(183, 51, 46);
    background: linear-gradient(180deg, rgba(255,0,128,1) 0%, rgba(250,71,101,1) 14%, rgba(251,121,35,1) 28%, rgba(176,190,19,1) 42%, rgba(14,204,0,1) 56%, rgba(14,225,166,1) 70%, rgba(63,152,253,1) 84%, rgba(166,90,196,1) 100%);
}
.icon.grab {
    cursor: grab;
}
main a .icon {
    margin-right: .5rem;
}
/** TODO: Reintegrate this; currently svg is in .css
path#refresh {
    transform-origin: center;
    transform-box: fill-box;
    animation: spin 1s var(--trans-fn) infinite;
}**/

/******************************************************************
ACCESSIBILITY
******************************************************************/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

input[type=checkbox]:focus + label,
input[type=checkbox]:focus-visible + label,
input[type=radio]:focus + label,
input[type=radio]:focus-visible + label,
input:focus,
input:focus-within {
    outline: 2px solid var(--action-0) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--op-3))!important;
}

[aria-busy="true"] {
    cursor: progress;
}

[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
    opacity: .7;
}

/******************************************************************
DETAILS
******************************************************************/
details {
    padding: .25rem 0;
    border-top: 1px solid var(--base-200);
    border-bottom: 1px solid var(--base-200);
}

details[open] {
    background-color: var(--base-50);
}

details summary {
    --wrap: nowrap;
    list-style: none;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    position: relative;
    padding: .5rem 2.5rem .5rem .5rem;
    gap: .5rem;
}

details summary:hover {
    background-color: var(--base-100);
    border-color: var(--base-100);
    color: var(--contrast);
}

details[open] > summary {
    background-color: var(--base-50);
}

details summary::after {
    position: absolute;
    right: .5rem;
    top: .5rem;
    --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMTIuMjQsMTAwLjI0bC04MCw4MGE2LDYsMCwwLDEtOC40OCwwbC04MC04MGE2LDYsMCwwLDEsOC40OC04LjQ4TDEyOCwxNjcuNTFsNzUuNzYtNzUuNzVhNiw2LDAsMCwxLDguNDgsOC40OFoiLz48L3N2Zz4=');
    content: "";
    background-color: var(--contrast-100);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    transition: var(--trans-color), var(--trans-transform);
}

details summary:hover::after {
    background-color: var(--action-0);
}

details[open] > summary::after {
    background-color: var(--contrast);
}

details[open] > summary::after {
    transform: rotate(-540deg);
    transition: background-color var(--trans-base);
    transition-property: background-color, transform;
}

details::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
}

details[open]::details-content {
    opacity: 1;
    block-size: auto;
}

@media (prefers-reduced-motion: no-preference){
    details {
        interpolate-size: allow-keywords;
    }
}

/**************************************************
LIST OVERRIDES
**************************************************/
.term-list {
    --justify: flex-start;
    --align: center;
    --wrap: nowrap;
    --gap: 1.5rem;
    --dir: row;
    --w: 1em;
    list-style: none;
    padding: 0;
    height: var(--btn);
    display: flex;
    justify-content: var(--justify);
    align-items: var(--align);
    gap: var(--gap);
    flex-wrap: var(--wrap);
    flex-direction: var(--dir);
    position: relative;
    overflow: auto hidden;
    touch-action: pan-x;
    text-transform: lowercase;
}
    .term-list small {
        vertical-align: baseline;
        margin-left: .5rem;
        font-style: italic;
    }
    .term-list li {
        display: flex;
        align-items: center;
    }
    .term-list a {
        align-items: center;
    }


.directory-list > ul
{
    max-width: 100%;
}
.directory-list img {
    width: 70px;
}
    .directory-list .image {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    .directory-list h3 {
        margin: 0;
        text-align: center;
        font-weight: var(--fw-h-bold);
        font-family: var(--heading);
        position: sticky;
        font-size: var(--txt-enormous);
        width: 100%;
        top: 0;
        left: 0;
        color: var(--base);
        text-shadow: var(--base-200) 1px 1px 0;
        user-select:none;
    }
    .directory-list > ul > li {
        padding: 2rem;
        align-items: center;
    }
        .directory-list > ul > li:nth-of-type(even) {
            background-color: var(--base-100);
        }
    .directory-list ul ul {
        width: 100%;
    }
    .directory-list ul ul li {
        padding: .35rem .5rem;
    }
    .directory-list ul ul li:nth-of-type(even) {
        background-color:var(--base);
    }

    @media (min-width: 768px) {
        .directory-list h3 {
            width: 20vw;
        }
        .directory-list > ul {
            width: 100%;
        }
        .directory-list ul ul {
            min-height: var(--txt-enormous);
        }
        .directory-list > ul > li {
            padding: 2rem 10vw;
        }
    }
/**************************************************
COVER BLOCK
**************************************************/
.cover {
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    padding: var(--btn);
}

.cover::before {
    z-index: var(--coverIndex);
    background-color: var(--action-0);
    mix-blend-mode: var(--coverBlend);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
}

.cover::before,
.cover > video,
.cover > img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
}


.cover .content {
    z-index: 5;
    position: relative;
    overflow: hidden auto;
    width: max-content;
    height: max-content;
    max-width:100%;
    max-height: 100%;
}

.cover > img {
    z-index: 1;
    opacity: .5;
    mix-blend-mode: luminosity;
    object-fit: cover;
}

@media (min-width: 768px) {
    .cover > img {
        opacity: .33;
    }
}

/**************************************************
BLOCKQUOTE
**************************************************/
blockquote {
    --background: var(--base-100);
    --border: var(--action-0);
    line-height: 1.2;
    padding: var(--btn);
    border-radius: 4rem;
    background-color: var(--background);
}

blockquote .content {
    margin: 12px auto;
    max-width: min(680px, 80vw);
    position: relative;
    font-family: var(--heading);
    font-weight: var(--fw-h-bold);
    padding: 3rem 2.5rem;
    border-radius: var(--radius-outer);
    border: 2px solid var(--border);
}

blockquote .content::before,
blockquote .content::after {
    position: absolute;
    content: '';
    left: 50px;
}

blockquote .content::before {
    width: 80px;
    border: 6px solid var(--background);
    bottom: -3px;
    z-index: 2;
}

blockquote .content::after {
    border: 2px solid var(--border);
    border-radius: 0 100% 0 0;
    width: 60px;
    height: 60px;
    bottom: -60px;
    border-bottom: 0;
    border-left: 0;
    z-index: 3;
}

blockquote cite {
    padding: 15px 0 0 12px;
    margin: 0 0 0 150px;
    z-index: 1;
}

blockquote.pull {
    background-color: unset;
    border-radius: 0;
    margin: 4rem auto;
    padding: 3rem;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down), rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);;
}

blockquote.pull cite {
    margin: 0;
}

/******************************************************************
OVERLAYS - BASE PATTERN
******************************************************************/
dialog[open],
aside.expanded {
    background-color: var(--base);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    z-index: var(--z-5);
}

dialog::backdrop {
    backdrop-filter: blur(5px);
    background-color: rgba(var(--base-rgb),var(--op-4));
}

dialog[open],
aside.main {
    border-radius: var(--radius-outer);
    overflow: hidden;
}

/**************************************************
MODALS DIALOGUE
**************************************************/
dialog[open] {
    z-index:999;
    --padding: 0;
    top: 5vh;
    width: min(500px, 95vw);
    height: fit-content;
    max-height: 90vh;
    padding: var(--padding);
    background-color: var(--base-50);
    color: var(--contrast);
    border: 1px solid var(--base-200);
}

dialog > .wrap,
dialog > form {
    max-height: var(--maxHeight);
    overflow: hidden auto;
    margin: 0 0 0 1.5rem;
    padding-right: 1.2rem;
    padding-bottom: var(--btn);
    width: calc(100% - 1.5rem);
}

dialog label {
    font-weight: normal;
}

dialog :is(h2, h3) {
    margin: 0 0 .5rem 0;
    font-size: var(--txt-large);
}

dialog:has(.m-actions){
    padding-bottom: var(--btn);
}

.m-actions {
    --w: 1.15em;
    --justify: flex-end;
    --wrap: nowrap;
    --gap: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-6);
    background-color: var(--action-100);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
}

.m-actions button {
    width: 100%;
    height: var(--chipchip);
    border-radius: 0;
    font-size: var(--txt-x-small);
    --gap: .75rem;
    color: var(--action-contrast);
    background-color: var(--action-50);
    border: 2px solid var(--action-50);
    box-shadow:none;
}

.m-actions button:hover,
.m-actions button:focus {
    background-color: var(--base);
    color: var(--contrast);
}

.m-actions button:first-of-type {
    border-bottom-left-radius: 1rem;
}

.m-actions button:last-of-type {
    border-bottom-right-radius: 1rem;
}

dialog ul {
    list-style: none;
}

dialog .search-container {
    padding-top: 1rem;
    width: 100%;
    gap: .5rem;
}

/****************
QUERY BLOCK
****************/
.loop .item-grid {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
    .loop .item-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.loop .item-grid .progress {
    aspect-ratio: 3/2;
    position: relative;
}

.loop .item-grid .progress figure {
    width: 100%;
    height: 100%;
    display: flex;
    gap: .125rem;
    background-color: var(--action-0);
    position: relative;
}

.loop .item-grid .progress figure span {
    position: absolute;
    width: 50%;
    text-transform: uppercase;
    background-color: rgba(var(--action-rgb),var(--op-4));
    color: var(--action-contrast);
    padding: 0 .25rem;
}

.loop .progress figure img {
    max-width: 50%;
    object-fit: cover;
}

figure .after {
    top: 0;
    right:0;
}

figure .before {
    bottom: 0;
    left: 0;
}

/**************************************************
/***********************************************
TABLES
**************************************************/
***********************************************/
table {
    white-space: nowrap;
    width: 100%;
    display: block;
    display: table;
    margin: 0 0 2rem;
    border-radius: 4px;
    height: var(--maxHeight);
    height: min(100%, var(--maxHeight));
    color: rgb(var(--contrast));
    overflow: auto;
    position: relative;
}
@@ -2046,7 +1730,7 @@
thead,tfoot {
    position: sticky;
    z-index: 10;
    background-color: var(--base);
    background-color: rgb(var(--base));
    text-transform: uppercase;
    padding: .5rem 0;
    line-height: 2;
@@ -2054,7 +1738,7 @@
}

tr:nth-of-type(even){
    background-color: var(--base-200);
    background-color: rgb(var(--base-200));
}

tfoot th {
@@ -2066,16 +1750,16 @@
}

thead tr, tfoot tr {
    background-color: rgba(var(--base-rgb),var(--op-6));
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    background-color: rgba(var(--base),var(--op-6));
    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
}

thead tr {
    border-bottom: 1px solid var(--contrast-200);
    border-bottom: 1px solid rgb(var(--contrast-200));
}

tfoot tr {
    border-top: 1px solid var(--contrast-200);
    border-top: 1px solid rgb(var(--contrast-200));
}

thead {
@@ -2128,16 +1812,16 @@
}

tbody tr:focus-within {
    background-color: var(--base-100);
    border-color: var(--action-50)
    background-color: rgb(var(--base-100));
    border-color: rgb(var(--action-50))
}

[data-stuck] {
    background-color: rgba(var(--base-rgb),var(--op-4));
    background-color: rgba(var(--base),var(--op-4));
    position: sticky;
    left: -1rem;
    z-index: 15;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle-right);
    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle-right);
}

tbody [data-stuck] {
@@ -2146,135 +1830,1831 @@

thead [data-stuck],
tfoot [data-stuck] {
    background: var(--base);
    background: rgb(var(--base));
}

/**************************************************
TOOLTIP
**************************************************/
[role=tooltip],
.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
    visibility: hidden;
    position: absolute;
    bottom: 2rem;
    left: 1rem;
    width: max-content;
    height:fit-content;
    max-width: 50vw;
    padding: .5rem;
figure:has(table) {
    width: 100%;
    height: max-content;
}
/***********************************************
BUTTONS
***********************************************/
button,
[type=submit],
a.btn,
.btn + label,
li.btn,
.buttons a {
    --justify:center;
    --align: center;
    --dir: row;
    --wrap: nowrap;
    width: fit-content;
    text-transform: uppercase;
    text-decoration: none;
    background-color: rgb(var(--base-100));
    color: rgb(var(--contrast-50));
    border: 1px solid rgb(var(--base-200));
    border-radius: var(--radius);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    background: var(--action-0);
    color: var(--action-contrast);
}

body.menu_item [role=tooltip] {
    left: auto;
    right: 100%;
    top: -200%;
    z-index: var(--z-4);
}

[role=tooltip] p {
    margin: 0;
}

[role=tooltip] p + p {
    margin-top: .5rem;
}

.field:has([aria-describedby]:focus) [role=tooltip],
[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],
[aria-describedby]:focus  ~ .has-tooltip[role="tooltip"] {
    visibility: visible;
    display: block;
}

.has-tooltip {
    display: inline-flex;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    --w: 1.5rem
}

.tt-toggle {
    padding: .25rem 1rem;
    font-family: var(--heading);
    cursor: pointer;
    display: flex;
    border-radius: 50%;
    outline: 0;
    min-height: var(--btn);
    display: inline-flex;
    position: relative;
    box-shadow: rgba(var(--base),var(--op-6)) var(--shdw-inset);
}
    .btn.chip {
        min-height: var(--chip);
    }
    .buttons.left a {
        --justify: flex-start;
    }
    .buttons.right a {
        --justify: flex-end;
    }
    .buttons.x-btw a {
        --justify: space-between;
    }
button.outline,
[type=submit].outline,
a.btn.outline,
.filters .btn + label,
.buttons .outline a {
    --color: rgb(var(--contrast));
    background-color: transparent;
    color: var(--color);
    border: 1px solid var(--color);
}

.tt-toggle:hover,
.tt-toggle:focus {
    background-color: var(--action-0);
    color: var(--action-contrast);
button:hover,
button:focus,
[type=submit]:hover,
[type=submit]:focus,
a.btn:hover,
a.btn:visited:hover,
a.btn:focus,
.btn + label:hover,
.btn:focus + label,
.btn:checked + label,
li.btn:hover,
li.btn:focus,
.buttons a:hover,
.buttons a:visited:hover,
.buttons a:focus {
    background-color: rgb(var(--action-0));
    color: rgb(var(--action-contrast));
    box-shadow: var(--shdw-none);
}

.tt-toggle:hover + [role=tooltip],
.tt-toggle:focus + [role=tooltip] {
    visibility: visible;
    button.outline:hover,
    button.outline:focus,
    [type=submit].outline:hover,
    [type=submit].outline:focus,
    a.btn.outline:hover,
    a.btn.outline:visited:hover,
    a.btn.outline:focus,
    .filters .btn + label:hover,
    .filters .btn:focus + label,
    .buttons .outline a:hover,
    .buttons .outline a:visited:hover,
    .buttons .outline a:focus {
        background-color: rgb(var(--action-0));
        color: rgb(var(--action-contrast));
        border-color: rgb(var(--action-0));
    }

button:disabled,
button:disabled:focus,
button:disabled:hover,
[type=submit]:disabled,
[type=submit]:disabled:focus,
[type=submit]:disabled:hover,
.btn:disabled + label,
.btn:disabled:hover + label,
.btn:disabled:focus + label {
    opacity: .5;
    cursor: not-allowed;
    background-color: rgb(var(--base-200));
    color: rgb(var(--contrast-200));
}

/************************************************************
SELECTOR
************************************************************/
dialog[open]#jvb-selector {
    height: 70vh;
    top: 15vh;
    display: flex;
[type=submit] {
    margin: 1rem 0;
}

#jvb-selector > .wrap {
    flex: 1;
.filters .btn + label,
.filters button {
    min-height:var(--chip);
}
.filters .btn + label {
    background-color: rgb(var(--base-100));
    border: 1px solid rgb(var(--base-200));
    color: rgb(var(--contrast-200));
}
    .filters .btn:checked + label {
        border-color: rgb(var(--contrast));
        color: rgb(var(--contrast));
    }

/**** WP BLOCK BUTTONS ****/
.buttons {
    --wrap: wrap;
    --justify: flex-start;
    margin: 1rem auto;
    width: 100%;
    padding: 0;
}
    .buttons li {
        --justify: stretch;
        --align: stretch;
        padding: 0;
        list-style: none;
        overflow: hidden;
    }
    .buttons a {
        width: 100%;
    }
    .buttons.fit {
        width: fit-content;
        margin: 1rem 2rem;
    }
    @media (min-width: 768px) {
        .buttons {
            max-width: var(--content);
            margin: 3rem auto;
        }
    }
a.sticky,
button.sticky,
.main-actions .buttons {
    z-index: var(--z-6);
    position: fixed;
    bottom: var(--btn_);
}
body:has(.on-this-page) a.sticky,
body:has(.on-this-page) button.sticky,
body:has(.on-this-page) .main-actions .buttons {
    bottom: calc(var(--btn_) + var(--chip_));
}
.main-actions .buttons button,
button.sticky {
    width: var(--btn);
    height: var(--btn);
    background-color: rgba(var(--base),var(--op-4));
    color: rgb(var(--contrast));
    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
    transition: var(--trans-size), var(--trans-color);
}
    .main-actions .buttons button:hover,
    .main-actions .buttons button:focus,
    a.sticky:hover,
    a.sticky:focus,
    button.sticky:hover,
    button.sticky:focus {
        background-color: rgba(var(--action-0),var(--op-6));
        color: rgb(var(--action-contrast));
    }
        .main-actions .buttons button:disabled,
        .main-actions .buttons button:disabled:hover,
        .main-actions .buttons button:disabled:focus,
        button.sticky:disabled,
        button.sticky:disabled:hover,
        button.sticky:disabled:focus {
            opacity: .5;
            background-color: rgba(var(--base),var(--op-3));
            color: rgb(var(--contrast));
        }

    .qtoggle {
        left: 0;
        transition: left var(--trans-base), width var(--trans-base), border var(--trans-base), var(--trans-color);
    }
    .main .m-actions .refresh {
        width: var(--btn);
        border-radius: 0;
        background-color: rgb(var(--base-50));
        color: rgb(var(--contrast));
    }
        .main .m-actions .refresh:hover,
        .main .m-actions .refresh:focus {
            background-color: rgb(var(--action-0));
            color: rgb(var(--action-contrast));
        }
        .main .refresh .indicator {
            background-color: rgba(var(--base), var(--op-3));
            top: 0;
            right: 0;
            height: 1.1em;
            width: 1.1em;
        }
        .refresh .countdown:not(.counting) {
            display: none;
        }

    .main h2 {
        margin: .5em 0;
        font-size: var(--txt-medium);
    }



#back-to-top {
    min-height: var(--chip);
    bottom: -3rem;
    right: 0;
    transition: bottom var(--trans-base);
}
body:has(.main-actions) #back-to-top {
    right: calc(var(--btn_) + .5rem);
}
.scroll-up #back-to-top {
    bottom: 0;
}
body:has(.fixed.bottom).scroll-up #back-to-top {
    bottom: var(--btn);
}

body:has(.on-this-page).scroll-up.scroll-up #back-to-top {
    bottom: calc(var(--btn) + var(--chip_));
}
body:has(.fixed.bottom):has(nav.index.on-this-page).scroll-up.scroll-up #back-to-top {
    bottom: calc(var(--btn) + var(--chipchip));
}

button[data-action=refresh],
button.clear-filters {
    width: max-content;
    min-height: var(--chip_);
    --w: var(--txt-small);
    padding: .25rem .5rem;
}
/******************************************************************
ACCESSIBILITY
******************************************************************/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

input[type=checkbox]:focus + label,
input[type=checkbox]:focus-visible + label,
input[type=radio]:focus + label,
input[type=radio]:focus-visible + label,
input:focus,
input:focus-within {
    outline: 2px solid rgb(var(--action-0)) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(var(--action-0), var(--op-3))!important;
}

[aria-busy="true"] {
    cursor: progress;
}

[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
    opacity: .7;
}

[type=checkbox][hidden] + label,
[type=radio][hidden] + label,
.btn[hidden] + label {
    display: none!important;
}

/**************************************************************
FORM ELEMENTS
**************************************************************/
label {
    display: inline-flex;
    align-items: center;
    gap: .5em;
}
[type=radio],
[type=checkbox] {
    position: absolute;
    opacity: 0;
    left: var(--offScreen);
}
[type=radio] + label,
[type=checkbox] + label {
    cursor: pointer;
    position: relative;
    padding-left: 1.5rem;
}
.field:is(.radio,.checkbox) fieldset {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}
    @media(min-width: 768px) {
        .field:is(.radio,.checkbox) fieldset {
            grid-template-columns: repeat(3, 1fr);
        }
    }
.field:is(.radio,.checkbox,.true-false) label {
    position: relative;
    top: unset;
    left: unset;
    padding: 0 0 0 var(--chip);
    display: inline-flex;
    border: 1px solid transparent;
    font-weight: var(--fw-b);
    font-size: var(--txt-medium);
}
    [type=radio] + label:hover,
    [type=radio]:focus + label,
    [type=checkbox] + label:hover,
    [type=checkbox]:focus + label {
        color: rgb(var(--action-0));
    }

    [type=radio].btn + label:hover,
    [type=radio].btn:checked + label:hover {
        color: rgb(var(--action-contrast));
    }

    [type=radio] + label::before,
    [type=radio] + label::after,
    [type=checkbox] + label::before,
    [type=checkbox] + label::after {
        content: '';
        position: absolute;
        z-index: var(--z-2);
    }
            [type=checkbox] + label::before,
            [type=radio] + label::before {
                z-index: var(--z-1);
            }
        [type=checkbox] + label::after {
            left: .666em;
            top: .125em;
            transform: rotate(45deg);
            width: .25em;
            height: .75em;
            border: solid rgb(var(--action-contrast));
            border-width: 0 2px 2px 0;
            display: none;
        }
        [type=checkbox] + label::before,
        [type=radio] + label::before {
            display: block;
            top: .3em;
            left: .3em;
            width: .75rem;
            height: .75rem;
            border: 2px solid rgb(var(--contrast-200));
            background-color: transparent;
            border-radius: var(--radius);
        }
            [type=radio] + label::before {
                border-radius: 50%;
            }

        [type=checkbox]:checked + label::before {
            background-color: rgb(var(--action-0));
            border-color: rgb(var(--base-50));
        }
        [type=checkbox]:checked + label::after {
            display: block;
        }

        [type=radio]:checked + label::before {
            background-color: rgb(var(--action-0));
            box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-inset);
        }
/** Button checkboxes and radios **/
input.btn + label::before,
input.btn + label::after {
    display: none;
}



textarea,
input:is([type=date], [type=number], [type=text], [type=url],
         [type=email], [type=tel], [type=password], [type=search],
         [type=datetime-local], [type=time]) {
    font-family: var(--body);
    font-size: var(--txt-medium);
    color: rgb(var(--contrast));
    padding: var(--p-y) var(--p-x);
    border-radius: var(--radius);
    background-color: rgb(var(--base));
    outline: 0;
    border: 1px solid rgb(var(--base-100));
    border-bottom: 2px solid rgb(var(--contrast-200));
    width: 100%;
    max-width: 100%;
    margin: 0 4px;
}

textarea:focus,
input:is([type=date], [type=number], [type=text], [type=url],
         [type=email], [type=tel], [type=password], [type=search],
         [type=datetime-local], [type=time]):focus {
    outline: rgb(var(--action-50));
    background-color: rgb(var(--base-100));
    color: rgb(var(--contrast));
}
textarea::placeholder,
input::placeholder {
    font-family: var(--body);
    color: rgb(var(--base-200));
}

.field > label {
    position: relative;
    z-index: var(--z-1);
    display:inline-block;
    top: .75em;
    left: 1em;
    padding: 0 .5em;
    background-color:rgb(var(--base));
    font-size:var(--txt-small);
    font-weight: var(--fw-b-light);
    text-transform:uppercase;
    border: 1px solid transparent;
}
    .field.selector > label {
        top: 2.25em;
    }
    .field.selector .filter-toggle {
        width: var(--chipchip);
        min-height: var(--chipchip);
        padding: 0;
    }
.field:not(.radio):not(.checkbox):not(.true-false):not(.taglist):focus-within > label {
    background-color:rgb(var(--action-0));
    color: rgb(var(--action-contrast));
    border-radius: 4px;
}

.field.taglist, .field.taglist .field {
    border: none;
}

.field li.btn {
    min-height: var(--chip);
}
/******************************************************************
SELECT
******************************************************************/
select {
    background: rgb(var(--base));
    border: 2px solid rgb(var(--base-100));
    border-radius: var(--radius);
    color: rgb(var(--contrast));
    cursor: pointer;
    font-family: var(--body);
    font-size: var(--txt-small);
    padding: var(--sp1);
    width: 100%;
}

select:disabled {
    background-color: rgb(var(--base-50));
    border-color: rgb(var(--base-100));
    color: rgb(var(--base-200));
    cursor: not-allowed;
}

select option {
    background: rgb(var(--base));
    color: rgb(var(--contrast));
    padding: var(--sp1);
}

select option:hover,
select option:focus,
select option:active,
select option:checked {
    background: rgb(var(--action-0));
    color: rgb(var(--base));
    box-shadow: 0 0 0 100px rgb(var(--action-0)) inset;
}

select option:checked {
    background: rgb(var(--action-0)) linear-gradient(0deg, rgb(var(--action-0)) 0%, rgb(var(--action-0)) 100%);
    color: rgb(var(--base));
}

select:hover {
    border-color: rgb(var(--action-0));
}

select:focus {
    border-color: rgb(var(--action-0));
}

/******************************************************************
STATUS INDICATORS
SEARCH & SPECIAL INPUTS
******************************************************************/
.status,
.item .status,
.status-badge {
input[type=search]:focus + .clear-search {
    opacity: 1;
    cursor: pointer;
}

.search-container .clear-search {
    opacity: 0;
    cursor: default;
    max-width: 0;
    padding: 0;
    flex-shrink: 0;
    transition: width var(--trans-base), flex-shrink var(--trans-base);
}
    .search-container [type="search"]:focus + .clear-search {
        max-width: unset;
        padding: .25rem 1rem;
        flex-shrink: unset;
    }

.search-container.open.open [hidden] {
    display: block!important;
}

.search-container .icon.search {
    padding: 4px 8px;
    color: rgb(var(--contrast-200));
    --w: 3rem;
}

input[type="search"]::-moz-search-clear-button,
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal,
input[type="search"]::search-cancel-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none;
    visibility: hidden;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance:none;
}

input[type=url] {
    background: var(--icon);
    background-position: .5em;
    background-size: 1em;
    background-repeat: no-repeat;
    padding-left: 2em;
}
/**************************************************
TABS
**************************************************/
.tab-content[hidden] {
    display: block!important;
    transform: scaleY(0);
    max-height: 0;
    overflow: hidden;
}

    .tab-content[hidden]:focus-within {
        transform: scaleY(1);
        max-height: max-content;
    }
/**************************************************
CARD
**************************************************/
.item-grid.stats {
    margin: 1rem 0;
}
.card {
    background-color: rgb(var(--base-100));
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
    box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);
    aspect-ratio: 3/2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
    .card h4 {
        margin: 0;
        text-transform: uppercase;
    }
.stat-number {
    font-family: var(--heading);
    font-weight: var(--fw-h-bold);
    color: rgb(var(--action-0));
    font-size: var(--txt-xx-large);
}
/**************************************************
PROGRESS
**************************************************/
.progress {
    width: 100%;
}
.progress .bar {
    height: 6px;
    display: block;
    border-radius: 6px;
    overflow: hidden;
    background: rgb(var(--base-200));
    position: relative;
}

[data-status="pending"],
.status.pending,
.status-badge.pending,
#queue .item .status.pending {
    background: var(--base-100);
    color: var(--contrast-200);
.progress .fill {
    height: 100%;
    background: rgb(var(--action-0));
    border-radius: 6px;
    width: 0;
    transition: width .3s ease;
}
    .completed .fill {
        background: rgb(var(--action-200));
    }

.progress .details {
    margin-top: 5px;
    font-size: var(--txt-x-small);
    color: rgb(var(--contrast));
    text-align: center;
    padding: .25rem 0;
}

[data-status="processing"],
.status.processing,
.status-badge.processing,
#queue .item .status.processing {
    background: var(--base-200);
    color: var(--contrast-100);
    animation: pulse-color 2s infinite;
.progress .details:empty {
    display: none;
}
.queued .fill::after,
.pending .fill::after,
.processing .fill::after,
.uploading .fill::after {
    --delay: 0s;
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .225) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2.5s infinite linear var(--delay);
}
/**************************************************************
DETAILS
**************************************************************/
details {
    padding: .25rem 0;
    border-top: 1px solid rgb(var(--base-200));
    border-bottom: 1px solid rgb(var(--base-200));
}
    details[open] {
        background-color: rgb(var(--base-50));
    }

    details summary {
        list-style: none;
        text-transform: uppercase;
        cursor: pointer;
        border: 0;
        position: relative;
        padding: .5rem 2.5rem .5rem .5rem;
        gap: .5rem;
    }
        details summary:hover {
            background-color: rgb(var(--base-100));
            border-color: rgb(var(--base-100));
            color: rgb(var(--contrast));
        }
        details[open] > summary {
            background-color: rgb(var(--base-50));
        }
        details summary::after {
            content: '';
            position: absolute;
            right: .5rem;
            top: .5rem;
            background-color: rgb(var(--contrast-100));
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            -webkit-mask-image: var(--icon);
            mask-image: var(--icon);
            mask-repeat: no-repeat;
            mask-size: contain;
            width: 1.25rem;
            height: 1.25rem;
            margin-left: auto;
            transition: var(--trans-color), var(--trans-transform);
        }
            details summary:hover::after {
                background-color: rgb(var(--action-0));
            }
            details[open]:not(.all-filters) > summary::after {
                background-color: rgb(var(--contrast));
                transform: rotate(-540deg);
                transition: background-color var(--trans-base);
                transition-property: background-color, transform;
            }
    details::details-content {
        opacity: 0;
        block-size: 0;
        overflow-y: clip;
        transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
    }

    details[open]::details-content {
        opacity: 1;
        block-size: auto;
    }

    @media (prefers-reduced-motion: no-preference){
        details {
            interpolate-size: allow-keywords;
        }
    }

/********************************************************
CODE
********************************************************/

code {
    width: 100%;
    margin: .5rem;
    padding: .5rem;
    user-select: all;
    text-align: center;
    border-radius: 4px;
    background-color: rgb(var(--base-200));
}
/********************************************************
OVERLAYS
********************************************************/
dialog[open],
aside.expanded {
    background-color: rgb(var(--base));
    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
    z-index: var(--z-5);
}
aside.expanded {
    margin: 0!important;
}
dialog::backdrop {
    backdrop-filter: blur(5px);
    background-color: rgba(var(--base),var(--op-4));
}
dialog[open],
aside.main {
    border-radius: var(--radius-outer);
    overflow: hidden;
}
/** DIALOG **/
dialog[open] {
    z-index: var(--z-10);
    --padding: 0;
    margin: auto!important;
    width: min(500px, 95vw);
    height: fit-content;
    max-height: 90vh;
    padding: var(--padding);
    background-color: rgb(var(--base-50));
    color: rgb(var(--contrast));
    border: 1px solid rgb(var(--base-200));
}
    dialog:is(.create,.edit,.bulkEdit)[open] {
        width: 98vw;
        max-height: 98vh;
        top: 1vh;
    }
    dialog > .wrap.wrap {
        max-height: var(--maxHeight);
        overflow: hidden auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 0 0 0 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: var(--btn);
        width: calc(100% - 1.5rem);
    }
    dialog label {
        font-weight:  normal;
    }
    dialog h2,
    dialog h3 {
        margin: 0 0 .5rem 0;
        font-size: var(--txt-large);
    }

    dialog:has(.m-actions) {
        padding-bottom: var(--btn);
    }

    .m-actions {
        --w: 1.15em;
        --justify: flex-end;
        --wrap: nowrap;
        --gap: 0;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        height: var(--btn);
        width: 100%;
        z-index: var(--z-6);
        background-color: rgb(var(--action-100));
        box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-up);
    }
    .m-actions button {
        --wrap: nowrap;
        box-shadow: none;
        width: 100%;
        background-color: rgb(var(--action-0));
        color: rgb(var(--action-contrast));
        --gap: .75rem;
        font-size: var(--txt-x-small);
        border-radius: 0;
        height: var(--chipchip);
    }
        .m-actions button:hover,
        .m-actions button:focus {
            background-color: rgb(var(--base));
            color: rgb(var(--contrast));
        }
        .m-actions button:first-of-type {
            border-bottom-left-radius: 1rem;
        }
        .m-actions button:last-of-type {
            border-bottom-right-radius: 1rem;
        }
    dialog li {
        list-style: none;
        padding: 0;
    }
    dialog .search-container {
        padding-top: 1rem;
        width: 100%;
        gap: .5rem;
    }
    dialog header {
        width: 100%;
        text-align: center;
        font-size: var(--txt-x-medium);
        height: var(--chipchip);
    }
        dialog header h2 {
            margin: 0;
        }
        /** SELECTOR **/
        .selected-items {
            width: 100%;
            padding: .5rem;
            border-radius: var(--radius);
            background-color: rgb(var(--base));
            --justify: flex-start;
            --gap: .5rem;
            margin-bottom: .5rem;
        }
            .selected-items button {
                width: max-content;
                padding: .125rem .5rem;
                font-size: var(--txt-x-small);
                min-height: var(--chip_);
            }
                .selected-items button .icon-x {
                    --w: var(--txt-small);
                    align-self: flex-start;
                }
            .selected-items.selected-items:empty {
                padding: 0;
                background-color: transparent;
                margin: 0;
            }
            .selected-item.selected-item {
                padding: .25rem .5rem;
                margin: .125em;
                background-color: rgb(var(--base-100));
                border-radius: .25rem;
                font-size: var(--txt-medium);
                border: 1px solid rgb(var(--base-200));
                position: relative;
                width: max-content;
            }
                .selected-item button {
                    min-height: 0;
                    height: var(--chip);
                    width: var(--chip);
                    padding: 0;
                    --w: var(--txt-small);
                }
            .clear-filters {
                margin-left: auto;
                border: 1px solid var(--base-200);
            }
            #jvb-selector .message {
                width: 100%;
                text-align: center;
            }
            #jvb-selector .items-wrap {
                width: 100%;
                padding: 1rem 0;
                border: 1px solid rgb(var(--base-200));
                border-width: 1px 0;
            }
            #jvb-selector .items-container {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                margin: 0;
            }

            .autocomplete-dropdown {
                width: 100%;
                background-color: var(--base-100);
                padding: .5rem;
                box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);
            }
                li.autocomplete {
                    list-style: none;
                    display: inline-flex;
                    margin: .25rem;
                    min-height: var(--chip);
                }

    /** GALLERY **/
    img[data-gallery] {
        cursor: pointer;
    }
    dialog.gallery[open] {
        --max: calc(100% - 2rem);
        inset: 1rem;
        margin: 0;
        border: none;
        width: 100%;
        height: 100%;
        max-height: var(--max);
        max-width: var(--max);
        border-radius: 0;
        /*background-color: rgba(var(--base), var(--op-6));*/
        background-color: transparent;
    }
        dialog.gallery > .wrap {
            --wrap: nowrap;
            position: relative;
            overflow: hidden;
            max-height: none;
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            inset: 0;
        }
        .gallery .hint {
            position: absolute;
            top: 1rem;
            left: 50%;
            transform: translateX(-50%);
            letter-spacing: .12em;
            pointer-events: none;
            z-index: 2;
            animation: hint-fade 3s ease forwards;
        }
            @keyframes hint-fade {
                 0%   { opacity: 1; }
                 60%  { opacity: 1; }
                 100% { opacity: 0; }
             }
        .gallery .controls {
            --wrap: nowrap;
            --align: flex-end;
            --justify: space-between;
            --gap: 0;
            position: absolute;
            inset: 0;
            padding: 1rem;
            z-index: 3;
            pointer-events: none;
        }
            .gallery .controls button {
                min-height: var(--chipchip);
                pointer-events: all;
                background: rgba(var(--base), var(--op-45));
                border: 1px solid rgba(var(--contrast), var(--op-1));
                color: rgba(var(--contrast), var(--op-5));
            }
                .gallery .controls button:hover,
                .gallery .controls button:focus {
                    background: rgba(var(--base), var(--op-5));
                    color: rgb(var(--contrast));
                }
                .gallery .controls .cancel {
                    position: absolute;
                    top: 1rem;
                    right: 1rem;
                }



        dialog.gallery .cancel:focus,
        dialog.gallery .cancel:hover {
            background: rgba(var(--base),var(--op-4));
        }


        dialog.gallery .content {
            position: relative;
            overflow: hidden;
            flex: 1;
            display: flex;
        }
            dialog.gallery .image-left,
            dialog.gallery .image-right {
                position: absolute;
                width: 0;
                height: 0;
                opacity: 0;
                pointer-events: none;
                left: var(--offScreen);
            }

            dialog.gallery .content .image {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                display: block;
                transform-origin: center center;
                will-change: transform;
                transition: transform 0.15s ease-out;
                touch-action: none;
                user-select: none;
                -webkit-user-drag: none;
                cursor: default;
            }
                .gallery .image[style*="scale(1)"],
                .gallery .image:not([style]) {
                    cursor: default;
                }

        dialog.gallery details {
            position: absolute;
            width: 100%;
            max-width: none;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(var(--base),var(--op-45));
            color: rgb(var(--contrast));
            border-radius: 4px;
            overflow: hidden;
            z-index: 3;
        }
            dialog.gallery details:has(.item-info:empty) {
                display: none;
            }

            dialog.gallery details summary {
                padding: 0.75rem 1rem;
                cursor: pointer;
                user-select: none;
            }

            dialog.gallery details[open] .item-info {
                padding: 0.75rem 1rem 1rem;
                font-size: var(--txt-x-small);
            }

            dialog.gallery .counter {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(var(--base),var(--op-4));
                color: rgba(var(--contrast), var(--op-3));
                padding: .4rem .8rem;
                border-radius: 3px;
                font-size: var(--txt-small);
                letter-spacing: .1em;
                z-index: 3;
            }

            dialog.gallery .favourite {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 3;
            }

            dialog.gallery .image {
                opacity: 0;
                transition: opacity .2s ease, transform .15s ease-out;
            }

            dialog.gallery .image[src] {
                opacity: 1;
            }

ul.gallery {
    display: flex;
    flex-wrap: wrap;
    margin: .2em!important;
    padding: 0!important;
    max-width: 100vw;
}
    ul.gallery::after {
        content: '';
        display: block;
        flex-grow: 10;
    }

    ul.gallery li {
        flex-grow: 1;
        list-style: none;
        height: 40vh;
        margin: .2em;
        overflow: hidden;
        padding: 0;
        max-width:49%;
    }

    ul.gallery figure {
        min-width: 100%;
        height: 100%;
    }
        ul.gallery figure.duotone img {
            mix-blend-mode: multiply;
        }



        @media (max-aspect-ratio: 1/1) and (max-width: 480px) {
            ul.gallery {
                flex-direction: row;
            }
            ul.gallery li {
                height: auto;
                width: 100%;
            }
            ul.gallery figure {
                width: 100%;
                max-height: 75vh;
                min-width: 0;
            }
        }
        @media (max-aspect-ratio: 1/1) {
            ul.gallery li {
                height: 30vh;
            }
        }
        @media (max-height: 480px) {
            ul.gallery li {
                height: 80vh;
            }
        }

    ul.gallery.cut {
        --gap: var(--txt-small);
        display: grid;
        max-width: var(--narrow);
        grid: auto-flow 1fr/repeat(3, 1fr);
        gap: var(--gap);
    }
        ul.gallery.cut img {
            filter: var(--filterNone);
        }
        ul.gallery.cut:hover img {
            filter: var(--filter);
        }
        ul.gallery.cut:hover img:hover {
            filter: var(--filterNone);
        }
            ul.gallery.cut li:nth-of-type(4n +2) {
                grid-area: 1/2/span 2/span 2;
                clip-path: polygon(0 0,100% 0,100% 100%,calc(50% + var(--g)/4) 100%,0 calc(50% - var(--g)/4));
            }
            ul.gallery.cut li:nth-of-type(4n +3) {
                grid-area: 2/1/span 2/span 2;
                clip-path: polygon(0 0,calc(50% - var(--g)/4) 0,100% calc(50% + var(--g)/4),100% 100%,0 100%);
            }




/*** POPUPS: notifications, cart, queue ***/
aside.main.main {
    --wrap: nowrap;
    --align: stretch;
    --dir: column;
    position: fixed;
    top: var(--btnbtn);
    bottom: var(--btn_);
    width: min(500px, calc(100vw - 2rem));
    padding: 0 0 var(--btn);
}
    aside.main.left {
        border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
        left: var(--offScreen);
        transition: left var(--trans-base);
    }
        aside.main.left.expanded {
            left: 0;
        }
    aside.main.right {
        border-radius: var(--radius-outer) 0 0 var(--radius-outer);
        right: var(--offScreen);
        transition: right var(--trans-base);
    }
        aside.main.right.expanded {
            right: 0;
        }
    aside.main nav.tabs {
        --gap: 0;
        flex-shrink: 0;
    }
    aside.main > .wrap {
        max-height: 100%;
        overflow: hidden auto;
    }
        aside.main header {
            --w: 2em;
            background-color: rgb(var(--action-0));
            color: rgb(var(--action-contrast));
            padding: 1rem;
        }
        .tab-content header {
            width: calc(100% + 2rem);
            left: -1rem;
            top: -1rem;
            position: relative;
        }
            .main header .icon {
                margin-right: 1em;
            }
            .main h3 {
                font-size: var(--txt-large);
                margin: .5rem 0;
            }
        aside.main nav.share {
            --dir: row;
            --align: center;
            margin: 0;
            border-bottom: 1px solid rgb(var(--base-200));
        }
            nav.share ul,
            nav.share li,
            nav.share a {
                height: var(--chipchip);
            }
            nav.share a:hover {
                background-color: rgb(var(--action-0));
                color: rgb(var(--action-contrast));
            }
        aside.main h4,
        aside.main .hint {
            text-align: center;
        }
    aside.main .tab-content {
        flex-shrink: 0;
    }
    aside.main .tab-content.active {
        flex: 1;
        overflow: hidden auto;
        padding: 1rem;
    }
    .main section {
        padding: 1rem;
    }
    .main section + section {
        border-top: 1px solid rgb(var(--base-200));
    }

.qtoggle .count,
.indicator {
    position: absolute;
    top: -.5em;
    right: -.5em;
    width: .75em;
    height: .75em;
    border-radius: 50%;
}
.qtoggle .indicator {
    top: 0;
    right: 0;
}
    .qtoggle .count {
        right:unset;
        left: .25rem;
        top: .25rem;
        font-size: var(--txt-small);
    }
    #queue.synced + .qtoggle .indicator {
        background-color: rgb(var(--success));
    }

    #queue.pending + .qtoggle .indicator {
        background-color: rgb(var(--warning));
        animation: pulse 2s infinite;
    }

    .refresh.fetching .icon,
    #queue.pending:not(.expanded) + .qtoggle .icon {
        background-color: rgb(var(--action-0));
        animation: spin 1s var(--trans-fn) infinite;
    }
.main.expanded + .qtoggle {
    width: calc(min(500px, calc(100vw - 2rem)) - var(--btn));
}

[data-status="completed"],
.status.completed,
.status-badge.consulted,
.status-badge.treated,
#queue .item .status.completed {
    background: var(--success);
    color: var(--successText);
.main-actions .buttons:has(.expanded) {
    width: calc(min(500px, calc(100vw - 2rem)));
}
.main.expanded + .qtoggle {
    left: var(--btn);
    border-bottom-right-radius: var(--radius-outer);
}
.main-actions .buttons:has(.expanded) {
    right: 0;
}
.main-actions button.expanded {
    border-bottom-left-radius: var(--radius-outer);
    width: 100%;
}
.buttons:has(.expanded) > button:not(.expanded) {
    display: none;
}

[data-status="failed"],
.status.failed,
.status-badge.error,
#queue .item .status.failed {
    background: var(--error);
    color: var(--errorText);
.main nav.filters {
    width: 100%;
    height: var(--chipchip);
    --justify: flex-start;
    --align: flex-end;
}
.main nav.filters li {
    overflow: visible;
}
.main .btn + label {
    min-height: var(--chip);
    min-width: var(--chip);
    overflow: visible;
}
.btn + label .indicator:not(:empty) {
    font-size: var(--txt-small);
    background-color: rgb(var(--base));
    border: 1px solid rgb(var(--contrast));
    width: 1.75em;
    height: 1.75em;
    padding: .3em;
}

.main > .header {
    border-bottom: 1px solid rgb(var(--base-200));
    padding: 1rem 0;
    flex-shrink: 0;
}
.main .item-grid {
    flex: 1;
    overflow: hidden auto;
    overflow-anchor: none;
    padding: .5rem 2rem;
    --gap: .5rem;
}
.queue-actions {
    flex-shrink: 0;
    border-top: 1px solid rgb(var(--base-200));
}
.queue-actions button {
    width: 100%;
}

.main .item {
    background-color: rgb(var(--base-50));
    padding: 15px;
    border-radius: var(--radius);
    box-shadow: var(--shdw-none);
    font-size: var(--txt-x-small);
}
.main .item .header {
    position: relative;
    padding: .25rem 0;
}
.main .item .actions {
    width: 100%;
}
.main .item button {
    min-height: var(--chip);
    font-size: var(--txt-x-small);
    --w: var(--txt-x-small);
}
.main .item .time {
    padding: .5rem 0;
    font-size: var(--txt-small);
    border: 1px solid rgb(var(--base-200));
    border-width: 1px 0;
    margin: .25rem 0;
}
.main .item .progress .details {
    text-align: right;
    font-size: var(--txt-small);
    width: 100%;
}
/*** MAIN ACTIONS ***/
.main-actions .buttons {
    transition: width var(--trans-base), right var(--trans-base);
    right: .5rem;
    width: var(--btn);
    margin: 0;
}
.attn {
    animation: pulse-color 5s infinite;
    animation-delay: 1s;
}
.attn.expanded {
    animation: none;
}

/********************************************************
CALLOUTS
********************************************************/
.callalt.callalt,
.callout.callout {
    padding: 2rem;
    margin: 0;
    max-width: none;
    grid-column: full;
}

@media (min-width: 768px){
    .callout.callout {
        padding: 2rem 20vw;
    }
}

.callout.callout {
    background-color: rgb(var(--action-0));
    color: rgb(var(--action-contrast));
}

.callalt.callalt {
    background-color: rgb(var(--secondary-0));
    color: var(--secondary-contrast);
}

.callalt :is(h1, h2, h3, h4, h5, h6),
.callout :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--body);
    font-weight: var(--fw-b-bold);
    margin: 1rem 0 0;
    width: 100%;
}

.callout a {
    background-color: rgb(var(--action-contrast));
    padding: 0 .125rem;
    border-radius: 4px;
}
/********************************************************
WP BLOCKS
********************************************************/
/** MEDIA TEXT **/
.media-text > * {
    flex: 1;
}
/** COVER **/
.cover {
    --color: rgba(var(--action-0), var(--op-5));
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    padding: var(--btn);
}

    .cover:not(.duotone)::before {
        content: '';
        /*z-index: var(--coverIndex);*/
        background-color: var(--dark-0);
        /*mix-blend-mode: var(--coverBlend);*/
        /*background-position: center;*/
        /*background-repeat: no-repeat;*/
        /*background-size: cover;*/
    }
    .cover .overlay {
        background-color: var(--dark-0);
    }
        .overlay.op-1 {
            opacity: var(--op-1);
        }
        .overlay.op-2 {
            opacity: var(--op-2);
        }
        .overlay.op-3 {
            opacity: var(--op-3);
        }
        .overlay.op-4 {
            opacity: var(--op-4);
        }
        .overlay.op-45 {
            opacity: var(--op-45);
        }
        .overlay.op-5 {
            opacity: var(--op-5);
        }
        .overlay.op-6 {
            opacity: var(--op-6);
        }
    .cover:has(.overlay)::before {
        display: none;
    }
.cover .overlay,
.cover:not(.duotone)::before,
.cover > video,
.cover > img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none!important;
    height: 100%;
    margin: 0;
}
.cover > img,
.cover > video {
    mix-blend-mode: luminosity;
    max-width: none!important;
    width: 100%!important;
}
.cover .overlay,
.cover:not(.duotone)::before {
    z-index: 2;
    background-color: var(--color);
    mix-blend-mode: color;
}


.cover .content {
    z-index: 5;
    position: relative;
    overflow: hidden auto;
    width: max-content;
    height: max-content;
    max-width:100%;
    max-height: 100%;
}

.cover > img {
    /*z-index: 1;*/
    /*opacity: .5;*/
    /*mix-blend-mode: luminosity;*/
    object-fit: cover;
}

@media (min-width: 768px) {
    .cover > img {
        /*opacity: .33;*/
    }
}
/** IMAGE **/
figure {
    overflow: hidden;
    position: relative;
}
figure:is(.op-1,.op-2,.op-3,.op-4,.op-5,.op-6,.op-45)::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: '';
}
    figure.op-1::before {
        opacity: var(--op-1);
    }
    figure.op-2::before {
        opacity: var(--op-2);
    }
    figure.op-3::before {
        opacity: var(--op-3);
    }
    figure.op-45::before {
        opacity: var(--op-45);
    }
    figure.op-4::before {
        opacity: var(--op-4);
    }
    figure.op-5::before {
        opacity: var(--op-5);
    }
    figure.op-6::before {
        opacity: var(--op-6);
    }

    figure.action-0::before {
        background-color: rgb(var(--action-0));
    }
    figure.action-50::before {
        background-color: rgb(var(--action-50));
    }
    figure.action-100::before {
        background-color: rgb(var(--action-100));
    }
    figure.action-200::before {
        background-color: rgb(var(--action-200));
    }
    figure.secondary-0::before {
        background-color: rgb(var(--secondary-0));
    }
    figure.secondary-50::before {
        background-color: rgb(var(--secondary-50));
    }
    figure.secondary-100::before {
        background-color: rgb(var(--secondary-100));
    }
    figure.secondary-200::before {
        background-color: rgb(var(--secondary-200));
    }
    figure.base::before {
        background-color: rgb(var(--base));
    }
    figure.base-50::before {
        background-color: rgb(var(--base-50));
    }
    figure.base-100::before {
        background-color: rgb(var(--base-100));
    }
    figure.base-200::before {
        background-color: rgb(var(--base-200));
    }
    figure.contrast::before {
        background-color: rgb(var(--contrast));
    }
    figure.contrast-50::before {
        background-color: rgb(var(--contrast-50));
    }
    figure.contrast-100::before {
        background-color: rgb(var(--contrast-100));
    }
    figure.contrast-200::before {
        background-color: rgb(var(--contrast-200));
    }

.bg-fixed {
    background-attachment: fixed;
}
.bg-repeat.bg-repeat {
    background-repeat: repeat;
    background-size: 33vw;
}
[data-bg-img] {
    background-size: cover;
    background-repeat: no-repeat;
}
/** BLOCKQUOTE **/
blockquote {
    margin-left: 10vw;
    position: relative;
    padding: var(--btn);
}
    blockquote .icon-quotes-fi {
        position: absolute;
        top: var(--btn);
        left: calc((10vw + var(--btn)) * -1);
        --w: 10vw;
        opacity: var(--op-1);
    }

blockquote cite {
    padding: 15px 0 0 12px;
    margin: 0 0 0 150px;
    z-index: 1;
}

blockquote.pull {
    background-color: unset;
    border-radius: 0;
    margin: 4rem auto;
    padding: 3rem;
    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-down), rgba(var(--base),var(--op-45)) var(--shdw-up);;
}

blockquote.pull cite {
    margin: 0;
}
/** QUERY **/
ul.loop {
    max-width: none;
    padding: var(--sp4) var(--sp1);
}
.loop :is(h1,h2,h3,h4,h5,h6) {
    margin: .5em 0;
}
.loop :is(h1,h2,h3,h4,h5,h6):has(+ time) {
    margin-bottom: 0;
}
    .loop :is(h1,h2,h3,h4,h5,h6) + time {
        font-size: var(--txt-x-small);
        margin-top: 0;
    }
.loop li {
    list-style: none;
}
.loop p:has(.read-more) {
    text-align: right;
}

.loop li > figure {
    /*float: left;*/
    /*margin-right: var(--chip_);*/
    /*margin-top: 0;*/
    /*max-width: 30%;*/
    aspect-ratio: 1;
}

.loop.scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    touch-action: pan-x;
    margin:0!important;
}
    a:has(img) {
        display:block;
        padding: .25rem;
    }


.no-results p,
.no-results {
    display: flex;
    justify-content: center;
    align-items: center;
}


/** TODO: LIST OVERRIDES **/
/*********************************************************
DIRECTORY
*********************************************************/
.directory-list > ul {
    max-width: none;
    margin-left: 0!important;
}
.directory-list .image {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
    .directory-list img {
        width: 70px;
    }
.directory-list h3 {
    margin: 0;
    text-align: center;
    font-weight: var(--fw-h-bold);
    position: sticky;
    font-size: var(--txt-enormous);
    width: 100%;
    top: var(--btn);
    left: 0;
    color: rgb(var(--base));
    text-shadow: rgb(var(--base-200)) 1px 1px 0;
    user-select: none;
}
    .directory-list >ul > li {
        padding: 2rem;
        align-items: flex-start;
    }
    .directory-list >ul > li:nth-of-type(even) {
        background-color: rgb(var(--base-100));
    }

    /** The letter's list **/
    .directory-list ul ul {
        width: 100%;
    }
    .directory-list ul ul li {
        padding: .35rem .5rem;
    }
    .directory-list ul ul li:nth-of-type(even) {
        background-color: rgb(var(--base-100));
    }
    .directory-list ul li:nth-of-type(even) ul li:nth-of-type(even) {
        background-color: rgb(var(--base-50));
    }
    @media (min-width: 768px) {
        .directory-list h3 {
            width: 20vw;
        }
        .directory-list ul ul {
            min-height: var(--txt-enormous);
        }
        .directory-list >ul > li {
            padding: 2rem 10vw;
        }
    }

/******************************************************************
LOADING
@@ -2308,9 +3688,9 @@
    height: fit-content;
    width: min(400px, 60vw);
    border-radius: var(--radius-outer);
    background-color: rgba(var(--base-rgb),var(--op-4));
    background-color: rgba(var(--base),var(--op-4));
    padding: 2rem;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
    position: relative;
}

@@ -2325,7 +3705,7 @@
}

.loading[open] i.icon {
    background-color: var(--action-0);
    background-color: rgb(var(--action-0));
}

dialog.loading[open] i.icon {
@@ -2333,7 +3713,7 @@
}

dialog.loading[open] h3 {
    color: var(--contrast);
    color: rgb(var(--contrast));
    margin: 2rem 1rem auto !important;
    font-size: var(--txt-large);
    width: -moz-fit-content;
@@ -2357,1697 +3737,12 @@
    width: 12px;
    height: 12px;
    border: 2px solid transparent;
    border-top: 2px solid var(--action-50);
    border-top: 2px solid rgb(var(--action-50));
    border-radius: 50%;
    animation: spin 1s var(--trans-fn) infinite;
}

/*****************************************************************************
MENU
*****************************************************************************/
.toggle-details {
    gap: 2px;
}

body.menu_item #top {
    z-index: var(--z-4);
    position: relative;
}

section .toggle-details {
    position: absolute;
    right: 0;
    top: 5rem;
}

[data-toggle=all] {
    position: fixed;
    bottom: calc(var(--btn_) + var(--btn) + .5rem);
    right: 0;
    z-index: var(--z-4);
    background-color: var(--action-0);
    color: var(--action-contrast);
}

[data-toggle] {
    z-index: var(--z-1);
}

body:has(#queue[hidden]) [data-toggle=all] {
    left: 1rem;
}

dialog:not([open]).col,
dialog:not([open]).row {
    display: none;
}

@media (min-width:768px) {
    section .toggle-details {
        right: -10%;
    }
}

/********************************************
TYPE TEXT
********************************************/
.typeText::after {
    content: '|';
    display: inline-block;
    margin-left: 0;
    animation: blink .75s step-end infinite;
}

@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/**************************************************
POPUPS: toast, cart, queue
**************************************************/
aside.main {
    --wrap: nowrap;
    --align: stretch;
    position: fixed;
    top: var(--btnbtn);
    bottom: var(--btn_);
    width: min(500px, calc(100vw - 2rem));
    background-color: var(--base);
    z-index: var(--z-5);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    padding: 1rem 1rem var(--btn);
    overflow: hidden auto;
}
aside.main.referral {
    padding-top: 0;
}
aside.main.referral nav.tabs {
    padding: 1rem 0;
    background-color:var(--base);
    height: max-content;
    min-height: var(--btn);
}

.qtoggle {
    z-index: var(--z-6);
    position: fixed;
    bottom: var(--btn_);
    width: var(--btn);
    height: var(--btn);
    background-color: rgba(var(--base-rgb),var(--op-4));
    color: var(--contrast);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    transition: var(--trans-size), var(--trans-color);
}

.qtoggle:hover,
.qtoggle:focus {
    background-color: rgba(var(--action-rgb),var(--op-6));
    color: var(--action-contrast);
}

.qtoggle:disabled,
.qtoggle:disabled:hover,
.qtoggle:disabled:focus {
    opacity: .5;
    background-color: rgba(var(--base-rgb),var(--op-3));
    color: var(--contrast);
}

/******************
CART
******************/
.toggle-cart {
    right: 0;
    border-radius: 4px 4px 4px var(--radius-outer);
}

body:has(#cart.expanded) .toggle-cart .icon {
    display: none;
}

aside#cart {
    padding-bottom: 6rem;
}

#cart form {
    max-height: 100%;
    overflow: hidden auto;
}

#cart nav.tabs {
    z-index: var(--z-6);
    top: 0;
}

#cart table {
    height: auto;
}

#cart th {
    padding: 0 1.5rem;
}

#cart table th:first-of-type {
    width: 100%;
}

#cart nav.tabs {
    position: sticky;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}

#cart button[data-tab] {
    flex: 1;
    border-radius: 0;
}

#cart form > *:not(.tabs) {
    max-width: 90%;
    margin: 0 auto;
}

#cart form .empty p {
    margin: .5rem 0!important;
}

#cart .cart-total.cart-total {
    --gap: 0 1rem;
    padding-right: 1rem;
    position: absolute;
    bottom: var(--btn);
    width: 100%;
    max-width: 100%;
    background-color: rgba(var(--base-rgb),var(--op-6));
    z-index: var(--z-6);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
}

.cart-total p {
    --gap: 2rem;
    max-width: 100%;
    margin: 0;
}

.cart-total p span {
    width: 6rem;
    display: inline-block;
    text-align: right;
}

.cart-total p + p {
    font-weight: bold;
}

.cart-items .total {
    font-weight: bold;
}

#cart .restored {
    background-color: rgba(var(--action-rgb), var(--op-3));
    border-radius: var(--radius-outer);
    padding: 1rem;
}

.restored h3 {
    font-size: var(--txt-medium);
    margin: 0;
}

.restored p {
    margin: 0;
}

.restored .row {
    --gap: 0;
    --wrap:nowrap;
    --w: 1em;
}

/******************
TOAST
******************/
.toasts {
    position: fixed;
    top: 4rem;
    right: -350px;
    z-index: 1000;
    width: 350px;
}

.toast {
    background-color: rgba(var(--base-rgb),var(--op-6));
    border-left: 4px solid var(--action-0);
    padding: 1rem;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    left: 0;
    position: relative;
    opacity: 0;
    transition: left .3s, opacity .3s;
}

.toast.success {
    border-left-color: var(--success);
}

.toast.error {
    border-left-color: var(--error);
}

.toast.info {
    border-left-color: var(--warning);
}

.toast.show {
    left: calc(-350px - 1rem);
    opacity: 1;
}

.toast.hiding {
    left: 0;
    opacity: 0;
}

.toast-content p {
    margin: 0;
}

.close-toast {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: .5;
    transition: opacity .2s;
    color: inherit;
}

.close-toast:hover {
    opacity: 1;
}

/******************
QUEUE
******************/
#queue#queue {
    width: min(500px, calc(100vw - 2rem));
}

#queue > * {
    max-width: 100%;
}

.qtoggle {
    left: 0;
    border-radius: 4px 4px var(--radius-outer) 4px;
}

.qtoggle.expanded {
    left: var(--btn);
    width: min(calc(500px - var(--btn)), calc(100vw - 2rem - var(--btn)));
}

.qtoggle.saving .icon {
    background-color: var(--action-0);
    animation: spin .87s var(--trans-fn) infinite;
}

#queue .status-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-2);
}

#queue .status-actions .popup {
    position: absolute;
    z-index: -1;
    width: max-content;
    max-width: 300px;
    background-color: var(--action-50);
    color: var(--action-contrast);
    border-radius: var(--radius);
    padding: .25em .75em;
    top: 1rem;
    left: -100vw;
    transition: left var(--trans-base);
}

aside#queue .popup::before{
    content: '';
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
    background-color: var(--action-50);
    z-index: -1;
    left: -5px;
    position: absolute;
    top: calc(50% - 5px);
}

.expanded#queue .status-actions .popup.showing {
    left: calc(100% + 1em);
}

#queue .status-actions .popup.showing {
    left: calc(200vw + var(--btn_));
    max-width: 75vw;
}

/** BADGES **/
.refresh .countdown,
#queue .item .status,
.filter .count,
.qtoggle .count,
.qtoggle .indicator {
    z-index: var(--z-3);
    --offset: 0;
    position: absolute;
    top: var(--offset);
    background-color: rgba(var(--base-rgb),var(--op-3));
}

.expanded + .qtoggle .indicator,
.expanded + .qtoggle .count {
    --offset: .25rem;
}

/* Status indicator */
.qtoggle .indicator {
    right: var(--offset);
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
}

aside#queue.synced + .qtoggle .indicator {
    background-color: var(--success);
}

aside#queue.pending + .qtoggle .indicator {
    background-color: var(--warning);
    animation: pulse 2s infinite;
}

.refreshNow.fetching .icon,
aside#queue.pending:not(.expanded) + .qtoggle .icon {
    background-color: var(--action-0);
    animation: spin 1s var(--trans-fn) infinite;
}

/* Status count badge */

/*.refresh .countdown {*/
/*    --justify:center;*/
/*    --align: center;*/
/*    --offset: 0;*/
/*    left: .25rem;*/
/*    margin: 0 3px;*/
/*    border-radius: 50%;*/
/*    background-color: var(--base);*/
/*    width: 1em;*/
/*    height: 1em;*/
/*}*/
.refresh .countdown,
.qtoggle .count {
    --align: center;
    --justify: center;
    left: var(--offset);
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 4px;
    color: var(--contrast);
    border-radius: var(--radius);
    font-size: var(--txt-x-small);
}

#queue:has(.empty-queue) + .qtoggle .count {
    display: none;
}

aside#queue .header {
    padding: 15px;
    border-bottom: 1px solid var(--base-200);
    flex-shrink: 0;
    --height: max-content;
    width: 100%;
}

.qitems {
    flex: 1;
    width: 100%;
    overflow: hidden auto;
    overflow-anchor: none;
    padding: .5rem 2rem;
    --gap: .5rem;
}

.qitems .item {
    width: 100%;
}

.qitems button {
    --height: max-content;
}

aside#queue h3 {
    margin: 0;
    font-size: 16px;
    color: var(--contrast);
}

#queue .filters {
    padding: 1rem 0 0;
    width: 100%;
}
#queue .filters .btn + label {
    width: max-content;
    position: relative;
    height: var(--chip_);
    font-size: var(--txt-x-small);
    font-weight: var(--fw-h-light);
    box-shadow: var(--shdw-none);
}
#queue .filters label .count {
    width: 1em;
    height: 1em;
    position: absolute;
    top: -8px;
    right: -4px;
    background: var(--base-100);
    border-radius: 50%;
    z-index: 5;
}
#queue .filters label .count:empty {
    display: none;
}
#queue .failed .bar,
#queue .failed_permanent .bar {
    background-color: var(--error);
    opacity: .2;
}
#queue span.completed {
    margin-left: auto;
}

#queue .filters .filter {
    background-color: transparent;
    white-space: nowrap;
    font-size: var(--txt-x-small);
}

#queue .filters .filter.active {
    background: var(--base-200);
    border-color: transparent;
}

#queue .filter:hover,
#queue .filter:focus {
    background-color: var(--action-0);
    color: var(--action-contrast);
}

#queue .progress .row.btw {
    --justify: flex-end;
}
#queue .progress .details {
    font-size: var(--txt-small);
}

/* Filter count badge */
.filter .count {
    --offset: -8px;
    right: var(--offset);
    background: var(--base-200);
    color: var(--contrast-200);
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
}

.filter .count:empty {
    display: none;
}

/* Empty state */
.empty-queue {
    height: 100px;
    color: var(--contrast-200);
    font-size: var(--txt-x-small);
    font-style: italic;
}

.refresh .countdown:not(.counting),
aside#queue:has(.empty-queue) .refresh .count {
    display: none;
}

/* Queue items */
#queue .item {
    padding: 15px;
    background: var(--base-100);
    border-radius: var(--radius);
    transition: all .2s ease;
    box-shadow: var(--shdw-none);
}

#queue .item:hover {
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}

#queue .item .header {
    position: relative;
    padding: .25rem 0;
}

#queue .item .type {
    font-size: var(--txt-x-small);
}

#queue .item .status {
    --w: 1.3em;
    --gap: 0;
    --justify:center;
    --align: center;
    --offset: -1.2rem;
    aspect-ratio: 1;
    right: var(--offset);
    border-radius: 50%;
    color: var(--contrast-200);
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    width: 2em;
    height: 2em;
}


#queue .item .status.completed:hover {
    color: var(--contrast-200);
}

#queue .item button {
    font-size: 16px;
    padding: 0;
    line-height: 1;
    opacity: .5;
    min-height: 0;
    transition: opacity .2s;
}

#queue .item button:hover {
    opacity: 1;
}

/* Item details */
#queue .item .info {
    margin-top: 8px;
    font-size: var(--txt-x-small);
}

#queue .item .info .time {
    --gap: 7px;
    font-size: 10px;
}

/* Item actions */
#queue .item .actions {
    --gap: 8px;
    margin-top: 1rem;
}

#queue .item .actions button {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--base-200);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
    color: var(--contrast);
}

#queue .item .actions .retry {
    background-color: var(--secondary-200);
    color: var(--secondary-contrast);
}

#queue .item .actions button:hover {
    opacity: .9;
}

/* Queue actions footer */
.queue-actions {
    padding: .5rem 0;
    border-top: 1px solid var(--base-200);
    flex-shrink: 0;
}

.queue-actions button {
    --height: max-content;
    padding: .75rem;
    width: 100%;
    font-size: var(--txt-x-small);
}

/* Refresh area */
.status-actions > .refresh {
    position: relative;
    font-size: var(--txt-x-small);
}


.refreshNow {
    width: var(--btn);
    height: var(--btn);
}

.refreshNow:hover {
    background: var(--base-200);
    color: var(--contrast-200);
}

.icon.refresh {
    --w: 18px;
}

/**************************************************
DELAY
**************************************************/
.item-grid, #queue {
    counter-reset: delay-counter;
}

.item {
    counter-increment: delay-counter;
}

.item .progress .fill::after {
    --delay: calc(counter(delay-counter) * .1s);
}

/**************************************************
PROGRESS
**************************************************/
.progress .bar {
    height: 6px;
    display: block;
    border-radius: 6px;
    overflow: hidden;
    background: var(--base-200);
    position: relative;
}

.progress .fill {
    height: 100%;
    background: var(--action-0);
    border-radius: 6px;
    width: 0;
    transition: width .3s ease;
}

.progress .details {
    margin-top: 5px;
    font-size: var(--txt-x-small);
    color: var(--contrast);
    text-align: center;
    padding: .25rem 0;
}

.progress .details:empty {
    display: none;
}

.queued .fill::after,
.pending .fill::after,
.processing .fill::after,
.uploading .fill::after {
    --delay: 0s;
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .225) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2.5s infinite linear var(--delay);
}

/**************************************************
ACTIONS
**************************************************/
.additional-actions.additional-actions {
    padding: 0;
    background-color: transparent;
}

.additional-actions .buttons {
    position: fixed;
    bottom: var(--btn_);
    right: 1rem;
    margin: 0;
    --gap: 1rem;
    z-index: var(--z-6);
    width: fit-content;
}

.additional-actions .buttons button {
    height: var(--btn);
    width: var(--btn);
    background-color: rgba(var(--base-rgb),var(--op-4));
    color: var(--contrast);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}

.additional-actions .buttons button:hover {
    background-color: var(--action-0);
    color: var(--action-contrast);
}

.additional-actions .buttons button:disabled,
.additional-actions .buttons button:disabled:hover,
.additional-actions .buttons button:disabled:focus {
    opacity: .5;
    background-color: rgba(var(--base-rgb),var(--op-3));
    color: var(--contrast);
}

.additional-actions .buttons button:last-of-type {
    border-radius: 4px 4px 4px var(--radius-outer);
}

aside.left {
    transition: left var(--trans-base);
    left: var(--offScreen);
    border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
}

aside.left.expanded {
    left: 0;
}

aside.right {
    transition: right var(--trans-base);
    right: var(--offScreen);
    border-radius: var(--radius-outer) 0 0 var(--radius-outer);
}

aside.right.expanded {
    right: 0;
}

aside.right.expanded button.close {
    position: sticky;
    bottom: calc(var(--btn) * -1);
    left: 0;
    border-bottom-left-radius: var(--radius-outer);
    width: var(--btn);
    height: var(--btn);
}

.additional-actions .buttons:has(.expanded) button:not(.expanded) {
    display: none;
}

.additional-actions .buttons:has(.expanded){
    right: 0;
}
.additional-actions .buttons button {
    transition: right var(--trans-base), var(--trans-size);
}
.additional-actions .buttons .expanded {
    width: calc(min(500px, calc(100vw - 2rem)));
    background-color: var(--base);
}

.additional-actions .buttons button:hover,
.additional-actions .buttons .expanded:hover {
    background-color: var(--action-0);
    color: var(--action-contrast);
}

[type=submit] {
    width: 100%;
    height: var(--btn);
    background-color: var(--action-0);
    color: var(--action-contrast);
    box-shadow: var(--shdw-none);
    font-weight: bold;
}

[type=submit]:hover {
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    border: 2px solid var(--action-0);
    color: var(--action-0);
    background-color: var(--action-contrast);
}

aside nav.tabs {
    position: sticky;
    bottom: unset;
    top: 0;
    left: 0;
    right: 0;
}

aside .tab-content.active {
    padding: 1rem;
    min-height: 100%;
}

aside header h3 {
    font-size: var(--txt-medium);
    margin: 1rem 0;
    text-align: center;
}

aside header p {
    margin: .25rem 0;
    text-align: center;
}

aside h4 {
    font-size: var(--txt-x-small);
    margin: 1rem 0 0 0;
}

code {
    width: 100%;
    margin: .5rem;
    padding: .5rem;
    user-select: all;
    text-align: center;
    border-radius: 4px;
    background-color: var(--base-200);
    border: 1px solid var(--contrast-200);
}

.restore-form {
    background-color: rgba(var(--action-rgb), var(--op-3));
    border: 1px solid var(--action-200);
    padding: .5rem;
    border-radius: var(--radius-outer);
    margin: 1rem 2rem;
}

.restore-form h3 {
    text-align: center;
    margin: 1rem 0 0;
    font-size: var(--txt-medium);
}

.restore-form p {
    margin: .5rem 0;
}

.fstatus {
    z-index: var(--z-5);
    background-color: rgba(var(--base-rgb),var(--op-6));
    border-radius: 4px;
    padding: 0 .5rem;
    position: fixed;
    top: var(--btnbtn);
    right: 1rem;
    --w: 1em;
    box-shadow:var(--shdw);
    display:flex;
    flex-wrap: nowrap;
    gap: 1rem;
}
@media (min-width: 768px) {
    .fstatus {
        right:calc(var(--btn_) + 1rem);
        bottom: 0;
        top: unset;
    }
    body:has(.fixed.bottom) .fstatus {
        bottom: var(--btn_);
    }
}

.fstatus .spinner {
    display: none;
}

.fstatus.loading .spinner {
    display: inline-block;
}

.fstatus p {
    margin: 0;
    padding: .25rem;
}

/**************************************************
CALLOUT SECTIONS
**************************************************/
.callalt.callalt,
.callout.callout {
    padding: 2rem;
    margin: 0;
    max-width: none;
    grid-column: full;
}

@media (min-width: 768px){
    .callout.callout {
        padding: 2rem 20vw;
    }
}

.callout.callout {
    background-color: var(--action-0);
    color: var(--action-contrast);
}

.callalt.callalt {
    background-color: var(--secondary-0);
    color: var(--secondary-contrast);
}

.callalt :is(h1, h2, h3, h4, h5, h6),
.callout :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--body);
    font-weight: var(--fw-b-bold);
    margin: 1rem 0 0;
    width: 100%;
}

.callout a {
    background-color: var(--action-contrast);
    padding: 0 .125rem;
    border-radius: 4px;
}

.attn {
    animation: pulse-color 5s infinite;
    animation-delay: 1s;
}
.media-text > div,
.media-text figure {
    width: 100%;
    margin: 0;
}

@media (min-width:768px ){
    .media-text {
        --wrap: nowrap;
    }
}

.media-text > div {
    max-width: var(--content);
    margin: 0 auto;
    padding: 2rem;
}

.timeline.terms ul,
.timeline.terms {
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
    .timeline.terms ul {
        gap: 1rem;
    }

.timeline.terms > li {
    width: 100%;
}

@media (min-width: 768px) {
    .timeline.terms > li {
        width: 50%;
    }
}

/**********************************
GALLERY
**********************************/
dialog.gallery[open] {
    position: fixed;
    inset: 1rem;
    margin: 0;
    border: none;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    padding: 0;
    background: rgba(var(--base-rgb),var(--op-6));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backdrop-filter: blur(3px);
    z-index: var(--z-9);
    max-height: 100vh;
    max-width: 100vw;
}

.gallery .controls {
    order: 3;
    justify-content: flex-end;
    --height: 2rem;
}

.gallery .controls .cancel {
    order: 3;
}

dialog.gallery::backdrop {
    background: rgba(var(--base-rgb), var(--op-4));
}

dialog.gallery .wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

dialog.gallery .cancel:hover {
    background: rgba(var(--base-rgb),var(--op-4));
}

dialog.gallery .content {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

dialog.gallery .content .image {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    transition: transform 0.15s ease-out;
    touch-action: none;
}

dialog.gallery .image-left,
dialog.gallery .image-right {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

dialog.gallery details {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 600px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border-radius: 4px;
    overflow: hidden;
    z-index: 10;
}

dialog.gallery details summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    user-select: none;
}

dialog.gallery details[open] .item-info {
    padding: 1rem;
}

dialog.gallery .counter {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(var(--base-rgb),var(--op-4));
    color: var(--contrast);
    padding: 0.4rem 0.8rem;
    border-radius: 3px;
    font-size: 0.85rem;
    z-index: 10;
}

dialog.gallery .favourite {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}

dialog.gallery .image {
    opacity: 0;
    transition: opacity .2s ease, transform .15s ease-out;
}

dialog.gallery .image[src] {
    opacity: 1;
}

/**************************************************
REFERRAL SYSTEM
**************************************************/
.referral-reward-banner {
    background: var(--base-100);
    color: var(--action-0);
    border: 2px dashed var(--action-0);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.referral-reward-banner .icon {
    --w: 3rem;
}

.referral-reward-banner h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--contrast);
}

.check-code-btn {
    width: 100%;
    margin-top: 0.5rem;
    background: var(--base-100);
    color: var(--contrast-100);
    border: 1px solid var(--contrast-200);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.code-status {
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.code-status.loading {
    background: var(--base-200);
    color: var(--contrast-200);
}

.code-status.success {
    background: var(--successBack);
    color: var(--successText);
    border: 1px solid var(--successBack);
}

.code-status.error {
    background: var(--errorBack);
    color: var(--errorText);
    border: 1px solid var(--errorBack);
}

.referral-footer {
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid var(--base-200);
    margin-top: 1rem;
}

.referral-footer .text-link {
    color: var(--contrast-200);
    text-decoration: none;
    font-size: 0.875rem;
}

.referral-footer .text-link:hover {
    color: var(--action-0);
    text-decoration: underline;
}

.share-section {
    margin-bottom: 1.5rem;
}

.share-section h4 {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--contrast-200);
}

.copy-section {
    margin-bottom: 1.5rem;
}

.copy-section h4 {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--contrast-200);
}

.copy-group {
    --gap: 0 .5rem;
    margin-bottom: 0;
}
    .copy-group + .hint {
        margin: .25rem 1rem 1rem;
    }

.copy-target {
    flex: 1;
    padding: 0.75rem;
    background: var(--base-100);
    border: 1px solid var(--base-200);
    border-radius: 4px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: all;
}

.copy-btn {
    flex-shrink: 0;
    width: var(--chipchip);
    height: var(--chipchip);
    min-height: 0;
    padding: 0;
}
.copy-btn.success .icon-copy,
.copy-btn .icon-check-circle {
    display: none;
}
.copy-btn.success .icon-check-circle {
    display: inline-block;
}

.copy-btn.success {
    background: var(--successBack);
    color: var(--success);
}

.recent-referrals-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--contrast-200);
}

.recent-referrals-section h4 {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--contrast-200);
}

.recent-referrals-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.referral-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--base-100);
    border-radius: 4px;
    font-size: 0.875rem;
}

.referral-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.referral-info strong {
    color: var(--contrast-200);
}

.referral-date {
    font-size: 0.75rem;
}

.no-referrals,
.loading,
.message {
    text-align: center;
    padding: 1rem;
    color: var(--contrast-200);
    font-size: 0.875rem;
}

.stats-summary {
    margin-bottom: 1.5rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--base-200);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-row.highlight {
    background: var(--base-100);
    border-radius: 4px;
    border: 1px solid var(--base);
    font-weight: 600;
}

.stat-label {
    color: #666;
    font-size: 0.875rem;
}

.stat-value {
    color: #333;
    font-weight: 600;
    font-size: 1rem;
}

.stat-row.highlight .stat-value {
    color: var(--action-0);
    font-size: 1.25rem;
}

.view-dashboard-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem;
    background: var(--action-0);
    color: var(--action-contrast);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}
aside button:not(.button, .qtoggle),
aside a.button{
    position: relative;
    top: 0;
    box-shadow: var(--shdw-none);
    transition: top var(--trans-base), box-shadow var(--trans-base);
}

aside button:not(.button, .qtoggle, :disabled):hover,
aside a.button:hover {
    top: -4px;
    box-shadow: rgba(var(--contrast-rgb),var(--op-45)) var(--shdw-down);
}

.view-dashboard-btn:visited {
    color: var(--action-contrast);
}
.view-dashboard-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.success-content {
    padding: 2rem 1rem;
    text-align: center;
}

.success-content h3 {
    color: var(--success);
    margin-bottom: 1rem;
}

.success-content p {
    margin-bottom: 0.75rem;
    color: var(--base-200);
}

.success-content .hint {
    font-size: 0.875rem;
    color: var(--base-200);
    font-style: italic;
}

.code-status.loading::before {
/*.loading::before {*/
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--action-200);
    border-top: 2px solid var(--action-0);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.share-buttons-grid a {
    padding: 0;
    min-height: 0;
    width: var(--chipchip);
    height: var(--chipchip);
}
.share-buttons-grid a .icon {
    margin-right: 0;
}
@media (max-width: 768px) {
    .share-buttons-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .referral-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/***************
TOGGLE TEXT
***************/
.toggle-text input {
    display: none;
}

.toggle-text input + label {
    font-weight: normal;
    color: var(--contrast)!important;
    text-transform: none;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.toggle-text label::before,
.toggle-text label::after {
    display: none!important;
}

.toggle-text label {
    padding-left: 0!important;
}

.toggle-text input + label .text {
    position: relative;
    margin: 0;
    --gap: 0;
    font-weight: bold;
    width: fit-content;
    padding: 2px 4px;
    border: 1px solid var(--action-50);
    border-radius: 4px;
    color: var(--action-50)!important;
}

table .toggle-text input+label .text {
    color: var(--contrast)!important;
    border-color: var(--contrast);
}

.toggle-text:hover .text,
table .toggle-text:hover .text {
    background-color: var(--action-50);
    color: var(--light-0)!important;
    border-color: var(--action-50);
}

.toggle-text input + label .off,
.toggle-text input + label .on {
    transition: var(--trans-transform), opacity var(--trans-base);
}

.toggle-text input + label .off {
    opacity: 1;
    max-width: 100%;
    transform: none;
}

.toggle-text input + label .on {
    opacity: 0;
    max-width: 0;
    transform: translate3d(0, 100%, 0);
}

.toggle-text input:checked + label .off {
    opacity: 0;
    max-width: 0;
    transform: translate3d(0, -100%, 0);
}

.toggle-text input:checked + label .on {
    max-width: 100%;
    opacity: 1;
    transform: none;
}

/******************************************************************
TAXONOMY SELECTOR
******************************************************************/
.items-container {
    margin: 0;
    padding: 0;
    width: 100%;
}

details.create-term {
    margin-top: auto;
    width: 100%;
}
#jvb-selector .search-wrapper {
    margin-top: auto;
    width:100%;
}
.search-wrapper:not(.open) .search {
    margin-left: auto;
}
.search-wrapper + details.create-term {
    margin-top: 0;
}

details.create-term .field,
.create-term[open] summary {
    margin-bottom: 1rem;
}

details.create-term .field {
    max-width: 100%;
}

#jvb-selector > .wrap {
    --wrap: nowrap;
    --justify: flex-start;
}

#jvb-selector .items-wrap {
    width: 100%;
    padding: 1rem 0;
    border-top: 1px solid var(--base-200);
}

#jvb-selector .items-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
}
#jvb-selector li {
    list-style: none;
}
#jvb-selector li label {
    padding-left: 0!important;
}

/*.auto-wrapper {*/
/*    position: absolute;*/
/*    bottom: -105%;*/
/*    background-color: rgba(var(--base-rgb), var(--op-5));*/
/*    backdrop-filter: blur(2px);*/
/*    border-radius: var(--radius);*/
/*    z-index: 1;*/
/*}*/
.autocomplete-dropdown {
    width: 100%;
    background-color: var(--base-100);
    padding: .5rem;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
li.autocomplete {
    list-style: none;
    display: inline-flex;
    margin: 0.25rem;
    min-height: var(--chip);
}

.submit-term {
    gap: 0;
}
.submit-term strong {
    padding-right: 1rem;
}
.selected-items {
    width:100%;
    padding: .5rem;
    border-radius: var(--radius);
    background-color:var(--base);
    --justify: flex-start;
    --gap: .5rem;
    margin-bottom: .5rem;
}

.selected-items.selected-items:empty {
    padding:0;
    background-color:transparent;
    margin: 0;
}

.selected-item {
    padding: .25rem .5rem;
    margin: .125em;
    background: var(--base-100);
    border-radius: .25rem;
    font-size: var(--txt-medium);
    border: 1px solid var(--base-200);
    position: relative;
}
.remove-term.remove-term {
    min-height: 0;
    height: var(--chip);
    width: var(--chip);
    padding: 0;
    --w: .75em;
}

.clear-filters {
    margin-left: auto;
    border: 1px solid var(--base-200);
}
/**************************************************
ANIMATIONS
**************************************************/
/** ANIMATIONS **/
@keyframes shimmer {
    0% {
        left: -50%;
@@ -4062,13 +3757,13 @@

@keyframes pulse-color {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4);
        box-shadow: 0 0 0 0 rgba(var(--action-0), .4);
    }
    30% {
        box-shadow: 0 0 0 .75rem rgba(var(--action-rgb), 0);
        box-shadow: 0 0 0 .75rem rgba(var(--action-0), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0);
        box-shadow: 0 0 0 0 rgba(var(--action-0), 0);
    }
}

@@ -4107,3 +3802,8 @@
        transform: rotate(5deg) scale(1.1);
    }
}

/*.group {*/
/*    background-color: rgb(var(--base));*/
/*    margin: 1rem 0;*/
/*}*/