=Complete css overhaul

Jake Vanderwerf

2026-05-11 7d930f88d932fb7207e32c570b0eced34c429295

=Complete css overhaul

 all.css

Diff too large

 allBackup.css

Diff too large

 dash.css

@@ -1,342 +1,265 @@
:target {
    outline: none!important;
    padding: 0!important;
header > a {
    margin: 0 auto;
}
.dashboard .qtoggle {
    left: 0;
    bottom: 0;
}
.dashboard > header {
    justify-content: flex-end;

nav.sidebar {
    position: fixed;
}
.dashboard > header img {
    width: var(--btn);
}
.dashboard h1:first-of-type {
    margin-top: 4rem!important;
}
nav.dashboard-nav,
nav.dashboard-nav ul {
    --dir: row;
}
nav.dashboard-nav ul {
    touch-action: pan-x;
    overflow: auto hidden;
}
main > footer {
    /*max-width: 100%!important;*/
    /*position: fixed;*/
    /*z-index: var(--z-7);*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*width: 100%;*/
    /*margin: 4rem 0 0 0!important;*/
    /*height: var(--btn);*/
    /*padding: 0!important;*/
    /*background-color: var(--base);*/
    /*box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/
    padding: 0;
}
main>* {
    max-width: min(768px, 90vw)!important;
    margin: 0 auto!important;
}
main h1 {
    margin: 0!important;
    font-size: var(--txt-large);
}

.item-grid .item {
    position: relative;
}
img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.replace.replace {
    grid-column: full;
    padding: 0 var(--btn_) var(--btnbtn);
    max-width: none!important;
    margin: 0!important;
}
.replace .dashboard-page {
    max-width: var(--wide);
}
.group-display .item-grid {
    grid-template-columns: repeat(2, 1fr);
}
/********************************************
GRID VIEW
********************************************/
.item-grid {
    margin-bottom: 4rem;
}
.item-grid:has(.select-item:checked) .item {
    padding: .75rem;
    opacity : .8;
    filter: var(--filter);
}
.item-grid .item:has(.select-item:checked) {
    padding: .5rem;
    filter: none;
    opacity: 1;
    background-color: var(--action-0);
}

.grid-view .item > input[type=checkbox]:not(.label-button) + label {
    padding-left: 0;
    margin: 0;
}
.grid-view .item > input[type=checkbox] + label::before {
    transform: unset;
    top: .5rem;
    left: .5rem;
}
.grid-view .item > input[type=checkbox] + label::after {
    top: .5rem;
    left: .75rem;
    transform: translateY(20%) rotate(45deg);
}

.grid-view .item .item-actions {
    top: var(--btn);
    bottom: 0;
    right: 0;
}
.item-actions button {
    min-height: 0;
    width: var(--chipchip);
    height: var(--chipchip);
    background-color: rgba(var(--base-rgb), var(--op-45));
}
    .item-actions button:hover {
        background-color: var(--base);
    }

.list-view h3,
.list-view p {
    margin: 0!important;
}
.list-view h3 {
    font-size: var(--txt-medium);
}

@media (min-width: 768px) {
    .grid-view {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}
@media (max-width: 768px) {
    .bulk-controls.bulk-controls.nowrap {
        --wrap: wrap;
    }
}
.bulk-controls {
    margin: 1rem 0;
}
.bulk-controls .selected-count {
    font-weight: normal;
    font-size: var(--txt-small);
    text-transform: none;
    font-style: italic;
    display: flex;
    gap: .25rem;
    margin-left: 2rem;
}
.selected-count::before {
    content: '{';
}
.selected-count::after {
    content: '}';
}

.bulk-edit-form .selected {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 4px;
}
.selected label {
    padding: .5rem;
    opacity: .6;
    filter: var(--filter);
    border: 2px solid transparent;
    transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base);
}
.selected label:has(:checked) {
    border-color: var(--action-0);
    padding: 0;
    opacity: 1;
    filter: none;
    transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base);
}
/******************************************************
TABLE VIEW
******************************************************/
form.table label.select-item,
form.table img {
    width: 6rem;
    height: 6rem;
}
form.table .item-grid.preview {
    margin: 0;
}

td p {
    width: max-content;
}

/* Dragging state */
.timeline-point.is-dragging {
    opacity: 0.4;
    position: relative;
}

/* Drop indicators with gap */
.timeline-point.drop-above {
    position: relative;
}

.timeline-point.drop-above::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--action-0);
    border-radius: 4px;
    z-index: 10;
    animation: pulse 0.6s ease-in-out infinite;
    z-index: var(--z-4);
    background-color: var(--base);
    box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw);
    width: var(--btn);
    transition: var(--trans-size);
    overflow: hidden auto;
    height: 100%;
    padding-bottom: var(--btn);
}

.timeline-point.drop-below {
    position: relative;
}

.timeline-point.drop-below::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--action-0);
    border-radius: 4px;
    z-index: 10;
    animation: pulse 0.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scaleY(1);
    nav.sidebar > ul {
        --gap: 0;
    }
    50% {
        opacity: 1;
        transform: scaleY(1.2);
    nav.sidebar .toggle.main.main {
        padding: 0;
        position: fixed;
        left: unset;
        bottom: 0;
        right: 0;
        z-index: var(--z-8);
        box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw);
        width: var(--btn);
        height: var(--btn);
    }
}

/* Make space for the indicator */
.timeline-point.drop-above {
    margin-top: 8px;
    transition: margin-top 0.2s ease;
}

.timeline-point.drop-below {
    margin-bottom: 8px;
    transition: margin-bottom 0.2s ease;
}

