/*!
Theme Name: Jake Van Base Theme
Theme URI: https://jakevan.ca
Author: Jake Vanderwerf
Author URI: https://jakevan.ca
Description: A base theme for Jake Van clients
Requires at least: 6.4
Tested up to: 6.4
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
*/
/*************************************************************
VARIABLES
*************************************************************/
:root {
    /*****************************
    Layout
    *****************************/
    --half: min(384px, 17.5vw);
    --narrow: min(500px, 62.5vw);
    --content: min(768px, 65vw);
    --wider: min(900px, 75vw);
    --wide: min(1024px, 90vw);
    --full: 100vw;
    --offScreen: -200vw;

    /*****************************
    Sizing
    *****************************/
    --chip: 1.5rem;
    --chipchip: 3rem;
    --chip_: 2rem;
    --btn: 4rem;
    --btn_: 5rem;
    --btnbtn: 8rem;
    --maxHeight: calc(100vh - var(--btnbtn));

    /*****************************
    Flex
    *****************************/
    --dir: row;
    --justify: center;
    --align: center;
    --wrap: wrap;
    --gap: .5rem;

    /*****************************
    Typography
    *****************************/
    --w: 1.2em; /** For icons **/

    --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    --heading: 'Aleo', var(--font-base);
    --body: 'Josefin Slab', var(--font-base);
    --fw-h-light: 400;
    --fw-h: 900;
    --fw-h-bold: 900;
    --fw-b-light: 200;
    --fw-b: 400;
    --fw-b-bold: 700;

    --txt-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
    --txt-x-small: clamp(.95rem, .879rem + .19vw, 1.05rem);
    --txt-medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
    --txt-x-medium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
    --txt-large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
    --txt-x-large:clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
    --txt-xx-large: clamp(2rem, 1.286rem + 1.905vw, 3rem);
    --txt-xxx-large: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
    --txt-enormous: calc(26vh - 4rem);

    /*****************************
    Colours
    *****************************/
    --filter: grayscale(.3) sepia(.4);
    --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;

    --success: #22C55E;
    --successBack: #d4edda;
    --successText:#155724;
    --warning: #E8A737;
    --error: #EF4444;
    --errorBack: #f8d7da;
    --errorText: #721c24;

    --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%;

    --op-1: .05;
    --op-2: .15;
    --op-3: .25;
    --op-45: .45;
    --op-4: .66;
    --op-5: .75;
    --op-6: .85;

    /*****************************
    Shadows
    *****************************/
    --shdw-inset: inset 0 0 4px 1px;
    --shdw: 0 0 4px;
    --shdw-down: 0 6px 5px -5px;
    --shdw-right: 6px 0 5px -5px;
    --shdw-left: -6px 0 5px -5px;
    --shdw-up: 0 -6px 5px -5px;
    --shdw-subtle: 0 25px 20px -20px;
    --shdw-subtle-right: 10px 0 20px -20px;
    --shdw-none: transparent 0 0 0;

    /*****************************
    Stacking
    *****************************/
    --z-1: 5;
    --z-2: 10;
    --z-3: 15;
    --z-4: 20;
    --z-5: 50;
    --z-6: 100;
    --z-7: 999;
    --z-8: 1000;
    --z-9: 999999;
    --z-10: 9999999;

    /*****************************
    Rounding
    *****************************/
    --radius: 4px;
    --p-outer: 1rem;
    --radius-outer: calc(var(--radius) + var(--p-outer));
    --p-y: var(--sp1);
    --p-x: var(--sp1);
    /*****************************
    Transitions
    *****************************/
    --trans-fn: cubic-bezier(.47,.24,.07,.47);
    --trans-t: .25s;
    --trans-base: var(--trans-t) var(--trans-fn);
    --trans-color: background-color var(--trans-base),
    color var(--trans-base), border var(--trans-base);
    --trans-transform: transform var(--trans-base);
    --trans-size: width var(--trans-base),
    height var(--trans-base),max-width var(--trans-base), max-height var(--trans-base);
    --trans-vis: opacity var(--trans-base);

    /*****************************
    Spacing
    *****************************/
    --sp1: clamp(0.5rem, 0.714vw + 0.321rem, 1rem);      /* 8px → 16px */
    --sp2: clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem);   /* 12px → 24px */
    --sp3: clamp(1rem, 1.429vw + 0.643rem, 2rem);        /* 16px → 32px */
    --sp4: clamp(1.5rem, 2.143vw + 0.964rem, 3rem);      /* 24px → 48px */
    --sp5: clamp(2rem, 2.857vw + 1.286rem, 4rem);        /* 32px → 64px */
    --sp6: clamp(3rem, 4.286vw + 1.929rem, 6rem);        /* 48px → 96px */
    --sp7: clamp(4rem, 5.714vw + 2.571rem, 8rem);        /* 64px → 128px */

    /*****************************
    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-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>');
    --link: 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="M238,88.18a52.42,52.42,0,0,1-15.4,35.66l-34.75,34.75A52.28,52.28,0,0,1,150.62,174h-.05A52.63,52.63,0,0,1,98,119.9a6,6,0,0,1,6-5.84h.17a6,6,0,0,1,5.83,6.16A40.62,40.62,0,0,0,150.58,162h0a40.4,40.4,0,0,0,28.73-11.9l34.75-34.74A40.63,40.63,0,0,0,156.63,57.9l-11,11a6,6,0,0,1-8.49-8.49l11-11a52.62,52.62,0,0,1,74.43,0A52.83,52.83,0,0,1,238,88.18Zm-127.62,98.9-11,11A40.36,40.36,0,0,1,70.6,210h0a40.63,40.63,0,0,1-28.7-69.36L76.62,105.9A40.63,40.63,0,0,1,146,135.77a6,6,0,0,0,5.83,6.16H152a6,6,0,0,0,6-5.84A52.63,52.63,0,0,0,68.14,97.42L33.38,132.16A52.63,52.63,0,0,0,70.56,222h0a52.26,52.26,0,0,0,37.22-15.42l11-11a6,6,0,1,0-8.49-8.48Z"></path></svg>');
}


body:has(#theme-switcher:checked){
    /*****************************
    Colours
    *****************************/
    --mixBlendMode: lighten;
    --coverBlend: multiply;
    --coverIndex: 0;

    --action-50: #cb3933;
    --action-100: #d14c47;
    --action-200: #d6605c;

    --secondary-50: #ebb14e;
    --secondary-100: #edbb65;
    --secondary-200: #f0c57c;

    --contrast: var(--light-0);
    --contrast-50: var(--light-50);
    --contrast-100: var(--light-100);
    --contrast-200: var(--light-200);
    --contrast-rgb: 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);

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

    --shimmer: rgba(var(--c),0) 0%,
    rgba(var(--c),.05) 50%,
    rgba(var(--c),0) 100%;
}
/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
@layer reset {
    html {
        color-scheme: light dark;
        font:
                clamp(1rem, 1rem + 0.5vw, 2rem) / 1.4 system-ui,
                sans-serif;
        tab-size: 2;
        hanging-punctuation: first allow-end last;
        word-break: break-word;
    }

    body {
        margin: 0;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    h1,
    h2 {
        font-weight: 900;
        letter-spacing: -0.02rem;
    }
    h1,
    h2,
    h3 {
        line-height: 1.1;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 /* FUTURE :heading */ {
        text-wrap: balance;
        margin-block-start: 0;
    }

    p,
    li,
    dd {
        text-wrap: pretty;
        max-inline-size: 88ch;
    }

    a {
        color: oklch(0.68 0.17 228);
        text-underline-offset: 2px;
        &:not(:is(:hover, :focus)) {
            text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
        }
    }

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sub {
        inset-block-end: -0.25em;
    }
    sup {
        inset-block-start: -0.5em;
    }

    ul,
    ol,
    dl {
        margin: 0;
        padding: 0;
        list-style: outside;
        ul,
        ol,
        dl {
            padding-inline-start: 2ch;
        }
    }
    li {
        padding-bottom: .5rem;
    }

    img,
    video,
    iframe {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
        border-style: none;
    }

    figure {
        inline-size: fit-content;
        margin-inline: auto;
    }
    figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    figcaption {
        contain: inline-size;
        font-size: 90%;
    }

    input,
    select,
    textarea,
    button {
        font: inherit;
        /* FUTURE: appearance: base; */
    }
    label {
        display: block;
    }
    input:not(
    :where(
      [type="submit"],
      [type="checkbox"],
      [type="radio"],
      [type="button"],
      [type="reset"]
    )
  ) {
        inline-size: 100%;
    }
    button,
    input:where(
    [type="submit"],
    [type="reset"],
    [type="button"]
  ) {
        background: CanvasText;
        color: Canvas;
        border: 1px solid transparent;
    }
    textarea {
        field-sizing: content;
        min-block-size: 5lh;
        inline-size: 100%;
        max-inline-size: 100%;
    }

    pre,
    code,
    kbd,
    samp {
        font-family: ui-monospace, SFMono-Regular, monospace;
    }

    svg {
        fill: currentColor;
    }

    [aria-disabled="true" i],
    [disabled] {
        cursor: not-allowed;
    }
    [hidden] {
        display: none !important;
    }
    [disabled],
    label:has(input[disabled]) {
        opacity: 0.5;

        [disabled] {
            opacity: 1;
        }
    }

    pre {
        white-space: pre-wrap;
        background: CanvasText;
        color: Canvas;
        padding: 1.5rem;
    }

    hr {
        border-style: solid;
        border-width: 1px 0 0;
        color: inherit;
        height: 0;
        overflow: visible;
        margin-block: 2.5rem;
    }

    :target {
        scroll-margin: 3rlh;
    }

    table {
        caption-side: bottom;
        border-collapse: collapse;
        td {
            font-size: 90%;
        }
        td,
        th {
            word-break: normal;
            border: 1px solid gray;
            padding: 0.5rem;
        }
    }
    [role="region"][aria-labelledby][tabindex] {
        overflow: auto;
    }
    caption {
        font-size: 90%;
    }

    .screen-reader-text:not(:focus):not(:active) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    :focus-visible {
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: no-preference) {
        @view-transition {
            navigation: auto;
        }

        html {
            interpolate-size: allow-keywords;
            &:focus-within {
                scroll-behavior: smooth;
            }
        }
    }
}

/*************************************************************
SCROLLBAR
*************************************************************/
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* For WebKit browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
    width: var(--sb-width);
    height: var(--sb-width);
}

::-webkit-scrollbar-track {
    background: var(--sb-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb);
    border-radius: var(--sb-radius);
    border: var(--sb-thumb-border);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hover);
}