/* Drag handle styling */
.drag-handle {
    cursor: grab;
    padding: 0.5rem;
    background: transparent;
    border: none;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.drag-handle:hover {
    opacity: 1;
}

.drag-handle:active,
.is-dragging .drag-handle {
    cursor: grabbing;
}

/* Preview styling */
.drag-preview .drag-handle {
    pointer-events: none;
}

/******************************************************
FILTERS
******************************************************/
.all-filters {
    margin: 0;
    padding: 1rem 0;
    border-top: 1px solid var(--base-200);
    border-bottom: 1px solid var(--base-200);
    --gap: 0;
}

.all-filters .row {
    --justify: flex-start;
}
    .all-filters[open] {
        --gap: .5rem;
        nav.sidebar .toggle.main .icon {
            --w: 1.2em;
        }
    nav.sidebar .toggle:not(.main) {
        display: none;
    }
    .all-filters summary {
    nav.sidebar.open .toggle:not(.main) {
        display: inline-flex;
    }
    nav.sidebar .icon {
        --w: var(--chip_);
        width: var(--btn);
        min-width: var(--chip);
        transition: var(--trans-size), transform var(--trans-base);
    }
    nav.sidebar.open .icon {
        --w: var(--chip);
        width: var(--w);
    }

    nav.sidebar.open {
        width: fit-content;
        max-width: 100%;
    }


    nav.sidebar ul {
        height: max-content;
        width: 100%;
        display: flex;
        justify-content: space-between;
        --gap: 0;
    }
    .all-filters summary [data-action="clear-filters"] {
        --w: 1em!important;
        width: max-content;
        font-size: var(--txt-x-small);

    nav.sidebar .toggle {
        width: var(--btn);
        height: var(--chipchip);
        box-shadow: none;
        background-color: transparent;
        min-height: 0;
    }
    .all-filters [data-action="refresh"] {
        margin-left: auto;
        --w: 1em!important;
        flex-wrap: nowrap;
        justify-content:flex-start;
        transition: var(--trans-size);
        display: flex;
        font-size: var(--txt-x-small);
    }
        .all-filters [data-action="refresh"]:focus,
        .all-filters [data-action="refresh"]:hover {
            width: max-content;
        nav.sidebar .toggle:hover,
        nav.sidebar .toggle:focus {
            background-color: var(--action-0);
            color: var(--action-contrast);
        }

            .all-filters [data-action="refresh"] span {
                display: none;
                white-space: nowrap;
            }
            .all-filters [data-action="refresh"]:focus span,
            .all-filters [data-action="refresh"]:hover span {
                display: block;
            }
    .all-filters .btn + label {
        box-shadow: var(--shdw-none);
        color: var(--base-200);

    nav.sidebar .title {
        max-width: 0;
        opacity: 0;
        transition: max-width var(--trans-base);
    }
    .all-filters .radio-options input:not(.ch):checked + label {
        box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
        color: var(--contrast-200);
        border-color: var(--contrast-200);
    nav.sidebar.open .title {
        white-space: nowrap;
        max-width: max-content;
        opacity: 1;
    }
details.uploader + .items-list .all-filters {
    border-top: none;
    nav.sidebar .icon {
        min-width: var(--chip_);
    }

    nav.sidebar li {
        --justify: center;
        --wrap: nowrap;
        --align: flex-start;
        overflow: hidden;
    }
        nav.sidebar.open li >div {
            width: 100%;
            padding-right: var(--btn);
        }
        nav.sidebar .has-submenu {
            height: max-content;
        }
        nav.sidebar li ul {
            width: 0;
        }
        nav.sidebar li.open ul {
            width: max-content;
        }
        nav.sidebar.open li.has-submenu > div {
            padding-right: 0;
        }
        nav.sidebar.open li.has-submenu > ul {
            padding-left: var(--chip);
        }

        nav.sidebar .a {
            color: var(--contrast-200);
        }
        nav.sidebar a,
        nav.sidebar .a {
            height: var(--chipchip);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: none;
            padding-left: 0;
        }
            nav.sidebar.open a,
            nav.sidebar.open .a {
                width: 100%;
                justify-content: flex-start;
            }
    nav.sidebar .has-submenu ul {
        max-height: 0;
        height: 0;
        overflow: hidden;
        transition: var(--trans-size);
    }
        nav.sidebar .has-submenu.open > ul {
            height: 100%;
            max-height: fit-content;
        }



/** Queue Modifications **/
aside.main.main#queue {
    bottom: 0;
}

button.qtoggle.sticky {
    bottom: 0;
    left: 0;
}

section.replace {
    margin: 0 var(--btn_) 0 calc(var(--btn) + var(--chipchip));
}
    section.replace > * {
        max-width: 100%;
    }

    .dashboard :is(h1,h2,h3,h4,h5,h6) {
        text-transform: none;
        margin: .5em 0 1em;
    }

ul.dashboard {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    gap: .5rem;
    flex-wrap: wrap;
}
    ul.dashboard li {
        list-style: none;
    }
    ul.dashboard p {
        margin: 0;
    }

    .dashboard main  > footer,
    .dashboard .main-actions {
        position: absolute;
        left: var(--offScreen);
        width: 0;
        padding: 0;
    }

/** FILTERS **/
.all-filters {
    margin: 1rem 0;
    padding: 1rem 0;
    border: 1px solid var(--base-100);
    border-width: 1px 0;
    --gap: 0;
    width: 100%;
}
    .all-filters summary {
        width: 100%;
    }
    .all-filters summary:hover {
        color: var(--action-0);
    }

    .all-filters .row {
        --justify: flex-start;
    }
    .all-filters + [data-action="clear-filters"] {
        --w: 1em;
        width: max-content;
        font-size: var(--txt-x-small);
        min-height: var(--chip);
        margin-left: auto;
        display: block;
        position: relative;
        top: -1rem;
    }


.all-filters [data-action="refresh"] {
    margin-left: auto;
    --w: 1em!important;
    flex-wrap: nowrap;
    width: max-content;
    justify-content:flex-start;
    transition: var(--trans-size);
    min-height: var(--chip);
    font-size: var(--txt-x-small);
}
    .all-filters [data-action="refresh"]:focus,
    .all-filters [data-action="refresh"]:hover {
        width: max-content;
    }
    .all-filters [data-action="refresh"] span {
        max-width: 0;
        transition: var(--trans-size);
        overflow: hidden;
        white-space: nowrap;
    }
    .all-filters [data-action="refresh"]:focus span,
    .all-filters [data-action="refresh"]:hover span {
        max-width: max-content;
    }


.all-filters .btn + label {
    box-shadow: var(--shdw-none);
    color: var(--contrast-200);
}
.all-filters .radio-options input:not(.ch):checked + label {
    box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
    color: var(--contrast-50);
    border-color: var(--contrast-50);
}



.all-filters .filters{
    width: 100%;
}
@@ -417,727 +340,18 @@
    width: 100%;
}

/***********************************************************
TABLE FIELDS
***********************************************************/
.crud form.table td .label,
.crud form.table td label:not(.select-item-label):not(.radio-option) {
    display: none;
}
form.table textarea {
    width: 250px;
    padding: .5rem;
}

.multi-select summary {
    --gap: 2rem;
    padding-right: 2.5rem;
}

/************************************************************
/********************************************************
TABS
************************************************************/
dialog.edit[open],
dialog.bulk-edit[open],
dialog.create[open] {
    height:98vh;
    width: 98vw;
    max-width: none;
    max-height: none;
    inset: 0;
    margin: auto;
}
dialog > .wrap {
    min-height: 100%;
}
dialog .item.upload.upload {
    display: flex;
    gap: 1rem;
}
dialog .item.upload .preview {
    width: 40%;
}
dialog .item.upload .group {
    width: 60%;
}
    .upload details {
        width: 100%;
    }
.tab-content h2 {
    display: none;
}

/**********************************************************
HOURS
**********************************************************/
.group-fields.hours .group-fields,
.group-fields.hours .group-fields .field {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.group-fields.hours .group-fields {
    padding: 1rem .5rem;
    gap: 1rem;
}
.group-fields.hours .group-fields:nth-of-type(2n+1) {
    background-color: var(--base);
}
.group-fields.hours .group-fields .field {
    margin: 0;
}

.group-fields.hours .true-false {
    flex: 1;
}
.group-fields.hours .time {
    position: relative;
}
.group-fields.hours .time label {
    margin: 0;
    font-size: var(--txt-small);
    position: absolute;
    top: -1rem;
    left: 0;
    color: var(--contrast-200);
}
/************************************************************
TODAY HOURS, specific to North'eh
************************************************************/
.today_hours {
    width: min(500px, 90vw);
}
.today_hours .group-fields {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: .5rem;
}
@media (min-width: 768px) {
    .today_hours .group-fields {
        padding: 2rem;
    }
}
.today_hours .field {
    margin: 0;
}
.dash .true-false {
    margin: 0;
}
.dash [type=submit] {
    width: 90%;
}
.dashboard.dash h2 {
    text-transform: none;
    font-size: var(--txt-large);
}
    .dashboard.dash .replace > ul {
        display: flex;
        list-style: none;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .5rem;
    }
    nav.tabs.tabs {
        bottom: 0;
        left: 0;
        right: var(--btn);
    }
.dashboard.settings nav.tabs.tabs {
    --height: 3.5rem;
    --x: var(--btn_);
********************************************************/
nav.tabs {
    position: fixed;
    bottom: var(--btn);
    left: var(--x);
    right: var(--x);
    z-index:99;
    width: calc(100% - var(--x) - var(--x));
    background-color: var(--base);
}
.jvb-seo-admin nav.tabs.tabs {
    position: sticky;
    padding-bottom: 0;
    bottom: unset;
    left: 0;
    right: 0;
    z-index:var(--z-4);
    width: calc(100% - var(--btn));
    top: var(--btn);
    left: var(--btn);
    background-color: rgba(var(--base-rgb), var(--op-45));
    box-shadow: rgba(var(--base-rgb), var(--op-6)) var(--shdw-down);
}
    .jvb-seo-admin nav.tabs button {
        border: none;
        margin: 0 .125rem;
        background-color: var(--base-200);
        box-shadow:var(--shdw-none);
    }
    .jvb-seo-admin nav.tabs button.active {
        background-color: var(--base);
        color: var(--action-0);
    }
nav.integrations ul,
nav.integrations li,
nav.integrations a,
nav.integrations {
    height: auto;
}

/***************************************

***************************************/
.replace {
    overflow: hidden;
}
body.dash form#options {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

/***************************************
    INTEGRATIONS
***************************************/
.item-grid.integrations {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.integration {
    background: var(--base);
    border: 2px solid var(--base-200);
    border-radius: var(--radius-outer);
    padding: 1rem;
    position: relative;
    transition: all var(--trans-base);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
.integration.connected {
    border-color: var(--success);
}
.integration.error,
.integration.disconnected {
    border-color: var(--error);
}
.integration.hasChanges {
    border-color: var(--warning);
}
.integration .header {
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--base-200);
}
.integration h3 {
    letter-spacing: 1px;
    font-size: var(--txt-medium);
    margin: 0;
}
.integration .meta {
    margin-bottom: 1rem;
    text-align: right;
    color: var(--contrast-200);
    font-size: var(--txt-small);
}

.integration .setup {
    font-size: var(--txt-small);
    font-weight: bold;
    text-transform: uppercase;
}
.integration .setup .indicator {
    font-size: var(--txt-medium);
}
.integration .connected .indicator,
.integration .setup .connected {
    color: var(--success);
}
.integration .disconnected .indicator,
.integration .setup .disconnected {
    color: var(--error);
}
.integration.hasChanges .disconnected {
    color: var(--warning);
}

.connection-status.connected {
    background-color: var(--successBack);
    color: var(--successText);
}
.connection-status.disconnected {
    background-color: var(--errorBack);
    color: var(--errorText);
}

.integration code {
    display: inline-block;
    width: 90%;
    margin: 0 .5rem;
    user-select: all;
    padding: .75rem;
    border: 2px solid var(--base);
    background-color: var(--base-200);
    word-break: break-all;
}
.integration details + details {
    margin-top: 1rem;
}
.integration .actions {
    margin-top: 1rem;
}

.hasChanges button[data-action=save_credentials] {
    border-color: var(--warning);
    animation: pulse-color 1s infinite;
    animation-delay: 1s;
}

.flash {
    animation: flash .5s;
}
.flash.connected {
    --b: var(--success);
}
.flash.disconnected {
    --b: var(--error);
}
.flash.syncing {
    --b: var(--success);
}
.flash.hasChanges,
.flash.error {
    --b: var(--warning);
}

@keyframes flash {
    0%, 100% {border-color: inherit}
    50% {border-color: var(--b)}
}

.location.field {
    width: 80vw;
}
.location.field > p {
    text-align: center;
}
.location.field > p + p {
    margin: 0 .5rem 0 0;
}
.location.field .location-map {
    height: 20vh;
}
.location.field .location-links {
    padding: .5rem 0;
    display: flex;
    justify-content: space-evenly;
}

.item-grid .item,
.field.upload [data-upload-id] {
    touch-action: none;
}

.empty-state {
    grid-column: 1/-1;
    padding: 1rem 10vw;
    margin: 0 10vw;
    border-radius: var(--radius-outer);
    background-color: var(--base-100);
}

/****************** TEST ***/
.jvb-oauth-connect {
    position: relative;
    transition: opacity 0.2s;
}

.jvb-oauth-connect.loading {
    opacity: 0.6;
    pointer-events: none;
}

.jvb-oauth-connect.loading::after {
    content: '';
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: oauth-spin 0.8s linear infinite;
}

@keyframes oauth-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Status Messages */
.integration-status-message {
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 4px;
    display: none;
    font-size: 14px;
    line-height: 1.5;
}

.integration-status-message.success {
    display: block;
    background: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.integration-status-message.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.integration-status-message.info {
    display: block;
    background: #d1ecf1;
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

/* Connection Status Indicator */
.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.connection-status.connected {
    background: #d4edda;
    color: #155724;
}

.connection-status.disconnected {
    background: #f8d7da;
    color: #721c24;
}

.status-indicator {
    font-size: 10px;
    line-height: 1;
}

.connection-status.connected .status-indicator {
    color: #28a745;
}

.connection-status.disconnected .status-indicator {
    color: #dc3545;
}



/*******************************************
REFERRAL
 */
.referral-dashboard {
    max-width: var(--wide);
}
.card {
    background-color: var(--base-100);
    padding: 30px;
    border-radius: var(--radius-outer);
    text-align: center;
    margin-bottom: 2rem;
}

.dashboard-page.referral {
    text-align: center;
}
.referral-dashboard .empty-state {
    padding: 3rem 7vw;
}
.referral-dashboard .empty-state h3 {
    margin-top: 0;
}
.referral-dashboard .empty-state h3 .icon:first-of-type {
    margin-right: 1rem;
}
.referral-dashboard .empty-state h3 .icon:last-of-type {
    margin-left: 1rem;
}

.item-grid.stats .card {
    border: 1px solid var(--base);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
}
.item-grid.stats .card.highlight {
    box-shadow: var(--contrast-rgb) var(--shadow);
    background-color: var(--action-200);
    color: var(--action-contrast);
    grid-column: 1/-1;
    margin: 0 4rem 30px;
    aspect-ratio: unset;
}
.card h4 {
    font-size: var(--medium);
    color: var(--contrast-200);
    font-weight: var(--fw-b-bold);
    margin: 0 0 .5rem;
}
.card span {
    color: var(--action-0);
    font-weight: var(--fw-b-bold);
    font-size: var(--txt-xx-large);
}
    .card.highlight span {
        color: var(--action-contrast);
    }


/*.referral-dashboard {*/
/*    max-width: 1200px;*/
/*    margin: 0 auto;*/
/*}*/
/*.referral-header {*/
/*    text-align: center;*/
/*    margin-bottom: 30px;*/
/*}*/
/*.referral-code-card {*/
/*    background: var(--base-100);*/
/*    padding: 30px;*/
/*    border-radius: 8px;*/
/*    text-align: center;*/
/*    margin-bottom: 30px;*/
/*}*/
/*.code-display {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: 15px;*/
/*    margin: 20px 0;*/
/*}*/
/*.code-display .code {*/
/*    font-size: 32px;*/
/*    font-weight: bold;*/
/*    letter-spacing: 2px;*/
/*    color: var(--action-0);*/
/*    user-select: all;*/
/*}*/
/*.stats-grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
/*    gap: 20px;*/
/*    margin-bottom: 30px;*/
/*}*/
/*.stat-card {*/
/*    background: white;*/
/*    padding: 25px;*/
/*    border-radius: 8px;*/
/*    border: 1px solid #ddd;*/
/*    text-align: center;*/
/*}*/
/*.stat-card.highlight {*/
/*    background: #d4edda;*/
/*    border-color: #c3e6cb;*/
/*}*/
/*.stat-card h4 {*/
/*    margin: 0 0 10px 0;*/
/*    color: #666;*/
/*    font-size: 14px;*/
/*    font-weight: 600;*/
/*    text-transform: uppercase;*/
/*}*/
/*.stat-number {*/
/*    font-size: 36px;*/
/*    font-weight: bold;*/
/*    color: #2271b1;*/
/*}*/
/*.referrals-list-card {*/
/*    background: white;*/
/*    padding: 25px;*/
/*    border-radius: 8px;*/
/*    border: 1px solid #ddd;*/
/*}*/
/*.referrals-table {*/
/*    width: 100%;*/
/*    border-collapse: collapse;*/
/*    margin-top: 15px;*/
/*}*/
/*.referrals-table th,*/
/*.referrals-table td {*/
/*    padding: 12px;*/
/*    text-align: left;*/
/*    border-bottom: 1px solid #eee;*/
/*}*/
/*.referrals-table th {*/
/*    background: #f5f5f5;*/
/*    font-weight: 600;*/
/*}*/
/*.status-badge {*/
/*    padding: 4px 12px;*/
/*    border-radius: 12px;*/
/*    font-size: 12px;*/
/*    font-weight: 500;*/
/*}*/
/*.status-badge.pending {*/
/*    background: #fff3cd;*/
/*    color: #856404;*/
/*}*/
/*.status-badge.consulted {*/
/*    background: #d1ecf1;*/
/*    color: #0c5460;*/
/*}*/
/*.status-badge.treated {*/
/*    background: #d4edda;*/
/*    color: #155724;*/
/*}*/

nav.sidebar {
    --wrap: nowrap;
    position: fixed;
    top: var(--btn);
    bottom: 0;
    left: 0;
    z-index: var(--z-4);
    height: calc(100% - var(--btn));
    background-color: var(--base);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    width: var(--btn);
    transition: var(--trans-size);
    overflow: hidden auto;
}
nav.sidebar .icon {
    --w: var(--chip_);
    width: var(--btn);
    transition: var(--trans-size), margin var(--trans-base);
}
nav.sidebar.open {
    width: fit-content;
    max-width: 100%;
}
nav.sidebar.open .icon {
    --w: var(--chip);
    margin: .75rem;
    width: var(--w);
}

nav.sidebar ul {
    height: max-content;
    width: 100%;
    --gap: 0;
}
nav.sidebar .title {
    display: block;
}
/*nav.sidebar .title,*/
/*nav.sidebar .toggle {*/
/*    transition: var(--trans-size);*/
/*}*/
nav.sidebar .toggle {
    width: var(--btn);
    height: var(--chipchip);
    box-shadow: none;
    background-color: transparent;
    min-height: 0;
}
nav.sidebar .toggle:hover,
nav.sidebar .toggle:focus {
    background-color:var(--action-0);
    color: var(--action-contrast);
}

/*nav.sidebar:not(.open) .title,*/
/*nav.sidebar:not(.open) .toggle:not(.main) {*/
/*    position: absolute;*/
/*    left: var(--offScreen);*/
/*    width: 0;*/
/*    height: 0;*/
/*    max-width: 0;*/
/*    max-height: 0;*/
/*}*/
nav.sidebar .toggle.main {
    position: fixed;
    left: unset;
    bottom: 0;
    right: 0;
    width: var(--btn);
    height: var(--btn);
    z-index: var(--z-8);
    box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw);
}

nav.sidebar .title {
    white-space: nowrap;
}

nav.sidebar li {
    --justify: center;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: flex-start;
}
nav.sidebar.open li > div {
    width: 100%;
    padding-right: var(--btn);
}
nav.sidebar.open li.has-submenu > div {
    padding-right: 0;
}
nav.sidebar.open li.has-submenu > ul {
    padding-left: var(--chip);
}

nav.sidebar .a {
    color: var(--contrast-200);
}

nav.sidebar a,
nav.sidebar .a {
    height: var(--chipchip);
    /*width: var(--btn);*/
    display: flex;
    justify-content:center;
    align-items:center;
    transition: none;
    padding-left: 0;
}
nav.sidebar.open a,
nav.sidebar.open .a {
    width: 100%;
    justify-content: flex-start;
}

nav.sidebar .has-submenu ul {
    max-height: 0;
    height: 0;
    overflow:hidden;
    transition: var(--trans-size);
}
nav.sidebar .has-submenu.open > ul {
    height: 100%;
    max-height: fit-content;
}



header .title,
header .title a {
    height: var(--btn);
    margin: 0;
    display:block;
}
header .title {
    margin-left: var(--btn);
}
header .title a {
    width: var(--btn);
}

.dashboard #queue{
    bottom:0;
.replace:has(nav.tabs) {
    margin-top: var(--btn);
}

 dashBackup.css

New file
@@ -0,0 +1,1143 @@
:target {
    outline: none!important;
    padding: 0!important;
}
.dashboard .qtoggle {
    left: 0;
    bottom: 0;
}
.dashboard > header {
    justify-content: flex-end;
    position: fixed;
}
.dashboard > header img {
    width: var(--btn);
}
.dashboard h1:first-of-type {
    margin-top: 4rem!important;
}
nav.dashboard-nav,
nav.dashboard-nav ul {
    --dir: row;
}
nav.dashboard-nav ul {
    touch-action: pan-x;
    overflow: auto hidden;
}
main > footer {
    /*max-width: 100%!important;*/
    /*position: fixed;*/
    /*z-index: var(--z-7);*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*width: 100%;*/
    /*margin: 4rem 0 0 0!important;*/
    /*height: var(--btn);*/
    /*padding: 0!important;*/
    /*background-color: var(--base);*/
    /*box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/
    padding: 0;
}
main>* {
    max-width: min(768px, 90vw)!important;
    margin: 0 auto!important;
}
main h1 {
    margin: 0!important;
    font-size: var(--txt-large);
}

.item-grid .item {
    position: relative;
}
img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.replace.replace {
    grid-column: full;
    padding: 0 var(--btn_) var(--btnbtn);
    max-width: none!important;
    margin: 0!important;
}
.replace .dashboard-page {
    max-width: var(--wide);
}
.group-display .item-grid {
    grid-template-columns: repeat(2, 1fr);
}
/********************************************
GRID VIEW
********************************************/
.item-grid {
    margin-bottom: 4rem;
}
.item-grid:has(.select-item:checked) .item {
    padding: .75rem;
    opacity : .8;
    filter: var(--filter);
}
.item-grid .item:has(.select-item:checked) {
    padding: .5rem;
    filter: none;
    opacity: 1;
    background-color: var(--action-0);
}

.grid-view .item > input[type=checkbox]:not(.label-button) + label {
    padding-left: 0;
    margin: 0;
}
.grid-view .item > input[type=checkbox] + label::before {
    transform: unset;
    top: .5rem;
    left: .5rem;
}
.grid-view .item > input[type=checkbox] + label::after {
    top: .5rem;
    left: .75rem;
    transform: translateY(20%) rotate(45deg);
}

.grid-view .item .item-actions {
    bottom: 0;
    right: 0;
}
.item-actions button {
    min-height: 0;
    width: var(--chipchip);
    height: var(--chipchip);
    background-color: rgba(var(--base-rgb), var(--op-45));
}
    .item-actions button:hover {
        background-color: var(--base);
    }

.list-view h3,
.list-view p {
    margin: 0!important;
}
.list-view h3 {
    font-size: var(--txt-medium);
}

@media (min-width: 768px) {
    .grid-view {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}
@media (max-width: 768px) {
    .bulk-controls.bulk-controls.nowrap {
        --wrap: wrap;
    }
}
.bulk-controls {
    margin: 1rem 0;
}
.bulk-controls .selected-count {
    font-weight: normal;
    font-size: var(--txt-small);
    text-transform: none;
    font-style: italic;
    display: flex;
    gap: .25rem;
    margin-left: 2rem;
}
.selected-count::before {
    content: '{';
}
.selected-count::after {
    content: '}';
}

.bulk-edit-form .selected {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 4px;
}
.selected label {
    padding: .5rem;
    opacity: .6;
    filter: var(--filter);
    border: 2px solid transparent;
    transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base);
}
.selected label:has(:checked) {
    border-color: var(--action-0);
    padding: 0;
    opacity: 1;
    filter: none;
    transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base);
}
/******************************************************
TABLE VIEW
******************************************************/
form.table label.select-item,
form.table img {
    width: 6rem;
    height: 6rem;
}
form.table .item-grid.preview {
    margin: 0;
}

td p {
    width: max-content;
}

/* Dragging state */
.timeline-point.is-dragging {
    opacity: 0.4;
    position: relative;
}

/* Drop indicators with gap */
.timeline-point.drop-above {
    position: relative;
}

.timeline-point.drop-above::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--action-0);
    border-radius: 4px;
    z-index: 10;
    animation: pulse 0.6s ease-in-out infinite;
}

.timeline-point.drop-below {
    position: relative;
}

.timeline-point.drop-below::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--action-0);
    border-radius: 4px;
    z-index: 10;
    animation: pulse 0.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scaleY(1);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

/* Make space for the indicator */
.timeline-point.drop-above {
    margin-top: 8px;
    transition: margin-top 0.2s ease;
}

.timeline-point.drop-below {
    margin-bottom: 8px;
    transition: margin-bottom 0.2s ease;
}

/* Drag handle styling */
.drag-handle {
    cursor: grab;
    padding: 0.5rem;
    background: transparent;
    border: none;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.drag-handle:hover {
    opacity: 1;
}

.drag-handle:active,
.is-dragging .drag-handle {
    cursor: grabbing;
}

/* Preview styling */
.drag-preview .drag-handle {
    pointer-events: none;
}

/******************************************************
FILTERS
******************************************************/
.all-filters {
    margin: 0;
    padding: 1rem 0;
    border-top: 1px solid var(--base-200);
    border-bottom: 1px solid var(--base-200);
    --gap: 0;
}

.all-filters .row {
    --justify: flex-start;
}
    .all-filters[open] {
        --gap: .5rem;
    }
    .all-filters summary {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .all-filters summary [data-action="clear-filters"] {
        --w: 1em!important;
        width: max-content;
        font-size: var(--txt-x-small);
    }
    .all-filters [data-action="refresh"] {
        margin-left: auto;
        --w: 1em!important;
        flex-wrap: nowrap;
        justify-content:flex-start;
        transition: var(--trans-size);
        display: flex;
        font-size: var(--txt-x-small);
    }
        .all-filters [data-action="refresh"]:focus,
        .all-filters [data-action="refresh"]:hover {
            width: max-content;
        }

            .all-filters [data-action="refresh"] span {
                display: none;
                white-space: nowrap;
            }
            .all-filters [data-action="refresh"]:focus span,
            .all-filters [data-action="refresh"]:hover span {
                display: block;
            }
    .all-filters .btn + label {
        box-shadow: var(--shdw-none);
        color: var(--base-200);
    }
    .all-filters .radio-options input:not(.ch):checked + label {
        box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
        color: var(--contrast-200);
        border-color: var(--contrast-200);
    }
details.uploader + .items-list .all-filters {
    border-top: none;
}
.all-filters .filters{
    width: 100%;
}
.filters.row.start,
.controls .radio-options {
    --align: center;
    --justify: flex-start;
    --gap: .5rem;
}
.all-filters span.label {
    text-transform: uppercase;
    font-size: var(--txt-small);
    font-weight: 900;
    width: 15vw;
    display: inline-flex;
    align-items: center;
    padding-right: 2rem;
}
@media (max-width: 767px) {
    .all-filters > .row {
        padding: .5rem 0;
    }
    .all-filters span.label {
        padding-top: .5rem;
        width: 100%;
        border-top: 1px solid var(--base-200);
    }
}
.controls .icon {
    --w: 1.4rem;
}
.all-filters .btn + label,
.all-filters button {
    height: var(--chip_);
    padding: .125rem!important;
    min-width: 0;
    min-height: var(--chip_);
    width: var(--chip_);
}
.all-filters > .row {
    padding: .25rem 0;
}
.all-filters .btn + label:hover,
.all-filters .btn + label:focus,
.all-filters button:hover,
.all-filters button:focus {
    background-color: transparent;
    color: var(--action-0);
    border-color: var(--action-0);
}
/******************************************************
SEARCH
******************************************************/

.search-container:not(.open) input[type=search],
.search-container:not(.open) .clear-search {
    transform: scaleX(0);
    transform-origin: left;
    width: 0;
    padding: 0;
    transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base);
}
.search-container button {
    padding: .5rem;
}
.search-container .icon {
    --w: 1.5rem;
}
.search-container.open input[type=search],
.search-container.open .clear-search {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base);
}
.all-filters > .search,
input[type=search],
.search-container {
    width: 100%;
}

/***********************************************************
TABLE FIELDS
***********************************************************/
.crud form.table td .label,
.crud form.table td label:not(.select-item-label):not(.radio-option) {
    display: none;
}
form.table textarea {
    width: 250px;
    padding: .5rem;
}

.multi-select summary {
    --gap: 2rem;
    padding-right: 2.5rem;
}

/************************************************************
TABS
************************************************************/
dialog.edit[open],
dialog.bulk-edit[open],
dialog.create[open] {
    height:98vh;
    width: 98vw;
    max-width: none;
    max-height: none;
    inset: 0;
    margin: auto;
}
dialog > .wrap {
    min-height: 100%;
}
dialog .item.upload.upload {
    display: flex;
    gap: 1rem;
}
dialog .item.upload .preview {
    width: 100%;
}
dialog .item.upload .group {
    width: 60%;
}
    .upload details {
        width: 100%;
    }
.tab-content h2 {
    display: none;
}

/**********************************************************
HOURS
**********************************************************/
.group-fields.hours .group-fields,
.group-fields.hours .group-fields .field {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.group-fields.hours .group-fields {
    padding: 1rem .5rem;
    gap: 1rem;
}
.group-fields.hours .group-fields:nth-of-type(2n+1) {
    background-color: var(--base);
}
.group-fields.hours .group-fields .field {
    margin: 0;
}

.group-fields.hours .true-false {
    flex: 1;
}
.group-fields.hours .time {
    position: relative;
}
.group-fields.hours .time label {
    margin: 0;
    font-size: var(--txt-small);
    position: absolute;
    top: -1rem;
    left: 0;
    color: var(--contrast-200);
}
/************************************************************
TODAY HOURS, specific to North'eh
************************************************************/
.today_hours {
    width: min(500px, 90vw);
}
.today_hours .group-fields {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: .5rem;
}
@media (min-width: 768px) {
    .today_hours .group-fields {
        padding: 2rem;
    }
}
.today_hours .field {
    margin: 0;
}
.dash .true-false {
    margin: 0;
}
.dash [type=submit] {
    width: 90%;
}
.dashboard.dash h2 {
    text-transform: none;
    font-size: var(--txt-large);
}
    .dashboard.dash .replace > ul {
        display: flex;
        list-style: none;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .5rem;
    }
    nav.tabs.tabs {
        bottom: 0;
        left: 0;
        right: var(--btn);
    }
.dashboard.settings nav.tabs.tabs {
    --height: 3.5rem;
    --x: var(--btn_);
    position: fixed;
    bottom: var(--btn);
    left: var(--x);
    right: var(--x);
    z-index:99;
    width: calc(100% - var(--x) - var(--x));
    background-color: var(--base);
}
.jvb-seo-admin nav.tabs.tabs {
    position: sticky;
    padding-bottom: 0;
    bottom: unset;
    left: 0;
    right: 0;
    top: var(--btn);
}
    .jvb-seo-admin nav.tabs button {
        border: none;
        margin: 0 .125rem;
        background-color: var(--base-200);
        box-shadow:var(--shdw-none);
    }
    .jvb-seo-admin nav.tabs button.active {
        background-color: var(--base);
        color: var(--action-0);
    }
nav.integrations ul,
nav.integrations li,
nav.integrations a,
nav.integrations {
    height: auto;
}

/***************************************

***************************************/
.replace {
    overflow: hidden;
}
body.dash form#options {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

/***************************************
    INTEGRATIONS
***************************************/
.item-grid.integrations {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.integration {
    background: var(--base);
    border: 2px solid var(--base-200);
    border-radius: var(--radius-outer);
    padding: 1rem;
    position: relative;
    transition: all var(--trans-base);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
.integration.connected {
    border-color: var(--success);
}
.integration.error,
.integration.disconnected {
    border-color: var(--error);
}
.integration.hasChanges {
    border-color: var(--warning);
}
.integration .header {
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--base-200);
}
.integration h3 {
    letter-spacing: 1px;
    font-size: var(--txt-medium);
    margin: 0;
}
.integration .meta {
    margin-bottom: 1rem;
    text-align: right;
    color: var(--contrast-200);
    font-size: var(--txt-small);
}

.integration .setup {
    font-size: var(--txt-small);
    font-weight: bold;
    text-transform: uppercase;
}
.integration .setup .indicator {
    font-size: var(--txt-medium);
}
.integration .connected .indicator,
.integration .setup .connected {
    color: var(--success);
}
.integration .disconnected .indicator,
.integration .setup .disconnected {
    color: var(--error);
}
.integration.hasChanges .disconnected {
    color: var(--warning);
}

.connection-status.connected {
    background-color: var(--successBack);
    color: var(--successText);
}
.connection-status.disconnected {
    background-color: var(--errorBack);
    color: var(--errorText);
}

.integration code {
    display: inline-block;
    width: 90%;
    margin: 0 .5rem;
    user-select: all;
    padding: .75rem;
    border: 2px solid var(--base);
    background-color: var(--base-200);
    word-break: break-all;
}
.integration details + details {
    margin-top: 1rem;
}
.integration .actions {
    margin-top: 1rem;
}

.hasChanges button[data-action=save_credentials] {
    border-color: var(--warning);
    animation: pulse-color 1s infinite;
    animation-delay: 1s;
}

.flash {
    animation: flash .5s;
}
.flash.connected {
    --b: var(--success);
}
.flash.disconnected {
    --b: var(--error);
}
.flash.syncing {
    --b: var(--success);
}
.flash.hasChanges,
.flash.error {
    --b: var(--warning);
}

@keyframes flash {
    0%, 100% {border-color: inherit}
    50% {border-color: var(--b)}
}

.location.field {
    width: 80vw;
}
.location.field > p {
    text-align: center;
}
.location.field > p + p {
    margin: 0 .5rem 0 0;
}
.location.field .location-map {
    height: 20vh;
}
.location.field .location-links {
    padding: .5rem 0;
    display: flex;
    justify-content: space-evenly;
}

.item-grid .item,
.field.upload [data-upload-id] {
    touch-action: none;
}

.empty-state {
    grid-column: 1/-1;
    padding: 1rem 10vw;
    margin: 0 10vw;
    border-radius: var(--radius-outer);
    background-color: var(--base-100);
}

/****************** TEST ***/
.jvb-oauth-connect {
    position: relative;
    transition: opacity 0.2s;
}

.jvb-oauth-connect.loading {
    opacity: 0.6;
    pointer-events: none;
}

.jvb-oauth-connect.loading::after {
    content: '';
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: oauth-spin 0.8s linear infinite;
}

@keyframes oauth-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Status Messages */
.integration-status-message {
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 4px;
    display: none;
    font-size: 14px;
    line-height: 1.5;
}

.integration-status-message.success {
    display: block;
    background: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.integration-status-message.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.integration-status-message.info {
    display: block;
    background: #d1ecf1;
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

/* Connection Status Indicator */
.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.connection-status.connected {
    background: #d4edda;
    color: #155724;
}

.connection-status.disconnected {
    background: #f8d7da;
    color: #721c24;
}

.status-indicator {
    font-size: 10px;
    line-height: 1;
}

.connection-status.connected .status-indicator {
    color: #28a745;
}

.connection-status.disconnected .status-indicator {
    color: #dc3545;
}



/*******************************************
REFERRAL
 */
.referral-dashboard {
    max-width: var(--wide);
}
.card {
    background-color: var(--base-100);
    padding: 30px;
    border-radius: var(--radius-outer);
    text-align: center;
    margin-bottom: 2rem;
}

.dashboard-page.referral {
    text-align: center;
}
.referral-dashboard .empty-state {
    padding: 3rem 7vw;
}
.referral-dashboard .empty-state h3 {
    margin-top: 0;
}
.referral-dashboard .empty-state h3 .icon:first-of-type {
    margin-right: 1rem;
}
.referral-dashboard .empty-state h3 .icon:last-of-type {
    margin-left: 1rem;
}

.item-grid.stats .card {
    border: 1px solid var(--base);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
}
.item-grid.stats .card.highlight {
    box-shadow: var(--contrast-rgb) var(--shadow);
    background-color: var(--action-200);
    color: var(--action-contrast);
    grid-column: 1/-1;
    margin: 0 4rem 30px;
    aspect-ratio: unset;
}
.card h4 {
    font-size: var(--medium);
    color: var(--contrast-200);
    font-weight: var(--fw-b-bold);
    margin: 0 0 .5rem;
}
.card span {
    color: var(--action-0);
    font-weight: var(--fw-b-bold);
    font-size: var(--txt-xx-large);
}
    .card.highlight span {
        color: var(--action-contrast);
    }


/*.referral-dashboard {*/
/*    max-width: 1200px;*/
/*    margin: 0 auto;*/
/*}*/
/*.referral-header {*/
/*    text-align: center;*/
/*    margin-bottom: 30px;*/
/*}*/
/*.referral-code-card {*/
/*    background: var(--base-100);*/
/*    padding: 30px;*/
/*    border-radius: 8px;*/
/*    text-align: center;*/
/*    margin-bottom: 30px;*/
/*}*/
/*.code-display {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: 15px;*/
/*    margin: 20px 0;*/
/*}*/
/*.code-display .code {*/
/*    font-size: 32px;*/
/*    font-weight: bold;*/
/*    letter-spacing: 2px;*/
/*    color: var(--action-0);*/
/*    user-select: all;*/
/*}*/
/*.stats-grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
/*    gap: 20px;*/
/*    margin-bottom: 30px;*/
/*}*/
/*.stat-card {*/
/*    background: white;*/
/*    padding: 25px;*/
/*    border-radius: 8px;*/
/*    border: 1px solid #ddd;*/
/*    text-align: center;*/
/*}*/
/*.stat-card.highlight {*/
/*    background: #d4edda;*/
/*    border-color: #c3e6cb;*/
/*}*/
/*.stat-card h4 {*/
/*    margin: 0 0 10px 0;*/
/*    color: #666;*/
/*    font-size: 14px;*/
/*    font-weight: 600;*/
/*    text-transform: uppercase;*/
/*}*/
/*.stat-number {*/
/*    font-size: 36px;*/
/*    font-weight: bold;*/
/*    color: #2271b1;*/
/*}*/
/*.referrals-list-card {*/
/*    background: white;*/
/*    padding: 25px;*/
/*    border-radius: 8px;*/
/*    border: 1px solid #ddd;*/
/*}*/
/*.referrals-table {*/
/*    width: 100%;*/
/*    border-collapse: collapse;*/
/*    margin-top: 15px;*/
/*}*/
/*.referrals-table th,*/
/*.referrals-table td {*/
/*    padding: 12px;*/
/*    text-align: left;*/
/*    border-bottom: 1px solid #eee;*/
/*}*/
/*.referrals-table th {*/
/*    background: #f5f5f5;*/
/*    font-weight: 600;*/
/*}*/
/*.status-badge {*/
/*    padding: 4px 12px;*/
/*    border-radius: 12px;*/
/*    font-size: 12px;*/
/*    font-weight: 500;*/
/*}*/
/*.status-badge.pending {*/
/*    background: #fff3cd;*/
/*    color: #856404;*/
/*}*/
/*.status-badge.consulted {*/
/*    background: #d1ecf1;*/
/*    color: #0c5460;*/
/*}*/
/*.status-badge.treated {*/
/*    background: #d4edda;*/
/*    color: #155724;*/
/*}*/

nav.sidebar {
    --wrap: nowrap;
    position: fixed;
    top: var(--btn);
    bottom: 0;
    left: 0;
    z-index: var(--z-4);
    height: calc(100% - var(--btn));
    background-color: var(--base);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    width: var(--btn);
    transition: var(--trans-size);
    overflow: hidden auto;
}
nav.sidebar .icon {
    --w: var(--chip_);
    width: var(--btn);
    transition: var(--trans-size), margin var(--trans-base);
}
nav.sidebar.open {
    width: fit-content;
    max-width: 100%;
}
nav.sidebar.open .icon {
    --w: var(--chip);
    margin: .75rem;
    width: var(--w);
}

nav.sidebar ul {
    height: max-content;
    width: 100%;
    --gap: 0;
}
nav.sidebar .title {
    display: block;
}
/*nav.sidebar .title,*/
/*nav.sidebar .toggle {*/
/*    transition: var(--trans-size);*/
/*}*/
nav.sidebar .toggle {
    width: var(--btn);
    height: var(--chipchip);
    box-shadow: none;
    background-color: transparent;
    min-height: 0;
}
nav.sidebar .toggle:hover,
nav.sidebar .toggle:focus {
    background-color:var(--action-0);
    color: var(--action-contrast);
}

/*nav.sidebar:not(.open) .title,*/
/*nav.sidebar:not(.open) .toggle:not(.main) {*/
/*    position: absolute;*/
/*    left: var(--offScreen);*/
/*    width: 0;*/
/*    height: 0;*/
/*    max-width: 0;*/
/*    max-height: 0;*/
/*}*/
nav.sidebar .toggle.main {
    position: fixed;
    left: unset;
    bottom: 0;
    right: 0;
    width: var(--btn);
    height: var(--btn);
    z-index: var(--z-8);
    box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw);
}

nav.sidebar .title {
    white-space: nowrap;
}

nav.sidebar li {
    --justify: center;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: flex-start;
}
nav.sidebar.open li > div {
    width: 100%;
    padding-right: var(--btn);
}
nav.sidebar.open li.has-submenu > div {
    padding-right: 0;
}
nav.sidebar.open li.has-submenu > ul {
    padding-left: var(--chip);
}

nav.sidebar .a {
    color: var(--contrast-200);
}

nav.sidebar a,
nav.sidebar .a {
    height: var(--chipchip);
    /*width: var(--btn);*/
    display: flex;
    justify-content:center;
    align-items:center;
    transition: none;
    padding-left: 0;
}
nav.sidebar.open a,
nav.sidebar.open .a {
    width: 100%;
    justify-content: flex-start;
}

nav.sidebar .has-submenu ul {
    max-height: 0;
    height: 0;
    overflow:hidden;
    transition: var(--trans-size);
}
nav.sidebar .has-submenu.open > ul {
    height: 100%;
    max-height: fit-content;
}



header .title,
header .title a {
    height: var(--btn);
    margin: 0;
    display:block;
}
header .title {
    margin-left: var(--btn);
}
header .title a {
    width: var(--btn);
}

.dashboard #queue{
    bottom:0;
}

 forms.css

@@ -1,169 +1,65 @@
/******************************************************************
FORM INPUTS - BASE
******************************************************************/
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;
}

/******************************************************************
FORM INPUTS - STATES
******************************************************************/
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);
}

@media (min-width: 768px) {
    :root {
        --p-y: 1rem;
    }
}

/******************************************************************
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: .5rem 1rem;
    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: .5rem;
}

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(--linkIcon);
    background-position: .5em;
    background-size: 1em;
    background-repeat: no-repeat;
    padding-left: 2em;
}

/******************************************************************
LABELS & FIELDS
******************************************************************/
.integration .label,
label {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: .5rem;
    display: block;
}

.field {
    padding: 2rem 0;
    border: 2px solid var(--base);
    border-left: 0;
    border-right: 0;
    position: relative;
    width: 100%;
    margin: .5em 0;
    padding: .5em 0;
}
    .field + .field {
        border-top: 1px solid var(--base-200);
    }

.field:has(.has-tooltip) label {
    margin-left: 2rem;
}
    .field .wrapper {
        width: 100%;
        position: relative;
    }
        .field .validation {
            flex-shrink: 0;
            max-width: 0;
            transition: var(--trans-size);
        }
        .field.has-error .validation.error,
        .field.has-success .validation.success {
            max-width: var(--btn);
        }
        .field.has-error .error {
            color: var(--error);
        }
            .field.has-error input,
            .field.has-error textarea,
            .field.has-error select {
                border-color: var(--error);
                background-color: var(--errorBack);
            }
                .field.has-error input:focus,
                .field.has-error textarea:focus,
                .field.has-error select:focus {
                    outline-color: var(--error);
                    box-shadow: rgba(var(--error-rgb), .2);
                }
        .field.has-success .success {
            color: var(--success);
        }

legend {
    padding: 0 1rem;
        .validation-message {
            color: var(--errorText);
            font-size: var(--txt-small);
            margin-top: .25rem;
            display: block;
        }


.field[data-field=post_status] .wrapper {
    --justify: flex-start;
}
.field[data-field=post_status] .btn + label {
    width: var(--chipchip);
    min-height: var(--chipchip);
    padding: 0;
}
    .field[data-field=post_status] .btn:focus + label,
    .field[data-field=post_status] .btn + label:hover {
        color: var(--action-contrast);
    }


/**********************
DATE & TIME FIELDS
@@ -208,7 +104,7 @@
    cursor: pointer;
}

.field-input-wrapper input:is([type=time], [type=datetime-local], [type=date]):focus,
.wrapper input:is([type=time], [type=datetime-local], [type=date]):focus,
.time-wrapper input[type=time]:focus,
.datetime-wrapper input[type=datetime-local]:focus,
.date-wrapper input[type=date]:focus {
@@ -216,7 +112,7 @@
    box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
}

.field-input-wrapper .icon,
.wrapper .icon,
.time-wrapper .icon,
.datetime-wrapper .icon,
.date-wrapper .icon {
@@ -226,233 +122,6 @@
    opacity: .7;
}

/**********************
SPECIAL FIELDS
**********************/

/*.remove-item {*/
/*    background: none;*/
/*    border: none;*/
/*    padding: .25rem;*/
/*    cursor: pointer;*/
/*    color: #666;*/
/*    border-radius: var(--radius);*/
/*    width: 1.5em;*/
/*    height: 1.5em;*/
/*}*/

/*.remove-item .close {*/
/*    width: .5em;*/
/*    height: .5em;*/
/*}*/

/*.remove-item:hover {*/
/*    color: var(--action-0);*/
/*    background: #fee;*/
/*}*/



/******************************************************************
CHECKBOXES & RADIOS
******************************************************************/
[type=radio],
[type=checkbox],
input.ch {
    position: absolute;
    opacity: 0;
    left: -200vw;
}

[type=radio] + label,
[type=checkbox] + label,
input.ch + label {
    position: relative;
    cursor: pointer;
}

[type=radio] + label:hover,
[type=checkbox] + label:hover {
    color: var(--action-0);
}

[type=radio] + label::before,
[type=checkbox] + label::before,
input.ch + label::before,
[type=radio] + label::after,
[type=checkbox] + label::after,
input.ch + label::after {
    content: '';
    position: absolute;
    top: 50%;
}

[type=radio] + label::after,
[type=checkbox] + label::after,
input.ch + label::after {
    left: 5px;
    transform: translateY(-70%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid var(--light-0);
    border-width: 0 2px 2px 0;
    display: none;
}

[type=radio] + label::before,
[type=checkbox] + label::before,
input.ch + label::before {
    left: 0;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--contrast-200);
    background-color: var(--base);
    border-radius: var(--radius);
}

[type=radio]:hover + label::before,
[type=checkbox]:hover + label::before,
input.ch:hover + label::before {
    border-color: var(--action-200);
}

[type=radio]:checked + label::before,
[type=checkbox]:checked + label::before,
input.ch:checked + label::before {
    background-color: var(--action-0);
    border-color: var(--action-100);
}

[type=radio]:checked + label::before {
    border-radius: 50%;
}

[type=checkbox]:checked + label::after,
input.ch:checked + label::after {
    display: block;
    left: 5px;
    top: 50%;
    transform: translateY(-70%) rotate(45deg);
    width: .35rem;
    height: .66rem;
    border: solid var(--light-0);
    border-width: 0 2px 2px 0;
}

[type=radio]:disabled + label,
[type=checkbox]:disabled + label,
input.ch:disabled + label {
    cursor: not-allowed;
    background-color: var(--base-50);
    color: var(--base-200);
    border-color: var(--base-200);
}

[type=radio]:disabled + label:hover,
[type=checkbox]:disabled + label:hover,
input.ch:disabled + label:hover {
    background-color: var(--base-50);
    color: var(--base-200);
    border-color: var(--base-200);
}

[type=radio]:disabled + label::before,
[type=checkbox]:disabled + label::before,
input.ch:disabled + label::before {
    border-color: var(--base-200);
}

[type=radio]:not(.btn) + label,
[type=checkbox]:not(.btn) + label,
input.ch + label {
    flex: 1;
    padding-left: 2rem;
    transform-origin: top center;
    will-change: transform;
}

/* Button-style checkboxes/radios */
.btn + label::before,
.btn + label::after {
    display: none;
}

.btn + label {
    --w: 1.2em;
    border: 1px solid var(--base-200);
    border-radius: var(--radius);
    min-width: 2rem;
    min-height: 2rem;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
    color: var(--contrast-200);
    opacity: .8;
}
<<<<<<< HEAD

.field.radio.status label {
=======
.radio-options[data-field="post_status"] fieldset {
    display: flex;
    width: 100%;
}
.radio-options[data-field="post_status"] label {
>>>>>>> 75ac79b1e67a6bb4a195a86f55e5429cf2b4c3de
    padding: 0 .5rem;
}

.btn:checked + label {
    border-color: var(--contrast);
    color: var(--contrast);
    opacity: 1;
}

.btn + label:hover {
    color: var(--action-50);
    border-color: var(--action-50);
}

input[hidden] + label,
.btn[hidden] + label {
    display: none!important;
}

.checkbox-options {
    --gap: .5rem 2rem;
}

.checkbox-options label {
    flex: unset!important;
}

.field.radio {
    --gap: .125rem .5rem;
}

.field.radio input:not(.ch) + label::before {
    display: none!important;
}

.field.radio input:not(.ch) + label {
    flex: unset!important;
    padding: .25rem!important;
    border-radius: 4px;
    border: 1px solid var(--base-100);
    color: var(--contrast-200);
    font-weight: normal;
    text-align: center;
}

.field.radio input:not(.ch) + label:hover,
.field.radio input:not(.ch):checked + label {
    border-color: var(--action-0);
    color: var(--action-0);
}

/******************************************************************
QUANTITY FIELD
@@ -539,116 +208,31 @@
    border-radius: 4px 0 0  4px;
}

/******************************
TABS
******************************/
.tab-content[hidden] {
    display: block!important;
    transform: scaleY(0);
    height: 0;
    overflow: hidden;
}

.tab-content[hidden]:focus-within {
    transform: scaleY(1);
    height:auto;
}

nav.tabs h2 {
    margin: 0!important;
    line-height: 1;
    font-size: var(--txt-medium);
    display: flex;
    color: var(--contrast);
    white-space: nowrap;
    gap: 1rem;
}

nav.tabs .active h2 {
    color: var(--action-contrast);
}

nav.tabs button {
    padding: .75rem 1.5rem;
    border-radius: 0;
    position: relative;
    border: 2px solid var(--action-0);
}

nav.tabs > button:first-of-type {
    border-top-left-radius: var(--radius);
}

nav.tabs > button:last-of-type {
    border-top-right-radius: var(--radius);
}

.tabs > button:hover,
.tabs > button:focus {
    background-color: var(--base-200);
}

.tabs > button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--action-50);
    transition: width .3s;
}

.tabs > button:hover::after,
.tabs > button.active::after {
    width: 100%;
}

.tabs > button.active::after {
    background-color: var(--action-200);
}

.tabs > button.active {
    background-color: var(--action-0);
    color: var(--action-contrast);
}

.tabs > button.active:hover,
.tabs > button.active:focus {
    background-color: var(--action-100);
}

.tab-content h2 {
    display: none;
}












/************* DONE TO HERE *****/
/** UPLOADER **/

details.uploader .file-upload-container {
    margin: 1rem 0;
    max-width: 100%;
}
@media (min-width: 768px) {
    details.uploader .file-upload-container {
        margin: 1rem var(--mr) 1rem var(--ml);
        max-width: var(--content);
    }



.field.upload {
    position: relative;
}
/*.field.upload .item-grid,*/
/*.field.upload [data-upload-id] {*/
/*    touch-action: none;*/
/*}*/
    .field.upload .progress {
        display: none;
    }
    .field.upload.uploading .progress {
        display: block;
    }
    .field.upload .actions {
        position: absolute;
        top: 0;
        right: 0;
    }

.preview-wrap .item-grid,
.empty-group,
.file-upload-wrapper {
    border: 2px dashed var(--action-0);
@@ -659,22 +243,38 @@
    background: rgba(var(--action-rgb),var(--op-1));
    position: relative;
    cursor: pointer;
    user-select: none;
}
.file-upload-wrapper h2 {
    margin: 0!important;
    font-size: var(--txt-large);
}
.empty-group,
.file-upload-wrapper:hover,
.dragover {
    background: rgba(var(--action-rgb),var(--op-2));
    border-color: var(--action-0)!important;
}
    .file-upload-wrapper {
        max-width: var(--content);
        margin: 1rem auto;
    }
    .file-upload-wrapper h2 {
        margin: 0;
        font-size: var(--txt-large);
    }

.file-upload-wrapper input[type="file"] {
    .preview-wrap .item-grid:hover,
    .empty-group:hover,
    .file-upload-wrapper:hover,
    .dragover {
        background: rgba(var(--action-rgb),var(--op-2));
        border-color: var(--action-0);
    }
.preview-wrap:has(.item-grid:empty) .selection-controls {
    display: none;
}
.preview-wrap .item-grid {
    min-height: 20vh;
}
    .preview-wrap .item-grid:empty::before {
        content: 'Unsorted images become their own posts.';
        display: block;
    }
.file-upload-wrapper input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
@@ -682,193 +282,139 @@
}
.empty-group p,
.file-upload-text {
    color: var(--contrast);
    margin: 0;
}
.empty-group p strong,
.file-upload-text strong {
    color: var(--action-0);
    text-decoration: underline;
}

.field.upload {
    position: relative;
}
.field.upload:not(.uploading) .progress {
    display: none;
}
.field.upload .actions {
    position: absolute;
    top: 0;
    right: 0;
}
    .empty-group p strong,
    .file-upload-text strong {
        color: var(--action-0);
        text-decoration: underline;
    }
/** UPLOAD GROUPS **/
.item-grid.groups {
    grid-template-columns: repeat(1, 1fr);
}
.item-grid.group {
    margin-bottom: 0;
}
.item-grid.restore .item,
.item-grid.group .item,
.item-grid.preview .item {

.item-grid:is(.restore,.group,.preview) .item {
    display: block;
}
.item-grid.restore button,
.item-grid.group button,
.item-grid.preview button {
    padding: .25rem .5rem;
}
.item-grid.restore button .icon,
.item-grid.group button .icon,
.item-grid.preview button .icon {
    --w: 1.1em;
}
.item-grid.restore .item .preview > input[type=checkbox]:not(.label-button) + label,
.item-grid.preview .item .preview > input[type=checkbox]:not(.label-button) + label,
.item-grid.group .item .preview > input[type=checkbox]:not(.label-button) + label {
.item-grid:is(.restore,.group,.preview) button {
    padding: .25rem .5rem;
}

.item-grid:is(.restore,.group,.preview) .preview > input[type=checkbox]:not(.label-button) + label {
    padding-left: 0;
    margin: 0;
}
.item-grid.restore .item .preview > input[type=checkbox] + label:before,
.item-grid.preview .item .preview > input[type=checkbox] + label:before,
.item-grid.group .item .preview > input[type=checkbox] + label:before {
    transform: unset;
    top: .5rem;
    left: .5rem;
}
.item-grid.restore .item .preview > input[type=checkbox] + label::after,
.item-grid.preview .item .preview > input[type=checkbox] + label::after,
.item-grid.group .item .preview > input[type=checkbox] + label::after {
    top: .5rem;
    left: .75rem;
    transform: translateY(20%) rotate(45deg);
}
.item-grid.restore .item .item-actions,
.item-grid.preview .item .item-actions,
.item-grid.group .item .item-actions {
    /*.item-grid:is(.restore,.group,.preview) .preview > input[type=checkbox] + label::before {*/
    /*    transform: unset;*/
    /*    top: .5rem;*/
    /*    left: .5rem;*/
    /*}*/
    /*.item-grid:is(.restore,.group,.preview) .preview > input[type=checkbox] + label::after {*/
    /*    top: .5rem;*/
    /*    left: .75rem;*/
    /*    transform: translateY(20%) rotate(45deg);*/
    /*}*/
.item-grid:is(.restore,.group,.preview) .item .item-actions {
    position: absolute;
    top: 0;
    right: 0;
    padding-left: var(--chipchip);
    left: var(--chipchip);
}
.item-grid.restore summary,
.item-grid.preview summary,
.item-grid.group summary {
.item-grid:is(.restore,.group,.preview) summary {
    padding: .5rem;
}
.item-grid.restore:has([type=checkbox]:checked),
.item-grid.preview:has([type=checkbox]:checked),
.item-grid.group:has([type=checkbox]:checked) {
    padding: 1rem;
    background-color: rgba(var(--contrast-rgb),var(--op-1));
}
.item-grid.restore:has([type=checkbox]:checked) .item,
.item-grid.preview:has([type=checkbox]:checked) .item,
.item-grid.group:has([type=checkbox]:checked) .item {
    padding: .75rem;
    opacity: .8;
}
.item-grid.restore:has([type=checkbox]:checked) .item img,
.item-grid.preview:has([type=checkbox]:checked) .item img,
.item-grid.group:has([type=checkbox]:checked) .item img {
    filter: var(--filter);
}
.item-grid.restore:has([type=checkbox]:checked) details,
.item-grid.preview:has([type=checkbox]:checked) details,
.item-grid.group:has([type=checkbox]:checked) details {
    display: none;
}
.item-grid.restore .item:has([type=checkbox]:checked),
.item-grid.preview .item:has([type=checkbox]:checked),
.item-grid.group .item:has([type=checkbox]:checked) {
.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked){
    padding: .5rem;
    background-color: rgba(var(--action-rgb), var(--op-4));
    opacity: 1;
}

.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked) img {
    filter: none;
}
    .item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked) .item img {
        filter: var(--filter);
    }
.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked) details,
.item-grid.preview summary span {
    display: none;
}

.item-grid.restore .item:has([type=checkbox]:checked) img,
.item-grid.preview .item:has([type=checkbox]:checked) img,
.item-grid.group .item:has([type=checkbox]:checked) img {
    filter: none;
}

[type=radio].featured:checked + label .icon-star,
[type=radio].featured + label .icon-star-fi {
[type=radio].featured:not(:checked) + label .icon-star-fi {
    display: none;
}

[type=radio].featured + label .icon-star,
[type=radio].featured:checked + label .icon-star-fi {
    display: inline-block;
}
.restore.restore.item,
.upload.upload.item {
    [type=radio].featured:not(:checked) + label .icon-star,
    [type=radio].featured:checked + label .icon-star-fi {
        display: inline-block;
    }
.item:is(.restore,.upload) {
    border-radius: var(--radius);
    aspect-ratio: unset;
    overflow: hidden;
    background: var(--base);
    border: 1px solid var(--base-200);
}
.restore-item [for="select-item"],
.upload.item [for="select-item"] {

.item:is(.restore,.upload) [for="select-item"] {
    aspect-ratio: 1;
}

.upload.item:has(details[open]) {
.item.upload:has(details[open]) {
    grid-column: 1 / -1;
    padding: .5rem 10%;
    margin: 1rem 0;
    background-color: transparent;
    border: 2px dashed var(--action-200);
}
.restore.item img,
.upload.item img {
    .item.upload:has(details[open]) details[open] {
        background-color:transparent;
    }
.item:is(.restore,.upload) img {
    transform: scale(1);
    transition: transform var(--trans-base);
}

.restore.item:hover img,
.upload.item:hover img {
    transform: scale(1.02);
    transition: transform var(--trans-base);
}
    .item:is(.upload,.restore):hover img {
        transform: scale(1.02);
    }

.upload-group {
    background-image: var(--dashed-action);
    padding: 5px;
    border-radius: var(--radius);
    border-radius:var(--radius);
    background-color: rgba(var(--action-rgb), var(--op-1));
}
.upload-group .selected .field {
    margin: 0;
}
.upload-group .selection-actions button {
    aspect-ratio: unset;
}
    .upload-group .selected .field {
        margin: 0;
    }
    .upload-group .selection-actions button {
        aspect-ratio: unset;
    }

.submit-uploads {
    position: fixed;
    bottom: 0;
    right: var(--btn_);
    left: var(--btn_);
    z-index: var(--z-6);
    height: var(--btn);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    border-radius: var(--radius);
    animation: pulse-color 5s infinite;
    animation-delay: 1s;
    background-color: var(--action-0);
    color: var(--action-contrast);
}
.submit-uploads:hover {
    background-color: var(--base-200);
    color: var(--contrast-200);
}

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

.empty-group {
    order: -1;
    grid-column: 1 / -1;
    padding: 20px;
    background-image: var(--dashed-action);
    border-radius: var(--radius);
    margin: 10px 0;
    cursor: pointer;
@@ -886,42 +432,40 @@
    opacity: .7;
    transform: scale(.95) rotate(3deg);
    z-index: var(--z-7);
    box-shadow: 0 8px 25px rgba(0,0,0,.3);
    box-shadow: 0 8px 25px rgba(var(--contrast-rgb), var(--op-2));
}

.dragover {
    background: rgba(var(--action-rgb),var(--op-3))!important;
    border-color: var(--action-0) !important;
    background: rgba(var(--action-rgb), var(--op-3))!important;
    border-color: var(--action-0)!important;
    transform: scale(1.05);
    animation: drop-pulse .8s infinite ease-in-out;
}

.drag-preview {
    position: fixed;
    z-index: var(--z-9);
    width: fit-content;
    overflow: visible;
    pointer-events: none;
    opacity: 0.9;
    opacity: .9;
    transform: scale(1.05);
    transition: transform 0.2s ease;
    transition: transform .2s ease;
}
.drag-preview .drag-items {
    width: max-content;
    height: max-content;
    position: relative;
}

.drag-preview .drag-items .drag-item {
    width: 120px;
    height: 120px;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--base);
    border-radius: var(--radius-outer);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
    .drag-preview .drag-items {
        width: max-content;
        height: max-content;
        position: relative;
    }
    .drag-preview .drag-items .dragi-item {
        width: 120px;
        height: 120px;
        position: absolute;
        top: 0;
        left: 0;
        background: var(--base);
        border-radius: var(--radius-outer);
        box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    }

.drag-preview .drag-items .drag-item:nth-child(1) {
    transform: rotate(-3deg);
@@ -1214,18 +758,6 @@
    grid-template-columns: repeat(1, 1fr);
}

/*************************************************************
Tabs in dialog elements
************************************************************/

dialog nav.tabs {
    position: sticky;
    top: 0;
    background-color: var(--base-50);
    z-index: var(--z-6);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
    margin-bottom: 2rem;
}

/************************************************************
QUILL
@@ -1241,6 +773,11 @@
    border-top-right-radius: var(--radius);
    border-bottom: 4px solid var(--base-50);
}

    .ql-toolbar button {
        min-height: 0;
        padding: .5rem;
    }
.ql-toolbar .ql-formats {
    display: flex;
    gap: .25rem;
@@ -1318,661 +855,77 @@
    height: var(--chipchip);
    background-color: var(--action-0);
}


/*******************************************************
UPLOADER
*******************************************************/
/*!* Group actions buttons - more visible *!*/
/*.group-actions {*/
/*    display: flex;*/
/*    gap: 0.5rem;*/
/*}*/

/*.group-actions button {*/
/*    padding: 0.5rem 0.75rem;*/
/*    border-radius: var(--radius);*/
/*    background: rgba(var(--action-rgb), 0.1);*/
/*    border: 1px solid rgba(var(--action-rgb), 0.3);*/
/*    color: var(--action-0);*/
/*    font-size: var(--txt-small);*/
/*    transition: all var(--trans-base);*/
/*    cursor: pointer;*/
/*}*/

/*.group-actions button:hover {*/
/*    background: rgba(var(--action-rgb), 0.2);*/
/*    border-color: var(--action-0);*/
/*    transform: translateY(-1px);*/
/*}*/

/*!* Group item grid - distinct from preview grid *!*/
/*.item-grid.group {*/
/*    background: rgba(255, 255, 255, 0.5);*/
/*    border: 1px solid rgba(var(--action-rgb), 0.15);*/
/*    border-radius: var(--radius);*/
/*    padding: 0.75rem;*/
/*    min-height: 100px;*/
/*}*/

/*!* Group count hint *!*/
/*.group-count {*/
/*    margin-top: 0.5rem;*/
/*    font-size: var(--txt-small);*/
/*    color: var(--contrast-70);*/
/*    font-style: italic;*/
/*}*/

/*!* ============================================================================*/
/*   FIX #2: Improve drag preview styling*/
/*   ============================================================================ *!*/

/*!* Base drag preview *!*/
/*.drag-preview {*/
/*    pointer-events: none;*/
/*    z-index: 10000;*/
/*    position: fixed;*/
/*}*/

/*!* Single item drag preview *!*/
/*.drag-preview:not(.multi-item) {*/
/*    opacity: 0.9;*/
/*    transform: scale(1.05);*/
/*    border-radius: 4px;*/
/*    box-shadow: 0 8px 24px rgba(0,0,0,0.3);*/
/*    border: 2px solid var(--action-0);*/
/*}*/

/*!* Multi-item drag preview container *!*/
/*.drag-preview.multi-item {*/
/*    width: 120px;*/
/*    height: 120px;*/
/*    opacity: 0.95;*/
/*}*/

/*!* Items being dragged - reduce opacity on originals *!*/
/*.upload.item.dragging {*/
/*    opacity: 0.5;*/
/*    transform: scale(0.95);*/
/*    filter: grayscale(50%);*/
/*}*/

/*!* Count badge on multi-item preview *!*/
/*.selection-count-badge {*/
/*    position: absolute;*/
/*    top: -8px;*/
/*    right: -8px;*/
/*    background: var(--action-0);*/
/*    color: white;*/
/*    border-radius: 50%;*/
/*    width: 28px;*/
/*    height: 28px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-size: 13px;*/
/*    font-weight: bold;*/
/*    box-shadow: 0 3px 12px rgba(0,0,0,0.4);*/
/*    z-index: 20;*/
/*    border: 2px solid white;*/
/*}*/

/*!* ============================================================================*/
/*   FIX #3: Progress bar visibility and styling*/
/*   ============================================================================ *!*/

/*!* Ensure progress bar is visible when needed *!*/
/*.field.upload .progress {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem;*/
/*    padding: 1rem;*/
/*    background: rgba(var(--action-rgb), 0.05);*/
/*    border: 1px solid rgba(var(--action-rgb), 0.2);*/
/*    border-radius: var(--radius);*/
/*    margin: 1rem 0;*/
/*    animation: slideDown var(--trans-base);*/
/*}*/

/*.field.upload .progress[hidden] {*/
/*    display: none !important;*/
/*}*/

/*!* Progress bar track *!*/
/*.progress .bar {*/
/*    width: 100%;*/
/*    height: 8px;*/
/*    background: rgba(var(--action-rgb), 0.15);*/
/*    border-radius: 4px;*/
/*    overflow: hidden;*/
/*    position: relative;*/
/*}*/

/*!* Progress bar fill *!*/
/*.progress .fill {*/
/*    height: 100%;*/
/*    background: linear-gradient(90deg,*/
/*    var(--action-0) 0%,*/
/*    var(--action-200) 100%);*/
/*    border-radius: 4px;*/
/*    transition: width 0.3s ease;*/
/*    box-shadow: 0 0 8px rgba(var(--action-rgb), 0.4);*/
/*}*/

/*!* Progress details - styled for row layout with text and count *!*/
/*.progress > .details {*/
/*    font-size: var(--txt-small);*/
/*    color: var(--contrast);*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    gap: 1rem;*/
/*}*/

/*.progress > .details .text {*/
/*    font-weight: 500;*/
/*    flex: 1;*/
/*}*/

/*.progress > .details .count {*/
/*    font-weight: 600;*/
/*    color: var(--contrast-70);*/
/*    white-space: nowrap;*/
/*}*/

/*!* Individual item progress - overlay style *!*/
/*.upload.item .progress {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background: rgba(0, 0, 0, 0.75);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem;*/
/*    z-index: var(--z-2);*/
/*    color: white;*/
/*    border-radius: var(--radius);*/
/*    backdrop-filter: blur(2px);*/
/*}*/

/*.upload.item .progress .bar {*/
/*    width: 80%;*/
/*    max-width: 200px;*/
/*}*/

/*.upload.item .progress .fill {*/
/*    background: linear-gradient(90deg, white 0%, rgba(255,255,255,0.8) 100%);*/
/*}*/

/*!* Item progress icon and status text *!*/
/*.upload.item .progress span.icon {*/
/*    font-size: 2rem;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*.upload.item .progress span.details {*/
/*    color: white;*/
/*    font-size: var(--txt-small);*/
/*    font-weight: 500;*/
/*}*/

/*!* ============================================================================*/
/*   FIX #4: Ensure file upload container hides when items exist*/
/*   ============================================================================ *!*/

/*!* Hide uploader when we have uploads *!*/
/*.field.upload:has(.upload.item) .file-upload-container,*/
/*.field.upload[data-has-uploads="true"] .file-upload-container {*/
/*    display: none !important;*/
/*}*/

/*!* Show group display when we have uploads *!*/
/*.field.upload:has(.upload.item) .group-display {*/
/*    display: flex !important;*/
/*}*/

/*!* ============================================================================*/
/*   FIX #5: Improve selection visual feedback*/
/*   ============================================================================ *!*/

/*!* Selected items - more obvious *!*/
/*.upload.item:has(.upload-select:checked) {*/
/*    outline: 3px solid var(--action-0);*/
/*    outline-offset: -3px;*/
/*    box-shadow: 0 0 0 3px rgba(var(--action-rgb), 0.2);*/
/*}*/

/*!* Selection checkbox - always visible on hover or when checked *!*/
/*.upload.item .upload-select + label::before {*/
/*    opacity: 0.7;*/
/*    transition: all var(--trans-base);*/
/*}*/

/*.upload.item:hover .upload-select + label::before,*/
/*.upload.item .upload-select:checked + label::before {*/
/*    opacity: 1;*/
/*    background: rgba(255, 255, 255, 0.9);*/
/*}*/

/*!* Selection controls - more prominent *!*/
/*.selection-actions {*/
/*    display: flex;*/
/*    gap: 1rem;*/
/*    padding: 1rem;*/
/*    background: rgba(var(--action-rgb), 0.1);*/
/*    border: 2px solid rgba(var(--action-rgb), 0.3);*/
/*    border-radius: var(--radius);*/
/*    margin: 1rem 0;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*}*/

/*.selection-info {*/
/*    font-weight: 600;*/
/*    color: var(--action-0);*/
/*}*/

/*.selection-count {*/
/*    font-size: var(--txt-large);*/
/*    color: var(--action-0);*/
/*}*/

/*!* ============================================================================*/
/*   FIX #6: Animations*/
/*   ============================================================================ *!*/

/*@keyframes slideDown {*/
/*    from {*/
/*        opacity: 0;*/
/*        transform: translateY(-10px);*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

/*@keyframes fadeOut {*/
/*    from {*/
/*        opacity: 1;*/
/*    }*/
/*    to {*/
/*        opacity: 0;*/
/*    }*/
/*}*/

/*!* Smooth dragover animation *!*/
/*@keyframes drop-pulse {*/
/*    0%, 100% {*/
/*        background-color: rgba(var(--action-rgb), 0.15);*/
/*        transform: scale(1.02);*/
/*    }*/
/*    50% {*/
/*        background-color: rgba(var(--action-rgb), 0.25);*/
/*        transform: scale(1.04);*/
/*    }*/
/*}*/

/*!* ============================================================================*/
/*   FIX #7: Touch-friendly improvements*/
/*   ============================================================================ *!*/

/*@media (hover: none) and (pointer: coarse) {*/
/*    !* Larger touch targets on mobile *!*/
/*    .group-actions button {*/
/*        padding: 0.75rem 1rem;*/
/*        font-size: var(--base);*/
/*    }*/

/*    !* More obvious empty group on touch devices *!*/
/*    .empty-group {*/
/*        padding: 4rem 2rem;*/
/*        min-height: 200px;*/
/*    }*/

/*    !* Selection checkbox always visible on touch *!*/
/*    .upload.item .upload-select + label::before {*/
/*        opacity: 1;*/
/*    }*/
/*}*/
/*!* ============================================================================*/
/*   RESTORATION NOTIFICATION STYLES*/
/*   Add these to forms.css or dash.css*/
/*   ============================================================================ *!*/

/*!* Notification container - fixed overlay *!*/
/*.restore-notification {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background: rgba(0, 0, 0, 0.7);*/
/*    backdrop-filter: blur(4px);*/
/*    z-index: 10000;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    padding: 2rem;*/
/*    animation: fadeIn 0.3s ease;*/
/*}*/

/*!* Content card *!*/
/*.restore-content {*/
/*    background: var(--base);*/
/*    border-radius: var(--radius);*/
/*    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);*/
/*    max-width: 800px;*/
/*    max-height: 90vh;*/
/*    width: 100%;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    overflow: hidden;*/
/*}*/

/*!* Message section *!*/
/*.restore-message {*/
/*    padding: 2rem;*/
/*    border-bottom: 1px solid var(--border);*/
/*}*/

/*.restore-message h4 {*/
/*    margin: 0 0 0.5rem 0;*/
/*    color: var(--action-0);*/
/*    font-size: var(--txt-large);*/
/*}*/

/*.restore-message .restore-details {*/
/*    margin: 0.5rem 0;*/
/*    font-weight: 600;*/
/*    color: var(--contrast);*/
/*}*/

/*.restore-message .hint {*/
/*    margin: 0.5rem 0 0 0;*/
/*    font-size: var(--txt-small);*/
/*    color: var(--contrast-70);*/
/*}*/

/*!* Scrollable field list *!*/
/*.restore-notification .restore-field {*/
/*    padding: 1rem 2rem;*/
/*    border-bottom: 1px solid var(--border);*/
/*    max-height: 400px;*/
/*    overflow-y: auto;*/
/*}*/

/*.restore-notification .restore-field:last-of-type {*/
/*    border-bottom: none;*/
/*}*/

/*.restore-notification .restore-field h3 {*/
/*    margin: 0 0 1rem 0;*/
/*    font-size: var(--base);*/
/*    color: var(--contrast);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 0.5rem;*/
/*}*/

/*!* Item grid for restore preview *!*/
/*.item-grid.restore {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
/*    gap: 1rem;*/
/*    padding: 0;*/
/*}*/

/*!* Restore item *!*/
/*.restore-item {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    border: 2px solid var(--border);*/
/*    border-radius: var(--radius);*/
/*    overflow: hidden;*/
/*    cursor: pointer;*/
/*    transition: all var(--trans-base);*/
/*    position: relative;*/
/*}*/

/*.restore-item:hover {*/
/*    border-color: var(--action-0);*/
/*    box-shadow: 0 2px 8px rgba(var(--action-rgb), 0.2);*/
/*}*/

/*!* Checked state *!*/
/*.restore-item:has(.restore-checkbox:checked) {*/
/*    border-color: var(--action-0);*/
/*    background: rgba(var(--action-rgb), 0.05);*/
/*}*/

/*!* Preview section *!*/
/*.restore-item .preview {*/
/*    position: relative;*/
/*    aspect-ratio: 1;*/
/*    background: var(--subtle);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    overflow: hidden;*/
/*}*/

/*.restore-item .preview img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*}*/

/*.restore-item .preview .image-placeholder {*/
/*    color: var(--contrast-50);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*!* Item info *!*/
/*.restore-item-info {*/
/*    padding: 0.75rem;*/
/*    flex: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.25rem;*/
/*}*/

/*.restore-item-info .name {*/
/*    font-size: var(--txt-small);*/
/*    font-weight: 600;*/
/*    color: var(--contrast);*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap;*/
/*}*/

/*.restore-item-info .restore-item-meta {*/
/*    font-size: var(--tiny);*/
/*    color: var(--contrast-70);*/
/*}*/

/*!* Checkbox controls *!*/
/*.restore-item-controls {*/
/*    position: absolute;*/
/*    top: 0.5rem;*/
/*    right: 0.5rem;*/
/*    z-index: 2;*/
/*}*/

/*.restore-checkbox {*/
/*    width: 24px;*/
/*    height: 24px;*/
/*    cursor: pointer;*/
/*    accent-color: var(--action-0);*/
/*}*/

/*!* Actions section *!*/
/*.restore-actions {*/
/*    padding: 1.5rem 2rem;*/
/*    background: var(--subtle);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 1rem;*/
/*}*/

/*!* Selection controls *!*/
/*.selection-controls {*/
/*    display: flex;*/
/*    gap: 0.5rem;*/
/*    justify-content: flex-start;*/
/*}*/

/*.selection-controls button {*/
/*    padding: 0.5rem 1rem;*/
/*    font-size: var(--txt-small);*/
/*    border: 1px solid var(--border);*/
/*    background: var(--base);*/
/*    color: var(--contrast);*/
/*    border-radius: var(--radius);*/
/*    cursor: pointer;*/
/*    transition: all var(--trans-base);*/
/*}*/

/*.selection-controls button:hover {*/
/*    background: var(--action-0);*/
/*    color: white;*/
/*    border-color: var(--action-0);*/
/*}*/

/*!* Action buttons *!*/
/*.action-buttons {*/
/*    display: flex;*/
/*    gap: 0.75rem;*/
/*    justify-content: flex-end;*/
/*    flex-wrap: wrap;*/
/*}*/

/*.action-buttons button {*/
/*    padding: 0.75rem 1.5rem;*/
/*    font-size: var(--base);*/
/*    font-weight: 600;*/
/*    border: none;*/
/*    border-radius: var(--radius);*/
/*    cursor: pointer;*/
/*    transition: all var(--trans-base);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 0.5rem;*/
/*}*/

/*!* Restore button - primary action *!*/
/*.restore-selected {*/
/*    background: var(--action-0);*/
/*    color: white;*/
/*}*/

/*.restore-selected:hover {*/
/*    background: var(--action-200);*/
/*    transform: translateY(-1px);*/
/*    box-shadow: 0 4px 12px rgba(var(--action-rgb), 0.3);*/
/*}*/

/*!* Scrap cache button - destructive action *!*/
/*.restart-uploads {*/
/*    background: var(--danger);*/
/*    color: white;*/
/*}*/

/*.restart-uploads:hover {*/
/*    background: var(--danger-dark);*/
/*    transform: translateY(-1px);*/
/*}*/

/*!* Dismiss button - secondary action *!*/
/*.dismiss-cache-check {*/
/*    background: transparent;*/
/*    color: var(--contrast);*/
/*    border: 1px solid var(--border);*/
/*}*/

/*.dismiss-cache-check:hover {*/
/*    background: var(--subtle);*/
/*}*/

/*!* Mobile responsive *!*/
/*@media (max-width: 768px) {*/
/*    .restore-notification {*/
/*        padding: 1rem;*/
/*    }*/

/*    .restore-content {*/
/*        max-height: 95vh;*/
/*    }*/

/*    .restore-message {*/
/*        padding: 1.5rem;*/
/*    }*/

/*    .restore-notification .restore-field {*/
/*        padding: 1rem;*/
/*    }*/

/*    .item-grid.restore {*/
/*        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
/*        gap: 0.75rem;*/
/*    }*/

/*    .action-buttons {*/
/*        flex-direction: column;*/
/*    }*/

/*    .action-buttons button {*/
/*        width: 100%;*/
/*        justify-content: center;*/
/*    }*/
/*}*/

/*!* Animation *!*/
/*@keyframes fadeIn {*/
/*    from {*/
/*        opacity: 0;*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/*!* Scrollbar styling for restore field list *!*/
/*.restore-notification .restore-field::-webkit-scrollbar {*/
/*    width: 8px;*/
/*}*/

/*.restore-notification .restore-field::-webkit-scrollbar-track {*/
/*    background: var(--subtle);*/
/*}*/

/*.restore-notification .restore-field::-webkit-scrollbar-thumb {*/
/*    background: var(--border);*/
/*    border-radius: 4px;*/
/*}*/

/*.restore-notification .restore-field::-webkit-scrollbar-thumb:hover {*/
/*    background: var(--contrast-50);*/
/*}*/



/***************************
FORMS
 */
/* Stepped Form Container */
form {
    --step-size: 2.5rem;
/******************************************************
TAGLIST TAG LIST
******************************************************/
.field.tag-list .row {
    margin-bottom: 1rem;
}

.field.tag-list .row .field {
    flex: 1;
    min-width: 150px;
    margin: 0;
}

.field.tag-list .tag .add-tag-item {
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: calc(var(--txt-medium) + 1rem);
}

.field.tag-list .tag-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 2rem;
}

.field.tag-list .tag-item {
    background: var(--base-200);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.2;
}

.field.tag-list .tag-item:hover {
    background: var(--base-100);
}

.field.tag-list .tag-label {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field.tag-list .remove-tag {
    min-height: 0;
    padding: .25rem;
    color: var(--contrast);
    transition: transform 0.2s;
    box-shadow: none;
}

.field.tag-list .remove-tag:hover {
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .field.tag-list .tag {
        flex-direction: column;
        align-items: stretch;
    }

    .field.tag-list .tag .field {
        min-width: 100%;
    }
}
/* Progress Bar Styling */
.form-progress {
    padding: 0 1rem;
@@ -2091,22 +1044,6 @@
.step-navigation button[type="submit"] {
    margin-left: auto;
}

/* Error state for required fields */
.field input.error,
.field textarea.error,
.field select.error {
    border-color: var(--errorBack);
}

.error-message {
    color: var(--errorText);
    font-size: var(--txt-small);
    margin-top: 0.25rem;
    display: block;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    form nav.tabs button {
        min-width: 80px;
@@ -2121,96 +1058,20 @@
        --step-size: 2rem;
    }
}

/**** VALIDATION ******/
/* Field Input Wrapper - for positioning icon */
.field-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
/************************************************
FEEDBACK ERROR SUCCESS STATE
************************************************/
.field input.error,
.field textarea.error,
.field select.error {
    border-color: var(--errorBack);
}

.field-input-wrapper input,
.field-input-wrapper textarea,
.field-input-wrapper select {
    flex: 1;
}

/* Validation Icon */
.validation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    animation: scaleIn 0.3s ease;
    --w: 1.25rem;
}
.validation-icon.error {
    color: var(--error);
}
.validation-icon.success {
    color: var(--success);
}


@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Validation Message */
.validation-message {
    color: var(--error-0);
.error-message {
    color: var(--errorText);
    font-size: var(--txt-small);
    margin-top: 0.25rem;
    display: block;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error State */
.field.has-error input,
.field.has-error textarea,
.field.has-error select {
    border-color: var(--error);
    background-color: var(--errorBack)
}

.field.has-error input:focus,
.field.has-error textarea:focus,
.field.has-error select:focus {
    outline-color: var(--error);
    box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.2);
}

/* Success State */
.field.has-success input,
.field.has-success textarea,
.field.has-success select {
    border-color: var(--success);
}

/* Required Asterisk */
.field label .required {
    color: var(--error);
    margin-left: 0.25rem;
}

/*************************************************************
@@ -2278,212 +1139,23 @@
    margin-bottom: 0;
}

.ql-toolbar button {
    min-height: 0;
    padding: .5rem;
}

.success-message {
    color: var(--success);
    background-color: var(--successBack);
    border: 1px solid var(--success);
    padding: 0.75rem 1rem;
.selected-item {
    border: 1px solid var(--base-200);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--txt-x-small);
    background-color: var(--base);
    padding: .25rem .5rem;
}
    .selected-item button {
        --w: .5em;
        min-height: 1em;
        width: 1em;
        padding: 0;
    }

.success-message .success-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.success-box {
    background-color: var(--successBack);
    border: 2px solid var(--success);
    padding: 1.5rem;
    border-radius: var(--radius-outer);
    margin-bottom: 1rem;
    text-align: center;
}

.success-box h3 {
    color: var(--success);
    margin-bottom: 0.5rem;
}

.success-box p {
    margin: 0.5rem 0;
}

/* Form success state */
.form-success {
    opacity: 0.9;
}

/* Hide form fields after success (optional) */
.form-success .field:not(.form-success-message):not(.success-box) {
    display: none;
}

/* Keep submit button visible but disabled */
.form-success button[type="submit"] {
    opacity: 0.6;
    pointer-events: none;
}

/* Error states */
.field-error input,
.field-error textarea,
.field-error select {
    border-color: var(--error);
}

.error-message {
    color: var(--error);
    font-size: var(--txt-small);
    margin-top: 0.25rem;
    display: block;
}

.form-error {
    background-color: var(--errorBack);
    border: 1px solid var(--error);
    padding: 0.75rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

/* Success states */
.has-success input,
.has-success textarea,
.has-success select {
    border-color: var(--success);
}
.form-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-error .error-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.invite details {
    margin-bottom: 1.5rem;
}

/*******************************
Tag Field
 */
/* Tag List Field */
.field.tag-list .field-input-wrapper {
    flex-direction: column;
}
.field.tag-list .row {
    margin-bottom: 1rem;
    --align: flex-end;
}

.field.tag-list .row .field {
.selector .selected-items,
.selector .auto-wrapper {
    flex: 1;
    min-width: 150px;
    margin: 0;
}

.field.tag-list .tag .add-tag-item {
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: calc(var(--txt-medium) + 1rem);
}

.field.tag-list .tag-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 2rem;
}

.field.tag-list .tag-item {
    background: var(--base-200);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.2;
}

.field.tag-list .tag-item:hover {
    background: var(--base-100);
}

.field.tag-list .tag-label {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field.tag-list .remove-tag {
    min-height: 0;
    padding: .25rem;
    color: var(--contrast);
    transition: transform 0.2s;
    box-shadow: none;
}

.field.tag-list .remove-tag:hover {
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .field.tag-list .tag {
        flex-direction: column;
        align-items: stretch;
    }

    .field.tag-list .tag .field {
        min-width: 100%;
    }
}

.pendingChanges {
    position: fixed;
    bottom: var(--btn);
    right: var(--btn_);
    margin-right: 1rem;
    padding: 1rem;
    border-radius: var(--radius);
    background-color: rgba(var(--base-rgb),var(--op-6));
    z-index: var(--z-6);
    width: 50vw;
    animation: fadeInSlideUp 0.5s ease-out forwards;
}
    .pendingChanges button {
        min-height: 0;
        width: calc(50% - .7rem);
        padding: .35rem;
    }
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Start 20px below its final position */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* End at its normal position */
    }
}

.field.radio fieldset {
    display:flex;
    width: 100%;
}

 formsBackup.css

New file
@@ -0,0 +1,2476 @@
/******************************************************************
FORM INPUTS - BASE
******************************************************************/
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;
}

/******************************************************************
FORM INPUTS - STATES
******************************************************************/
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);
}

@media (min-width: 768px) {
    :root {
        --p-y: 1rem;
    }
}

/******************************************************************
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: .5rem 1rem;
    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: .5rem;
}

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(--linkIcon);
    background-position: .5em;
    background-size: 1em;
    background-repeat: no-repeat;
    padding-left: 2em;
}

/******************************************************************
LABELS & FIELDS
******************************************************************/
.integration .label,
label {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: .5rem;
    display: block;
}

.field {
    padding: 2rem 0;
    border: 2px solid var(--base);
    border-left: 0;
    border-right: 0;
    position: relative;
}

.field:has(.has-tooltip) label {
    margin-left: 2rem;
}

legend {
    padding: 0 1rem;
}

/**********************
DATE & TIME FIELDS
**********************/
.date-wrapper {
    position: relative;
    display: inline-block;
}

input[type=date] {
    padding: 8px 36px 8px 8px;
    border-radius: 4px;
}

input[type=date]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

input[type=date] + .icon {
    --w: 20px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

input:is([type=time], [type=datetime-local], [type=date]) {
    padding: .5rem;
    border: 1px solid var(--contrast-200);
    border-radius: 4px;
    font-size: 14px;
    min-width: 180px;
    background: var(--base);
    color: var(--contrast);
    cursor: pointer;
}

.field-input-wrapper input:is([type=time], [type=datetime-local], [type=date]):focus,
.time-wrapper input[type=time]:focus,
.datetime-wrapper input[type=datetime-local]:focus,
.date-wrapper input[type=date]:focus {
    border-color: var(--action-0);
    box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
}

.field-input-wrapper .icon,
.time-wrapper .icon,
.datetime-wrapper .icon,
.date-wrapper .icon {
    width: 18px;
    height: 18px;
    background-color: var(--contrast);
    opacity: .7;
}

/**********************
SPECIAL FIELDS
**********************/

/*.remove-item {*/
/*    background: none;*/
/*    border: none;*/
/*    padding: .25rem;*/
/*    cursor: pointer;*/
/*    color: #666;*/
/*    border-radius: var(--radius);*/
/*    width: 1.5em;*/
/*    height: 1.5em;*/
/*}*/

/*.remove-item .close {*/
/*    width: .5em;*/
/*    height: .5em;*/
/*}*/

/*.remove-item:hover {*/
/*    color: var(--action-0);*/
/*    background: #fee;*/
/*}*/



/******************************************************************
CHECKBOXES & RADIOS
******************************************************************/
[type=radio],
[type=checkbox],
input.ch {
    position: absolute;
    opacity: 0;
    left: -200vw;
}

[type=radio] + label,
[type=checkbox] + label,
input.ch + label {
    position: relative;
    cursor: pointer;
}

[type=radio] + label:hover,
[type=checkbox] + label:hover {
    color: var(--action-0);
}

[type=radio] + label::before,
[type=checkbox] + label::before,
input.ch + label::before,
[type=radio] + label::after,
[type=checkbox] + label::after,
input.ch + label::after {
    content: '';
    position: absolute;
    top: 50%;
}

[type=radio] + label::after,
[type=checkbox] + label::after,
input.ch + label::after {
    left: 5px;
    transform: translateY(-70%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid var(--light-0);
    border-width: 0 2px 2px 0;
    display: none;
}

[type=radio] + label::before,
[type=checkbox] + label::before,
input.ch + label::before {
    left: 0;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--contrast-200);
    background-color: var(--base);
    border-radius: var(--radius);
}

[type=radio]:hover + label::before,
[type=checkbox]:hover + label::before,
input.ch:hover + label::before {
    border-color: var(--action-200);
}

[type=radio]:checked + label::before,
[type=checkbox]:checked + label::before,
input.ch:checked + label::before {
    background-color: var(--action-0);
    border-color: var(--action-100);
}

[type=radio]:checked + label::before {
    border-radius: 50%;
}

[type=checkbox]:checked + label::after,
input.ch:checked + label::after {
    display: block;
    left: 5px;
    top: 50%;
    transform: translateY(-70%) rotate(45deg);
    width: .35rem;
    height: .66rem;
    border: solid var(--light-0);
    border-width: 0 2px 2px 0;
}

[type=radio]:disabled + label,
[type=checkbox]:disabled + label,
input.ch:disabled + label {
    cursor: not-allowed;
    background-color: var(--base-50);
    color: var(--base-200);
    border-color: var(--base-200);
}

[type=radio]:disabled + label:hover,
[type=checkbox]:disabled + label:hover,
input.ch:disabled + label:hover {
    background-color: var(--base-50);
    color: var(--base-200);
    border-color: var(--base-200);
}

[type=radio]:disabled + label::before,
[type=checkbox]:disabled + label::before,
input.ch:disabled + label::before {
    border-color: var(--base-200);
}

[type=radio]:not(.btn) + label,
[type=checkbox]:not(.btn) + label,
input.ch + label {
    flex: 1;
    padding-left: 2rem;
    transform-origin: top center;
    will-change: transform;
}

/* Button-style checkboxes/radios */
.btn + label::before,
.btn + label::after {
    display: none;
}

.btn + label {
    --w: 1.2em;
    border: 1px solid var(--base-200);
    border-radius: var(--radius);
    min-width: 2rem;
    min-height: 2rem;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
    color: var(--contrast-200);
    opacity: .8;
}
.radio-options[data-field="post_status"] fieldset {
    display: flex;
    width: 100%;
}
.radio-options[data-field="post_status"] label {
    padding: 0 .5rem;
}

.btn:checked + label {
    border-color: var(--contrast);
    color: var(--contrast);
    opacity: 1;
}

.btn + label:hover {
    color: var(--action-50);
    border-color: var(--action-50);
}

input[hidden] + label,
.btn[hidden] + label {
    display: none!important;
}

.checkbox-options {
    --gap: .5rem 2rem;
}

.checkbox-options label {
    flex: unset!important;
}

.radio-options {
    --gap: .125rem .5rem;
}

.radio-options input:not(.ch) + label::before {
    display: none!important;
}

.radio-options input:not(.ch) + label {
    flex: unset!important;
    padding: .25rem!important;
    border-radius: 4px;
    border: 1px solid var(--base-100);
    color: var(--contrast-200);
    font-weight: normal;
    text-align: center;
}

.radio-options input:not(.ch) + label:hover,
.radio-options input:not(.ch):checked + label {
    border-color: var(--action-0);
    color: var(--action-0);
}

/******************************************************************
QUANTITY FIELD
******************************************************************/
.quantity {
    margin: 0;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    position: relative;
}

.quantity:focus-within {
    border-color: var(--action-0);
}

.quantity label {
    margin: 0;
    font-size: var(--txt-small);
}

.quantity button {
    background: var(--base);
    padding: 0;
    width: var(--chip_);
    height: var(--chip_);
    min-height: 0;
    z-index: 0;
    position: relative;
    border: 1px solid var(--base-200);
    color: var(--contrast-200);
}

.quantity button:hover:not(:disabled) {
    color: var(--action-0);
    border-color: var(--action-0);
    background-color: var(--base);
}

.quantity button:active:not(:disabled) {
    background-color: var(--action-0);
    color: var(--light-0);
    transform: scale(.95);
}

.quantity button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.quantity input[type=number] {
    z-index: 1;
    border: 1px solid var(--base-200);
    background: var(--base);
    text-align: center;
    font-size: 1.1rem;
    width: 60px;
    height: 48px;
    margin: 0;
    padding: 0!important;
    appearance: textfield;
}

.quantity input[type=number]::-webkit-outer-spin-button,
.quantity input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity input[type=number]:focus {
    background-color: var(--base-50);
}

.quantity button.increase {
    left: -2px;
    border-radius: 0 4px 4px 0;
}

.quantity button.decrease {
    right: -2px;
    border-radius: 4px 0 0  4px;
}

/******************************
TABS
******************************/
.tab-content[hidden] {
    display: block!important;
    transform: scaleY(0);
    height: 0;
    overflow: hidden;
}

.tab-content[hidden]:focus-within {
    transform: scaleY(1);
    height:auto;
}

nav.tabs h2 {
    margin: 0!important;
    line-height: 1;
    font-size: var(--txt-medium);
    display: flex;
    color: var(--contrast);
    white-space: nowrap;
    gap: 1rem;
}

nav.tabs .active h2 {
    color: var(--action-contrast);
}

nav.tabs button {
    padding: .75rem 1.5rem;
    border-radius: 0;
    position: relative;
    border: 2px solid var(--action-0);
}

nav.tabs > button:first-of-type {
    border-top-left-radius: var(--radius);
}

nav.tabs > button:last-of-type {
    border-top-right-radius: var(--radius);
}

.tabs > button:hover,
.tabs > button:focus {
    background-color: var(--base-200);
}

.tabs > button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--action-50);
    transition: width .3s;
}

.tabs > button:hover::after,
.tabs > button.active::after {
    width: 100%;
}

.tabs > button.active::after {
    background-color: var(--action-200);
}

.tabs > button.active {
    background-color: var(--action-0);
    color: var(--action-contrast);
}

.tabs > button.active:hover,
.tabs > button.active:focus {
    background-color: var(--action-100);
}

.tab-content h2 {
    display: none;
}












/************* DONE TO HERE *****/

details.uploader .file-upload-container {
    margin: 1rem 0;
    max-width: 100%;
}
@media (min-width: 768px) {
    details.uploader .file-upload-container {
        margin: 1rem var(--mr) 1rem var(--ml);
        max-width: var(--content);
    }
}
/*.field.upload .item-grid,*/
/*.field.upload [data-upload-id] {*/
/*    touch-action: none;*/
/*}*/
.empty-group,
.file-upload-wrapper {
    border: 2px dashed var(--action-0);
    border-radius: 4px;
    padding: 2rem;
    text-align: center;
    transition: all .3s ease;
    background: rgba(var(--action-rgb),var(--op-1));
    position: relative;
    cursor: pointer;
}
.file-upload-wrapper h2 {
    margin: 0!important;
    font-size: var(--txt-large);
}
.empty-group,
.file-upload-wrapper:hover,
.dragover {
    background: rgba(var(--action-rgb),var(--op-2));
    border-color: var(--action-0)!important;
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.empty-group p,
.file-upload-text {
    color: var(--contrast);
    margin: 0;
}
.empty-group p strong,
.file-upload-text strong {
    color: var(--action-0);
    text-decoration: underline;
}

.field.upload {
    position: relative;
}
.field.upload:not(.uploading) .progress {
    display: none;
}
.field.upload .actions {
    position: absolute;
    top: 0;
    right: 0;
}
.item-grid.groups {
    grid-template-columns: repeat(1, 1fr);
}
.item-grid.group {
    margin-bottom: 0;
}
.item-grid.restore .item,
.item-grid.group .item,
.item-grid.preview .item {
    display: block;
}
.item-grid.restore button,
.item-grid.group button,
.item-grid.preview button {
    padding: .25rem .5rem;
}
.item-grid.restore button .icon,
.item-grid.group button .icon,
.item-grid.preview button .icon {
    --w: 1.1em;
}
.item-grid.restore .item .preview > input[type=checkbox]:not(.label-button) + label,
.item-grid.preview .item .preview > input[type=checkbox]:not(.label-button) + label,
.item-grid.group .item .preview > input[type=checkbox]:not(.label-button) + label {
    padding-left: 0;
    margin: 0;
}
.item-grid.restore .item .preview > input[type=checkbox] + label:before,
.item-grid.preview .item .preview > input[type=checkbox] + label:before,
.item-grid.group .item .preview > input[type=checkbox] + label:before {
    transform: unset;
    top: .5rem;
    left: .5rem;
}
.item-grid.restore .item .preview > input[type=checkbox] + label::after,
.item-grid.preview .item .preview > input[type=checkbox] + label::after,
.item-grid.group .item .preview > input[type=checkbox] + label::after {
    top: .5rem;
    left: .75rem;
    transform: translateY(20%) rotate(45deg);
}
.item-grid.restore .item .item-actions,
.item-grid.preview .item .item-actions,
.item-grid.group .item .item-actions {
    position: absolute;
    top: 0;
    right: 0;
    padding-left: var(--chipchip);
}
.item-grid.restore summary,
.item-grid.preview summary,
.item-grid.group summary {
    padding: .5rem;
}
.item-grid.restore:has([type=checkbox]:checked),
.item-grid.preview:has([type=checkbox]:checked),
.item-grid.group:has([type=checkbox]:checked) {
    padding: 1rem;
    background-color: rgba(var(--contrast-rgb),var(--op-1));
}
.item-grid.restore:has([type=checkbox]:checked) .item,
.item-grid.preview:has([type=checkbox]:checked) .item,
.item-grid.group:has([type=checkbox]:checked) .item {
    padding: .75rem;
    opacity: .8;
}
.item-grid.restore:has([type=checkbox]:checked) .item img,
.item-grid.preview:has([type=checkbox]:checked) .item img,
.item-grid.group:has([type=checkbox]:checked) .item img {
    filter: var(--filter);
}
.item-grid.restore:has([type=checkbox]:checked) details,
.item-grid.preview:has([type=checkbox]:checked) details,
.item-grid.group:has([type=checkbox]:checked) details {
    display: none;
}
.item-grid.restore .item:has([type=checkbox]:checked),
.item-grid.preview .item:has([type=checkbox]:checked),
.item-grid.group .item:has([type=checkbox]:checked) {
    padding: .5rem;
    background-color: rgba(var(--action-rgb), var(--op-4));
    opacity: 1;
}

.item-grid.preview summary span {
    display: none;
}

.item-grid.restore .item:has([type=checkbox]:checked) img,
.item-grid.preview .item:has([type=checkbox]:checked) img,
.item-grid.group .item:has([type=checkbox]:checked) img {
    filter: none;
}

[type=radio].featured:checked + label .icon-star,
[type=radio].featured + label .icon-star-fi {
    display: none;
}

[type=radio].featured + label .icon-star,
[type=radio].featured:checked + label .icon-star-fi {
    display: inline-block;
}
.restore.restore.item,
.upload.upload.item {
    border-radius: var(--radius);
    aspect-ratio: unset;
    overflow: hidden;
    background: var(--base);
    border: 1px solid var(--base-200);
}
.restore-item [for="select-item"],
.upload.item [for="select-item"] {
    aspect-ratio: 1;
}

.upload.item:has(details[open]) {
    grid-column: 1 / -1;
}
.restore.item img,
.upload.item img {
    transition: transform var(--trans-base);
}

.restore.item:hover img,
.upload.item:hover img {
    transform: scale(1.02);
    transition: transform var(--trans-base);
}

.upload-group {
    background-image: var(--dashed-action);
    padding: 5px;
    border-radius: var(--radius);
    background-color: rgba(var(--action-rgb), var(--op-1));
}
.upload-group .selected .field {
    margin: 0;
}
.upload-group .selection-actions button {
    aspect-ratio: unset;
}

.submit-uploads {
    position: fixed;
    bottom: 0;
    right: var(--btn_);
    z-index: var(--z-6);
    height: var(--btn);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    border-radius: var(--radius);
    animation: pulse-color 5s infinite;
    animation-delay: 1s;
    background-color: var(--action-0);
    color: var(--action-contrast);
}
.submit-uploads:hover {
    background-color: var(--base-200);
    color: var(--contrast-200);
}


.empty-group {
    order: -1;
    grid-column: 1 / -1;
    padding: 20px;
    background-image: var(--dashed-action);
    border-radius: var(--radius);
    margin: 10px 0;
    cursor: pointer;
    transition: all var(--trans-base);
    text-align: center;
    background-color: rgba(var(--action-rgb), var(--op-1));
}

.group-display:not([hidden]) ~ .file-upload-container {
    display: none;
}

.upload.item.dragging,
.dragging {
    opacity: .7;
    transform: scale(.95) rotate(3deg);
    z-index: var(--z-7);
    box-shadow: 0 8px 25px rgba(0,0,0,.3);
}

.dragover {
    background: rgba(var(--action-rgb),var(--op-3))!important;
    border-color: var(--action-0) !important;
    transform: scale(1.05);
    animation: drop-pulse .8s infinite ease-in-out;
}

.drag-preview {
    position: fixed;
    z-index: var(--z-9);
    width: fit-content;
    overflow: visible;
    pointer-events: none;
    opacity: 0.9;
    transform: scale(1.05);
    transition: transform 0.2s ease;
}
.drag-preview .drag-items {
    width: max-content;
    height: max-content;
    position: relative;
}

.drag-preview .drag-items .drag-item {
    width: 120px;
    height: 120px;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--base);
    border-radius: var(--radius-outer);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}

.drag-preview .drag-items .drag-item:nth-child(1) {
    transform: rotate(-3deg);
    z-index: 3;
}

.drag-preview .drag-items .drag-item:nth-child(2) {
    left: 8px;
    top: -4px;
    transform: rotate(4deg);
    z-index: 2;
    transition-delay: 0.03s;
}

.drag-preview .drag-items .drag-item:nth-child(3) {
    left: -6px;
    top: -8px;
    transform: rotate(-5deg);
    z-index: 1;
    transition-delay: 0.06s;
}

.drag-preview .drag-items .drag-item:nth-child(4) {
    left: 12px;
    top: -12px;
    transform: rotate(3deg);
    z-index: 0;
    transition-delay: 0.09s;
}

/* Additional items follow the pattern */
.drag-preview .drag-items .drag-item:nth-child(n+5) {
    left: -10px;
    top: -16px;
    transform: rotate(-4deg);
    z-index: 0;
    opacity: 0.8;
}

/* The actual image/video inside fills the wrapper */
.drag-preview .drag-items img,
.drag-preview .drag-items video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.drag-preview .drag-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--base-200);
    color: var(--contrast);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    z-index: var(--z-3);
}

/* Touch-specific offset positioning handled via transform in JS */
.drag-preview[data-source="touch"] {
    /* JS will apply appropriate offset transforms */
}

/* Items being dragged - reduce opacity on originals */
.item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    filter: grayscale(50%);
    transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

@keyframes drop-pulse {
    0%, 100% {
        background-color: rgba(var(--action-rgb),var(--op-3));
        transform: scale(1.02);
    }
    50% {
        background-color: var(rgba(var(--action-rgb),var(--op-4)));
        transform: scale(1.04);
    }
}

/******
Upload grouping
******/
.selection-actions {
    display: flex;
    gap: .25rem;
}
@media (max-width: 767px) {
    body:not(.uploading):has(.group-display:not([hidden])){
        overflow:hidden;
    }
    body:not(.uploading):has(.group-display:not([hidden])) .qtoggle {
        z-index: var(--z-1);
    }

    .group-display.group-display {
        position: fixed;
        top: var(--btn);
        bottom: var(--btn);
        left: 0;
        right: 0;
        max-height: var(--maxHeight);
        overflow: hidden;
        z-index: var(--z-6);
        width: calc(100% - 1rem);
        height: calc(100% - 1rem);
        padding: 0 0 3rem;
        --justify: flex-start;
        --align: flex-start;
        --gap: 0;
    }
    .group-display::before {
        content: '';
        display: block;
        z-index: -1;
        top: -.5rem;
        bottom: -.5rem;
        left: -.5rem;
        right: -.5rem;
        position: absolute;
        background-color: rgba(var(--base-rgb), var(--op-6));
        filter: blur(5px);
    }

    .group-display .preview-wrap,
    .group-display .sidebar {
        --wrap: nowrap;
        height: 50%;
        overflow:hidden auto;
        position: relative;
        padding: .5rem;
    }
    .group-display .preview-wrap {
        top: 0;
    }
    .group-display .preview-wrap .selected {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .group-display .sidebar {
        bottom: 0;
        flex-wrap: nowrap;
        overflow: hidden auto;
        background-color: var(--contrast-200);
        color: var(--base);
    }
    .group-display .sidebar > .hint {
        color: var(--contrast);
    }
    .group-display .sidebar .header {
        display: none;
    }

    .group-display .preview-actions {
        top: 0;
        flex-shrink:0;
    }
    .group-display .preview-wrap > .hint,
    .group-display .sidebar > .hint {
        bottom: 0;
        margin: 0;
        text-align: center;
    }
    .group-display .preview-wrap > .hint,
    .group-display .sidebar > .hint,
    .group-display .preview-actions {
        position: absolute;
        left: 0;
        right: 0;
        background-color: rgba(var(--base-rgb), var(--op-6));
        z-index: var(--z-3);
        box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    }
    .group-display .item-grid {
        height: 100%;
        overflow: hidden auto;
        grid-template-columns: repeat(3, 1fr);
        padding: 2rem 0;
    }
    .group-display .sidebar > .item-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
        padding: 0;
    }
    .group-display .sidebar .empty-group {
        order: 0;
        position: sticky;
        height: fit-content;
        top: 0;
        z-index: var(--z-3);
        background-color: rgba(var(--action-rgb), var(--op-6));
    }
    .group-display .sidebar .upload-group {
        order: 1;
    }
    .group-display .sidebar .empty-group p {
        margin: 0;
    }


    .group-display .field label,
    .group-display .field {
        margin: 0;
        padding: 0;
    }

    .group-display .sidebar h4 {
        margin: .25rem;
    }

    .group-display .item {
        width:100%;
        height: max-content;
    }

    .submit-uploads {
        bottom: var(--btn);
        left: 0;
        right: 0;
        width: 100%;
        height: 3rem;
    }

    body.uploading .group-display.group-display {
        position: relative;
        top: unset;
        bottom: unset;
        right: unset;
        left: unset;
    }
}
@media (min-width: 768px) {
    .group-display.group-display {
        --wrap: nowrap;
        --dir: row;
        --gap: 1rem;
        --align: flex-start;
    }
    .group-display .preview-wrap,
    .group-display .sidebar {
        --justify: flex-start;
        --wrap: nowrap;
        max-height: calc(100vh - var(--btnbtn));
        overflow: hidden auto;
    }
    .group-display .preview-wrap,
    .group-display .sidebar {
        width: 50%;
    }

    .preview-actions,
    .preview-wrap .hint {
        position: sticky;
        z-index: var(--z-3);
        box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
        background-color: var(--base);
        width: 100%;
    }
    .preview-actions {
        top: 0;
        left: 0;
        right: 0;
    }
    .preview-actions .field {
        margin: 0;
    }
    .sidebar > .hint,
    .preview-wrap .hint {
        bottom: -1rem;
        padding-bottom: 1rem;
        margin: 0;
        left: 0;
        right: 0;
        text-align: center;
    }
}

.item-grid.restore {
    grid-template-columns: repeat(1, 1fr);
}

/*************************************************************
Tabs in dialog elements
************************************************************/

dialog nav.tabs {
    position: sticky;
    top: 0;
    background-color: var(--base-50);
    z-index: var(--z-6);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
    margin-bottom: 2rem;
}

/************************************************************
QUILL
************************************************************/
.editor-container .ql-toolbar {
    display: flex;
    background-color: var(--base-50);
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: .25rem;
    gap: .5rem 1rem;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border-bottom: 4px solid var(--base-50);
}
.ql-toolbar .ql-formats {
    display: flex;
    gap: .25rem;
}
.editor-container .ql-container {
    --padding: 1rem;
    background-color: var(--base);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    height: fit-content;
    padding: 2px;
    border: 1px solid var(--base-200);
}
.editor-container .ql-container .ql-editor {
    padding: var(--padding);
    width: 100%;
    height: 100%;
}
.ql-editor img {
    max-width: 50%;
    height: auto;
}

.ql-clipboard {
    left: -100000px;
    height: 1px;
    overflow-y: hidden;
    position: absolute;
    top: 50%;
}
.ql-hidden {
    display: none;
}
.ql-tooltip {
    position: absolute;
    transform: translateY(10px);
    background-color: var(--base-100);
    border: 1px solid var(--base);
    box-shadow: 0px 0px 5px rgba(var(--base-rgb),var(--op-6));
    color: var(--contrast);
    padding: 5px 12px;
    white-space: nowrap;
}

/******************************************************
FIELDS
******************************************************/

[data-type=single] .item-grid {
    display: flex;
}

/******************************************************
REPEATER
******************************************************/
.repeater-row details summary::after {
    margin-left: 0;
}
.repeater-row details summary button {
    margin-left: auto;
}

.repeater .field-input-wrapper {
    flex-direction: column;
}
.repeater .repeater-items {
    width: 100%;

}

.remove-row,
.add-repeater-row {
    margin-left: auto;
    min-height: 0;
    height: var(--chipchip);
    background-color: var(--action-0);
}


/*******************************************************
UPLOADER
*******************************************************/
/*!* Group actions buttons - more visible *!*/
/*.group-actions {*/
/*    display: flex;*/
/*    gap: 0.5rem;*/
/*}*/

/*.group-actions button {*/
/*    padding: 0.5rem 0.75rem;*/
/*    border-radius: var(--radius);*/
/*    background: rgba(var(--action-rgb), 0.1);*/
/*    border: 1px solid rgba(var(--action-rgb), 0.3);*/
/*    color: var(--action-0);*/
/*    font-size: var(--txt-small);*/
/*    transition: all var(--trans-base);*/
/*    cursor: pointer;*/
/*}*/

/*.group-actions button:hover {*/
/*    background: rgba(var(--action-rgb), 0.2);*/
/*    border-color: var(--action-0);*/
/*    transform: translateY(-1px);*/
/*}*/

/*!* Group item grid - distinct from preview grid *!*/
/*.item-grid.group {*/
/*    background: rgba(255, 255, 255, 0.5);*/
/*    border: 1px solid rgba(var(--action-rgb), 0.15);*/
/*    border-radius: var(--radius);*/
/*    padding: 0.75rem;*/
/*    min-height: 100px;*/
/*}*/

/*!* Group count hint *!*/
/*.group-count {*/
/*    margin-top: 0.5rem;*/
/*    font-size: var(--txt-small);*/
/*    color: var(--contrast-70);*/
/*    font-style: italic;*/
/*}*/

/*!* ============================================================================*/
/*   FIX #2: Improve drag preview styling*/
/*   ============================================================================ *!*/

/*!* Base drag preview *!*/
/*.drag-preview {*/
/*    pointer-events: none;*/
/*    z-index: 10000;*/
/*    position: fixed;*/
/*}*/

/*!* Single item drag preview *!*/
/*.drag-preview:not(.multi-item) {*/
/*    opacity: 0.9;*/
/*    transform: scale(1.05);*/
/*    border-radius: 4px;*/
/*    box-shadow: 0 8px 24px rgba(0,0,0,0.3);*/
/*    border: 2px solid var(--action-0);*/
/*}*/

/*!* Multi-item drag preview container *!*/
/*.drag-preview.multi-item {*/
/*    width: 120px;*/
/*    height: 120px;*/
/*    opacity: 0.95;*/
/*}*/

/*!* Items being dragged - reduce opacity on originals *!*/
/*.upload.item.dragging {*/
/*    opacity: 0.5;*/
/*    transform: scale(0.95);*/
/*    filter: grayscale(50%);*/
/*}*/

/*!* Count badge on multi-item preview *!*/
/*.selection-count-badge {*/
/*    position: absolute;*/
/*    top: -8px;*/
/*    right: -8px;*/
/*    background: var(--action-0);*/
/*    color: white;*/
/*    border-radius: 50%;*/
/*    width: 28px;*/
/*    height: 28px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-size: 13px;*/
/*    font-weight: bold;*/
/*    box-shadow: 0 3px 12px rgba(0,0,0,0.4);*/
/*    z-index: 20;*/
/*    border: 2px solid white;*/
/*}*/

/*!* ============================================================================*/
/*   FIX #3: Progress bar visibility and styling*/
/*   ============================================================================ *!*/

/*!* Ensure progress bar is visible when needed *!*/
/*.field.upload .progress {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem;*/
/*    padding: 1rem;*/
/*    background: rgba(var(--action-rgb), 0.05);*/
/*    border: 1px solid rgba(var(--action-rgb), 0.2);*/
/*    border-radius: var(--radius);*/
/*    margin: 1rem 0;*/
/*    animation: slideDown var(--trans-base);*/
/*}*/

/*.field.upload .progress[hidden] {*/
/*    display: none !important;*/
/*}*/

/*!* Progress bar track *!*/
/*.progress .bar {*/
/*    width: 100%;*/
/*    height: 8px;*/
/*    background: rgba(var(--action-rgb), 0.15);*/
/*    border-radius: 4px;*/
/*    overflow: hidden;*/
/*    position: relative;*/
/*}*/

/*!* Progress bar fill *!*/
/*.progress .fill {*/
/*    height: 100%;*/
/*    background: linear-gradient(90deg,*/
/*    var(--action-0) 0%,*/
/*    var(--action-200) 100%);*/
/*    border-radius: 4px;*/
/*    transition: width 0.3s ease;*/
/*    box-shadow: 0 0 8px rgba(var(--action-rgb), 0.4);*/
/*}*/

/*!* Progress details - styled for row layout with text and count *!*/
/*.progress > .details {*/
/*    font-size: var(--txt-small);*/
/*    color: var(--contrast);*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    gap: 1rem;*/
/*}*/

/*.progress > .details .text {*/
/*    font-weight: 500;*/
/*    flex: 1;*/
/*}*/

/*.progress > .details .count {*/
/*    font-weight: 600;*/
/*    color: var(--contrast-70);*/
/*    white-space: nowrap;*/
/*}*/

/*!* Individual item progress - overlay style *!*/
/*.upload.item .progress {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background: rgba(0, 0, 0, 0.75);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem;*/
/*    z-index: var(--z-2);*/
/*    color: white;*/
/*    border-radius: var(--radius);*/
/*    backdrop-filter: blur(2px);*/
/*}*/

/*.upload.item .progress .bar {*/
/*    width: 80%;*/
/*    max-width: 200px;*/
/*}*/

/*.upload.item .progress .fill {*/
/*    background: linear-gradient(90deg, white 0%, rgba(255,255,255,0.8) 100%);*/
/*}*/

/*!* Item progress icon and status text *!*/
/*.upload.item .progress span.icon {*/
/*    font-size: 2rem;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*.upload.item .progress span.details {*/
/*    color: white;*/
/*    font-size: var(--txt-small);*/
/*    font-weight: 500;*/
/*}*/

/*!* ============================================================================*/
/*   FIX #4: Ensure file upload container hides when items exist*/
/*   ============================================================================ *!*/

/*!* Hide uploader when we have uploads *!*/
/*.field.upload:has(.upload.item) .file-upload-container,*/
/*.field.upload[data-has-uploads="true"] .file-upload-container {*/
/*    display: none !important;*/
/*}*/

/*!* Show group display when we have uploads *!*/
/*.field.upload:has(.upload.item) .group-display {*/
/*    display: flex !important;*/
/*}*/

/*!* ============================================================================*/
/*   FIX #5: Improve selection visual feedback*/
/*   ============================================================================ *!*/

/*!* Selected items - more obvious *!*/
/*.upload.item:has(.upload-select:checked) {*/
/*    outline: 3px solid var(--action-0);*/
/*    outline-offset: -3px;*/
/*    box-shadow: 0 0 0 3px rgba(var(--action-rgb), 0.2);*/
/*}*/

/*!* Selection checkbox - always visible on hover or when checked *!*/
/*.upload.item .upload-select + label::before {*/
/*    opacity: 0.7;*/
/*    transition: all var(--trans-base);*/
/*}*/

/*.upload.item:hover .upload-select + label::before,*/
/*.upload.item .upload-select:checked + label::before {*/
/*    opacity: 1;*/
/*    background: rgba(255, 255, 255, 0.9);*/
/*}*/

/*!* Selection controls - more prominent *!*/
/*.selection-actions {*/
/*    display: flex;*/
/*    gap: 1rem;*/
/*    padding: 1rem;*/
/*    background: rgba(var(--action-rgb), 0.1);*/
/*    border: 2px solid rgba(var(--action-rgb), 0.3);*/
/*    border-radius: var(--radius);*/
/*    margin: 1rem 0;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*}*/

/*.selection-info {*/
/*    font-weight: 600;*/
/*    color: var(--action-0);*/
/*}*/

/*.selection-count {*/
/*    font-size: var(--txt-large);*/
/*    color: var(--action-0);*/
/*}*/

/*!* ============================================================================*/
/*   FIX #6: Animations*/
/*   ============================================================================ *!*/

/*@keyframes slideDown {*/
/*    from {*/
/*        opacity: 0;*/
/*        transform: translateY(-10px);*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

/*@keyframes fadeOut {*/
/*    from {*/
/*        opacity: 1;*/
/*    }*/
/*    to {*/
/*        opacity: 0;*/
/*    }*/
/*}*/

/*!* Smooth dragover animation *!*/
/*@keyframes drop-pulse {*/
/*    0%, 100% {*/
/*        background-color: rgba(var(--action-rgb), 0.15);*/
/*        transform: scale(1.02);*/
/*    }*/
/*    50% {*/
/*        background-color: rgba(var(--action-rgb), 0.25);*/
/*        transform: scale(1.04);*/
/*    }*/
/*}*/

/*!* ============================================================================*/
/*   FIX #7: Touch-friendly improvements*/
/*   ============================================================================ *!*/

/*@media (hover: none) and (pointer: coarse) {*/
/*    !* Larger touch targets on mobile *!*/
/*    .group-actions button {*/
/*        padding: 0.75rem 1rem;*/
/*        font-size: var(--base);*/
/*    }*/

/*    !* More obvious empty group on touch devices *!*/
/*    .empty-group {*/
/*        padding: 4rem 2rem;*/
/*        min-height: 200px;*/
/*    }*/

/*    !* Selection checkbox always visible on touch *!*/
/*    .upload.item .upload-select + label::before {*/
/*        opacity: 1;*/
/*    }*/
/*}*/
/*!* ============================================================================*/
/*   RESTORATION NOTIFICATION STYLES*/
/*   Add these to forms.css or dash.css*/
/*   ============================================================================ *!*/

/*!* Notification container - fixed overlay *!*/
/*.restore-notification {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background: rgba(0, 0, 0, 0.7);*/
/*    backdrop-filter: blur(4px);*/
/*    z-index: 10000;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    padding: 2rem;*/
/*    animation: fadeIn 0.3s ease;*/
/*}*/

/*!* Content card *!*/
/*.restore-content {*/
/*    background: var(--base);*/
/*    border-radius: var(--radius);*/
/*    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);*/
/*    max-width: 800px;*/
/*    max-height: 90vh;*/
/*    width: 100%;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    overflow: hidden;*/
/*}*/

/*!* Message section *!*/
/*.restore-message {*/
/*    padding: 2rem;*/
/*    border-bottom: 1px solid var(--border);*/
/*}*/

/*.restore-message h4 {*/
/*    margin: 0 0 0.5rem 0;*/
/*    color: var(--action-0);*/
/*    font-size: var(--txt-large);*/
/*}*/

/*.restore-message .restore-details {*/
/*    margin: 0.5rem 0;*/
/*    font-weight: 600;*/
/*    color: var(--contrast);*/
/*}*/

/*.restore-message .hint {*/
/*    margin: 0.5rem 0 0 0;*/
/*    font-size: var(--txt-small);*/
/*    color: var(--contrast-70);*/
/*}*/

/*!* Scrollable field list *!*/
/*.restore-notification .restore-field {*/
/*    padding: 1rem 2rem;*/
/*    border-bottom: 1px solid var(--border);*/
/*    max-height: 400px;*/
/*    overflow-y: auto;*/
/*}*/

/*.restore-notification .restore-field:last-of-type {*/
/*    border-bottom: none;*/
/*}*/

/*.restore-notification .restore-field h3 {*/
/*    margin: 0 0 1rem 0;*/
/*    font-size: var(--base);*/
/*    color: var(--contrast);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 0.5rem;*/
/*}*/

/*!* Item grid for restore preview *!*/
/*.item-grid.restore {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
/*    gap: 1rem;*/
/*    padding: 0;*/
/*}*/

/*!* Restore item *!*/
/*.restore-item {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    border: 2px solid var(--border);*/
/*    border-radius: var(--radius);*/
/*    overflow: hidden;*/
/*    cursor: pointer;*/
/*    transition: all var(--trans-base);*/
/*    position: relative;*/
/*}*/

/*.restore-item:hover {*/
/*    border-color: var(--action-0);*/
/*    box-shadow: 0 2px 8px rgba(var(--action-rgb), 0.2);*/
/*}*/

/*!* Checked state *!*/
/*.restore-item:has(.restore-checkbox:checked) {*/
/*    border-color: var(--action-0);*/
/*    background: rgba(var(--action-rgb), 0.05);*/
/*}*/

/*!* Preview section *!*/
/*.restore-item .preview {*/
/*    position: relative;*/
/*    aspect-ratio: 1;*/
/*    background: var(--subtle);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    overflow: hidden;*/
/*}*/

/*.restore-item .preview img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*}*/

/*.restore-item .preview .image-placeholder {*/
/*    color: var(--contrast-50);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*!* Item info *!*/
/*.restore-item-info {*/
/*    padding: 0.75rem;*/
/*    flex: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.25rem;*/
/*}*/

/*.restore-item-info .name {*/
/*    font-size: var(--txt-small);*/
/*    font-weight: 600;*/
/*    color: var(--contrast);*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap;*/
/*}*/

/*.restore-item-info .restore-item-meta {*/
/*    font-size: var(--tiny);*/
/*    color: var(--contrast-70);*/
/*}*/

/*!* Checkbox controls *!*/
/*.restore-item-controls {*/
/*    position: absolute;*/
/*    top: 0.5rem;*/
/*    right: 0.5rem;*/
/*    z-index: 2;*/
/*}*/

/*.restore-checkbox {*/
/*    width: 24px;*/
/*    height: 24px;*/
/*    cursor: pointer;*/
/*    accent-color: var(--action-0);*/
/*}*/

/*!* Actions section *!*/
/*.restore-actions {*/
/*    padding: 1.5rem 2rem;*/
/*    background: var(--subtle);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 1rem;*/
/*}*/

/*!* Selection controls *!*/
/*.selection-controls {*/
/*    display: flex;*/
/*    gap: 0.5rem;*/
/*    justify-content: flex-start;*/
/*}*/

/*.selection-controls button {*/
/*    padding: 0.5rem 1rem;*/
/*    font-size: var(--txt-small);*/
/*    border: 1px solid var(--border);*/
/*    background: var(--base);*/
/*    color: var(--contrast);*/
/*    border-radius: var(--radius);*/
/*    cursor: pointer;*/
/*    transition: all var(--trans-base);*/
/*}*/

/*.selection-controls button:hover {*/
/*    background: var(--action-0);*/
/*    color: white;*/
/*    border-color: var(--action-0);*/
/*}*/

/*!* Action buttons *!*/
/*.action-buttons {*/
/*    display: flex;*/
/*    gap: 0.75rem;*/
/*    justify-content: flex-end;*/
/*    flex-wrap: wrap;*/
/*}*/

/*.action-buttons button {*/
/*    padding: 0.75rem 1.5rem;*/
/*    font-size: var(--base);*/
/*    font-weight: 600;*/
/*    border: none;*/
/*    border-radius: var(--radius);*/
/*    cursor: pointer;*/
/*    transition: all var(--trans-base);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 0.5rem;*/
/*}*/

/*!* Restore button - primary action *!*/
/*.restore-selected {*/
/*    background: var(--action-0);*/
/*    color: white;*/
/*}*/

/*.restore-selected:hover {*/
/*    background: var(--action-200);*/
/*    transform: translateY(-1px);*/
/*    box-shadow: 0 4px 12px rgba(var(--action-rgb), 0.3);*/
/*}*/

/*!* Scrap cache button - destructive action *!*/
/*.restart-uploads {*/
/*    background: var(--danger);*/
/*    color: white;*/
/*}*/

/*.restart-uploads:hover {*/
/*    background: var(--danger-dark);*/
/*    transform: translateY(-1px);*/
/*}*/

/*!* Dismiss button - secondary action *!*/
/*.dismiss-cache-check {*/
/*    background: transparent;*/
/*    color: var(--contrast);*/
/*    border: 1px solid var(--border);*/
/*}*/

/*.dismiss-cache-check:hover {*/
/*    background: var(--subtle);*/
/*}*/

/*!* Mobile responsive *!*/
/*@media (max-width: 768px) {*/
/*    .restore-notification {*/
/*        padding: 1rem;*/
/*    }*/

/*    .restore-content {*/
/*        max-height: 95vh;*/
/*    }*/

/*    .restore-message {*/
/*        padding: 1.5rem;*/
/*    }*/

/*    .restore-notification .restore-field {*/
/*        padding: 1rem;*/
/*    }*/

/*    .item-grid.restore {*/
/*        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
/*        gap: 0.75rem;*/
/*    }*/

/*    .action-buttons {*/
/*        flex-direction: column;*/
/*    }*/

/*    .action-buttons button {*/
/*        width: 100%;*/
/*        justify-content: center;*/
/*    }*/
/*}*/

/*!* Animation *!*/
/*@keyframes fadeIn {*/
/*    from {*/
/*        opacity: 0;*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/*!* Scrollbar styling for restore field list *!*/
/*.restore-notification .restore-field::-webkit-scrollbar {*/
/*    width: 8px;*/
/*}*/

/*.restore-notification .restore-field::-webkit-scrollbar-track {*/
/*    background: var(--subtle);*/
/*}*/

/*.restore-notification .restore-field::-webkit-scrollbar-thumb {*/
/*    background: var(--border);*/
/*    border-radius: 4px;*/
/*}*/

/*.restore-notification .restore-field::-webkit-scrollbar-thumb:hover {*/
/*    background: var(--contrast-50);*/
/*}*/



/***************************
FORMS
 */
/* Stepped Form Container */
form {
    --step-size: 2.5rem;
}

/* Progress Bar Styling */
.form-progress {
    padding: 0 1rem;
}

.form-progress .progress {
    background: var(--base-100);
    border-radius: var(--radius);
    padding: 1rem;
}

.form-progress .bar {
    height: 6px;
    background: var(--base-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.form-progress .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--action-0), var(--action-200));
    width: 0%;
    transition: width 0.4s ease;
    border-radius: 3px;
}

.form-progress .step-text {
    font-size: var(--txt-small);
    font-weight: 600;
    color: var(--contrast-200);
}

/* Stepped Tabs Styling */
form nav.tabs {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem 0;
    gap: 0;
    z-index: 0;
}

form nav.tabs button {
    position: relative;
    background: transparent;
    border: none;
    padding: 0.5rem 1rem .5rem 3rem;
    z-index: 1;
}

/* Step Number Circle */
form nav.tabs .step-number {
    width: 2.5rem;
    height: 100%;
    border-radius: 50% 0 0 50%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--base-200);
    color: var(--contrast-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--txt-small);
    border: 3px solid var(--base);
}

/* Pending Step */
form nav.tabs button.pending .step-number {
    background: var(--base-100);
    color: var(--contrast-200);
}

/* Current Step */
form nav.tabs button.current .step-number,
form nav.tabs button.active .step-number {
    background: var(--action-0);
    color: var(--action-contrast);
    border-color: var(--action-200);
}

/* Completed Step */
form nav.tabs button.completed .step-number {
    background: var(--successBack);
    color: var(--successBack);
    border-color: var(--successText);
}

form nav.tabs button.completed .step-number::before {
    content: '✓';
    font-size: 1.2rem;
    color: var(--successText);
    position: absolute;
}

form nav.tabs button.completed h2 {
    color: var(--contrast-200);
}

/* Step Navigation Buttons */
.step-navigation {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--base-200);
    gap: 1rem;
}

.step-navigation .prev-step {
    background: var(--base-100);
}

.step-navigation .next-step,
.step-navigation button[type="submit"] {
    margin-left: auto;
}

/* Error state for required fields */
.field input.error,
.field textarea.error,
.field select.error {
    border-color: var(--errorBack);
}

.error-message {
    color: var(--errorText);
    font-size: var(--txt-small);
    margin-top: 0.25rem;
    display: block;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    form nav.tabs button {
        min-width: 80px;
        font-size: var(--txt-small);
    }

    form nav.tabs button h2 {
        font-size: var(--txt-small);
    }

    form {
        --step-size: 2rem;
    }
}

/**** VALIDATION ******/
/* Field Input Wrapper - for positioning icon */
.field-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.field-input-wrapper input,
.field-input-wrapper textarea,
.field-input-wrapper select {
    flex: 1;
}

/* Validation Icon */
.validation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    animation: scaleIn 0.3s ease;
    --w: 1.25rem;
}
.validation-icon.error {
    color: var(--error);
}
.validation-icon.success {
    color: var(--success);
}


@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Validation Message */
.validation-message {
    color: var(--error-0);
    font-size: var(--txt-small);
    margin-top: 0.25rem;
    display: block;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error State */
.field.has-error input,
.field.has-error textarea,
.field.has-error select {
    border-color: var(--error);
    background-color: var(--errorBack)
}

.field.has-error input:focus,
.field.has-error textarea:focus,
.field.has-error select:focus {
    outline-color: var(--error);
    box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.2);
}

/* Success State */
.field.has-success input,
.field.has-success textarea,
.field.has-success select {
    border-color: var(--success);
}

/* Required Asterisk */
.field label .required {
    color: var(--error);
    margin-left: 0.25rem;
}

/*************************************************************
 Form Summary
 ************************************************************/
.form-summary {
    padding: 2rem;
    border-radius: 8px;
    margin-top: 2rem;
    border: 2px dashed var(--contrast-200);
}

.form-summary .message {
    margin-bottom: 2rem;
}
.form-summary .result + .result {
    position: relative;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}
.form-summary .result + .result::before {
    position: absolute;
    top: 0;
    left: 16.5%;
    content: '';
    width: 67%;
    height: 1px;
    border-bottom: 1px solid var(--base-200);
}

.form-summary h2 {
    margin: 1rem 0;
}

.form-summary h4 {
    background-color: var(--base-100);
    padding: .5rem 2rem;
    position: relative;
    left: -2rem;
    color: var(--contrast-200);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.form-summary p {
    color: var(--text);
    margin: 0;
}

.repeater-summary,
.group-summary {
    background: var(--base-100);
    padding: 1rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.repeater-row {
    margin-bottom: 1rem;
}

.repeater-row:last-child {
    margin-bottom: 0;
}

.ql-toolbar button {
    min-height: 0;
    padding: .5rem;
}

.success-message {
    color: var(--success);
    background-color: var(--successBack);
    border: 1px solid var(--success);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.success-message .success-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.success-box {
    background-color: var(--successBack);
    border: 2px solid var(--success);
    padding: 1.5rem;
    border-radius: var(--radius-outer);
    margin-bottom: 1rem;
    text-align: center;
}

.success-box h3 {
    color: var(--success);
    margin-bottom: 0.5rem;
}

.success-box p {
    margin: 0.5rem 0;
}

/* Form success state */
.form-success {
    opacity: 0.9;
}

/* Hide form fields after success (optional) */
.form-success .field:not(.form-success-message):not(.success-box) {
    display: none;
}

/* Keep submit button visible but disabled */
.form-success button[type="submit"] {
    opacity: 0.6;
    pointer-events: none;
}

/* Error states */
.field-error input,
.field-error textarea,
.field-error select {
    border-color: var(--error);
}

.error-message {
    color: var(--error);
    font-size: var(--txt-small);
    margin-top: 0.25rem;
    display: block;
}

.form-error {
    background-color: var(--errorBack);
    border: 1px solid var(--error);
    padding: 0.75rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

/* Success states */
.has-success input,
.has-success textarea,
.has-success select {
    border-color: var(--success);
}
.form-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-error .error-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.invite details {
    margin-bottom: 1.5rem;
}

/*******************************
Tag Field
 */
/* Tag List Field */
.field.tag-list .row {
    margin-bottom: 1rem;
}

.field.tag-list .row .field {
    flex: 1;
    min-width: 150px;
    margin: 0;
}

.field.tag-list .tag .add-tag-item {
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: calc(var(--txt-medium) + 1rem);
}

.field.tag-list .tag-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 2rem;
}

.field.tag-list .tag-item {
    background: var(--base-200);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.2;
}

.field.tag-list .tag-item:hover {
    background: var(--base-100);
}

.field.tag-list .tag-label {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field.tag-list .remove-tag {
    min-height: 0;
    padding: .25rem;
    color: var(--contrast);
    transition: transform 0.2s;
    box-shadow: none;
}

.field.tag-list .remove-tag:hover {
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .field.tag-list .tag {
        flex-direction: column;
        align-items: stretch;
    }

    .field.tag-list .tag .field {
        min-width: 100%;
    }
}

.pendingChanges {
    position: fixed;
    bottom: var(--btn);
    right: var(--btn_);
    margin-right: 1rem;
    padding: 1rem;
    border-radius: var(--radius);
    background-color: rgba(var(--base-rgb),var(--op-6));
    z-index: var(--z-6);
    width: 50vw;
    animation: fadeInSlideUp 0.5s ease-out forwards;
}
.pendingChanges button {
    min-height: 0;
    width: calc(50% - .7rem);
    padding: .35rem;
}
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Start 20px below its final position */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* End at its normal position */
    }
}

 nav-hover.css

File was deleted

 nav.css

@@ -1,11 +1,15 @@
/**************************************************************
BASE NAVIGATION - Works for 80% of cases
**************************************************************/
nav,
nav ol,
nav ul {
    --padding: 0 1rem;
    --wrap: nowrap;
    font-family: var(--heading);
}
nav,
nav ol,
nav ul,
nav li,
nav a {
    display: flex;
    flex-direction: var(--dir, row);
    justify-content: var(--justify, flex-start);
@@ -14,83 +18,58 @@
    flex-wrap: var(--wrap, nowrap);
    height: var(--btn, 3rem);
    max-width: 100%;
    font-family: var(--heading);
    padding: 0;
    margin: 0;
}

/* Items fill parent */
nav li {
    display: flex;
    align-items: center;
    height: max(var(--btn), max-content);
    width: 100%;
    --justify: center;
    max-inline-size: none;
    padding: 0;
    list-style: none;
}

/* Links fill parent */
nav a,
nav button {
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    height: var(--btn);
nav a, nav button {
    --justify: center;
    width: 100%;
    white-space: nowrap;
    text-transform: uppercase;
    transition: var(--trans-color);
    border-radius: 0;
    background-color: transparent;
    text-decoration: none;
}
nav a {
    height: var(--btn);
    padding: var(--padding);
}
/* Buttons */
nav button {
    justify-content: center;
nav .toggle {
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid var(--base);
    border: 1px solid var(--base);
    color: var(--contrast);
    border-radius: 0;
}

/**************************************************************
STATES - Apply to all navs
**************************************************************/

/* Active/Focus states */
/*    nav a:hover,*/
    nav .current a,
    nav a.current,
    nav a:focus,
    nav a:focus:visited,
    nav button:focus {
    background-color: var(--action-0);
    color: var(--action-contrast);
}
        background-color: var(--action-0);
        color: var(--action-contrast);
    }


/* Icon rotation */
.toggle .icon-caret-down {
    transform: rotate(0deg);
    transition: transform var(--trans-base);
}
    .open > .row > .toggle .icon-caret-down,
    .open > .toggle .icon-caret-down {
        transform: rotate(900deg);
    }

.has-submenu.open > button .icon-caret-down {
    transform: rotate(900deg);
}

/**************************************************************
SUBMENUS - Generic pattern
**************************************************************/
/****************************************************
SUBMENUS
****************************************************/
.has-submenu {
    position: relative;
}

ul.submenu {
    --dir: column;
    height: max-content;
@@ -104,28 +83,26 @@
    min-width: max-content;
    background-color: rgba(var(--base-rgb),var(--op-3));
    border: 2px solid rgba(var(--base-rgb),var(--op-3));
    transition: all var(--trans-t) var(--trans-fn);
    transition: max-height var(--trans-base), transform var(--trans-base);
    box-shadow: var(--shdw-none);
    overflow: hidden;
}
    .submenu li {
        background-color: rgba(var(--base-rgb),var(--op-6));
        border: 1px solid var(--base-50);
    }
    .submenu a {
        height: var(--chipchip);
    }

.submenu li {
    background-color: rgba(var(--base-rgb),var(--op-6));
    border: 1px solid var(--base-50);
}
.submenu a {
    height: var(--chipchip);
}

/* Open state */
.open > ul.submenu {
    transform: scaleY(1);
    max-height: 1000%;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw);
}

/**************************************************************
ACCESSIBILITY - Universal
ACCESSIBILITY
**************************************************************/
.screen-reader-text {
    position: absolute;
@@ -144,140 +121,126 @@
}

nav a:focus-visible {
    outline: 2px solid var(--action-0);
    outline-offset: 2px;
    outline: 1px solid var(--action-0);
    outline-offset: 1px;
}

/**************************************************************
VARIANT: MOBILE NAV (.always)
Only define what makes it different from base
**************************************************************/
/*************************************************************
MOBILE NAV
*************************************************************/
nav.always {
    /* Different positioning */
    --dir: column;
    --wrap: nowrap;
    --justify: flex-end;
    position: fixed;
    bottom: 0;
    right: 0;
    width: var(--btn);
    z-index: var(--z-10);
}

nav.always.open {
    --justify: flex-end;
    width: 100vw;
    height: 100vh;
    padding-bottom: var(--btn_);
    background-color: rgba(var(--base-rgb),var(--op-6));
    backdrop-filter: blur(5px);
}

nav.always > ul {
    --dir: column;
    --align: center;
    --justify: flex-start;
    --gap: 0;
    height: 100%;
    position: relative;
    right: -300vw;
    width: 100vw;
    max-height: 100%;
    padding: 1rem 0 0;
    overflow: hidden auto;
    transition: right var(--trans-base);
}

nav.always.open > ul {
    right: 0;
}

nav.always li {
    flex-wrap: wrap;
    background-color: rgba(var(--base-rgb), var(--op-6));
}

nav.always a {
    padding: 1rem;
    max-width: calc(100% - var(--btn));
    text-align: center;
}

/* Split layout for items with submenus */
nav.always .has-submenu {
    display: flex;
}

nav.always .has-submenu > a {
    flex: 1;
}

nav.always .has-submenu > button {
    flex: 0 0 var(--btn);
}

/* Submenu adjustments */
nav.always .submenu {
    position: relative;
    padding-right: 4rem;
    height: max-content;
    top: 0;
    width: 100%;
    border: 2px solid var(--action-0);
    background-color: rgba(var(--contrast-rgb), var(--op-1));
}

nav.always .submenu li {
    background-color: rgba(var(--base-rgb),var(--op-3));
}

/* Toggle button */
nav.always > button {
    position: fixed;
    bottom: 0;
    right: 0;
    width: var(--btn);
    height: var(--btn);
    background-color: var(--base);
    color: var(--contrast);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    transition: width var(--trans-base);
}
    nav.always > button:hover {
        background-color: var(--action-0);
        color: var(--action-contrast);
    nav.always.open {
        width: 100vw;
        height: 100vh;
        padding-bottom: var(--btn_);
        background-color: rgba(var(--base-rgb),var(--op-6));
        backdrop-filter: blur(5px);
        z-index: var(--z-10);
    }

nav.always.open > button {
    width: 100%;
    background-color: rgba(var(--base-rgb),var(--op-6));
    backdrop-filter: blur(5px);
    z-index: 1000000;
}

/* Icon toggle */
nav.always > button .icon-x,
nav.always.open > button .icon-list {
    display: none;
}

nav.always > button .icon-list,
nav.always.open > button .icon-x {
    display: block;
    width: 32px;
    height: 32px;
}

@media (min-width: 768px) {
    nav.always > ul {
        padding-top: var(--btn);
        z-index: 1;
        --dir: column;
        --align: center;
        --justify: flex-start;
        --gap: 0;
        height: 100%;
        max-height: 100%;
        position: relative;
        right: -300vw;
        width: 100vw;
        padding: 1rem 0 0;
        overflow: hidden auto;
        transition: right var(--trans-base);
    }
}
        nav.always.open > ul {
            right: 0;
        }
    nav.always li {
        --wrap: wrap;
        --dir: row;
        height: max-content;
        --justify: flex-start;
        background-color: rgba(var(--base-rgb), var(--op-6));
    }
    nav.always a {
        padding: 1rem;
        --justify: center;
        max-width: calc(100% - var(--btn));
    }

/**************************************************************
VARIANT: BREADCRUMBS (#breadcrumbs)
**************************************************************/
    nav.always .has-submenu > a {
        z-index: var(--z-3);
    }
    nav.always .has-submenu > button {
        width: var(--btn);
    }

    nav.always .submenu {
        position: relative;
        padding-right: 4rem;
        top: 0;
        border: 1px solid var(--action-0);
        background-color: rgba(var(--contrast-rgb), var(--op-1));
    }
        nav.always .submenu li {
            background-color: rgba(var(--base-rgb),var(--op-3));
        }

    nav.always > .toggle {
        position: fixed;
        bottom: 0;
        right: 0;
        width: var(--btn);
        height: var(--btn);
        background-color: var(--base);
        color: var(--contrast);
        box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
        transition: width var(--trans-base);
    }
        nav.always > .toggle:hover {
            background-color: var(--action-0);
            color: var(--action-contrast);
        }
        nav.always.open > .toggle {
            width: 100%;
            background-color: rgba(var(--base-rgb),var(--op-6));
            backdrop-filter: blur(5px);
            z-index: 1000000;
        }

            nav.always.open > .toggle:hover {
                background-color: var(--action-0);
                color: var(--action-contrast);
            }

        nav.always button .icon-x,
        nav.always.open button .icon-list {
            display: none;
        }
        nav.always button .icon-list,
        nav.always.open button .icon-x {
            display: block;
            --w: 32px;
        }
        @media (min-width: 768px) {
            nav.always > ul {
                padding-top: var(--btn);
            }
        }

/*******************************************************
BREADCRUMBS
*******************************************************/
nav#breadcrumbs {
    /* Different sizing */
    height: max-content;
    --wrap: wrap;
    --gap: 0;
@@ -287,412 +250,361 @@
    background-color: rgba(var(--base-rgb),var(--op-4));
    font-size: var(--txt-x-small);
    padding: .125em;
    z-index: var(--z-7);
}
#breadcrumbs ol {
    height: max-content;
    --wrap: wrap!important;
    --justify: flex-start!important;
}
#breadcrumbs li {
    width: max-content;
}
#breadcrumbs a {
    height: var(--chip);
    z-index: var(--z-5);
}

#breadcrumbs li::after {
    content: '/';
    color: var(--contrast-200);
    padding: 0 .25rem;
nav#breadcrumbs ol {
    height: max-content;
    --wrap: wrap;
}
    #breadcrumbs li:last-of-type::after {
        display: none;
    nav#breadcrumbs li {
        width: max-content;
        height: var(--chip);
        --wrap: nowrap;
    }
        nav#breadcrumbs li::after {
            content: '/';
            color: var(--contrast-200);
            padding: 0 .25rem;
        }
            nav#breadcrumbs li:last-of-type::after {
                display: none;
            }
    nav#breadcrumbs a {
        height: var(--chip);
    }
    nav#breadcrumbs a, nav#breadcrumbs span {
        padding: 0 .125rem;
        color: var(--contrast);
        text-transform: none;
    }
    nav#breadcrumbs a:focus {
        background-color: transparent;
        color: var(--action-0);
    }

#breadcrumbs :is(a, span) {
    padding: 0 .125rem;
    color: var(--contrast);
    text-transform: none;
}

#breadcrumbs a:focus {
    background-color: transparent;
    color: var(--action-0);
}

/**************************************************************
VARIANT: FIXED BOTTOM (nav.fixed.bottom)
Only define what makes it different
**************************************************************/
nav.fixed.bottom {
    /* Different positioning */
/************************************************************
FIXED BOTTOM
************************************************************/
nav.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100% - var(--btn));
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    z-index: var(--z-9);
}

nav.fixed.bottom ul {
    --justify: space-between;
    width: 100%;
    background-color: var(--base);
    padding: 0 .25rem;
nav.fixed.bottom {
    bottom: 0;
    width: calc(100% - var(--btn));
}

nav.fixed.bottom li {
    flex: 1;
    justify-content: center;
}

nav.fixed.bottom a {
    gap: 1rem;
    --w: var(--chip_);
    color: var(--contrast);
    font-size: var(--txt-x-small);
}

@media (min-width: 768px) {
    nav.fixed.bottom a {
        font-size: var(--txt-medium);
    nav.fixed ul {
        --justify: space-between;
        width: 100%;
        background-color: var(--base);
        padding: 0 .25rem;
    }
}

/**************************************************************
VARIANT: ON THIS PAGE (nav.on-this-page)
Only define what makes it different
**************************************************************/
    nav.fixed li {
        flex: 1;
    }
    nav.fixed a {
        --gap: 1rem;
        --w: var(--chip_);
        color: var(--contrast);
        font-size: var(--txt-x-small);
    }
    @media (min-width: 768px) {
        nav.fixed a {
            font-size: var(--txt-medium);
        }
    }

/************************************************************
ON THIS PAGE
************************************************************/
nav.on-this-page {
    --justify: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100% - var(--btn));
    width: 100vw;
    z-index: var(--z-5);
    background-color: rgba(var(--base-rgb), var(--op-45));
    max-width: none;
    padding: 0 .5rem;
    background-color: rgba(var(--base-rgb),var(--op-4));
    color: var(--base-200);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    z-index: var(--z-6);

}
.on-this-page li,
.on-this-page a {
    width: 100%;
    height: 100%;
}

body:has(nav.fixed) nav.on-this-page {
    bottom: var(--btn);
}
body:has(.additional-actions button) nav.on-this-page{
    width: calc(100vw - var(--btn_) - 1rem);
}
.on-this-page button {
    order: 3;
    padding: 0 1rem;
    width: max-content;
    aspect-ratio: unset;
    height: var(--btn);
}
.on-this-page.open button {
    order: 0;
}
.on-this-page ul {
    width: 100%;
    gap: 0;
}

.on-this-page li {
    justify-content: center;
}
.on-this-page .active a {
    background-color: rgba(var(--base-rgb),var(--op-6));
    nav.on-this-page button {
        order: 3;
        padding: 0 1rem;
        width:max-content;
        aspect-ratio: unset;
    }
    nav.on-this-page.open button {
        order: 0;
    }
    nav.on-this-page ul {
        width: 100%;
        --gap: 0;
    }
    nav.on-this-page a {
        padding: 0;
    }
        nav.on-this-page .active a {
            background-color: rgba(var(--base-rgb),var(--op-6));
            color: var(--action-contrast);
        }
    nav.on-this-page #back-to-top span {
        display: none;
    }
nav.on-this-page .active a {
    background-color: var(--action-0);
    color: var(--action-contrast);
}
.on-this-page a {
    padding: 0;
}
.on-this-page #back-to-top span {
    display: none;
}
.on-this-page.open #back-to-top span {
    display: block;
}