/*************************************************************
BASE
*************************************************************/
body {
    background-color: var(--base-50);
    color: var(--contrast);
    margin: 0;
    font-family: var(--body);
    font-weight: var(--fw-b);
    font-size: var(--txt-medium);
    line-height: 1.4;
    position: relative;
    max-width: 100vw;
}
body,
body * {
    transition: var(--trans-color)
}
/*************************************************************
LAYOUT
*************************************************************/
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

@media(prefers-reduced-motion){
    html {
        scroll-behavior: unset;
    }
    * {
        transition: none!important;
        animation: none!important;
    }
}
/*body:has(aside.expanded),*/
/*body:has(nav.open:not(.drawer)),*/
/*body:has(dialog[open]),*/
/*body.loading {*/
/*    overflow: hidden;*/
/*    max-height: 100vh;*/
/*}*/

main {
    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];
    min-height: var(--maxHeight);
}
main > * {
    grid-column: content;
}
main > section {
    padding: 3rem 0;
    grid-column: full;
}
main > section > * {
    width: 100%;
    max-width: var(--content);
    margin: var(--sp1) auto;
}
main > section > ul {
    max-width: var(--narrow);
}

/* Nested items can use any width */
main .align-narrow {
    grid-column: narrow;
}

main .align-content {
    grid-column: content;
}