/**************************************************************
VARIANT: LETTERS (nav.letters)
Only define what makes it different
**************************************************************/
nav.letters li {
    height: var(--chip);
    max-width: calc(7.69% - 2px); /*Fit 26 letters over 2 rows) */
}
nav.letters ul {
    --wrap: wrap;
}
/****************************************************
LETTERS
****************************************************/
nav.letters,
nav.letters ul {
    height: var(--chipchip);
nav.letters ul,
nav.letters li,
nav.letters a{
    height: var(--chip);
}
@media (min-width: 768px) {
    nav.letters,
nav.letters li {
    max-width: calc(7.69% - 2px); /* Fit 26 letters over 2 rows */
}
    nav.letters ul {
        height: var(--chip);
    }
    nav.letters ul {
        --wrap: nowrap;
    }
    nav.letters li {
        max-width: none;
        --wrap: wrap;
    }

    nav.letters a {
        padding: .25rem .66rem;
    @media (min-width:768px) {
        nav.letters, nav.letters ul {
            height: var(--chip);
        }
        nav.letters ul {
            --wrap: nowrap;
        }
        nav.letters li {
            max-width: none;
        }
        nav.letters a {
            padding: .25rem .66rem;
        }
    }
}

/**************************************************************
VARIANT: INDEX/TOC (nav.index)
Only define what makes it different
**************************************************************/
/********************************************************
INDEX/TOC
********************************************************/
nav.index {
    --justify: space-between;
    --padding: 0;
    background-color: rgba(var(--base-rgb),var(--op-6));
}

.index ul {
    width: 100%;
}

.index li {
    flex-shrink: 0;
    transform: scaleX(0);
    max-width: 0;
    overflow: hidden;
}

.index li.active,
.index li.adj {
    transform: scaleX(1);
    width: calc(100% - var(--btn_));
    flex-shrink: 1;
    max-width: none;
}
.index li:first-of-type {
    flex-shrink: 1;
    transform: scaleX(1);
    order: 9999;
    width: var(--btn);
    height: var(--btn);
    max-width: none;
}

@media (max-width: 767px) {
    .index li.adj {
    nav.index ul {
        width: 100%;
    }
    nav.index li {
        flex-shrink:0;
        transform: scaleX(0);
        max-width: 0;
        overflow: hidden;
    }
}
    nav.index li.active,
    nav.index li.adj {
        transform: scaleX(1);
        width: calc(100% - var(--btn_));
        flex-shrink: 1;
        max-width: none;
    }
    nav.index li:first-of-type {
        flex-shrink: 1;
        transform: scaleX(1);
        order: 9999;
        width: var(--btn);
        height: var(--btn);
        max-width: none;
    }

.index a {
    border-bottom: 4px solid transparent;
}
    @media (max-width: 767px) {
        .index li.adj {
            transform: scaleX(0);
            max-width: 0;
        }
    }
    nav.index a {
        border-bottom: 4px solid transparent;
    }
    nav.index .active a {
        border-color: var(--action-0);
        color: var(--contrast);
    }

.index .active a {
    border-color: var(--action-0);
    color: var(--contrast);
}
    nav.index.open {
        --dir: column-reverse;
        height: var(--maxHeight);
        width: 100%;
        --align: flex-end;
        background-color: rgba(var(--base-rgb),var(--op-6));
        backdrop-filter: blur(5px);
        z-index: var(--z-10);
    }
    nav.index.open li {
        width: 100%;
        height: var(--btn);
        max-width: 100%!important;
        transform: scaleX(1);
        overflow: visible;
    }
    nav.index.open a {
        --justify: flex-end;
        padding: 0 2rem 0 0;
        background-color: transparent;
    }

/* Index open state */
.index.open {
    --dir: column-reverse;
    height: var(--maxHeight);
    width: 100%;
    align-items: flex-end;
    background-color: rgba(var(--base-rgb),var(--op-6));
    backdrop-filter: blur(5px);
    z-index: var(--z-10);
}
/***************************************************************
CONDENSED
***************************************************************/

.index.open ul {
    --dir: column;
    --justify: flex-end;
    height: 100%;
    width: 100%;
}

.index.open li {
    width: 100%;
    height: var(--btn);
    max-width: 100%!important;
    transform: scaleX(1);
    overflow: visible;
}

.index.open a {
    justify-content: flex-end;
    padding: 0 2rem 0 0;
    background-color: transparent;
}

/**************************************************************
VARIANT: CONDENSED (nav.condensed)
Only define what makes it different
**************************************************************/
nav.condensed {
nav.condensed,
nav.condensed ul,
nav.condensed li,
nav.condensed a {
    height: max-content;
    --wrap: wrap;
    --gap: 0 .25rem;
}

nav.condensed ul {
    min-height: var(--chip_);
    height: max-content;
    --justify: center;
    --wrap: wrap;
}
.condensed li {
    width: max-content;
    --wrap: wrap;
    min-height: var(--chip);
}
.condensed li + li::before {
    content: '·';
    padding: 0 .25em;
nav.condensed {
    --gap: 0 .25rem;
    width: 100%;
}
    nav.condensed li + li::before {
        content: '·';
        padding: 0 .25em;
    }
    nav.condensed a {
        font-size: var(--txt-x-small);
        padding: 0 .25rem;
        text-transform: none;
        border-bottom: 2px solid transparent;
    }
    nav .current a,
    nav a.current,
    nav a:focus,
    nav a:focus:visited,
    nav button:focus {
        background-color: transparent;
        color: var(--contrast);
        border-color: var(--action-0);
    }

.condensed a {
    height: max-content;
    min-height: var(--chip);
    font-size:var(--txt-x-small);
    padding: 0 .25rem;
    text-transform: none;
    border-bottom: 2px solid transparent;
}

.condensed a:focus {
    border-color: var(--action-0);
}

/**************************************************************
VARIANT: SOCIALS (ul.socials)
Only define what makes it different
**************************************************************/
/********************************************************************
SOCIALS
********************************************************************/
ul.socials {
    --dir: row;
    height: max-content;
    --gap: .5rem;
    --justify: stretch;
    --wrap:nowrap;
    --wrap: nowrap;
    overflow: auto hidden;
    touch-action: pan-x;
}
.always ul.socials,
.always ul.socials li,
.always ul.socials a {
.always ul.socials {
    width: 100%;
}
    ul.socials a {
        padding: .5rem;
        max-width: none;
    }
    ul.socials .icon {
        margin: 0;
    }

ul.socials a {
    padding: .5rem;
    max-width: none;
}

ul.socials .icon {
    margin: 0;
}

/**************************************************************
VARIANT: TABS (nav.tabs)
Only define what makes it different
**************************************************************/
/********************************************************************
TABS
********************************************************************/
nav.tabs {
    position: fixed;
    bottom: var(--btn);
    left: var(--btnbtn);
    right: var(--btnbtn);
    /*position: fixed;*/
    /*bottom: var(--btn);*/
    /*left: var(--btnbtn);*/
    /*right: var(--btnbtn);*/
    padding-bottom: 2px;
    z-index: var(--z-6);
    /*z-index: var(--z-6);*/
    touch-action: pan-x pan-y;
    --wrap:nowrap;
    --wrap: nowrap;
    overflow: auto hidden;
}
nav.tabs button {
    aspect-ratio: unset;
}
    nav.tabs button.active {
        cursor: default;
    }
    nav.tabs button {
        font-family: var(--heading);
        font-size: var(--txt-x-small);
        border-bottom: 4px solid transparent;
    }
    nav.tabs button.active,
    nav.tabs button.active:hover {
        background-color: var(--base-100);
        color: var(--contrast);
    }
nav.tabs button h2 {
    --wrap: nowrap;
    margin: 0;
    font-size: var(--txt-x-small);
}
.tab-content nav.tabs button {
    height: var(--chip_);
    padding: .25rem .75rem;
    min-height: 0;
}
.tab-content.active {
    padding: 1rem 0;
}
.tab-content h2 {
    margin: 0 0 .5rem;
}
.tab-content nav.tabs {
    height: max-content;
    background-color: var(--base);
    --gap: 0;
}
    .tab-content .tab-content nav.tabs {
        background-color: var(--base-100);
    }
    .tab-content .tab-content .tab-content nav.tabs {
        background-color: var(--base-200);
    }
    .tab-content nav.tabs button.active h2 {
        color: var(--action-0);
        background-color: var(--action-0);
        color: var(--action-contrast);
        border-color: var(--base);
    }

/**************************************************************
VARIANT: MENU (nav.menu)
Only define what makes it different
**************************************************************/
    .tab-content nav.tabs button {
        height: var(--chip_);
        padding: .25rem .75rem;
        min-height: 0;
    }

    .tab-content h2 {
        margin: 0 0 .5rem;
    }

    .tab-content nav.tabs {
        height: max-content;
        background-color: var(--base);
        --gap: 0;
    }
        .tab-content .tab-content nav.tabs {
            background-color: var(--base-100);
        }
        .tab-content .tab-content .tab-content nav.tabs {
            background-color: var(--base-200);
        }
        .tab-content nav.tabs button.active h2 {
            color: var(--action-0);
        }
/********************************************************
MENU (as in food menu)
********************************************************/
nav.menu a {
    padding: .5rem .66rem;
}

/**************************************************************
VARIANT: SHARE (nav.share)
Only define what makes it different
**************************************************************/
/********************************************************
SHARE
********************************************************/
nav.share {
    height: max-content;
    margin: 1rem 0;
}
    nav.share ul {
        overflow: visible;
    }
    nav.share h4 {
        display: inline-block;
        width: max-content;
        margin: .25rem .5rem .25rem 0;
        font-size: var(--txt-x-small);
    }

nav.share ul {
    overflow: visible;
}

nav.share h4 {
    display: inline-block;
    width: max-content;
    margin: .25rem .5rem .25rem 0;
    font-size: var(--txt-x-small);
}

/**************************************************************
/************************************************************
HEADER ELEMENTS
**************************************************************/
:where(body > header, .wp-site-blocks > header) {
************************************************************/
body > header, .wp-site-blocks > header {
    --dir: row;
    --justify: space-between;
    position: sticky;
@@ -708,81 +620,27 @@
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    z-index: var(--z-9);
}

.wp-site-blocks > header img {
    width: var(--btn);
}

/**************************************************************
CURRENT HOURS BANNER
**************************************************************/
/*.current-hours {*/
/*    position: sticky;*/
/*    top: var(--nav-height);*/
/*    padding: .25rem 1rem;*/
/*    background-color: var(--action-0);*/
/*    color: var(--action-contrast);*/
/*    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    z-index: 100;*/
/*}*/

/*.current-hours p {*/
/*    margin: 0;*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    flex: 1;*/
/*}*/

/*.current-hours p + p {*/
/*    justify-content: flex-end;*/
/*}*/

/*.current-hours a {*/
/*    color: var(--action-contrast);*/
/*}*/

/*.current-hours b {*/
/*    margin-right: .25rem;*/
/*}*/

/**************************************************************
FIND US BUTTONS
**************************************************************/
/*.find-us {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 0 .5rem;*/
/*}*/

/*.find-us a {*/
/*    padding: .25rem 1rem;*/
/*    border: 1px solid var(--action-contrast);*/
/*    border-radius: var(--radius);*/
/*}*/

/**************************************************************
UTILITIES
**************************************************************/

/* Hide navigation when empty */
nav.term-navigation:has(*[hidden]) {
    display: none;
}

/* Dashboard nav */
/************************************************************
DASH
************************************************************/
.dashboard-nav {
    --justify: flex-start;
    width: 100%;
}

nav.filters {
    --dir: row;
    --justify: flex-start;
    overflow: auto hidden;
}
nav.filters .filter {
    width: auto;
    padding: .25rem .75rem;
    nav.filters .filter {
        width: auto;
        padding: .25rem .75rem;
    }

/* Hide navigation when empty */
nav.term-navigation:has(*[hidden]) {
    display: none;
}

 navBackup.css

New file
@@ -0,0 +1,788 @@
/**************************************************************
BASE NAVIGATION - Works for 80% of cases
**************************************************************/
nav,
nav ol,
nav ul {
    --padding: 0 1rem;
    --wrap: nowrap;
    display: flex;
    flex-direction: var(--dir, row);
    justify-content: var(--justify, flex-start);
    align-items: var(--align, center);
    gap: var(--gap, 0);
    flex-wrap: var(--wrap, nowrap);
    height: var(--btn, 3rem);
    max-width: 100%;
    font-family: var(--heading);
    padding: 0;
    margin: 0;
}

/* Items fill parent */
nav li {
    display: flex;
    align-items: center;
    height: max(var(--btn), max-content);
    width: 100%;
    max-inline-size: none;
    padding: 0;
}

/* Links fill parent */
nav a,
nav button {
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    height: var(--btn);
    width: 100%;
    white-space: nowrap;
    text-transform: uppercase;
    transition: var(--trans-color);
    border-radius: 0;
    background-color: transparent;
}
nav a {
    height: var(--btn);
    padding: var(--padding);
}
/* Buttons */
nav button {
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid var(--base);
    color: var(--contrast);
    border-radius: 0;
}

/**************************************************************
STATES - Apply to all navs
**************************************************************/

/* Active/Focus states */
/*    nav a:hover,*/
    nav .current a,
    nav a.current,
    nav a:focus,
    nav a:focus:visited,
    nav button:focus {
    background-color: var(--action-0);
    color: var(--action-contrast);
}


/* Icon rotation */
.toggle .icon-caret-down {
    transform: rotate(0deg);
    transition: transform var(--trans-base);
}

.has-submenu.open > button .icon-caret-down {
    transform: rotate(900deg);
}

/**************************************************************
SUBMENUS - Generic pattern
**************************************************************/
.has-submenu {
    position: relative;
}

ul.submenu {
    --dir: column;
    height: max-content;
    position: absolute;
    top: 100%;
    right: 0;
    max-height: 0;
    transform: scaleY(0);
    transform-origin: top;
    width: 100%;
    min-width: max-content;
    background-color: rgba(var(--base-rgb),var(--op-3));
    border: 2px solid rgba(var(--base-rgb),var(--op-3));
    transition: all var(--trans-t) var(--trans-fn);
    box-shadow: var(--shdw-none);
    overflow: hidden;
}

.submenu li {
    background-color: rgba(var(--base-rgb),var(--op-6));
    border: 1px solid var(--base-50);
}
.submenu a {
    height: var(--chipchip);
}

/* Open state */
.open > ul.submenu {
    transform: scaleY(1);
    max-height: 1000%;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}

/**************************************************************
ACCESSIBILITY - Universal
**************************************************************/
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

nav a:focus:not(:focus-visible) {
    outline: none;
}

nav a:focus-visible {
    outline: 2px solid var(--action-0);
    outline-offset: 2px;
}

/**************************************************************
VARIANT: MOBILE NAV (.always)
Only define what makes it different from base
**************************************************************/
nav.always {
    /* Different positioning */
    --dir: column;
    --wrap: nowrap;
    position: fixed;
    bottom: 0;
    right: 0;
    width: var(--btn);
    z-index: var(--z-10);
}

nav.always.open {
    --justify: flex-end;
    width: 100vw;
    height: 100vh;
    padding-bottom: var(--btn_);
    background-color: rgba(var(--base-rgb),var(--op-6));
    backdrop-filter: blur(5px);
}

nav.always > ul {
    --dir: column;
    --align: center;
    --justify: flex-start;
    --gap: 0;
    height: 100%;
    position: relative;
    right: -300vw;
    width: 100vw;
    max-height: 100%;
    padding: 1rem 0 0;
    overflow: hidden auto;
    transition: right var(--trans-base);
}

nav.always.open > ul {
    right: 0;
}

nav.always li {
    flex-wrap: wrap;
    background-color: rgba(var(--base-rgb), var(--op-6));
}

nav.always a {
    padding: 1rem;
    max-width: calc(100% - var(--btn));
    text-align: center;
}

/* Split layout for items with submenus */
nav.always .has-submenu {
    display: flex;
}

nav.always .has-submenu > a {
    flex: 1;
}

nav.always .has-submenu > button {
    flex: 0 0 var(--btn);
}

/* Submenu adjustments */
nav.always .submenu {
    position: relative;
    padding-right: 4rem;
    height: max-content;
    top: 0;
    width: 100%;
    border: 2px solid var(--action-0);
    background-color: rgba(var(--contrast-rgb), var(--op-1));
}

nav.always .submenu li {
    background-color: rgba(var(--base-rgb),var(--op-3));
}

/* Toggle button */
nav.always > button {
    position: fixed;
    bottom: 0;
    right: 0;
    width: var(--btn);
    height: var(--btn);
    background-color: var(--base);
    color: var(--contrast);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    transition: width var(--trans-base);
}
    nav.always > button:hover {
        background-color: var(--action-0);
        color: var(--action-contrast);
    }

nav.always.open > button {
    width: 100%;
    background-color: rgba(var(--base-rgb),var(--op-6));
    backdrop-filter: blur(5px);
    z-index: 1000000;
}

/* Icon toggle */
nav.always > button .icon-x,
nav.always.open > button .icon-list {
    display: none;
}

nav.always > button .icon-list,
nav.always.open > button .icon-x {
    display: block;
    width: 32px;
    height: 32px;
}

@media (min-width: 768px) {
    nav.always > ul {
        padding-top: var(--btn);
    }
}

/**************************************************************
VARIANT: BREADCRUMBS (#breadcrumbs)
**************************************************************/
nav#breadcrumbs {
    /* Different sizing */
    height: max-content;
    --wrap: wrap;
    --gap: 0;
    width: max-content;
    max-width: var(--full);
    position: absolute;
    background-color: rgba(var(--base-rgb),var(--op-4));
    font-size: var(--txt-x-small);
    padding: .125em;
    z-index: var(--z-7);
}
#breadcrumbs ol {
    height: max-content;
    --wrap: wrap!important;
    --justify: flex-start!important;
}
#breadcrumbs li {
    width: max-content;
}
#breadcrumbs a {
    height: var(--chip);
}

#breadcrumbs li::after {
    content: '/';
    color: var(--contrast-200);
    padding: 0 .25rem;
}
    #breadcrumbs li:last-of-type::after {
        display: none;
    }

#breadcrumbs :is(a, span) {
    padding: 0 .125rem;
    color: var(--contrast);
    text-transform: none;
}

#breadcrumbs a:focus {
    background-color: transparent;
    color: var(--action-0);
}

/**************************************************************
VARIANT: FIXED BOTTOM (nav.fixed.bottom)
Only define what makes it different
**************************************************************/
nav.fixed.bottom {
    /* Different positioning */
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100% - var(--btn));
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    z-index: var(--z-9);
}

nav.fixed.bottom ul {
    --justify: space-between;
    width: 100%;
    background-color: var(--base);
    padding: 0 .25rem;
}

nav.fixed.bottom li {
    flex: 1;
    justify-content: center;
}

nav.fixed.bottom a {
    gap: 1rem;
    --w: var(--chip_);
    color: var(--contrast);
    font-size: var(--txt-x-small);
}

@media (min-width: 768px) {
    nav.fixed.bottom a {
        font-size: var(--txt-medium);
    }
}

/**************************************************************
VARIANT: ON THIS PAGE (nav.on-this-page)
Only define what makes it different
**************************************************************/
nav.on-this-page {
    --justify: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100% - var(--btn));
    max-width: none;
    padding: 0 .5rem;
    background-color: rgba(var(--base-rgb),var(--op-4));
    color: var(--base-200);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    z-index: var(--z-6);

}
.on-this-page li,
.on-this-page a {
    width: 100%;
    height: 100%;
}

body:has(nav.fixed) nav.on-this-page {
    bottom: var(--btn);
}
body:has(.additional-actions button) nav.on-this-page{
    width: calc(100vw - var(--btn_) - 1rem);
}
.on-this-page button {
    order: 3;
    padding: 0 1rem;
    width: max-content;
    aspect-ratio: unset;
    height: var(--btn);
}
.on-this-page.open button {
    order: 0;
}
.on-this-page ul {
    width: 100%;
    gap: 0;
}