main .align-wider {
    grid-column: wider;
}

main .align-wide {
    grid-column: wide;
}

main .align-full {
    grid-column: full;
    width: 100%;
    max-width: none;
}

/* First child has no top spacing */
main > *:first-child {
    margin-top: 0;
}

.wp-site-blocks > header {
    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);
    transition: top var(--trans-base);
}
header a[rel="home"] {
    display: flex;
    align-items: center;
    max-height:var(--btn);
    overflow:hidden;
}
.scroll-progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: var(--z-3);
    background-color: var(--base-200);
    overflow: hidden;
}

.scroll-progress .bar {
    width: 100%;
    height: 1px;
    transform-origin: left center;
    transform: scaleX(0);
    background: var(--action-0);
}

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

body:has(nav.fixed.bottom,nav.on-this-page) footer {
    padding-bottom: var(--btn_);
}
@media (min-width:768px) {
    footer {
        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);
}

/***********************
PRE/SUB HEADER
***********************/
aside.header,
aside.footer {
    padding: 0 1rem;
    font-size: var(--txt-x-small);
    z-index: var(--z-7);
    background-color: 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:var(--base-50);
    padding: 1rem;
    border-top: 1px solid 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;
    font-weight: var(--fw-h);
    line-height: 1.3;
    margin: 1.5em auto .25em;
    width: 100%;
}
:is(h1,h2,h3,h4,h5,h6), p {
    width: 100%;
}