.on-this-page li {
    justify-content: center;
}
.on-this-page .active a {
    background-color: rgba(var(--base-rgb),var(--op-6));
    color: var(--action-contrast);
}
.on-this-page a {
    padding: 0;
}
.on-this-page #back-to-top span {
    display: none;
}
.on-this-page.open #back-to-top span {
    display: block;
}

/**************************************************************
VARIANT: LETTERS (nav.letters)
Only define what makes it different
**************************************************************/
nav.letters li {
    height: var(--chip);
    max-width: calc(7.69% - 2px); /*Fit 26 letters over 2 rows) */
}
nav.letters ul {
    --wrap: wrap;
}
nav.letters,
nav.letters ul {
    height: var(--chipchip);
}
@media (min-width: 768px) {
    nav.letters,
    nav.letters ul {
        height: var(--chip);
    }
    nav.letters ul {
        --wrap: nowrap;
    }
    nav.letters li {
        max-width: none;
    }

    nav.letters a {
        padding: .25rem .66rem;
    }
}

/**************************************************************
VARIANT: INDEX/TOC (nav.index)
Only define what makes it different
**************************************************************/
nav.index {
    --justify: space-between;
    --padding: 0;
    background-color: rgba(var(--base-rgb),var(--op-6));
}

.index ul {
    width: 100%;
}