:is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
    font-weight: var(--fw-h-bold);
    letter-spacing: 2px;
}

:is(h1, h2, h3, h4, h5, h6) small {
    display: block;
    line-height: .8;
    font-family: var(--body);
    font-size: .5em;
}
:is(h1, h2, h3, h4, h5, h6) small :is(b, strong) {
    font-weight: var(--fw-b-bold);
}

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

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

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

h1 small + small {
    display: inline-block;
    font-size: var(--txt-large);
    margin-right: .5rem;
}

h2 { font-size: var(--txt-xx-large); }
h3 { font-size: var(--txt-x-large); }
h4 {
    font-weight: 400;
    font-size: var(--txt-large);
}
h5, h6 {
    font-weight: 400;
    font-size: var(--txt-medium);
}

p {
    line-height: 1.6;
}

.hint {
    line-height: 1.2;
    font-style: italic;
    font-size: var(--txt-small);
}

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

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

/*****************************************************
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;
}

/** 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;
}

.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;
}
/*******************************************************
LISTS
*******************************************************/
ol {
    list-style-type: decimal;
}

ul.terms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
    ul.terms li {
        list-style: none;
    }
.term-list li {
    list-style: none;
}
    .term-list a {
        display: inline-flex;
        width: max-content;
    }
/******************************************************
UTILITY
******************************************************/
.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); }

.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }

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

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

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