.index li {
    flex-shrink: 0;
    transform: scaleX(0);
    max-width: 0;
    overflow: hidden;
}

.index li.active,
.index li.adj {
    transform: scaleX(1);
    width: calc(100% - var(--btn_));
    flex-shrink: 1;
    max-width: none;
}
.index li:first-of-type {
    flex-shrink: 1;
    transform: scaleX(1);
    order: 9999;
    width: var(--btn);
    height: var(--btn);
    max-width: none;
}

@media (max-width: 767px) {
    .index li.adj {
        transform: scaleX(0);
        max-width: 0;
    }
}

.index a {
    border-bottom: 4px solid transparent;
}

.index .active a {
    border-color: var(--action-0);
    color: var(--contrast);
}

/* Index open state */
.index.open {
    --dir: column-reverse;
    height: var(--maxHeight);
    width: 100%;
    align-items: flex-end;
    background-color: rgba(var(--base-rgb),var(--op-6));
    backdrop-filter: blur(5px);
    z-index: var(--z-10);
}

.index.open ul {
    --dir: column;
    --justify: flex-end;
    height: 100%;
    width: 100%;
}

.index.open li {
    width: 100%;
    height: var(--btn);
    max-width: 100%!important;
    transform: scaleX(1);
    overflow: visible;
}

.index.open a {
    justify-content: flex-end;
    padding: 0 2rem 0 0;
    background-color: transparent;
}

/**************************************************************
VARIANT: CONDENSED (nav.condensed)
Only define what makes it different
**************************************************************/
nav.condensed {
    height: max-content;
    --wrap: wrap;
    --gap: 0 .25rem;
}