.w-full{
    width: 100%;
}
@media (min-width: 768px){
    .width-50 {
        width: calc(50% - .3em);
    }
    .width-25 {
        width: calc(25% - .3em);
    }
    .width-75 {
        width: calc(75% - .3em);
    }
}
/** 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);}
.p-4 {padding: var(--sp4);}
.p-5 {padding: var(--sp5);}
.p-6 {padding: var(--sp6);}
.p-7 {padding: var(--sp7);}

.px-1 {padding-left: var(--sp1);padding-right: var(--sp1);}
.px-2 {padding-left: var(--sp2);padding-right: var(--sp2);}
.px-3 {padding-left: var(--sp3);padding-right: var(--sp3);}
.px-4 {padding-left: var(--sp4);padding-right: var(--sp4);}
.px-5 {padding-left: var(--sp5);padding-right: var(--sp5);}
.px-6 {padding-left: var(--sp6);padding-right: var(--sp6);}
.px-7 {padding-left: var(--sp7);padding-right: var(--sp7);}

.py-1 {padding-top: var(--sp1);padding-bottom: var(--sp1);}
.py-2 {padding-top: var(--sp2);padding-bottom: var(--sp2);}
.py-3 {padding-top: var(--sp3);padding-bottom: var(--sp3);}
.py-4 {padding-top: var(--sp4);padding-bottom: var(--sp4);}
.py-5 {padding-top: var(--sp5);padding-bottom: var(--sp5);}
.py-6 {padding-top: var(--sp6);padding-bottom: var(--sp6);}
.py-7 {padding-top: var(--sp7);padding-bottom: var(--sp7);}

.pt-1 { padding-top: var(--sp1); }
.pr-1 { padding-right: var(--sp1); }
.pl-1 { padding-left: var(--sp1); }
.pb-1 { padding-bottom: var(--sp1); }
.pt-2 { padding-top: var(--sp2); }
.pr-2 { padding-right: var(--sp2); }
.pl-2 { padding-left: var(--sp2); }
.pb-2 { padding-bottom: var(--sp2); }
.pt-3 { padding-top: var(--sp3); }
.pr-3 { padding-right: var(--sp3); }
.pl-3 { padding-left: var(--sp3); }
.pb-3 { padding-bottom: var(--sp3); }
.pt-4 { padding-top: var(--sp4); }
.pr-4 { padding-right: var(--sp4); }
.pl-4 { padding-left: var(--sp4); }
.pb-4 { padding-bottom: var(--sp4); }
.pt-5 { padding-top: var(--sp5); }
.pr-5 { padding-right: var(--sp5); }
.pl-5 { padding-left: var(--sp5); }
.pb-5 { padding-bottom: var(--sp5); }
.pt-6 { padding-top: var(--sp6); }
.pr-6 { padding-right: var(--sp6); }
.pl-6 { padding-left: var(--sp6); }
.pb-6 { padding-bottom: var(--sp6); }
.pt-7 { padding-top: var(--sp7); }
.pr-7 { padding-right: var(--sp7); }
.pl-7 { padding-left: var(--sp7); }
.pb-7 { padding-bottom: var(--sp7); }

/** MARGIN **/
.m-0 {margin: 0;}
.m-1 {margin: var(--sp1);}
.m-2 {margin: var(--sp2);}
.m-3 {margin: var(--sp3);}
.m-4 {margin: var(--sp4);}
.m-5 {margin: var(--sp5);}
.m-6 {margin: var(--sp6);}
.m-7 {margin: var(--sp7);}

.mx-1 {margin-left: var(--sp1);margin-right: var(--sp1);}
.mx-2 {margin-left: var(--sp2);margin-right: var(--sp2);}
.mx-3 {margin-left: var(--sp3);margin-right: var(--sp3);}
.mx-4 {margin-left: var(--sp4);margin-right: var(--sp4);}
.mx-5 {margin-left: var(--sp5);margin-right: var(--sp5);}
.mx-6 {margin-left: var(--sp6);margin-right: var(--sp6);}
.mx-7 {margin-left: var(--sp7);margin-right: var(--sp7);}

.my-1 {margin-top: var(--sp1);margin-bottom: var(--sp1);}
.my-2 {margin-top: var(--sp2);margin-bottom: var(--sp2);}
.my-3 {margin-top: var(--sp3);margin-bottom: var(--sp3);}
.my-4 {margin-top: var(--sp4);margin-bottom: var(--sp4);}
.my-5 {margin-top: var(--sp5);margin-bottom: var(--sp5);}
.my-6 {margin-top: var(--sp6);margin-bottom: var(--sp6);}
.my-7 {margin-top: var(--sp7);margin-bottom: var(--sp7);}

.mt-1 { margin-top: var(--sp1); }
.mr-1 { margin-right: var(--sp1); }
.ml-1 { margin-left: var(--sp1); }
.mb-1 { margin-bottom: var(--sp1); }
.mt-2 { margin-top: var(--sp2); }
.mr-2 { margin-right: var(--sp2); }
.ml-2 { margin-left: var(--sp2); }
.mb-2 { margin-bottom: var(--sp2); }
.mt-3 { margin-top: var(--sp3); }
.mr-3 { margin-right: var(--sp3); }
.ml-3 { margin-left: var(--sp3); }
.mb-3 { margin-bottom: var(--sp3); }
.mt-4 { margin-top: var(--sp4); }
.mr-4 { margin-right: var(--sp4); }
.ml-4 { margin-left: var(--sp4); }
.mb-4 { margin-bottom: var(--sp4); }
.mt-5 { margin-top: var(--sp5); }
.mr-5 { margin-right: var(--sp5); }
.ml-5 { margin-left: var(--sp5); }
.mb-5 { margin-bottom: var(--sp5); }
.mt-6 { margin-top: var(--sp6); }
.mr-6 { margin-right: var(--sp6); }
.ml-6 { margin-left: var(--sp6); }
.mb-6 { margin-bottom: var(--sp6); }
.mt-7 { margin-top: var(--sp7); }
.mr-7 { margin-right: var(--sp7); }
.ml-7 { margin-left: var(--sp7); }
.mb-7 { margin-bottom: var(--sp7); }

/******************************************************************
LAYOUT UTILITIES
******************************************************************/
/** 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,
.col {
    display: flex;
    justify-content: var(--justify);
    align-items: var(--align);
    gap: var(--gap);
    flex-wrap: var(--wrap);
    flex-direction: var(--dir);
    --align: center;
    --justify: center;
    --gap: .5rem;
    --wrap: wrap;
}

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

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

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

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

.col.btw,
.row.btw {
    --justify: space-between;
    width: 100%;
}

.col.even,
.row.even { --justify: space-evenly; }

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

.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; }
.btm-right { bottom: 0; right: 0; }
.btm-left { bottom: 0; left: 0; }
.edges { inset: 0; }

.hidden {
    transform: scale(0);
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: var(--trans-transform), var(--trans-size);
}

.visible {
    transform: scale(1);
    max-width: 100%;
    max-height: 100%;
    transition: var(--trans-transform), var(--trans-size);
}

/******************************************************************
THEME SWITCHER
******************************************************************/
.field .switch {
    display: inline-flex;
}
.switch .slider {
    --trans-t: .0125s;
    position: relative;
    width: var(--chipchip);
    height: var(--chip);
    background-color: var(--base-200);
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 4px solid transparent;
    box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .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: 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-rgb), .125);
    }
    .switch :checked ~ .slider::before {
        transform: translateX(1.5rem);
        box-shadow: 0 0 .25rem 3px rgba(var(--base-rgb), .25);
    }
    .switch :checked ~ .slider {
        background-color: var(--action-0);
    }

    .switch :active ~ .slider::before {
        transform: translateX(0);
    }
    #theme-switch {
        z-index: var(--z-6);
        margin: 0;
        --wrap: nowrap;
        --gap: 1rem;
    }
        #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: var(--action-0);
}