nav.condensed ul {
    min-height: var(--chip_);
    height: max-content;
    --justify: center;
    --wrap: wrap;
}
.condensed li {
    width: max-content;
    min-height: var(--chip);
}
.condensed li + li::before {
    content: '·';
    padding: 0 .25em;
}

.condensed a {
    height: max-content;
    min-height: var(--chip);
    font-size:var(--txt-x-small);
    padding: 0 .25rem;
    text-transform: none;
    border-bottom: 2px solid transparent;
}

.condensed a:focus {
    border-color: var(--action-0);
}

/**************************************************************
VARIANT: SOCIALS (ul.socials)
Only define what makes it different
**************************************************************/
ul.socials {
    --dir: row;
    height: max-content;
    --gap: .5rem;
    --justify: stretch;
    --wrap:nowrap;
    overflow: auto hidden;
    touch-action: pan-x;
}
.always ul.socials,
.always ul.socials li,
.always ul.socials a {
    width: 100%;
}

ul.socials a {
    padding: .5rem;
    max-width: none;
}

ul.socials .icon {
    margin: 0;
}

/**************************************************************
VARIANT: TABS (nav.tabs)
Only define what makes it different
**************************************************************/
nav.tabs {
    position: fixed;
    bottom: var(--btn);
    left: var(--btnbtn);
    right: var(--btnbtn);
    padding-bottom: 2px;
    z-index: var(--z-6);
    touch-action: pan-x pan-y;
    --wrap:nowrap;
    overflow: auto hidden;
}
nav.tabs button {
    aspect-ratio: unset;
}
    nav.tabs button.active {
        cursor: default;
    }
    nav.tabs button.active:hover {
        background-color: var(--base-100);
        color: var(--contrast);
    }
nav.tabs button h2 {
    --wrap: nowrap;
    margin: 0;
    font-size: var(--txt-x-small);
}
.tab-content nav.tabs button {
    height: var(--chip_);
    padding: .25rem .75rem;
    min-height: 0;
}
.tab-content.active {
    padding: 1rem 0;
}
.tab-content h2 {
    margin: 0 0 .5rem;
}
.tab-content nav.tabs {
    height: max-content;
    background-color: var(--base);
    --gap: 0;
}
    .tab-content .tab-content nav.tabs {
        background-color: var(--base-100);
    }
    .tab-content .tab-content .tab-content nav.tabs {
        background-color: var(--base-200);
    }
    .tab-content nav.tabs button.active h2 {
        color: var(--action-0);
    }

/**************************************************************
VARIANT: MENU (nav.menu)
Only define what makes it different
**************************************************************/
nav.menu a {
    padding: .5rem .66rem;
}

/**************************************************************
VARIANT: SHARE (nav.share)
Only define what makes it different
**************************************************************/
nav.share {
    height: max-content;
    margin: 1rem 0;
}

nav.share ul {
    overflow: visible;
}

nav.share h4 {
    display: inline-block;
    width: max-content;
    margin: .25rem .5rem .25rem 0;
    font-size: var(--txt-x-small);
}

/**************************************************************
HEADER ELEMENTS
**************************************************************/
:where(body > header, .wp-site-blocks > header) {
    --dir: row;
    --justify: space-between;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: var(--btn);
    width: 100vw;
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    background-color: var(--base);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    z-index: var(--z-9);
}

.wp-site-blocks > header img {
    width: var(--btn);
}

/**************************************************************
CURRENT HOURS BANNER
**************************************************************/
/*.current-hours {*/
/*    position: sticky;*/
/*    top: var(--nav-height);*/
/*    padding: .25rem 1rem;*/
/*    background-color: var(--action-0);*/
/*    color: var(--action-contrast);*/
/*    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    z-index: 100;*/
/*}*/

/*.current-hours p {*/
/*    margin: 0;*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    flex: 1;*/
/*}*/

/*.current-hours p + p {*/
/*    justify-content: flex-end;*/
/*}*/

/*.current-hours a {*/
/*    color: var(--action-contrast);*/
/*}*/

/*.current-hours b {*/
/*    margin-right: .25rem;*/
/*}*/

/**************************************************************
FIND US BUTTONS
**************************************************************/
/*.find-us {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 0 .5rem;*/
/*}*/

/*.find-us a {*/
/*    padding: .25rem 1rem;*/
/*    border: 1px solid var(--action-contrast);*/
/*    border-radius: var(--radius);*/
/*}*/

/**************************************************************
UTILITIES
**************************************************************/

/* Hide navigation when empty */
nav.term-navigation:has(*[hidden]) {
    display: none;
}

/* Dashboard nav */
.dashboard-nav {
    --justify: flex-start;
    width: 100%;
}

nav.filters {
    --dir: row;
    --justify: flex-start;
    overflow: auto hidden;
}
nav.filters .filter {
    width: auto;
    padding: .25rem .75rem;
}

 navTemp.css

File was deleted

 style.css

@@ -6,9 +6,9 @@
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.95
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
*/:root{--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;--chip:1.5rem;--chipchip:3rem;--chip_:2rem;--btn:4rem;--btn_:5rem;--btnbtn:8rem;--maxHeight:calc(100vh - var(--btnbtn));--dir:row;--justify:center;--align:center;--wrap:wrap;--gap:.5rem;--w:1.2em;--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);--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;--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;--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;--radius:4px;--p-outer:1rem;--radius-outer:calc(var(--radius) + var(--p-outer));--p-y:1rem;--p-x:1rem;--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);--sp1:clamp(0.5rem, 0.714vw + 0.321rem, 1rem);--sp2:clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem);--sp3:clamp(1rem, 1.429vw + 0.643rem, 2rem);--sp4:clamp(1.5rem, 2.143vw + 0.964rem, 3rem);--sp5:clamp(2rem, 2.857vw + 1.286rem, 4rem);--sp6:clamp(3rem, 4.286vw + 1.929rem, 6rem);--sp7:clamp(4rem, 5.714vw + 2.571rem, 8rem);--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){--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%}@layer reset{font:clamp(1rem,1rem + .5vw,2rem)/1.4 system-ui,sans-serif;tab-size:2;hanging-punctuation:first allow-end last;word-break:break-word}body{margin:0}*,::after,::before{box-sizing:border-box}h1,h2{font-weight:900;letter-spacing:-.02rem}h1,h2,h3{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin-block-start:0}dd,li,p{text-wrap:pretty;max-inline-size:88ch}a{color:oklch(.68 .17 228);text-underline-offset:2px}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{inset-block-end:-.25em}sup{inset-block-start:-.5em}dl,ol,ul{margin:0;padding:0;list-style:outside}iframe,img,video{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%}button,input,select,textarea{font:inherit}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%}code,kbd,pre,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:.5}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,th{word-break:normal;border:1px solid gray;padding:.5rem}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}}::-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)}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)}html{scroll-behavior:smooth;overflow-x:hidden}@media(prefers-reduced-motion){html{scroll-behavior:unset}*{transition:none!important;animation:none!important}}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)}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}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)}aside.pre-footer,aside.pre-header,aside.sub-footer,aside.sub-header{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)}footer{padding:1rem;background-color:var(--base-200);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)}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:600;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}: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)}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)}main>* p{margin:.5rem 0}a{color:var(--action-0);border-radius:4px;padding:.125rem}ul a{display:inline-flex}a:visited{color:var(--action-50)}a:hover{color:var(--contrast-50);text-decoration:none}:is(h1,h2,h3,h4,h5,h6) a:hover,li a:hover,p a:hover{color:var(--action-contrast);background-color:var(--action-0)}ol{list-style-type:decimal}.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)}.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)}.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)}.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-25,.width-50,.width-75{width:100%}.w-full{width:100%}@media (min-width:768px){.buttons li.width-50,.width-50{width:calc(50% - .3em)}.width-25{width:calc(25% - .3em)}.width-75{width:calc(75% - .3em)}}.col,.row{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}.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)}.toggle-switch input{opacity:0;width:0;height:0;position:absolute;left:var(--offScreen)}.toggle-switch .slider{position:relative;width:2rem;height:1rem;background-color:var(--base-200);border-radius:.75rem;overflow:hidden;display:flex;justify-content:space-evenly;align-items:center;border:4px solid transparent;transition:var(--trans-t);box-shadow:0 0 .25rem 0 rgba(var(--contrast-rgb),.125) inset;cursor:pointer;margin:5px}.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){#theme-switch{left:1rem}.wp-site-blocks>header{padding:0!important}}.grid-view,.item-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.item-grid.stats{grid-template-columns:repeat(2,1fr)}@media (min-width:768px){.grid-view,.item-grid{--width:250px;grid-template-columns:repeat(auto-fill,minmax(var(--width),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}.favourite,.votes{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))}.favourite .icon-heart-fi,.favourited .icon-heart{display:none}.favourite .icon-heart,.favourited .icon-heart-fi{display:block}.votes{bottom:0;right:0}.favourite{top:0;left:0}.item-grid .item .images,.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.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){.grid-view,.item-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}.btn+label,.buttons a,[type=submit],a.button,button,li.btn{--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)}.btn+label,[data-filter]{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;justify-content:center;align-items:center;box-shadow:rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset)}.btn+label:focus,.btn+label:hover,.buttons a:focus,.buttons a:hover,[type=submit]:focus,[type=submit]:hover,a.button:focus,a.button:hover,button:focus,button:hover,li.btn:focus,li.btn:hover,ul.socials a:focus,ul.socials a:hover{background-color:var(--action-0);color:var(--action-contrast);box-shadow:var(--shdw-none)}.btn:disabled+label,.btn:disabled+label:hover,[type=submit]:disabled,[type=submit]:disabled:focus,[type=submit]:disabled:hover,a.button:disabled,a.button:disabled:focus,a.button:disabled:hover,button:disabled,button:disabled:focus,button:disabled:hover,ul.socials a:disabled,ul.socials a:disabled:hover{opacity:.5;cursor:not-allowed;background-color:var(--base-200);color:var(--contrast-200)}.buttons{--wrap:wrap;--justify:flex-start;margin:1rem auto;width:100%;padding:0}.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:focus,.buttons .outline a:hover{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.favourite.favourited,button.voted .icon{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)}.toggle.notifications.has .bell,.toggle.notifications:not(.has) .bell-ringing,.vote .voted .downvote,.vote .voted .upvote,.vote button:not(.voted) .downvoted,.vote button:not(.voted) .upvoted,button.favourite.favourited .heart,button.favourite:not(.favourited) .heart-fill{display:none}.toggle.notifications.has .bell-ringing,.toggle.notifications:not(.has) .bell,.vote .voted .downvoted,.vote .voted .upvoted,.vote button:not(.voted) .downvote,.vote button:not(.voted) .upvote,button.favourite.favourited .heart-fill,button.favourite:not(.favourited) .heart{display:block}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:#b7332e;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}.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:focus,input:focus-within,input[type=checkbox]:focus+label,input[type=checkbox]:focus-visible+label,input[type=radio]:focus+label,input[type=radio]:focus-visible+label{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{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}}.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{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>img,.cover>video{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{--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::after,blockquote .content::before{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}aside.expanded,dialog[open]{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))}aside.main,dialog[open]{border-radius:var(--radius-outer);overflow:hidden}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:400}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:focus,.m-actions button:hover{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}.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}table{white-space:nowrap;width:100%;display:block;margin:0 0 2rem;border-radius:4px;height:var(--maxHeight);overflow:auto;position:relative}tfoot,thead{position:sticky;z-index:10;background-color:var(--base);text-transform:uppercase;padding:.5rem 0;line-height:2;font-weight:400}tr:nth-of-type(even){background-color:var(--base-200)}tfoot th{vertical-align:middle}tfoot th:first-of-type{text-align:right}tfoot tr,thead 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}tfoot [data-stuck],thead [data-stuck]{background:var(--base)}.hide-tooltip.hide-tooltip.hide-tooltip+[role=tooltip],[role=tooltip]{visibility:hidden;position:absolute;bottom:2rem;left:1rem;width:max-content;height:fit-content;max-width:50vw;padding:.5rem;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]:focus~.has-tooltip[role=tooltip],[aria-describedby]:hover~.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{cursor:pointer;display:flex;border-radius:50%;background-color:transparent}.tt-toggle:focus,.tt-toggle:hover{background-color:var(--action-0);color:var(--action-contrast)}.tt-toggle:focus+[role=tooltip],.tt-toggle:hover+[role=tooltip]{visibility:visible}dialog[open]#jvb-selector{height:70vh;top:15vh;display:flex}#jvb-selector>.wrap{flex:1}.item .status,.status,.status-badge{border-radius:var(--radius);font-size:.875rem;font-weight:500;text-transform:capitalize}#queue .item .status.pending,.status-badge.pending,.status.pending,[data-status=pending]{background:var(--base-100);color:var(--contrast-200)}#queue .item .status.processing,.status-badge.processing,.status.processing,[data-status=processing]{background:var(--base-200);color:var(--contrast-100);animation:pulse-color 2s infinite}#queue .item .status.completed,.status-badge.consulted,.status-badge.treated,.status.completed,[data-status=completed]{background:var(--success);color:var(--successText)}#queue .item .status.failed,.status-badge.error,.status.failed,[data-status=failed]{background:var(--error);color:var(--errorText)}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}.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%}}.typeText::after{content:'|';display:inline-block;margin-left:0;animation:blink .75s step-end infinite}@keyframes blink{from,to{opacity:1}50%{opacity:0}}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:focus,.qtoggle:hover{background-color:rgba(var(--action-rgb),var(--op-6));color:var(--action-contrast)}.qtoggle:disabled,.qtoggle:disabled:focus,.qtoggle:disabled:hover{opacity:.5;background-color:rgba(var(--base-rgb),var(--op-3));color:var(--contrast)}.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:700}.cart-items .total{font-weight:700}#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}.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:0 0;border:none;font-size:1.25rem;cursor:pointer;opacity:.5;transition:opacity .2s;color:inherit}.close-toast:hover{opacity:1}#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}#queue .item .status,.filter .count,.qtoggle .count,.qtoggle .indicator,.refresh .countdown{z-index:var(--z-3);--offset:0;position:absolute;top:var(--offset);background-color:rgba(var(--base-rgb),var(--op-3))}.expanded+.qtoggle .count,.expanded+.qtoggle .indicator{--offset:.25rem}.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}.qtoggle .count,.refresh .countdown{--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:focus,#queue .filter:hover{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{--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-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 .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}#queue .item .info{margin-top:8px;font-size:var(--txt-x-small)}#queue .item .info .time{--gap:7px;font-size:10px}#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{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)}.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}#queue,.item-grid{counter-reset:delay-counter}.item{counter-increment:delay-counter}.item .progress .fill::after{--delay:calc(counter(delay-counter) * .1s)}.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}.pending .fill::after,.processing .fill::after,.queued .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)}.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:focus,.additional-actions .buttons button:disabled:hover{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 .expanded:hover,.additional-actions .buttons button: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:700}[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}.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 figure,.media-text>div{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,.timeline.terms ul{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%}}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 .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,.45);color:#fff;border-radius:4px;overflow:hidden;z-index:10}dialog.gallery details summary{padding:.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:.4rem .8rem;border-radius:3px;font-size:.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-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:.5rem;background:var(--base-100);color:var(--contrast-100);border:1px solid var(--contrast-200);display:flex;align-items:center;justify-content:center;gap:.5rem}.code-status{padding:.75rem;border-radius:4px;margin-top:.5rem;font-size:.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:.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 .75rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--contrast-200)}.copy-section{margin-bottom:1.5rem}.copy-section h4{margin:0 0 .5rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.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:.75rem;background:var(--base-100);border:1px solid var(--base-200);border-radius:4px;font-family:Monaco,'Courier New',monospace;font-size:.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 .icon-check-circle,.copy-btn.success .icon-copy{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 .75rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--contrast-200)}.recent-referrals-list{display:flex;flex-direction:column;gap:.5rem}.referral-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--base-100);border-radius:4px;font-size:.875rem}.referral-info{display:flex;align-items:center;gap:.5rem}.referral-info strong{color:var(--contrast-200)}.referral-date{font-size:.75rem}.loading,.message,.no-referrals{text-align:center;padding:1rem;color:var(--contrast-200);font-size:.875rem}.stats-summary{margin-bottom:1.5rem}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.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:.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:.5rem;width:100%;padding:.875rem;background:var(--action-0);color:var(--action-contrast);text-decoration:none;border-radius:8px;font-weight:600;transition:all .2s ease}aside a.button,aside button:not(.button,.qtoggle){position:relative;top:0;box-shadow:var(--shdw-none);transition:top var(--trans-base),box-shadow var(--trans-base)}aside a.button:hover,aside button:not(.button,.qtoggle,:disabled):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,.3)}.success-content{padding:2rem 1rem;text-align:center}.success-content h3{color:var(--success);margin-bottom:1rem}.success-content p{margin-bottom:.75rem;color:var(--base-200)}.success-content .hint{font-size:.875rem;color:var(--base-200);font-style:italic}.code-status.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:.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:.5rem}}.toggle-text input{display:none}.toggle-text input+label{font-weight:400;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::after,.toggle-text label::before{display:none!important}.toggle-text label{padding-left:0!important}.toggle-text input+label .text{position:relative;margin:0;--gap:0;font-weight:700;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}.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}.create-term[open] summary,details.create-term .field{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}.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:.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)}@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(0)}100%{transform:rotate(360deg)}}@keyframes dance{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.1)}}.content-term-list,.content-term-list li,.content-term-list ul{list-style:none;margin:0;padding:0}.content-term-list .item{flex-direction:column}.content-term-list h3{font-size:var(--txt-medium);font-weight:var(--fw-h)}
*/:root{--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;--chip:1.5rem;--chipchip:3rem;--chip_:2rem;--btn:4rem;--btn_:5rem;--btnbtn:8rem;--maxHeight:calc(100vh - var(--btnbtn));--dir:row;--justify:center;--align:center;--wrap:wrap;--gap:.5rem;--w:1.2em;--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);--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;--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;--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;--radius:4px;--p-outer:1rem;--radius-outer:calc(var(--radius) + var(--p-outer));--p-y:var(--sp1);--p-x:var(--sp1);--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);--sp1:clamp(0.5rem, 0.714vw + 0.321rem, 1rem);--sp2:clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem);--sp3:clamp(1rem, 1.429vw + 0.643rem, 2rem);--sp4:clamp(1.5rem, 2.143vw + 0.964rem, 3rem);--sp5:clamp(2rem, 2.857vw + 1.286rem, 4rem);--sp6:clamp(3rem, 4.286vw + 1.929rem, 6rem);--sp7:clamp(4rem, 5.714vw + 2.571rem, 8rem);--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){--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%}@layer reset{font:clamp(1rem,1rem + .5vw,2rem)/1.4 system-ui,sans-serif;tab-size:2;hanging-punctuation:first allow-end last;word-break:break-word}body{margin:0}*,::after,::before{box-sizing:border-box}h1,h2{font-weight:900;letter-spacing:-.02rem}h1,h2,h3{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin-block-start:0}dd,li,p{text-wrap:pretty;max-inline-size:88ch}a{color:oklch(.68 .17 228);text-underline-offset:2px}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{inset-block-end:-.25em}sup{inset-block-start:-.5em}dl,ol,ul{margin:0;padding:0;list-style:outside}iframe,img,video{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%}button,input,select,textarea{font:inherit}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%}code,kbd,pre,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:.5}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,th{word-break:normal;border:1px solid gray;padding:.5rem}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}}::-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)}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)}html{scroll-behavior:smooth;overflow-x:hidden}@media(prefers-reduced-motion){html{scroll-behavior:unset}*{transition:none!important;animation:none!important}}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)}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}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)}aside.footer,aside.header{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.footer p,aside.header p{margin:.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)}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)}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)}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}.favourite.favourited .heart,.favourite:not(.favourited) .heart-fill,.notifications.has .bell,.notifications:not(.has) .bell-ringing,.vote .voted .downvote,.vote .voted .upvote,.vote button:not(.voted) .downvoted,.vote button:not(.voted) .upvoted{display:none}.favourite.favourited .heart-fill,.favourite:not(.favourited) .heart,.notifications.has .bell-ringing,.notifications:not(.has) .bell,.vote .voted .downvoted,.vote .voted .upvoted,.vote button:not(.voted) .downvote,.vote button:not(.voted) .upvote{display:block}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}.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-25,.width-50,.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)}}.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)}.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)}.btn+label,.buttons a,.buttons li,.col,.item-grid .item,.row,[type=submit],a.btn,aside.footer,aside.header,aside.main,button,li.btn{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}.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)}.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);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)}.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 .btn+label,.item-actions button{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)}.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}table{white-space:nowrap;width:100%;display:block;margin:0 0 2rem;border-radius:4px;height:var(--maxHeight);overflow:auto;position:relative}tfoot,thead{position:sticky;z-index:10;background-color:var(--base);text-transform:uppercase;padding:.5rem 0;line-height:2;font-weight:400}tr:nth-of-type(even){background-color:var(--base-200)}tfoot th{vertical-align:middle}tfoot th:first-of-type{text-align:right}tfoot tr,thead 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}tfoot [data-stuck],thead [data-stuck]{background:var(--base)}.btn+label,.buttons a,[type=submit],a.btn,button,li.btn{--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)}.buttons .outline a,.filters .btn+label,[type=submit].outline,a.btn.outline,button.outline{--color:var(--contrast);background-color:transparent;color:var(--color);border:1px solid var(--color)}.btn+label:hover,.btn:checked+label,.btn:focus+label,.buttons a:focus,.buttons a:hover,.buttons a:visited:hover,[type=submit]:focus,[type=submit]:hover,a.btn:focus,a.btn:hover,a.btn:visited:hover,button:focus,button:hover,li.btn:focus,li.btn:hover{background-color:var(--action-0);color:var(--action-contrast);box-shadow:var(--shdw-none)}.buttons .outline a:focus,.buttons .outline a:hover,.buttons .outline a:visited:hover,.filters .btn+label:hover,.filters .btn:focus+label,[type=submit].outline:focus,[type=submit].outline:hover,a.btn.outline:focus,a.btn.outline:hover,a.btn.outline:visited:hover,button.outline:focus,button.outline:hover{background-color:var(--action-0);color:var(--action-contrast);border-color:var(--action-0)}.btn:disabled+label,.btn:disabled:focus+label,.btn:disabled:hover+label,[type=submit]:disabled,[type=submit]:disabled:focus,[type=submit]:disabled:hover,button:disabled,button:disabled:focus,button:disabled:hover{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)}.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}}.main-actions .buttons,a.sticky,button.sticky{z-index:var(--z-6);position:fixed;bottom:var(--btn_)}body:has(.on-this-page) .main-actions .buttons,body:has(.on-this-page) a.sticky,body:has(.on-this-page) button.sticky{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:focus,.main-actions .buttons button:hover,a.sticky:focus,a.sticky:hover,button.sticky:focus,button.sticky:hover{background-color:rgba(var(--action-rgb),var(--op-6));color:var(--action-contrast)}.main-actions .buttons button:disabled,.main-actions .buttons button:disabled:focus,.main-actions .buttons button:disabled:hover,button.sticky:disabled,button.sticky:disabled:focus,button.sticky:disabled:hover{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:focus,.main .m-actions .refresh:hover{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_))}.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:focus,input:focus-within,input[type=checkbox]:focus+label,input[type=checkbox]:focus-visible+label,input[type=radio]:focus+label,input[type=radio]:focus-visible+label{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}.btn[hidden]+label,[type=checkbox][hidden]+label,[type=radio][hidden]+label{display:none!important}label{display:inline-flex;align-items:center;gap:.5em}[type=checkbox],[type=radio]{position:absolute;opacity:0;left:var(--offScreen)}[type=checkbox]+label,[type=radio]+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=checkbox]+label:hover,[type=checkbox]:focus+label,[type=radio]+label:hover,[type=radio]:focus+label{color:var(--action-0)}[type=checkbox]+label::after,[type=checkbox]+label::before,[type=radio]+label::after,[type=radio]+label::before{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)}input.btn+label::after,input.btn+label::before{display:none}input:is([type=date],[type=number],[type=text],[type=url],[type=email],[type=tel],[type=password],[type=search],[type=datetime-local],[type=time]),textarea{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}input:is([type=date],[type=number],[type=text],[type=url],[type=email],[type=tel],[type=password],[type=search],[type=datetime-local],[type=time]):focus,textarea:focus{outline:var(--action-50);background-color:var(--base-100);color:var(--contrast)}input::placeholder,textarea::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{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:active,select option:checked,select option:focus,select option:hover{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)}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-cancel-button,input[type=search]::-webkit-search-decoration,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}.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}.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{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}.pending .fill::after,.processing .fill::after,.queued .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{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{width:100%;margin:.5rem;padding:.5rem;user-select:all;text-align:center;border-radius:4px;background-color:var(--base-200)}aside.expanded,dialog[open]{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))}aside.main,dialog[open]{border-radius:var(--radius-outer);overflow:hidden}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:400}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:focus,.m-actions button:hover{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)}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 a,nav.share li,nav.share ul{height:var(--chipchip)}nav.share a:hover{background-color:var(--action-0);color:var(--action-contrast)}aside.main .hint,aside.main h4{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)}.indicator,.qtoggle .count{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}#queue.pending:not(.expanded)+.qtoggle .icon,.refresh.fetching .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 .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}.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}.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>img,.cover>video{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{--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::after,blockquote .content::before{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}.loop .item-grid{grid-template-columns:repeat(1,1fr)}@media (min-width:768px){.loop .item-grid{grid-template-columns:repeat(2,1fr)}}.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)}.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}}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}@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(0)}100%{transform:rotate(360deg)}}@keyframes dance{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.1)}}