/************************************************
GRIDS/ROWS/TABLES
************************************************/
/** GRID VIEW (default) **/
.item-grid{
    --columns: repeat(2, 1fr);
    display: grid;
    grid-template-columns: var(--columns);
    gap: 10px;
}
    .item-grid .empty {
        height: 15vh;
        background-color: var(--base-50);
        border-radius: var(--radius);
        border: 2px dashed 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 .item {
    border-radius: var(--radius-outer);
    filter: none;
    position: relative;
}
    .item-grid .item .item-actions {
        --gap: .125rem;
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        width: calc(100% - var(--btn));
    }
        .item-actions button,
        .item-actions .btn + label {
            min-height: var(--chipchip);
            width: var(--chipchip);
            z-index: var(--z-1);
        }
.item-grid .item .images,
.item-grid .item .images a {
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
    display: flex;
}
.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 {
        aspect-ratio: unset;
        align-items: flex-start;
        border-radius: var(--radius);
        padding: 1rem 0;
    }
    .list-view .item:nth-of-type(even) {
        background-color: var(--base);
    }
    .list-view img {
        width: 20%;
    }
    .item.col {
        --wrap: nowrap;
    }

.empty-state {
    --w: 1.2em;
    grid-column: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 1rem auto;
    max-width: 66%;
    background-color: var(--base-100);
    border: 2px dashed var(--base-50);
    padding: 1rem;
}

/***********************************************
TABLES
***********************************************/
table {
    white-space: nowrap;
    width: 100%;
    display: block;
    margin: 0 0 2rem;
    border-radius: 4px;
    height: var(--maxHeight);
    overflow: auto;
    position: relative;
}

thead,tfoot {
    position: sticky;
    z-index: 10;
    background-color: var(--base);
    text-transform: uppercase;
    padding: .5rem 0;
    line-height: 2;
    font-weight: normal;
}

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

tfoot th {
    vertical-align: middle;
}

tfoot th:first-of-type {
    text-align: right;
}

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

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

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

thead {
    top: 0;
}

tfoot {
    bottom: 0;
}

thead th {
    width: max-content;
}

th p {
    margin: 0!important;
}

td {
    width: max-content;
    padding: .5rem 1rem;
}

td .toggle input[type=checkbox] {
    margin: 0;
}

td .field {
    margin: .25rem 0;
}

td[data-id="actions"] label {
    margin: 0;
    padding: 0;
}

td .description {
    display: none;
}

td input[type=text] {
    width: fit-content;
    max-width: 40vw;
    padding: .25em!important;
    font-size: var(--txt-x-small)!important;
}

tbody tr {
    border: 2px solid transparent;
}

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

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

tbody [data-stuck] {
    z-index: 5;
}

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

/***********************************************
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: 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;
    position: relative;
    box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
}
button.outline,
[type=submit].outline,
a.btn.outline,
.filters .btn + label,
.buttons .outline a {
    --color: var(--contrast);
    background-color: transparent;
    color: var(--color);
    border: 1px solid var(--color);
}

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: var(--action-0);
    color: var(--action-contrast);
    box-shadow: var(--shdw-none);
}

    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: var(--action-0);
        color: var(--action-contrast);
        border-color: 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: var(--base-200);
    color: var(--contrast-200);
}

[type=submit] {
    margin: 1rem 0;
}

.filters .btn + label,
.filters button {
    min-height:var(--chip);
}
.filters .btn + label {
    background-color: var(--base-100);
    border: 1px solid var(--base-200);
    color: var(--contrast-200);
}
    .filters .btn:checked + label {
        border-color: var(--contrast);
        color: 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-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);
}
    .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-rgb),var(--op-6));
        color: 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-rgb),var(--op-3));
            color: 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: var(--base-50);
        color: var(--contrast);
    }
        .main .m-actions .refresh:hover,
        .main .m-actions .refresh:focus {
            background-color: var(--action-0);
            color: var(--action-contrast);
        }
        .main .refresh .indicator {
            background-color: rgba(var(--base-rgb), 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_));
}
/******************************************************************
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;
}

[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;
}

.field:is(.radio,.checkbox,.true-false) label {
    top: unset;
    left: unset;
    padding: 0 0 0 var(--chip);
    display: inline-flex;
    border: 1px solid var(--base-200);
    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: var(--action-0);
    }

    [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 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 var(--contrast-200);
            background-color: transparent;
            border-radius: var(--radius);
        }
            [type=radio] + label::before {
                border-radius: 50%;
            }

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

        [type=radio]:checked + label::before {
            background-color: var(--action-0);
            box-shadow: rgba(var(--base-rgb), 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: var(--contrast);
    padding: var(--p-y) var(--p-x);
    border-radius: var(--radius);
    background-color: var(--base);
    outline: 0;
    border: 1px solid var(--base-100);
    border-bottom: 2px solid 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: var(--action-50);
    background-color: var(--base-100);
    color: var(--contrast);
}
textarea::placeholder,
input::placeholder {
    font-family: var(--body);
    color: var(--base-200);
}

.field > label {
    position: relative;
    z-index: var(--z-1);
    display:inline-block;
    top: .75em;
    left: 1em;
    padding: 0 .5em;
    background-color: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:var(--action-0);
    color: var(--action-contrast);
    border-radius: 4px;
}

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

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

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

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

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

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

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

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

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

.search-container .clear-search {
    opacity: 0;
    cursor: default;
}

.search-container .icon.search {
    padding: 4px 8px;
    color: 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: var(--base-100);
    border-radius: var(--radius);
    box-shadow: rgba(var(--base-rgb), 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: 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: var(--base-200);
    position: relative;
}

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

.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);
}
/**************************************************************
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 {
        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 {
            content: '';
            position: absolute;
            right: .5rem;
            top: .5rem;
            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]:not(.all-filters) > summary::after {
                background-color: 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: var(--base-200);
}
/********************************************************
OVERLAYS
********************************************************/
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;
}
/** DIALOG **/
dialog[open] {
    z-index: var(--z-10);
    --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:is(.create,.edit,.bulkEdit)[open] {
        width: 98vw;
        max-height: 98vh;
        top: 1vh;
    }
    dialog > .wrap {
        max-height: var(--maxHeight);
        overflow: hidden auto;
        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: var(--action-100);
        box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
    }
    .m-actions button {
        --wrap: nowrap;
        box-shadow: none;
        width: 100%;
        background-color: var(--action-0);
        color: 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: 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;
    }

.restore-uploads .item-grid.group .field.group,
.restore-uploads .upload-group .selection-actions {
    display: none;
}
.upload-group .item-grid.group {
    grid-template-columns: repeat(2, 1fr);
}
.restore-uploads .item-grid.group {
    grid-template-columns: repeat(3, 1fr);
}
/*** 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: var(--action-0);
            color: 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 var(--base-200);
        }
            nav.share ul,
            nav.share li,
            nav.share a {
                height: var(--chipchip);
            }
            nav.share a:hover {
                background-color: var(--action-0);
                color: 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 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: var(--success);
    }

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

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

.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;
}

.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: var(--base);
    border: 1px solid var(--contrast);
    width: 1.75em;
    height: 1.75em;
    padding: .3em;
}

.main > .header {
    border-bottom: 1px solid 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 var(--base-200);
}
.queue-actions button {
    width: 100%;
}

.main .item {
    background-color: 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 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: 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;
}
/********************************************************
WP BLOCKS
********************************************************/
/** COVER **/
.cover {
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    padding: var(--btn);
}
    .cover::before {
        content: '';
        z-index: var(--coverIndex);
        background-color: var(--action-0);
        mix-blend-mode: var(--coverBlend);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

.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;
}
/** QUERY **/
.loop .item-grid {
    grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
    .loop .item-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/** TODO: LIST OVERRIDES **/
/*********************************************************
DIRECTORY
*********************************************************/
.directory-list > ul {
    max-width: none;
}
.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: var(--base);
    text-shadow: 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: 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: var(--base-100);
    }
    .directory-list ul li:nth-of-type(even) ul li:nth-of-type(even) {
        background-color: 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
******************************************************************/
dialog.loading {
    opacity: 0;
}

dialog.loading[open] {
    opacity: 1;
    width: 100vw;
    height: 100vh;
    display: flex;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
    --w: 3em;
    justify-content: center;
    align-items: center;
    inset: 0;
}

dialog.loading[open]@starting-style {
    opacity: 0;
}

dialog.loading[open] > .col {
    height: fit-content;
    width: min(400px, 60vw);
    border-radius: var(--radius-outer);
    background-color: rgba(var(--base-rgb),var(--op-4));
    padding: 2rem;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    position: relative;
}

dialog.loading[open] .spinner {
    position: absolute;
    top: 1rem;
    width: 5rem;
    height: 5rem;
    border-width: 0;
    border-top-width: 4px;
    animation: spin 1s var(--trans-fn) infinite;
}

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

dialog.loading[open] i.icon {
    animation: dance 2s ease-in-out infinite;
}

dialog.loading[open] h3 {
    color: var(--contrast);
    margin: 2rem 1rem auto !important;
    font-size: var(--txt-large);
    width: -moz-fit-content;
    width: fit-content;
}

dialog.loading[open] p {
    margin: .5rem auto;
}

dialog.loading[open]::after {
    animation: shimmer 3s ease-in-out infinite;
    background: linear-gradient(90deg, var(--shimmer));
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
}

.spinner {
    width: 12px;
    height: 12px;
    border: 2px solid transparent;
    border-top: 2px solid var(--action-50);
    border-radius: 50%;
    animation: spin 1s var(--trans-fn) infinite;
}

/** ANIMATIONS **/
@keyframes shimmer {
    0% {
        left: -50%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: -50%;
    }
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dance {
    0%, 100% {
        transform: rotate(-5deg) scale(1);
    }
    50% {
        transform: rotate(5deg) scale(1.1);
    }
}