From 7d930f88d932fb7207e32c570b0eced34c429295 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 11 May 2026 18:36:41 +0000
Subject: [PATCH] =Complete css overhaul

---
 all.css | 4417 +++++++++++++++++++++--------------------------------------
 1 files changed, 1,571 insertions(+), 2,846 deletions(-)

diff --git a/all.css b/all.css
index e82ea8b..71e40f9 100644
--- a/all.css
+++ b/all.css
@@ -6,8 +6,8 @@
 Description: A base theme for Jake Van clients
 Requires at least: 6.4
 Tested up to: 6.4
-Requires PHP: 7.0
-Version: 1.5.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
@@ -166,8 +166,8 @@
     --radius: 4px;
     --p-outer: 1rem;
     --radius-outer: calc(var(--radius) + var(--p-outer));
-    --p-y: 1rem;
-    --p-x: 1rem;
+    --p-y: var(--sp1);
+    --p-x: var(--sp1);
     /*****************************
     Transitions
     *****************************/
@@ -582,6 +582,10 @@
 main > section > * {
     width: 100%;
     max-width: var(--content);
+    margin: var(--sp1) auto;
+}
+main > section > ul {
+    max-width: var(--narrow);
 }
 
 /* Nested items can use any width */
@@ -626,8 +630,6 @@
     max-height:var(--btn);
     overflow:hidden;
 }
-
-
 .scroll-progress {
     position: absolute;
     inset-inline: 0;
@@ -649,49 +651,18 @@
     background: var(--action-0);
 }
 
-aside.pre-header,
-aside.sub-header,
-aside.pre-footer,
-aside.sub-footer {
-    height: var(--chip_);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 1rem;
-    font-size: var(--txt-x-small);
-    background-color:var(--base-50);
-    z-index: var(--z-7);
-}
-.pre-header p {
-    width: max-content;
-}
-.pre-header {
-    position: sticky;
-    top: -2rem;
-    transition: top var(--trans-base);
-}
-.scroll-up .pre-header {
-    top: 0;
-}
-.scroll-up .pre-header ~ header {
-    top: calc(var(--chip_) - 2px);
-}
-/*.pre-header.stuck ~ #breadcrumbs {*/
-/*    margin-top: var(--chip_);*/
-/*}*/
-
 footer {
     padding: 1rem;
-    background-color: var(--base-200);
+    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;
-}
+    footer p {
+        margin: 0 auto;
+    }
 
 body:has(nav.fixed.bottom,nav.on-this-page) footer {
     padding-bottom: var(--btn_);
@@ -701,7 +672,6 @@
         padding: 1rem 2rem var(--btn_);
     }
 }
-
 *:target {
     scroll-snap-margin-top: var(--btnbtn);
     scroll-margin-top: var(--btnbtn);
@@ -709,12 +679,54 @@
     background-color: var(--base);
 }
 
-/*************************************************************
+/***********************
+PRE/SUB HEADER
+***********************/
+aside.header,
+aside.footer {
+    padding: 0 1rem;
+    font-size: var(--txt-x-small);
+    z-index: var(--z-7);
+    background-color: var(--base-50);
+}
+aside.header {
+    height: var(--chip_);
+    --wrap: nowrap;
+}
+aside.footer p,
+aside.header p {
+    width: max-content;
+}
+aside.footer {
+    --dir: column;
+    background-color:var(--base-50);
+    padding: 1rem;
+    border-top: 1px solid var(--base-200);
+}
+aside.footer + footer {
+    margin-top: 0;
+}
+aside.header p ,aside.footer p {
+    margin: 0.125rem 0;
+}
+aside.pre {
+    position: sticky;
+    top: -2rem;
+    transition: top var(--trans-base);
+}
+.scroll-up aside.pre {
+    top: 0;
+}
+.scroll-up .pre ~ header {
+    top: calc(var(--chip_) - 2px);
+}
+/***********************************************************
 TYPOGRAPHY
-*************************************************************/
+***********************************************************/
 body :is(b, strong) {
     font-weight: var(--fw-b-bold);
 }
+
 :is(h1, h2, h3, h4, h5, h6) {
     font-family: var(--heading);
     text-transform: uppercase;
@@ -744,7 +756,7 @@
 
 :is(h1, h2, h3, h4, h5, h6).inline {
     font-size: 1.2rem;
-    font-weight: 600;
+    font-weight: var(--fw-h-bold);
     display: inline-block;
     margin: 0 2rem 0 0;
     letter-spacing: .05em;
@@ -755,29 +767,11 @@
     margin: .5rem 0;
 }
 
-:is(h1, h2, h3, h4, h5, h6).inline + .term-list {
-    display: inline-flex;
-    margin: .5rem 0;
-}
-
 h1 {
     font-size: var(--txt-xxx-large);
     font-weight: var(--fw-h);
     line-height: 1;
-    margin: 0 auto .25em;
-}
-
-h1:first-of-type {
-    margin-top: 10vh;
-}
-
-h1 small {
-    display: block;
-    font-size: var(--txt-x-small);
-    font-weight: var(--fw-b);
-    line-height: 1;
-    margin-bottom: .75em;
-    font-family: var(--body);
+    margin: 10vh auto .25em;
 }
 
 h1 small + small {
@@ -807,52 +801,131 @@
     font-size: var(--txt-small);
 }
 
-/*main > * :is(h1, h2, h3, h4, h5, h6, p) {*/
-/*    width: 100%;*/
-/*}*/
-
-main > * p {
-    margin: .5rem 0;
-}
-
+/******************************************************
+LINKS
+******************************************************/
 a {
     color: var(--action-0);
     border-radius: 4px;
     padding: .125rem;
 }
+    a:visited {
+        color: var(--action-100);
+    }
+    a:hover,
+    a:visited:hover {
+        color: var(--contrast-50);
+        text-decoration: none;
+    }
 
-ul a {
-    display: inline-flex;
+    :is(p, li, h1,h2,h3,h4,h5,h6, small) a:hover {
+        color: var(--action-contrast);
+        background-color: var(--action-0);
+    }
+
+/*****************************************************
+ICONS
+*****************************************************/
+i.icon {
+    width: var(--w);
+    height: var(--w);
+    display: inline-block;
+    background-color: currentColor;
+    mask-image: var(--icon);
+    -webkit-mask-image: var(--icon);
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-position: center;
+    vertical-align: middle;
 }
 
-a:visited {
-    color: var(--action-50);
+/** SWITCHING ICONS **/
+/**** If, say, a button has two icons, one gets hidden on one state, and one gets shown on another, add it here **/
+
+.favourite:not(.favourited) .heart-fill,
+.favourite.favourited .heart,
+.notifications:not(.has) .bell-ringing,
+.notifications.has .bell,
+.vote button:not(.voted) .upvoted,
+.vote button:not(.voted) .downvoted,
+.vote .voted .upvote,
+.vote .voted .downvote {
+    display: none;
 }
 
-a:hover {
-    color: var(--contrast-50);
-    text-decoration: none;
+.favourite:not(.favourited) .heart,
+.favourite.favourited .heart-fill,
+.notifications:not(.has) .bell,
+.notifications.has .bell-ringing,
+.vote button:not(.voted) .upvote,
+.vote button:not(.voted) .downvote,
+.vote .voted .upvoted,
+.vote .voted .downvoted {
+    display: block;
 }
-
-p a:hover,
-li a:hover,
-:is(h1, h2, h3, h4, h5, h6) a:hover {
-    color: var(--action-contrast);
-    background-color: var(--action-0);
-}
-
+/*******************************************************
+LISTS
+*******************************************************/
 ol {
-    list-style-type:decimal;
+    list-style-type: decimal;
 }
 
+ul.terms {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+}
+    ul.terms li {
+        list-style: none;
+    }
+.term-list li {
+    list-style: none;
+}
+    .term-list a {
+        display: inline-flex;
+        width: max-content;
+    }
+/******************************************************
+UTILITY
+******************************************************/
 .font-small { font-size: var(--txt-x-small); }
 .font-medium { font-size: var(--txt-medium); }
 .font-large { font-size: var(--txt-large); }
 .font-x-large { font-size: var(--txt-x-large); }
-/**************************************************************
-UTILITY CLASSES - SPACING
-**************************************************************/
-/** PADDING **/
+
+.align-center { text-align: center; }
+.align-left { text-align: left; }
+.align-right { text-align: right; }
+
+*[hidden] { display: none!important; }
+
+@media (max-width: 767px){
+    .hide-small { display: none; }
+}
+
+.width-50,
+.width-25,
+.width-75 {
+    width: 100%;
+}
+
+.w-full{
+    width: 100%;
+}
+@media (min-width: 768px){
+    .width-50 {
+        width: calc(50% - .3em);
+    }
+    .width-25 {
+        width: calc(25% - .3em);
+    }
+    .width-75 {
+        width: calc(75% - .3em);
+    }
+}
+/** SPACING TODO: maybe scan our files for which we actually use? **/
 .p-1 {padding: var(--sp1);}
 .p-2 {padding: var(--sp2);}
 .p-3 {padding: var(--sp3);}
@@ -961,49 +1034,25 @@
 .ml-7 { margin-left: var(--sp7); }
 .mb-7 { margin-bottom: var(--sp7); }
 
-/**************************************************************
-UTILITY CLASSES - TEXT & VISIBILITY
-**************************************************************/
-.align-center { text-align: center; }
-.align-left { text-align: left; }
-.align-right { text-align: right; }
-
-*[hidden] {
-    display: none!important;
-}
-
-@media (max-width: 767px){
-    .hide-small {
-        display: none;
-    }
-}
-
-.width-50,
-.width-25,
-.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);
-    }
-}
-
 /******************************************************************
 LAYOUT UTILITIES
 ******************************************************************/
+/** Buttons **/
+button,
+[type=submit],
+a.btn,
+.btn + label,
+li.btn,
+.buttons a,
+.buttons li,
+/** Item Grid **/
+.item-grid .item,
+/** popups **/
+aside.main,
+/** asides **/
+aside.header,
+aside.footer,
+/** Defaults, of course **/
 .row,
 .col {
     display: flex;
@@ -1048,9 +1097,9 @@
 .col.even,
 .row.even { --justify: space-evenly; }
 
-/******************************************************************
+/*************************************************
 POSITION UTILITIES
-******************************************************************/
+*************************************************/
 .abs { position: absolute; }
 *:has(>.abs) { position: relative; }
 
@@ -1078,965 +1127,186 @@
 }
 
 /******************************************************************
-THEME SWITCHER & TOGGLE
+THEME SWITCHER
 ******************************************************************/
-.toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-    position: absolute;
-    left: var(--offScreen);
+.field .switch {
+    display: inline-flex;
 }
-
-.toggle-switch .slider {
+.switch .slider {
+    --trans-t: .0125s;
     position: relative;
-    width: 2rem;
-    height: 1rem;
+    width: var(--chipchip);
+    height: var(--chip);
     background-color: var(--base-200);
     border-radius: .75rem;
     overflow: hidden;
     display: flex;
-    justify-content: space-evenly;
+    justify-content: space-between;
     align-items: center;
     border: 4px solid transparent;
-    transition: var(--trans-t);
     box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;
     cursor: pointer;
     margin: 5px;
+    transition: var(--trans-color);
 }
+    .switch .slider::before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: var(--base);
+        transform: translateX(-1.5rem); /* NOTE: Tied to half of the width defined above */
+        border-radius: .75rem;
+        transition: var(--trans-transform);
+        box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
+    }
+    .switch :checked ~ .slider::before {
+        transform: translateX(1.5rem);
+        box-shadow: 0 0 .25rem 3px rgba(var(--base-rgb), .25);
+    }
+    .switch :checked ~ .slider {
+        background-color: var(--action-0);
+    }
 
-.toggle-switch .slider::before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top:0;
-    left: 0;
-    background-color: var(--base);
-    transform: translateX(-1rem);
-    border-radius: .75rem;
-    transition: var(--trans-transform);
-    box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
-}
-
-.toggle-switch input:checked ~ .slider::before {
-    transform: translateX(1rem);
-    box-shadow: 0 0 .25rem 3px rgba(var(--base-rgb), .25);
-}
-
-.toggle-switch input:checked ~ .slider {
-    background-color: var(--action-0);
-}
-
-.toggle-switch input:active ~ .slider::before {
-    transform: translate(0);
-}
-
-#theme-switch {
-    z-index: 99;
-    margin: 0;
-    --wrap: nowrap;
-    --gap: 1rem;
-}
-
-#theme-switch .slider {
-    width: var(--chipchip);
-    height: var(--chip);
-}
-
-#theme-switch .slider::before {
-    transform: translateX(-1.5rem);
-}
-
-#theme-switch input:checked ~ .slider::before {
-    transform: translateX(1.5rem);
-}
-
-@media (max-width: 600px) {
+    .switch :active ~ .slider::before {
+        transform: translateX(0);
+    }
     #theme-switch {
-        left: 1rem;
+        z-index: var(--z-6);
+        margin: 0;
+        --wrap: nowrap;
+        --gap: 1rem;
     }
-    .wp-site-blocks > header {
-        padding: 0!important;
-    }
+        #theme-switch [type=checkbox] {
+            position: absolute;
+            left: var(--offScreen);
+        }
+        @media (max-width: 600px) {
+            #theme-switch {
+                left: 1rem;
+            }
+        }
+:checked ~ .slider .icon-sun-dim {
+    --w: .75em;
+    margin-top: .25em;
+}
+.slider .icon-moon {
+    --w: .666em;
+    margin-top: .333em;
+}
+.slider .icon-sun-dim,
+:checked ~ .slider .icon-moon {
+    --w: 1em;
+    margin-top: 0;
+}
+:not(:checked) ~ .slider .icon-sun-dim {
+    color: var(--action-0);
 }
 
-/*********************************************************
-GRIDS
-*********************************************************/
-.grid-view,
-.item-grid {
+/************************************************
+GRIDS/ROWS/TABLES
+************************************************/
+/** GRID VIEW (default) **/
+.item-grid{
+    --columns: repeat(2, 1fr);
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: var(--columns);
     gap: 10px;
 }
-.item-grid.stats {
-    grid-template-columns: repeat(2, 1fr);
-}
-@media (min-width: 768px){
-    .grid-view,
-    .item-grid {
-        --width: 250px;
-        grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
+    .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));
+        }
+    }
 
-.grid-view .item,
 .item-grid .item {
     border-radius: var(--radius-outer);
-    display:flex;
     filter: none;
     position: relative;
 }
-    .item-grid.list-view {
-        gap: 0;
-    }
-    .item-grid.list-view .item {
-        aspect-ratio: unset;
-        align-items: flex-start;
-        border-radius: 4px;
-        padding: 1rem 0;
-    }
-    .list-view .item:nth-of-type(even) {
-        background-color: var(--base);
-    }
-    .list-view .item-select {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 18vh;
-    }
-        .list-view .item .col {
-            padding: 0 var(--chip_) 0 1rem;
-        }
-        .list-view .abs {
-            right:0;
-            top:0;
-            width:max-content;
-            --dir:column-reverse;
-            justify-content: flex-end;
-        }
-    .item.col {
-        --wrap: nowrap;
-    }
-    .votes,
-    .favourite {
+    .item-grid .item .item-actions {
+        --gap: .125rem;
+        z-index: 1;
         position: absolute;
-        z-index: var(--z-1);
-        box-shadow: rgba(var(--base-rgb),var(--op-2)) var(--shdw);
-        background-color: rgba(var(--base-rgb),var(--op-2));
+        top: 0;
+        right: 0;
+        width: calc(100% - var(--btn));
     }
-        .favourite .icon-heart-fi,
-        .favourited .icon-heart {
-            display: none;
+        .item-actions button,
+        .item-actions .btn + label {
+            min-height: var(--chipchip);
+            width: var(--chipchip);
+            z-index: var(--z-1);
         }
-        .favourited .icon-heart-fi,
-        .favourite .icon-heart {
-            display: block;
-        }
-.votes {
-    bottom: 0;
-    right: 0;
-}
-.favourite {
-    top: 0;
-    left: 0;
-}
 .item-grid .item .images,
-.item-grid .item .images a{
+.item-grid .item .images a {
     aspect-ratio: 1;
     width: 100%;
     height: 100%;
     display: flex;
 }
-
-
-.item-grid button {
-    --height: max-content;
-    aspect-ratio: 1;
-}
-
-.grid-view img,
 .item-grid img {
     border-radius: var(--radius);
 }
+.item-grid .item-actions button {
+    min-height: var(--chipchip);
+    width: var(--chipchip);
+}
 
+/** LIST VIEW **/
 .item-grid.list-view {
     display: flex;
     flex-direction: column;
     gap: 0;
 }
-
-.item-grid.list-view .item .col {
-    --gap: .5rem;
-}
-
-.item-grid.list-view img {
-    width: 20%;
-}
-
-@media (min-width: 768px) {
-    .item-grid,
-    .grid-view {
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    .item-grid.list-view .item {
+        aspect-ratio: unset;
+        align-items: flex-start;
+        border-radius: var(--radius);
+        padding: 1rem 0;
     }
-}
+    .list-view .item:nth-of-type(even) {
+        background-color: var(--base);
+    }
+    .list-view img {
+        width: 20%;
+    }
+    .item.col {
+        --wrap: nowrap;
+    }
 
-/******************************************************************
-INTERACTIVE ELEMENTS - BASE
-******************************************************************/
-li.btn,
-button,
-[type=submit],
-a.button,
-.buttons a,
-.btn + label {
-    --justify: center;
-    --align: center;
-    --dir: row;
-    width: fit-content;
-    text-transform: uppercase;
-    text-decoration: none;
-    text-align: center;
-    background-color: var(--base-100);
-    color: var(--contrast-50);
-    border: 1px solid var(--base-200);
-    border-radius: var(--radius);
-    padding: .25rem 1rem;
-    font-family: var(--heading);
-    cursor: pointer;
-    outline: 0;
-    min-height: var(--btn);
-    display: inline-flex;
-    justify-content: var(--justify);
-    align-items: var(--align);
-    gap: var(--gap);
-    flex-wrap: var(--wrap);
-    flex-direction: var(--dir);
-    position: relative;
-    box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
-}
-
-[data-filter], .btn + label {
-    width: var(--chipchip);
-    height: var(--chipchip);
-    min-height: var(--chipchip);
-}
-select[data-filter] {
-    width: max-content;
-    height: auto;
-    min-height: 0;
-}
-
-ul.socials a {
-    background-color: var(--base-100);
-    color: var(--contrast-50);
-    border: 1px solid var(--base-200);
-    border-radius: var(--radius);
-    padding: .25rem 1rem;
-    cursor: pointer;
-    min-height: var(--btn);
-    display: inline-flex;
+.empty-state {
+    --w: 1.2em;
+    grid-column: 1 / span 2;
+    display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
-    box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
-}
-
-/******************************************************************
-INTERACTIVE ELEMENTS - STATES
-******************************************************************/
-li.btn:hover,
-li.btn:focus,
-button:hover,
-button:focus,
-[type=submit]:hover,
-[type=submit]:focus,
-a.button:hover,
-a.button:focus,
-ul.socials a:hover,
-ul.socials a:focus,
-.buttons a:hover,
-.buttons a:focus,
-.btn + label:hover,
-.btn + label:focus {
-    background-color: var(--action-0);
-    color: var(--action-contrast);
-    box-shadow: var(--shdw-none);
-}
-
-button:disabled,
-[type=submit]:disabled,
-a.button:disabled,
-ul.socials a:disabled,
-.btn:disabled + label,
-button:disabled:hover,
-button:disabled:focus,
-[type=submit]:disabled:hover,
-[type=submit]:disabled:focus,
-a.button:disabled:hover,
-a.button:disabled:focus,
-ul.socials a:disabled:hover,
-.btn:disabled + label:hover {
-    opacity: .5;
-    cursor: not-allowed;
-    background-color: var(--base-200);
-    color: var(--contrast-200);
-}
-
-/******************************************************************
-BUTTONS
-******************************************************************/
-.buttons {
-    --wrap: wrap;
-    --justify: flex-start;
+    text-align: center;
     margin: 1rem auto;
-    width: 100%;
-    padding: 0;
-}
-
-.buttons.fit {
-    width: fit-content;
-    margin: 1rem 2rem;
-}
-
-.buttons li {
-    --justify: stretch;
-    --align: stretch;
-    padding: 0;
-    list-style: none;
-    overflow:hidden;
-    width: 100%;
-}
-
-.list-none {
-    list-style: none;
-}
-
-@media (min-width: 768px){
-    .buttons {
-        max-width: var(--content);
-        margin: 3rem auto;
-    }
-}
-
-.buttons .outline a {
-    background-color: transparent;
-    color: var(--action-0);
-    border: 2px solid var(--action-0);
-}
-
-.buttons .outline a:hover,
-.buttons .outline a:focus {
-    background-color: var(--action-0);
-    color: var(--action-contrast);
-    border-color: var(--action-0);
-}
-
-.buttons a {
-    width: 100%;
-}
-
-details .icon {
-    --w: 1.5em;
-}
-details .filters .icon {
-    --w: 1em;
-}
-button.voted .icon,
-button.favourite.favourited {
-    animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
-}
-
-@keyframes favourite-pop {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.3); }
-    75% { transform: scale(.9); }
-    100% { transform: scale(1); }
-}
-
-button.filter-toggle {
-    border: 1px solid var(--base-200);
-    background-color: transparent;
-    white-space: nowrap;
-    font-size: 1rem;
-    height: var(--chip_);
-    width: var(--chip_);
-    min-height: 0;
-    padding: .35em;
-    --w: 1.2em;
-}
-
-.filter-toggle:hover {
-    border-color: var(--action-50);
-    color: var(--action-50);
-}
-
-.filter-toggle:focus {
-    background-color: var(--action-50);
-    color: var(--action-contrast);
-}
-
-button.favourite:not(.favourited) .heart-fill,
-button.favourite.favourited .heart,
-.toggle.notifications:not(.has) .bell-ringing,
-.toggle.notifications.has .bell,
-.vote button:not(.voted) .upvoted,
-.vote button:not(.voted) .downvoted,
-.vote .voted .upvote,
-.vote .voted .downvote {
-    display: none;
-}
-
-button.favourite:not(.favourited) .heart,
-button.favourite.favourited .heart-fill,
-.toggle.notifications:not(.has) .bell,
-.toggle.notifications.has .bell-ringing,
-.vote button:not(.voted) .upvote,
-.vote button:not(.voted) .downvote,
-.vote .voted .upvoted,
-.vote .voted .downvoted {
-    display: block;
-}
-
-/******************************************************************
-ICONS
-******************************************************************/
-i.icon {
-    width: var(--w);
-    height: var(--w);
-    display: inline-block;
-    background-color: currentColor;
-    mask-image: var(--icon);
-    -webkit-mask-image: var(--icon);
-    mask-size: contain;
-    -webkit-mask-size: contain;
-    mask-repeat: no-repeat;
-    -webkit-mask-repeat: no-repeat;
-    mask-position: center;
-    -webkit-mask-position: center;
-    vertical-align: middle;
-}
-.icon-colour {
-    background: rgb(183, 51, 46);
-    background: linear-gradient(180deg, rgba(255,0,128,1) 0%, rgba(250,71,101,1) 14%, rgba(251,121,35,1) 28%, rgba(176,190,19,1) 42%, rgba(14,204,0,1) 56%, rgba(14,225,166,1) 70%, rgba(63,152,253,1) 84%, rgba(166,90,196,1) 100%);
-}
-.icon.grab {
-    cursor: grab;
-}
-main a .icon {
-    margin-right: .5rem;
-}
-/** TODO: Reintegrate this; currently svg is in .css
-path#refresh {
-    transform-origin: center;
-    transform-box: fill-box;
-    animation: spin 1s var(--trans-fn) infinite;
-}**/
-
-/******************************************************************
-ACCESSIBILITY
-******************************************************************/
-.screen-reader-text {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute !important;
-    width: 1px;
-    word-wrap: normal !important;
-}
-
-input[type=checkbox]:focus + label,
-input[type=checkbox]:focus-visible + label,
-input[type=radio]:focus + label,
-input[type=radio]:focus-visible + label,
-input:focus,
-input:focus-within {
-    outline: 2px solid var(--action-0) !important;
-    outline-offset: 2px !important;
-    box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--op-3))!important;
-}
-
-[aria-busy="true"] {
-    cursor: progress;
-}
-
-[aria-disabled="true"],
-[disabled] {
-    cursor: not-allowed;
-    opacity: .7;
-}
-
-/******************************************************************
-DETAILS
-******************************************************************/
-details {
-    padding: .25rem 0;
-    border-top: 1px solid var(--base-200);
-    border-bottom: 1px solid var(--base-200);
-}
-
-details[open] {
-    background-color: var(--base-50);
-}
-
-details summary {
-    --wrap: nowrap;
-    list-style: none;
-    text-transform: uppercase;
-    cursor: pointer;
-    border: 0;
-    position: relative;
-    padding: .5rem 2.5rem .5rem .5rem;
-    gap: .5rem;
-}
-
-details summary:hover {
+    max-width: 66%;
     background-color: var(--base-100);
-    border-color: var(--base-100);
-    color: var(--contrast);
+    border: 2px dashed var(--base-50);
+    padding: 1rem;
 }
 
-details[open] > summary {
-    background-color: var(--base-50);
-}
-
-details summary::after {
-    position: absolute;
-    right: .5rem;
-    top: .5rem;
-    --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMTIuMjQsMTAwLjI0bC04MCw4MGE2LDYsMCwwLDEtOC40OCwwbC04MC04MGE2LDYsMCwwLDEsOC40OC04LjQ4TDEyOCwxNjcuNTFsNzUuNzYtNzUuNzVhNiw2LDAsMCwxLDguNDgsOC40OFoiLz48L3N2Zz4=');
-    content: "";
-    background-color: var(--contrast-100);
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: contain;
-    -webkit-mask-image: var(--icon);
-    mask-image: var(--icon);
-    mask-repeat: no-repeat;
-    mask-size: contain;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-left: auto;
-    transition: var(--trans-color), var(--trans-transform);
-}
-
-details summary:hover::after {
-    background-color: var(--action-0);
-}
-
-details[open] > summary::after {
-    background-color: var(--contrast);
-}
-
-details[open] > summary::after {
-    transform: rotate(-540deg);
-    transition: background-color var(--trans-base);
-    transition-property: background-color, transform;
-}
-
-details::details-content {
-    opacity: 0;
-    block-size: 0;
-    overflow-y: clip;
-    transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
-}
-
-details[open]::details-content {
-    opacity: 1;
-    block-size: auto;
-}
-
-@media (prefers-reduced-motion: no-preference){
-    details {
-        interpolate-size: allow-keywords;
-    }
-}
-
-/**************************************************
-LIST OVERRIDES
-**************************************************/
-.term-list {
-    --justify: flex-start;
-    --align: center;
-    --wrap: nowrap;
-    --gap: 1.5rem;
-    --dir: row;
-    --w: 1em;
-    list-style: none;
-    padding: 0;
-    height: var(--btn);
-    display: flex;
-    justify-content: var(--justify);
-    align-items: var(--align);
-    gap: var(--gap);
-    flex-wrap: var(--wrap);
-    flex-direction: var(--dir);
-    position: relative;
-    overflow: auto hidden;
-    touch-action: pan-x;
-    text-transform: lowercase;
-}
-    .term-list small {
-        vertical-align: baseline;
-        margin-left: .5rem;
-        font-style: italic;
-    }
-    .term-list li {
-        display: flex;
-        align-items: center;
-    }
-    .term-list a {
-        align-items: center;
-    }
-
-
-.directory-list > ul
-{
-    max-width: 100%;
-}
-.directory-list img {
-    width: 70px;
-}
-    .directory-list .image {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-    }
-    .directory-list h3 {
-        margin: 0;
-        text-align: center;
-        font-weight: var(--fw-h-bold);
-        font-family: var(--heading);
-        position: sticky;
-        font-size: var(--txt-enormous);
-        width: 100%;
-        top: 0;
-        left: 0;
-        color: var(--base);
-        text-shadow: var(--base-200) 1px 1px 0;
-        user-select:none;
-    }
-    .directory-list > ul > li {
-        padding: 2rem;
-        align-items: center;
-    }
-        .directory-list > ul > li:nth-of-type(even) {
-            background-color: var(--base-100);
-        }
-    .directory-list ul ul {
-        width: 100%;
-    }
-    .directory-list ul ul li {
-        padding: .35rem .5rem;
-    }
-    .directory-list ul ul li:nth-of-type(even) {
-        background-color:var(--base);
-    }
-
-    @media (min-width: 768px) {
-        .directory-list h3 {
-            width: 20vw;
-        }
-        .directory-list > ul {
-            width: 100%;
-        }
-        .directory-list ul ul {
-            min-height: var(--txt-enormous);
-        }
-        .directory-list > ul > li {
-            padding: 2rem 10vw;
-        }
-    }
-/**************************************************
-COVER BLOCK
-**************************************************/
-.cover {
-    position: relative;
-    overflow: hidden;
-    min-height: 60vh;
-    padding: var(--btn);
-}
-
-.cover::before {
-    z-index: var(--coverIndex);
-    background-color: var(--action-0);
-    mix-blend-mode: var(--coverBlend);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    content: '';
-}
-
-.cover::before,
-.cover > video,
-.cover > img {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    margin: 0;
-}
-
-
-.cover .content {
-    z-index: 5;
-    position: relative;
-    overflow: hidden auto;
-    width: max-content;
-    height: max-content;
-    max-width:100%;
-    max-height: 100%;
-}
-
-.cover > img {
-    z-index: 1;
-    opacity: .5;
-    mix-blend-mode: luminosity;
-    object-fit: cover;
-}
-
-@media (min-width: 768px) {
-    .cover > img {
-        opacity: .33;
-    }
-}
-
-/**************************************************
-BLOCKQUOTE
-**************************************************/
-blockquote {
-    --background: var(--base-100);
-    --border: var(--action-0);
-    line-height: 1.2;
-    padding: var(--btn);
-    border-radius: 4rem;
-    background-color: var(--background);
-}
-
-blockquote .content {
-    margin: 12px auto;
-    max-width: min(680px, 80vw);
-    position: relative;
-    font-family: var(--heading);
-    font-weight: var(--fw-h-bold);
-    padding: 3rem 2.5rem;
-    border-radius: var(--radius-outer);
-    border: 2px solid var(--border);
-}
-
-blockquote .content::before,
-blockquote .content::after {
-    position: absolute;
-    content: '';
-    left: 50px;
-}
-
-blockquote .content::before {
-    width: 80px;
-    border: 6px solid var(--background);
-    bottom: -3px;
-    z-index: 2;
-}
-
-blockquote .content::after {
-    border: 2px solid var(--border);
-    border-radius: 0 100% 0 0;
-    width: 60px;
-    height: 60px;
-    bottom: -60px;
-    border-bottom: 0;
-    border-left: 0;
-    z-index: 3;
-}
-
-blockquote cite {
-    padding: 15px 0 0 12px;
-    margin: 0 0 0 150px;
-    z-index: 1;
-}
-
-blockquote.pull {
-    background-color: unset;
-    border-radius: 0;
-    margin: 4rem auto;
-    padding: 3rem;
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down), rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);;
-}
-
-blockquote.pull cite {
-    margin: 0;
-}
-
-/******************************************************************
-OVERLAYS - BASE PATTERN
-******************************************************************/
-dialog[open],
-aside.expanded {
-    background-color: var(--base);
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-    z-index: var(--z-5);
-}
-
-dialog::backdrop {
-    backdrop-filter: blur(5px);
-    background-color: rgba(var(--base-rgb),var(--op-4));
-}
-
-dialog[open],
-aside.main {
-    border-radius: var(--radius-outer);
-    overflow: hidden;
-}
-
-/**************************************************
-MODALS DIALOGUE
-**************************************************/
-dialog[open] {
-    z-index:999;
-    --padding: 0;
-    top: 5vh;
-    width: min(500px, 95vw);
-    height: fit-content;
-    max-height: 90vh;
-    padding: var(--padding);
-    background-color: var(--base-50);
-    color: var(--contrast);
-    border: 1px solid var(--base-200);
-}
-
-dialog > .wrap,
-dialog > form {
-    max-height: var(--maxHeight);
-    overflow: hidden auto;
-    margin: 0 0 0 1.5rem;
-    padding-right: 1.2rem;
-    padding-bottom: var(--btn);
-    width: calc(100% - 1.5rem);
-}
-
-dialog label {
-    font-weight: normal;
-}
-
-dialog :is(h2, h3) {
-    margin: 0 0 .5rem 0;
-    font-size: var(--txt-large);
-}
-
-dialog:has(.m-actions){
-    padding-bottom: var(--btn);
-}
-
-.m-actions {
-    --w: 1.15em;
-    --justify: flex-end;
-    --wrap: nowrap;
-    --gap: 0;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    z-index: var(--z-6);
-    background-color: var(--action-100);
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
-}
-
-.m-actions button {
-    width: 100%;
-    height: var(--chipchip);
-    border-radius: 0;
-    font-size: var(--txt-x-small);
-    --gap: .75rem;
-    color: var(--action-contrast);
-    background-color: var(--action-50);
-    border: 2px solid var(--action-50);
-    box-shadow:none;
-}
-
-.m-actions button:hover,
-.m-actions button:focus {
-    background-color: var(--base);
-    color: var(--contrast);
-}
-
-.m-actions button:first-of-type {
-    border-bottom-left-radius: 1rem;
-}
-
-.m-actions button:last-of-type {
-    border-bottom-right-radius: 1rem;
-}
-
-dialog ul {
-    list-style: none;
-}
-
-dialog .search-container {
-    padding-top: 1rem;
-    width: 100%;
-    gap: .5rem;
-}
-
-/****************
-QUERY BLOCK
-****************/
-.loop .item-grid {
-    grid-template-columns: repeat(1, 1fr);
-}
-
-@media (min-width: 768px) {
-    .loop .item-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-.loop .item-grid .progress {
-    aspect-ratio: 3/2;
-    position: relative;
-}
-
-.loop .item-grid .progress figure {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    gap: .125rem;
-    background-color: var(--action-0);
-    position: relative;
-}
-
-.loop .item-grid .progress figure span {
-    position: absolute;
-    width: 50%;
-    text-transform: uppercase;
-    background-color: rgba(var(--action-rgb),var(--op-4));
-    color: var(--action-contrast);
-    padding: 0 .25rem;
-}
-
-.loop .progress figure img {
-    max-width: 50%;
-    object-fit: cover;
-}
-
-figure .after {
-    top: 0;
-    right:0;
-}
-
-figure .before {
-    bottom: 0;
-    left: 0;
-}
-
-/**************************************************
+/***********************************************
 TABLES
-**************************************************/
+***********************************************/
 table {
     white-space: nowrap;
     width: 100%;
@@ -2154,132 +1424,1286 @@
     background: var(--base);
 }
 
-/**************************************************
-TOOLTIP
-**************************************************/
-[role=tooltip],
-.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
-    visibility: hidden;
-    position: absolute;
-    bottom: 2rem;
-    left: 1rem;
-    width: max-content;
-    height:fit-content;
-    max-width: 50vw;
-    padding: .5rem;
+/***********************************************
+BUTTONS
+***********************************************/
+button,
+[type=submit],
+a.btn,
+.btn + label,
+li.btn,
+.buttons a {
+    --justify:center;
+    --align: center;
+    --dir: row;
+    --wrap: nowrap;
+    width: fit-content;
+    text-transform: uppercase;
+    text-decoration: none;
+    background-color: var(--base-100);
+    color: var(--contrast-50);
+    border: 1px solid var(--base-200);
     border-radius: var(--radius);
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-    background: var(--action-0);
-    color: var(--action-contrast);
-}
-
-body.menu_item [role=tooltip] {
-    left: auto;
-    right: 100%;
-    top: -200%;
-    z-index: var(--z-4);
-}
-
-[role=tooltip] p {
-    margin: 0;
-}
-
-[role=tooltip] p + p {
-    margin-top: .5rem;
-}
-
-.field:has([aria-describedby]:focus) [role=tooltip],
-[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],
-[aria-describedby]:focus  ~ .has-tooltip[role="tooltip"] {
-    visibility: visible;
-    display: block;
-}
-
-.has-tooltip {
+    padding: .25rem 1rem;
+    font-family: var(--heading);
+    cursor: pointer;
+    outline: 0;
+    min-height: var(--btn);
     display: inline-flex;
-    justify-content: flex-end;
+    position: relative;
+    box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
+}
+button.outline,
+[type=submit].outline,
+a.btn.outline,
+.filters .btn + label,
+.buttons .outline a {
+    --color: var(--contrast);
+    background-color: transparent;
+    color: var(--color);
+    border: 1px solid var(--color);
+}
+
+button:hover,
+button:focus,
+[type=submit]:hover,
+[type=submit]:focus,
+a.btn:hover,
+a.btn:visited:hover,
+a.btn:focus,
+.btn + label:hover,
+.btn:focus + label,
+.btn:checked + label,
+li.btn:hover,
+li.btn:focus,
+.buttons a:hover,
+.buttons a:visited:hover,
+.buttons a:focus {
+    background-color: var(--action-0);
+    color: var(--action-contrast);
+    box-shadow: var(--shdw-none);
+}
+
+    button.outline:hover,
+    button.outline:focus,
+    [type=submit].outline:hover,
+    [type=submit].outline:focus,
+    a.btn.outline:hover,
+    a.btn.outline:visited:hover,
+    a.btn.outline:focus,
+    .filters .btn + label:hover,
+    .filters .btn:focus + label,
+    .buttons .outline a:hover,
+    .buttons .outline a:visited:hover,
+    .buttons .outline a:focus {
+        background-color: var(--action-0);
+        color: var(--action-contrast);
+        border-color: var(--action-0);
+    }
+
+button:disabled,
+button:disabled:focus,
+button:disabled:hover,
+[type=submit]:disabled,
+[type=submit]:disabled:focus,
+[type=submit]:disabled:hover,
+.btn:disabled + label,
+.btn:disabled:hover + label,
+.btn:disabled:focus + label {
+    opacity: .5;
+    cursor: not-allowed;
+    background-color: var(--base-200);
+    color: var(--contrast-200);
+}
+
+[type=submit] {
+    margin: 1rem 0;
+}
+
+.filters .btn + label,
+.filters button {
+    min-height:var(--chip);
+}
+.filters .btn + label {
+    background-color: var(--base-100);
+    border: 1px solid var(--base-200);
+    color: var(--contrast-200);
+}
+    .filters .btn:checked + label {
+        border-color: var(--contrast);
+        color: var(--contrast);
+    }
+
+/**** WP BLOCK BUTTONS ****/
+.buttons {
+    --wrap: wrap;
+    --justify: flex-start;
+    margin: 1rem auto;
+    width: 100%;
+    padding: 0;
+}
+    .buttons li {
+        --justify: stretch;
+        --align: stretch;
+        padding: 0;
+        list-style: none;
+        overflow: hidden;
+    }
+    .buttons a {
+        width: 100%;
+    }
+    .buttons.fit {
+        width: fit-content;
+        margin: 1rem 2rem;
+    }
+    @media (min-width: 768px) {
+        .buttons {
+            max-width: var(--content);
+            margin: 3rem auto;
+        }
+    }
+a.sticky,
+button.sticky,
+.main-actions .buttons {
+    z-index: var(--z-6);
+    position: fixed;
+    bottom: var(--btn_);
+}
+body:has(.on-this-page) a.sticky,
+body:has(.on-this-page) button.sticky,
+body:has(.on-this-page) .main-actions .buttons {
+    bottom: calc(var(--btn_) + var(--chip_));
+}
+.main-actions .buttons button,
+button.sticky {
+    width: var(--btn);
+    height: var(--btn);
+    background-color: rgba(var(--base-rgb),var(--op-4));
+    color: var(--contrast);
+    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+    transition: var(--trans-size), var(--trans-color);
+}
+    .main-actions .buttons button:hover,
+    .main-actions .buttons button:focus,
+    a.sticky:hover,
+    a.sticky:focus,
+    button.sticky:hover,
+    button.sticky:focus {
+        background-color: rgba(var(--action-rgb),var(--op-6));
+        color: var(--action-contrast);
+    }
+        .main-actions .buttons button:disabled,
+        .main-actions .buttons button:disabled:hover,
+        .main-actions .buttons button:disabled:focus,
+        button.sticky:disabled,
+        button.sticky:disabled:hover,
+        button.sticky:disabled:focus {
+            opacity: .5;
+            background-color: rgba(var(--base-rgb),var(--op-3));
+            color: var(--contrast);
+        }
+
+    .qtoggle {
+        left: 0;
+        transition: left var(--trans-base), width var(--trans-base), border var(--trans-base), var(--trans-color);
+    }
+    .main .m-actions .refresh {
+        width: var(--btn);
+        border-radius: 0;
+        background-color: var(--base-50);
+        color: var(--contrast);
+    }
+        .main .m-actions .refresh:hover,
+        .main .m-actions .refresh:focus {
+            background-color: var(--action-0);
+            color: var(--action-contrast);
+        }
+        .main .refresh .indicator {
+            background-color: rgba(var(--base-rgb), var(--op-3));
+            top: 0;
+            right: 0;
+            height: 1.1em;
+            width: 1.1em;
+        }
+        .refresh .countdown:not(.counting) {
+            display: none;
+        }
+
+    .main h2 {
+        margin: .5em 0;
+        font-size: var(--txt-medium);
+    }
+
+
+
+#back-to-top {
+    min-height: var(--chip);
+    bottom: -3rem;
+    right: 0;
+    transition: bottom var(--trans-base);
+}
+body:has(.main-actions) #back-to-top {
+    right: calc(var(--btn_) + .5rem);
+}
+.scroll-up #back-to-top {
+    bottom: 0;
+}
+body:has(.fixed.bottom).scroll-up #back-to-top {
+    bottom: var(--btn);
+}
+
+body:has(.on-this-page).scroll-up.scroll-up #back-to-top {
+    bottom: calc(var(--btn) + var(--chip_));
+}
+/******************************************************************
+ACCESSIBILITY
+******************************************************************/
+.screen-reader-text {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute !important;
+    width: 1px;
+    word-wrap: normal !important;
+}
+
+input[type=checkbox]:focus + label,
+input[type=checkbox]:focus-visible + label,
+input[type=radio]:focus + label,
+input[type=radio]:focus-visible + label,
+input:focus,
+input:focus-within {
+    outline: 2px solid var(--action-0) !important;
+    outline-offset: 2px !important;
+    box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--op-3))!important;
+}
+
+[aria-busy="true"] {
+    cursor: progress;
+}
+
+[aria-disabled="true"],
+[disabled] {
+    cursor: not-allowed;
+    opacity: .7;
+}
+
+[type=checkbox][hidden] + label,
+[type=radio][hidden] + label,
+.btn[hidden] + label {
+    display: none!important;
+}
+
+/**************************************************************
+FORM ELEMENTS
+**************************************************************/
+label {
+    display: inline-flex;
+    align-items: center;
+    gap: .5em;
+}
+[type=radio],
+[type=checkbox] {
+    position: absolute;
+    opacity: 0;
+    left: var(--offScreen);
+}
+[type=radio] + label,
+[type=checkbox] + label {
+    cursor: pointer;
+}
+
+.field:is(.radio,.checkbox,.true-false) label {
+    top: unset;
+    left: unset;
+    padding: 0 0 0 var(--chip);
+    display: inline-flex;
+    border: 1px solid var(--base-200);
+    font-weight: var(--fw-b);
+    font-size: var(--txt-medium);
+}
+    [type=radio] + label:hover,
+    [type=radio]:focus + label,
+    [type=checkbox] + label:hover,
+    [type=checkbox]:focus + label {
+        color: var(--action-0);
+    }
+
+    [type=radio] + label::before,
+    [type=radio] + label::after,
+    [type=checkbox] + label::before,
+    [type=checkbox] + label::after {
+        content: '';
+        position: absolute;
+        z-index: var(--z-2);
+    }
+            [type=checkbox] + label::before,
+            [type=radio] + label::before {
+                z-index: var(--z-1);
+            }
+        [type=checkbox] + label::after {
+            left: .666em;
+            top: .125em;
+            transform: rotate(45deg);
+            width: .25em;
+            height: .75em;
+            border: solid var(--action-contrast);
+            border-width: 0 2px 2px 0;
+            display: none;
+        }
+        [type=checkbox] + label::before,
+        [type=radio] + label::before {
+            display: block;
+            top: .3em;
+            left: .3em;
+            width: .75rem;
+            height: .75rem;
+            border: 2px solid var(--contrast-200);
+            background-color: transparent;
+            border-radius: var(--radius);
+        }
+            [type=radio] + label::before {
+                border-radius: 50%;
+            }
+
+        [type=checkbox]:checked + label::before {
+            background-color: var(--action-0);
+            border-color: var(--base-50);
+        }
+        [type=checkbox]:checked + label::after {
+            display: block;
+        }
+
+        [type=radio]:checked + label::before {
+            background-color: var(--action-0);
+            box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw-inset);
+        }
+/** Button checkboxes and radios **/
+input.btn + label::before,
+input.btn + label::after {
+    display: none;
+}
+
+
+
+textarea,
+input:is([type=date], [type=number], [type=text], [type=url],
+         [type=email], [type=tel], [type=password], [type=search],
+         [type=datetime-local], [type=time]) {
+    font-family: var(--body);
+    font-size: var(--txt-medium);
+    color: var(--contrast);
+    padding: var(--p-y) var(--p-x);
+    border-radius: var(--radius);
+    background-color: var(--base);
+    outline: 0;
+    border: 1px solid var(--base-100);
+    border-bottom: 2px solid var(--contrast-200);
+    width: 100%;
+    max-width: 100%;
+    margin: 0 4px;
+}
+
+textarea:focus,
+input:is([type=date], [type=number], [type=text], [type=url],
+         [type=email], [type=tel], [type=password], [type=search],
+         [type=datetime-local], [type=time]):focus {
+    outline: var(--action-50);
+    background-color: var(--base-100);
+    color: var(--contrast);
+}
+textarea::placeholder,
+input::placeholder {
+    font-family: var(--body);
+    color: var(--base-200);
+}
+
+.field > label {
+    position: relative;
+    z-index: var(--z-1);
+    display:inline-block;
+    top: .75em;
+    left: 1em;
+    padding: 0 .5em;
+    background-color:var(--base);
+    font-size:var(--txt-small);
+    font-weight: var(--fw-b-light);
+    text-transform:uppercase;
+    border: 1px solid transparent;
+}
+    .field.selector > label {
+        top: 2.25em;
+    }
+    .field.selector .filter-toggle {
+        width: var(--chipchip);
+        min-height: var(--chipchip);
+        padding: 0;
+    }
+.field:not(.radio):not(.checkbox):not(.true-false):not(.taglist):focus-within > label {
+    background-color:var(--action-0);
+    color: var(--action-contrast);
+    border-radius: 4px;
+}
+
+.field.taglist, .field.taglist .field {
+    border: none;
+}
+
+.field li.btn {
+    min-height: var(--chip);
+}
+/******************************************************************
+SELECT
+******************************************************************/
+select {
+    background: var(--base);
+    border: 2px solid var(--base-100);
+    border-radius: var(--radius);
+    color: var(--contrast);
+    cursor: pointer;
+    font-family: var(--body);
+    font-size: var(--txt-small);
+    padding: var(--sp1);
+    width: 100%;
+}
+
+select:disabled {
+    background-color: var(--base-50);
+    border-color: var(--base-100);
+    color: var(--base-200);
+    cursor: not-allowed;
+}
+
+select option {
+    background: var(--base);
+    color: var(--contrast);
+    padding: var(--sp1);
+}
+
+select option:hover,
+select option:focus,
+select option:active,
+select option:checked {
+    background: var(--action-0);
+    color: var(--base);
+    box-shadow: 0 0 0 100px var(--action-0) inset;
+}
+
+select option:checked {
+    background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);
+    color: var(--base);
+}
+
+select:hover {
+    border-color: var(--action-0);
+}
+
+select:focus {
+    border-color: var(--action-0);
+}
+
+/******************************************************************
+SEARCH & SPECIAL INPUTS
+******************************************************************/
+input[type=search]:focus + .clear-search {
+    opacity: 1;
+    cursor: pointer;
+}
+
+.search-container .clear-search {
+    opacity: 0;
+    cursor: default;
+}
+
+.search-container .icon.search {
+    padding: 4px 8px;
+    color: var(--contrast-200);
+    --w: 3rem;
+}
+
+input[type="search"]::-moz-search-clear-button,
+input[type="search"]::-ms-clear,
+input[type="search"]::-ms-reveal,
+input[type="search"]::search-cancel-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    display: none;
+    visibility: hidden;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+    -webkit-appearance:none;
+}
+
+input[type=url] {
+    background: var(--icon);
+    background-position: .5em;
+    background-size: 1em;
+    background-repeat: no-repeat;
+    padding-left: 2em;
+}
+/**************************************************
+TABS
+**************************************************/
+.tab-content[hidden] {
+    display: block!important;
+    transform: scaleY(0);
+    max-height: 0;
+    overflow: hidden;
+}
+
+    .tab-content[hidden]:focus-within {
+        transform: scaleY(1);
+        max-height: max-content;
+    }
+/**************************************************
+CARD
+**************************************************/
+.item-grid.stats {
+    margin: 1rem 0;
+}
+.card {
+    background-color: var(--base-100);
+    border-radius: var(--radius);
+    box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw);
+    aspect-ratio: 3/2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+    .card h4 {
+        margin: 0;
+        text-transform: uppercase;
+    }
+.stat-number {
+    font-family: var(--heading);
+    font-weight: var(--fw-h-bold);
+    color: var(--action-0);
+    font-size: var(--txt-xx-large);
+}
+/**************************************************
+PROGRESS
+**************************************************/
+.progress {
+    width: 100%;
+}
+.progress .bar {
+    height: 6px;
+    display: block;
+    border-radius: 6px;
+    overflow: hidden;
+    background: var(--base-200);
+    position: relative;
+}
+
+.progress .fill {
+    height: 100%;
+    background: var(--action-0);
+    border-radius: 6px;
+    width: 0;
+    transition: width .3s ease;
+}
+    .completed .fill {
+        background: var(--action-200);
+    }
+
+.progress .details {
+    margin-top: 5px;
+    font-size: var(--txt-x-small);
+    color: var(--contrast);
+    text-align: center;
+    padding: .25rem 0;
+}
+
+.progress .details:empty {
+    display: none;
+}
+.queued .fill::after,
+.pending .fill::after,
+.processing .fill::after,
+.uploading .fill::after {
+    --delay: 0s;
+    content: '';
     position: absolute;
     top: 0;
-    left: 0;
-    --w: 1.5rem
+    left: -50%;
+    width: 30%;
+    height: 100%;
+    background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, .225) 50%,
+            rgba(255, 255, 255, 0) 100%
+    );
+    animation: shimmer 2.5s infinite linear var(--delay);
 }
+/**************************************************************
+DETAILS
+**************************************************************/
+details {
+    padding: .25rem 0;
+    border-top: 1px solid var(--base-200);
+    border-bottom: 1px solid var(--base-200);
+}
+    details[open] {
+        background-color: var(--base-50);
+    }
 
-.tt-toggle {
-    cursor: pointer;
-    display: flex;
+    details summary {
+        list-style: none;
+        text-transform: uppercase;
+        cursor: pointer;
+        border: 0;
+        position: relative;
+        padding: .5rem 2.5rem .5rem .5rem;
+        gap: .5rem;
+    }
+        details summary:hover {
+            background-color: var(--base-100);
+            border-color: var(--base-100);
+            color: var(--contrast);
+        }
+        details[open] > summary {
+            background-color: var(--base-50);
+        }
+        details summary::after {
+            content: '';
+            position: absolute;
+            right: .5rem;
+            top: .5rem;
+            background-color: var(--contrast-100);
+            -webkit-mask-repeat: no-repeat;
+            -webkit-mask-size: contain;
+            -webkit-mask-image: var(--icon);
+            mask-image: var(--icon);
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            width: 1.25rem;
+            height: 1.25rem;
+            margin-left: auto;
+            transition: var(--trans-color), var(--trans-transform);
+        }
+            details summary:hover::after {
+                background-color: var(--action-0);
+            }
+            details[open]:not(.all-filters) > summary::after {
+                background-color: var(--contrast);
+                transform: rotate(-540deg);
+                transition: background-color var(--trans-base);
+                transition-property: background-color, transform;
+            }
+    details::details-content {
+        opacity: 0;
+        block-size: 0;
+        overflow-y: clip;
+        transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
+    }
+
+    details[open]::details-content {
+        opacity: 1;
+        block-size: auto;
+    }
+
+    @media (prefers-reduced-motion: no-preference){
+        details {
+            interpolate-size: allow-keywords;
+        }
+    }
+
+/********************************************************
+CODE
+********************************************************/
+
+code {
+    width: 100%;
+    margin: .5rem;
+    padding: .5rem;
+    user-select: all;
+    text-align: center;
+    border-radius: 4px;
+    background-color: var(--base-200);
+}
+/********************************************************
+OVERLAYS
+********************************************************/
+dialog[open],
+aside.expanded {
+    background-color: var(--base);
+    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+    z-index: var(--z-5);
+}
+dialog::backdrop {
+    backdrop-filter: blur(5px);
+    background-color: rgba(var(--base-rgb),var(--op-4));
+}
+dialog[open],
+aside.main {
+    border-radius: var(--radius-outer);
+    overflow: hidden;
+}
+/** DIALOG **/
+dialog[open] {
+    z-index: var(--z-10);
+    --padding: 0;
+    top: 5vh;
+    width: min(500px, 95vw);
+    height: fit-content;
+    max-height: 90vh;
+    padding: var(--padding);
+    background-color: var(--base-50);
+    color: var(--contrast);
+    border: 1px solid var(--base-200);
+}
+    dialog:is(.create,.edit,.bulkEdit)[open] {
+        width: 98vw;
+        max-height: 98vh;
+        top: 1vh;
+    }
+    dialog > .wrap {
+        max-height: var(--maxHeight);
+        overflow: hidden auto;
+        margin: 0 0 0 1.5rem;
+        padding-right: 1.5rem;
+        padding-bottom: var(--btn);
+        width: calc(100% - 1.5rem);
+    }
+    dialog label {
+        font-weight:  normal;
+    }
+    dialog h2,
+    dialog h3 {
+        margin: 0 0 .5rem 0;
+        font-size: var(--txt-large);
+    }
+
+    dialog:has(.m-actions) {
+        padding-bottom: var(--btn);
+    }
+
+    .m-actions {
+        --w: 1.15em;
+        --justify: flex-end;
+        --wrap: nowrap;
+        --gap: 0;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        height: var(--btn);
+        width: 100%;
+        z-index: var(--z-6);
+        background-color: var(--action-100);
+        box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
+    }
+    .m-actions button {
+        --wrap: nowrap;
+        box-shadow: none;
+        width: 100%;
+        background-color: var(--action-0);
+        color: var(--action-contrast);
+        --gap: .75rem;
+        font-size: var(--txt-x-small);
+        border-radius: 0;
+        height: var(--chipchip);
+    }
+        .m-actions button:hover,
+        .m-actions button:focus {
+            background-color: var(--base);
+            color: var(--contrast);
+        }
+        .m-actions button:first-of-type {
+            border-bottom-left-radius: 1rem;
+        }
+        .m-actions button:last-of-type {
+            border-bottom-right-radius: 1rem;
+        }
+    dialog ul {
+        list-style: none;
+    }
+    dialog .search-container {
+        padding-top: 1rem;
+        width: 100%;
+        gap: .5rem;
+    }
+
+.restore-uploads .item-grid.group .field.group,
+.restore-uploads .upload-group .selection-actions {
+    display: none;
+}
+.upload-group .item-grid.group {
+    grid-template-columns: repeat(2, 1fr);
+}
+.restore-uploads .item-grid.group {
+    grid-template-columns: repeat(3, 1fr);
+}
+/*** POPUPS: notifications, cart, queue ***/
+aside.main.main {
+    --wrap: nowrap;
+    --align: stretch;
+    --dir: column;
+    position: fixed;
+    top: var(--btnbtn);
+    bottom: var(--btn_);
+    width: min(500px, calc(100vw - 2rem));
+    padding: 0 0 var(--btn);
+}
+    aside.main.left {
+        border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
+        left: var(--offScreen);
+        transition: left var(--trans-base);
+    }
+        aside.main.left.expanded {
+            left: 0;
+        }
+    aside.main.right {
+        border-radius: var(--radius-outer) 0 0 var(--radius-outer);
+        right: var(--offScreen);
+        transition: right var(--trans-base);
+    }
+        aside.main.right.expanded {
+            right: 0;
+        }
+    aside.main nav.tabs {
+        --gap: 0;
+        flex-shrink: 0;
+    }
+    aside.main > .wrap {
+        max-height: 100%;
+        overflow: hidden auto;
+    }
+        aside.main header {
+            --w: 2em;
+            background-color: var(--action-0);
+            color: var(--action-contrast);
+            padding: 1rem;
+        }
+        .tab-content header {
+            width: calc(100% + 2rem);
+            left: -1rem;
+            top: -1rem;
+            position: relative;
+        }
+            .main header .icon {
+                margin-right: 1em;
+            }
+            .main h3 {
+                font-size: var(--txt-large);
+                margin: .5rem 0;
+            }
+        aside.main nav.share {
+            --dir: row;
+            --align: center;
+            margin: 0;
+            border-bottom: 1px solid var(--base-200);
+        }
+            nav.share ul,
+            nav.share li,
+            nav.share a {
+                height: var(--chipchip);
+            }
+            nav.share a:hover {
+                background-color: var(--action-0);
+                color: var(--action-contrast);
+            }
+        aside.main h4,
+        aside.main .hint {
+            text-align: center;
+        }
+    aside.main .tab-content {
+        flex-shrink: 0;
+    }
+    aside.main .tab-content.active {
+        flex: 1;
+        overflow: hidden auto;
+        padding: 1rem;
+    }
+    .main section {
+        padding: 1rem;
+    }
+    .main section + section {
+        border-top: 1px solid var(--base-200);
+    }
+
+.qtoggle .count,
+.indicator {
+    position: absolute;
+    top: -.5em;
+    right: -.5em;
+    width: .75em;
+    height: .75em;
     border-radius: 50%;
-    background-color: transparent;
+}
+.qtoggle .indicator {
+    top: 0;
+    right: 0;
+}
+    .qtoggle .count {
+        right:unset;
+        left: .25rem;
+        top: .25rem;
+        font-size: var(--txt-small);
+    }
+    #queue.synced + .qtoggle .indicator {
+        background-color: var(--success);
+    }
+
+    #queue.pending + .qtoggle .indicator {
+        background-color: var(--warning);
+        animation: pulse 2s infinite;
+    }
+
+    .refresh.fetching .icon,
+    #queue.pending:not(.expanded) + .qtoggle .icon {
+        background-color: var(--action-0);
+        animation: spin 1s var(--trans-fn) infinite;
+    }
+.main.expanded + .qtoggle {
+    width: calc(min(500px, calc(100vw - 2rem)) - var(--btn));
 }
 
-.tt-toggle:hover,
-.tt-toggle:focus {
+.main-actions .buttons:has(.expanded) {
+    width: calc(min(500px, calc(100vw - 2rem)));
+}
+.main.expanded + .qtoggle {
+    left: var(--btn);
+    border-bottom-right-radius: var(--radius-outer);
+}
+.main-actions .buttons:has(.expanded) {
+    right: 0;
+}
+.main-actions button.expanded {
+    border-bottom-left-radius: var(--radius-outer);
+    width: 100%;
+}
+.buttons:has(.expanded) > button:not(.expanded) {
+    display: none;
+}
+
+.main nav.filters {
+    width: 100%;
+    height: var(--chipchip);
+    --justify: flex-start;
+    --align: flex-end;
+}
+.main nav.filters li {
+    overflow: visible;
+}
+.main .btn + label {
+    min-height: var(--chip);
+    min-width: var(--chip);
+    overflow: visible;
+}
+.btn + label .indicator:not(:empty) {
+    font-size: var(--txt-small);
+    background-color: var(--base);
+    border: 1px solid var(--contrast);
+    width: 1.75em;
+    height: 1.75em;
+    padding: .3em;
+}
+
+.main > .header {
+    border-bottom: 1px solid var(--base-200);
+    padding: 1rem 0;
+    flex-shrink: 0;
+}
+.main .item-grid {
+    flex: 1;
+    overflow: hidden auto;
+    overflow-anchor: none;
+    padding: .5rem 2rem;
+    --gap: .5rem;
+}
+.queue-actions {
+    flex-shrink: 0;
+    border-top: 1px solid var(--base-200);
+}
+.queue-actions button {
+    width: 100%;
+}
+
+.main .item {
+    background-color: var(--base-50);
+    padding: 15px;
+    border-radius: var(--radius);
+    box-shadow: var(--shdw-none);
+    font-size: var(--txt-x-small);
+}
+.main .item .header {
+    position: relative;
+    padding: .25rem 0;
+}
+.main .item .actions {
+    width: 100%;
+}
+.main .item button {
+    min-height: var(--chip);
+    font-size: var(--txt-x-small);
+    --w: var(--txt-x-small);
+}
+.main .item .time {
+    padding: .5rem 0;
+    font-size: var(--txt-small);
+    border: 1px solid var(--base-200);
+    border-width: 1px 0;
+    margin: .25rem 0;
+}
+.main .item .progress .details {
+    text-align: right;
+    font-size: var(--txt-small);
+    width: 100%;
+}
+/*** MAIN ACTIONS ***/
+.main-actions .buttons {
+    transition: width var(--trans-base), right var(--trans-base);
+    right: .5rem;
+    width: var(--btn);
+    margin: 0;
+}
+.attn {
+    animation: pulse-color 5s infinite;
+    animation-delay: 1s;
+}
+.attn.expanded {
+    animation: none;
+}
+
+/********************************************************
+CALLOUTS
+********************************************************/
+.callalt.callalt,
+.callout.callout {
+    padding: 2rem;
+    margin: 0;
+    max-width: none;
+    grid-column: full;
+}
+
+@media (min-width: 768px){
+    .callout.callout {
+        padding: 2rem 20vw;
+    }
+}
+
+.callout.callout {
     background-color: var(--action-0);
     color: var(--action-contrast);
 }
 
-.tt-toggle:hover + [role=tooltip],
-.tt-toggle:focus + [role=tooltip] {
-    visibility: visible;
+.callalt.callalt {
+    background-color: var(--secondary-0);
+    color: var(--secondary-contrast);
 }
 
-/************************************************************
-SELECTOR
-************************************************************/
-dialog[open]#jvb-selector {
-    height: 70vh;
-    top: 15vh;
+.callalt :is(h1, h2, h3, h4, h5, h6),
+.callout :is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--body);
+    font-weight: var(--fw-b-bold);
+    margin: 1rem 0 0;
+    width: 100%;
+}
+
+.callout a {
+    background-color: var(--action-contrast);
+    padding: 0 .125rem;
+    border-radius: 4px;
+}
+/********************************************************
+WP BLOCKS
+********************************************************/
+/** COVER **/
+.cover {
+    position: relative;
+    overflow: hidden;
+    min-height: 60vh;
+    padding: var(--btn);
+}
+    .cover::before {
+        content: '';
+        z-index: var(--coverIndex);
+        background-color: var(--action-0);
+        mix-blend-mode: var(--coverBlend);
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+
+.cover::before,
+.cover > video,
+.cover > img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+
+.cover .content {
+    z-index: 5;
+    position: relative;
+    overflow: hidden auto;
+    width: max-content;
+    height: max-content;
+    max-width:100%;
+    max-height: 100%;
+}
+
+.cover > img {
+    z-index: 1;
+    opacity: .5;
+    mix-blend-mode: luminosity;
+    object-fit: cover;
+}
+
+@media (min-width: 768px) {
+    .cover > img {
+        opacity: .33;
+    }
+}
+/** BLOCKQUOTE **/
+blockquote {
+    --background: var(--base-100);
+    --border: var(--action-0);
+    line-height: 1.2;
+    padding: var(--btn);
+    border-radius: 4rem;
+    background-color: var(--background);
+}
+
+blockquote .content {
+    margin: 12px auto;
+    max-width: min(680px, 80vw);
+    position: relative;
+    font-family: var(--heading);
+    font-weight: var(--fw-h-bold);
+    padding: 3rem 2.5rem;
+    border-radius: var(--radius-outer);
+    border: 2px solid var(--border);
+}
+
+blockquote .content::before,
+blockquote .content::after {
+    position: absolute;
+    content: '';
+    left: 50px;
+}
+
+blockquote .content::before {
+    width: 80px;
+    border: 6px solid var(--background);
+    bottom: -3px;
+    z-index: 2;
+}
+
+blockquote .content::after {
+    border: 2px solid var(--border);
+    border-radius: 0 100% 0 0;
+    width: 60px;
+    height: 60px;
+    bottom: -60px;
+    border-bottom: 0;
+    border-left: 0;
+    z-index: 3;
+}
+
+blockquote cite {
+    padding: 15px 0 0 12px;
+    margin: 0 0 0 150px;
+    z-index: 1;
+}
+
+blockquote.pull {
+    background-color: unset;
+    border-radius: 0;
+    margin: 4rem auto;
+    padding: 3rem;
+    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down), rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);;
+}
+
+blockquote.pull cite {
+    margin: 0;
+}
+/** QUERY **/
+.loop .item-grid {
+    grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 768px) {
+    .loop .item-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+/** TODO: LIST OVERRIDES **/
+/*********************************************************
+DIRECTORY
+*********************************************************/
+.directory-list > ul {
+    max-width: none;
+}
+.directory-list .image {
     display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
 }
+    .directory-list img {
+        width: 70px;
+    }
+.directory-list h3 {
+    margin: 0;
+    text-align: center;
+    font-weight: var(--fw-h-bold);
+    position: sticky;
+    font-size: var(--txt-enormous);
+    width: 100%;
+    top: var(--btn);
+    left: 0;
+    color: var(--base);
+    text-shadow: var(--base-200) 1px 1px 0;
+    user-select: none;
+}
+    .directory-list >ul > li {
+        padding: 2rem;
+        align-items: flex-start;
+    }
+    .directory-list >ul > li:nth-of-type(even) {
+        background-color: var(--base-100);
+    }
 
-#jvb-selector > .wrap {
-    flex: 1;
-}
-
-/******************************************************************
-STATUS INDICATORS
-******************************************************************/
-.status,
-.item .status,
-.status-badge {
-    border-radius: var(--radius);
-    font-size: 0.875rem;
-    font-weight: 500;
-    text-transform: capitalize;
-}
-
-[data-status="pending"],
-.status.pending,
-.status-badge.pending,
-#queue .item .status.pending {
-    background: var(--base-100);
-    color: var(--contrast-200);
-}
-
-[data-status="processing"],
-.status.processing,
-.status-badge.processing,
-#queue .item .status.processing {
-    background: var(--base-200);
-    color: var(--contrast-100);
-    animation: pulse-color 2s infinite;
-}
-
-[data-status="completed"],
-.status.completed,
-.status-badge.consulted,
-.status-badge.treated,
-#queue .item .status.completed {
-    background: var(--success);
-    color: var(--successText);
-}
-
-[data-status="failed"],
-.status.failed,
-.status-badge.error,
-#queue .item .status.failed {
-    background: var(--error);
-    color: var(--errorText);
-}
+    /** The letter's list **/
+    .directory-list ul ul {
+        width: 100%;
+    }
+    .directory-list ul ul li {
+        padding: .35rem .5rem;
+    }
+    .directory-list ul ul li:nth-of-type(even) {
+        background-color: var(--base-100);
+    }
+    .directory-list ul li:nth-of-type(even) ul li:nth-of-type(even) {
+        background-color: var(--base-50);
+    }
+    @media (min-width: 768px) {
+        .directory-list h3 {
+            width: 20vw;
+        }
+        .directory-list ul ul {
+            min-height: var(--txt-enormous);
+        }
+        .directory-list >ul > li {
+            padding: 2rem 10vw;
+        }
+    }
 
 /******************************************************************
 LOADING
@@ -2367,1692 +2791,7 @@
     animation: spin 1s var(--trans-fn) infinite;
 }
 
-/*****************************************************************************
-MENU
-*****************************************************************************/
-.toggle-details {
-    gap: 2px;
-}
-
-body.menu_item #top {
-    z-index: var(--z-4);
-    position: relative;
-}
-
-section .toggle-details {
-    position: absolute;
-    right: 0;
-    top: 5rem;
-}
-
-[data-toggle=all] {
-    position: fixed;
-    bottom: calc(var(--btn_) + var(--btn) + .5rem);
-    right: 0;
-    z-index: var(--z-4);
-    background-color: var(--action-0);
-    color: var(--action-contrast);
-}
-
-[data-toggle] {
-    z-index: var(--z-1);
-}
-
-body:has(#queue[hidden]) [data-toggle=all] {
-    left: 1rem;
-}
-
-dialog:not([open]).col,
-dialog:not([open]).row {
-    display: none;
-}
-
-@media (min-width:768px) {
-    section .toggle-details {
-        right: -10%;
-    }
-}
-
-/********************************************
-TYPE TEXT
-********************************************/
-.typeText::after {
-    content: '|';
-    display: inline-block;
-    margin-left: 0;
-    animation: blink .75s step-end infinite;
-}
-
-@keyframes blink {
-    from, to { opacity: 1; }
-    50% { opacity: 0; }
-}
-
-/**************************************************
-POPUPS: toast, cart, queue
-**************************************************/
-aside.main {
-    --wrap: nowrap;
-    --align: stretch;
-    position: fixed;
-    top: var(--btnbtn);
-    bottom: var(--btn_);
-    width: min(500px, calc(100vw - 2rem));
-    background-color: var(--base);
-    z-index: var(--z-5);
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-    padding: 1rem 1rem var(--btn);
-    overflow: hidden auto;
-}
-aside.main.referral {
-    padding-top: 0;
-}
-aside.main.referral nav.tabs {
-    padding: 1rem 0;
-    background-color:var(--base);
-    height: max-content;
-    min-height: var(--btn);
-}
-
-.qtoggle {
-    z-index: var(--z-6);
-    position: fixed;
-    bottom: var(--btn_);
-    width: var(--btn);
-    height: var(--btn);
-    background-color: rgba(var(--base-rgb),var(--op-4));
-    color: var(--contrast);
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-    transition: var(--trans-size), var(--trans-color);
-}
-
-.qtoggle:hover,
-.qtoggle:focus {
-    background-color: rgba(var(--action-rgb),var(--op-6));
-    color: var(--action-contrast);
-}
-
-.qtoggle:disabled,
-.qtoggle:disabled:hover,
-.qtoggle:disabled:focus {
-    opacity: .5;
-    background-color: rgba(var(--base-rgb),var(--op-3));
-    color: var(--contrast);
-}
-
-/******************
-CART
-******************/
-.toggle-cart {
-    right: 0;
-    border-radius: 4px 4px 4px var(--radius-outer);
-}
-
-body:has(#cart.expanded) .toggle-cart .icon {
-    display: none;
-}
-
-aside#cart {
-    padding-bottom: 6rem;
-}
-
-#cart form {
-    max-height: 100%;
-    overflow: hidden auto;
-}
-
-#cart nav.tabs {
-    z-index: var(--z-6);
-    top: 0;
-}
-
-#cart table {
-    height: auto;
-}
-
-#cart th {
-    padding: 0 1.5rem;
-}
-
-#cart table th:first-of-type {
-    width: 100%;
-}
-
-#cart nav.tabs {
-    position: sticky;
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-}
-
-#cart button[data-tab] {
-    flex: 1;
-    border-radius: 0;
-}
-
-#cart form > *:not(.tabs) {
-    max-width: 90%;
-    margin: 0 auto;
-}
-
-#cart form .empty p {
-    margin: .5rem 0!important;
-}
-
-#cart .cart-total.cart-total {
-    --gap: 0 1rem;
-    padding-right: 1rem;
-    position: absolute;
-    bottom: var(--btn);
-    width: 100%;
-    max-width: 100%;
-    background-color: rgba(var(--base-rgb),var(--op-6));
-    z-index: var(--z-6);
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
-}
-
-.cart-total p {
-    --gap: 2rem;
-    max-width: 100%;
-    margin: 0;
-}
-
-.cart-total p span {
-    width: 6rem;
-    display: inline-block;
-    text-align: right;
-}
-
-.cart-total p + p {
-    font-weight: bold;
-}
-
-.cart-items .total {
-    font-weight: bold;
-}
-
-#cart .restored {
-    background-color: rgba(var(--action-rgb), var(--op-3));
-    border-radius: var(--radius-outer);
-    padding: 1rem;
-}
-
-.restored h3 {
-    font-size: var(--txt-medium);
-    margin: 0;
-}
-
-.restored p {
-    margin: 0;
-}
-
-.restored .row {
-    --gap: 0;
-    --wrap:nowrap;
-    --w: 1em;
-}
-
-/******************
-TOAST
-******************/
-.toasts {
-    position: fixed;
-    top: 4rem;
-    right: -350px;
-    z-index: 1000;
-    width: 350px;
-}
-
-.toast {
-    background-color: rgba(var(--base-rgb),var(--op-6));
-    border-left: 4px solid var(--action-0);
-    padding: 1rem;
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-    left: 0;
-    position: relative;
-    opacity: 0;
-    transition: left .3s, opacity .3s;
-}
-
-.toast.success {
-    border-left-color: var(--success);
-}
-
-.toast.error {
-    border-left-color: var(--error);
-}
-
-.toast.info {
-    border-left-color: var(--warning);
-}
-
-.toast.show {
-    left: calc(-350px - 1rem);
-    opacity: 1;
-}
-
-.toast.hiding {
-    left: 0;
-    opacity: 0;
-}
-
-.toast-content p {
-    margin: 0;
-}
-
-.close-toast {
-    background: none;
-    border: none;
-    font-size: 1.25rem;
-    cursor: pointer;
-    opacity: .5;
-    transition: opacity .2s;
-    color: inherit;
-}
-
-.close-toast:hover {
-    opacity: 1;
-}
-
-/******************
-QUEUE
-******************/
-#queue#queue {
-    width: min(500px, calc(100vw - 2rem));
-}
-
-#queue > * {
-    max-width: 100%;
-}
-
-.qtoggle {
-    left: 0;
-    border-radius: 4px 4px var(--radius-outer) 4px;
-}
-
-.qtoggle.expanded {
-    left: var(--btn);
-    width: min(calc(500px - var(--btn)), calc(100vw - 2rem - var(--btn)));
-}
-
-.qtoggle.saving .icon {
-    background-color: var(--action-0);
-    animation: spin .87s var(--trans-fn) infinite;
-}
-
-#queue .status-actions {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: var(--z-2);
-}
-
-#queue .status-actions .popup {
-    position: absolute;
-    z-index: -1;
-    width: max-content;
-    max-width: 300px;
-    background-color: var(--action-50);
-    color: var(--action-contrast);
-    border-radius: var(--radius);
-    padding: .25em .75em;
-    top: 1rem;
-    left: -100vw;
-    transition: left var(--trans-base);
-}
-
-aside#queue .popup::before{
-    content: '';
-    width: 10px;
-    height: 10px;
-    transform: rotate(-45deg);
-    background-color: var(--action-50);
-    z-index: -1;
-    left: -5px;
-    position: absolute;
-    top: calc(50% - 5px);
-}
-
-.expanded#queue .status-actions .popup.showing {
-    left: calc(100% + 1em);
-}
-
-#queue .status-actions .popup.showing {
-    left: calc(200vw + var(--btn_));
-    max-width: 75vw;
-}
-
-/** BADGES **/
-.refresh .countdown,
-#queue .item .status,
-.filter .count,
-.qtoggle .count,
-.qtoggle .indicator {
-    z-index: var(--z-3);
-    --offset: 0;
-    position: absolute;
-    top: var(--offset);
-    background-color: rgba(var(--base-rgb),var(--op-3));
-}
-
-.expanded + .qtoggle .indicator,
-.expanded + .qtoggle .count {
-    --offset: .25rem;
-}
-
-/* Status indicator */
-.qtoggle .indicator {
-    right: var(--offset);
-    width: .75rem;
-    height: .75rem;
-    border-radius: 50%;
-}
-
-aside#queue.synced + .qtoggle .indicator {
-    background-color: var(--success);
-}
-
-aside#queue.pending + .qtoggle .indicator {
-    background-color: var(--warning);
-    animation: pulse 2s infinite;
-}
-
-.refreshNow.fetching .icon,
-aside#queue.pending:not(.expanded) + .qtoggle .icon {
-    background-color: var(--action-0);
-    animation: spin 1s var(--trans-fn) infinite;
-}
-
-/* Status count badge */
-
-/*.refresh .countdown {*/
-/*    --justify:center;*/
-/*    --align: center;*/
-/*    --offset: 0;*/
-/*    left: .25rem;*/
-/*    margin: 0 3px;*/
-/*    border-radius: 50%;*/
-/*    background-color: var(--base);*/
-/*    width: 1em;*/
-/*    height: 1em;*/
-/*}*/
-.refresh .countdown,
-.qtoggle .count {
-    --align: center;
-    --justify: center;
-    left: var(--offset);
-    min-width: 1.25rem;
-    height: 1.25rem;
-    padding: 0 4px;
-    color: var(--contrast);
-    border-radius: var(--radius);
-    font-size: var(--txt-x-small);
-}
-
-#queue:has(.empty-queue) + .qtoggle .count {
-    display: none;
-}
-
-aside#queue .header {
-    padding: 15px;
-    border-bottom: 1px solid var(--base-200);
-    flex-shrink: 0;
-    --height: max-content;
-    width: 100%;
-}
-
-.qitems {
-    flex: 1;
-    width: 100%;
-    overflow: hidden auto;
-    overflow-anchor: none;
-    padding: .5rem 2rem;
-    --gap: .5rem;
-}
-
-.qitems .item {
-    width: 100%;
-}
-
-.qitems button {
-    --height: max-content;
-}
-
-aside#queue h3 {
-    margin: 0;
-    font-size: 16px;
-    color: var(--contrast);
-}
-
-#queue .filters {
-    padding: 1rem 0 0;
-    width: 100%;
-}
-#queue .filters .btn + label {
-    width: max-content;
-    position: relative;
-    height: var(--chip_);
-    font-size: var(--txt-x-small);
-    font-weight: var(--fw-h-light);
-    box-shadow: var(--shdw-none);
-}
-#queue .filters label .count {
-    width: 1em;
-    height: 1em;
-    position: absolute;
-    top: -8px;
-    right: -4px;
-    background: var(--base-100);
-    border-radius: 50%;
-    z-index: 5;
-}
-#queue .filters label .count:empty {
-    display: none;
-}
-#queue .failed .bar,
-#queue .failed_permanent .bar {
-    background-color: var(--error);
-    opacity: .2;
-}
-#queue span.completed {
-    margin-left: auto;
-}
-
-#queue .filters .filter {
-    background-color: transparent;
-    white-space: nowrap;
-    font-size: var(--txt-x-small);
-}
-
-#queue .filters .filter.active {
-    background: var(--base-200);
-    border-color: transparent;
-}
-
-#queue .filter:hover,
-#queue .filter:focus {
-    background-color: var(--action-0);
-    color: var(--action-contrast);
-}
-
-#queue .progress .row.btw {
-    --justify: flex-end;
-}
-#queue .progress .details {
-    font-size: var(--txt-small);
-}
-
-/* Filter count badge */
-.filter .count {
-    --offset: -8px;
-    right: var(--offset);
-    background: var(--base-200);
-    color: var(--contrast-200);
-    border-radius: 10px;
-    min-width: 18px;
-    height: 18px;
-    font-size: 10px;
-}
-
-.filter .count:empty {
-    display: none;
-}
-
-/* Empty state */
-.empty-queue {
-    height: 100px;
-    color: var(--contrast-200);
-    font-size: var(--txt-x-small);
-    font-style: italic;
-}
-
-.refresh .countdown:not(.counting),
-aside#queue:has(.empty-queue) .refresh .count {
-    display: none;
-}
-
-/* Queue items */
-#queue .item {
-    padding: 15px;
-    background: var(--base-100);
-    border-radius: var(--radius);
-    transition: all .2s ease;
-    box-shadow: var(--shdw-none);
-}
-
-#queue .item:hover {
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-}
-
-#queue .item .header {
-    position: relative;
-    padding: .25rem 0;
-}
-
-#queue .item .type {
-    font-size: var(--txt-x-small);
-}
-
-#queue .item .status {
-    --w: 1.3em;
-    --gap: 0;
-    --justify:center;
-    --align: center;
-    --offset: -1.2rem;
-    aspect-ratio: 1;
-    right: var(--offset);
-    border-radius: 50%;
-    color: var(--contrast-200);
-    background-color: var(--base-50);
-    border: 1px solid var(--base-200);
-    width: 2em;
-    height: 2em;
-}
-
-
-#queue .item .status.completed:hover {
-    color: var(--contrast-200);
-}
-
-#queue .item button {
-    font-size: 16px;
-    padding: 0;
-    line-height: 1;
-    opacity: .5;
-    min-height: 0;
-    transition: opacity .2s;
-}
-
-#queue .item button:hover {
-    opacity: 1;
-}
-
-/* Item details */
-#queue .item .info {
-    margin-top: 8px;
-    font-size: var(--txt-x-small);
-}
-
-#queue .item .info .time {
-    --gap: 7px;
-    font-size: 10px;
-}
-
-/* Item actions */
-#queue .item .actions {
-    --gap: 8px;
-    margin-top: 1rem;
-}
-
-#queue .item .actions button {
-    padding: 6px 12px;
-    font-size: 12px;
-    background: var(--base-200);
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all .2s;
-    color: var(--contrast);
-}
-
-#queue .item .actions .retry {
-    background-color: var(--secondary-200);
-    color: var(--secondary-contrast);
-}
-
-#queue .item .actions button:hover {
-    opacity: .9;
-}
-
-/* Queue actions footer */
-.queue-actions {
-    padding: .5rem 0;
-    border-top: 1px solid var(--base-200);
-    flex-shrink: 0;
-}
-
-.queue-actions button {
-    --height: max-content;
-    padding: .75rem;
-    width: 100%;
-    font-size: var(--txt-x-small);
-}
-
-/* Refresh area */
-.status-actions > .refresh {
-    position: relative;
-    font-size: var(--txt-x-small);
-}
-
-
-.refreshNow {
-    width: var(--btn);
-    height: var(--btn);
-}
-
-.refreshNow:hover {
-    background: var(--base-200);
-    color: var(--contrast-200);
-}
-
-.icon.refresh {
-    --w: 18px;
-}
-
-/**************************************************
-DELAY
-**************************************************/
-.item-grid, #queue {
-    counter-reset: delay-counter;
-}
-
-.item {
-    counter-increment: delay-counter;
-}
-
-.item .progress .fill::after {
-    --delay: calc(counter(delay-counter) * .1s);
-}
-
-/**************************************************
-PROGRESS
-**************************************************/
-.progress .bar {
-    height: 6px;
-    display: block;
-    border-radius: 6px;
-    overflow: hidden;
-    background: var(--base-200);
-    position: relative;
-}
-
-.progress .fill {
-    height: 100%;
-    background: var(--action-0);
-    border-radius: 6px;
-    width: 0;
-    transition: width .3s ease;
-}
-
-.progress .details {
-    margin-top: 5px;
-    font-size: var(--txt-x-small);
-    color: var(--contrast);
-    text-align: center;
-    padding: .25rem 0;
-}
-
-.progress .details:empty {
-    display: none;
-}
-
-.queued .fill::after,
-.pending .fill::after,
-.processing .fill::after,
-.uploading .fill::after {
-    --delay: 0s;
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -50%;
-    width: 30%;
-    height: 100%;
-    background: linear-gradient(
-            90deg,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, .225) 50%,
-            rgba(255, 255, 255, 0) 100%
-    );
-    animation: shimmer 2.5s infinite linear var(--delay);
-}
-
-/**************************************************
-ACTIONS
-**************************************************/
-.additional-actions.additional-actions {
-    padding: 0;
-    background-color: transparent;
-}
-
-.additional-actions .buttons {
-    position: fixed;
-    bottom: var(--btn_);
-    right: 1rem;
-    margin: 0;
-    --gap: 1rem;
-    z-index: var(--z-6);
-    width: fit-content;
-}
-
-.additional-actions .buttons button {
-    height: var(--btn);
-    width: var(--btn);
-    background-color: rgba(var(--base-rgb),var(--op-4));
-    color: var(--contrast);
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-}
-
-.additional-actions .buttons button:hover {
-    background-color: var(--action-0);
-    color: var(--action-contrast);
-}
-
-.additional-actions .buttons button:disabled,
-.additional-actions .buttons button:disabled:hover,
-.additional-actions .buttons button:disabled:focus {
-    opacity: .5;
-    background-color: rgba(var(--base-rgb),var(--op-3));
-    color: var(--contrast);
-}
-
-.additional-actions .buttons button:last-of-type {
-    border-radius: 4px 4px 4px var(--radius-outer);
-}
-
-aside.left {
-    transition: left var(--trans-base);
-    left: var(--offScreen);
-    border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
-}
-
-aside.left.expanded {
-    left: 0;
-}
-
-aside.right {
-    transition: right var(--trans-base);
-    right: var(--offScreen);
-    border-radius: var(--radius-outer) 0 0 var(--radius-outer);
-}
-
-aside.right.expanded {
-    right: 0;
-}
-
-aside.right.expanded button.close {
-    position: sticky;
-    bottom: calc(var(--btn) * -1);
-    left: 0;
-    border-bottom-left-radius: var(--radius-outer);
-    width: var(--btn);
-    height: var(--btn);
-}
-
-.additional-actions .buttons:has(.expanded) button:not(.expanded) {
-    display: none;
-}
-
-.additional-actions .buttons:has(.expanded){
-    right: 0;
-}
-.additional-actions .buttons button {
-    transition: right var(--trans-base), var(--trans-size);
-}
-.additional-actions .buttons .expanded {
-    width: calc(min(500px, calc(100vw - 2rem)));
-    background-color: var(--base);
-}
-
-.additional-actions .buttons button:hover,
-.additional-actions .buttons .expanded:hover {
-    background-color: var(--action-0);
-    color: var(--action-contrast);
-}
-
-[type=submit] {
-    width: 100%;
-    height: var(--btn);
-    background-color: var(--action-0);
-    color: var(--action-contrast);
-    box-shadow: var(--shdw-none);
-    font-weight: bold;
-}
-
-[type=submit]:hover {
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-    border: 2px solid var(--action-0);
-    color: var(--action-0);
-    background-color: var(--action-contrast);
-}
-
-aside nav.tabs {
-    position: sticky;
-    bottom: unset;
-    top: 0;
-    left: 0;
-    right: 0;
-}
-
-aside .tab-content.active {
-    padding: 1rem;
-    min-height: 100%;
-}
-
-aside header h3 {
-    font-size: var(--txt-medium);
-    margin: 1rem 0;
-    text-align: center;
-}
-
-aside header p {
-    margin: .25rem 0;
-    text-align: center;
-}
-
-aside h4 {
-    font-size: var(--txt-x-small);
-    margin: 1rem 0 0 0;
-}
-
-code {
-    width: 100%;
-    margin: .5rem;
-    padding: .5rem;
-    user-select: all;
-    text-align: center;
-    border-radius: 4px;
-    background-color: var(--base-200);
-    border: 1px solid var(--contrast-200);
-}
-
-.restore-form {
-    background-color: rgba(var(--action-rgb), var(--op-3));
-    border: 1px solid var(--action-200);
-    padding: .5rem;
-    border-radius: var(--radius-outer);
-    margin: 1rem 2rem;
-}
-
-.restore-form h3 {
-    text-align: center;
-    margin: 1rem 0 0;
-    font-size: var(--txt-medium);
-}
-
-.restore-form p {
-    margin: .5rem 0;
-}
-
-.fstatus {
-    z-index: var(--z-5);
-    background-color: rgba(var(--base-rgb),var(--op-6));
-    border-radius: 4px;
-    padding: 0 .5rem;
-    position: fixed;
-    top: var(--btnbtn);
-    right: 1rem;
-    --w: 1em;
-    box-shadow:var(--shdw);
-    display:flex;
-    flex-wrap: nowrap;
-    gap: 1rem;
-}
-@media (min-width: 768px) {
-    .fstatus {
-        right:calc(var(--btn_) + 1rem);
-        bottom: 0;
-        top: unset;
-    }
-    body:has(.fixed.bottom) .fstatus {
-        bottom: var(--btn_);
-    }
-}
-
-.fstatus .spinner {
-    display: none;
-}
-
-.fstatus.loading .spinner {
-    display: inline-block;
-}
-
-.fstatus p {
-    margin: 0;
-    padding: .25rem;
-}
-
-/**************************************************
-CALLOUT SECTIONS
-**************************************************/
-.callalt.callalt,
-.callout.callout {
-    padding: 2rem;
-    margin: 0;
-    max-width: none;
-    grid-column: full;
-}
-
-@media (min-width: 768px){
-    .callout.callout {
-        padding: 2rem 20vw;
-    }
-}
-
-.callout.callout {
-    background-color: var(--action-0);
-    color: var(--action-contrast);
-}
-
-.callalt.callalt {
-    background-color: var(--secondary-0);
-    color: var(--secondary-contrast);
-}
-
-.callalt :is(h1, h2, h3, h4, h5, h6),
-.callout :is(h1, h2, h3, h4, h5, h6) {
-    font-family: var(--body);
-    font-weight: var(--fw-b-bold);
-    margin: 1rem 0 0;
-    width: 100%;
-}
-
-.callout a {
-    background-color: var(--action-contrast);
-    padding: 0 .125rem;
-    border-radius: 4px;
-}
-
-.attn {
-    animation: pulse-color 5s infinite;
-    animation-delay: 1s;
-}
-.media-text > div,
-.media-text figure {
-    width: 100%;
-    margin: 0;
-}
-
-@media (min-width:768px ){
-    .media-text {
-        --wrap: nowrap;
-    }
-}
-
-.media-text > div {
-    max-width: var(--content);
-    margin: 0 auto;
-    padding: 2rem;
-}
-
-.timeline.terms ul,
-.timeline.terms {
-    list-style: none;
-    display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: flex-start;
-}
-    .timeline.terms ul {
-        gap: 1rem;
-    }
-
-.timeline.terms > li {
-    width: 100%;
-}
-
-@media (min-width: 768px) {
-    .timeline.terms > li {
-        width: 50%;
-    }
-}
-
-/**********************************
-GALLERY
-**********************************/
-dialog.gallery[open] {
-    position: fixed;
-    inset: 1rem;
-    margin: 0;
-    border: none;
-    width: calc(100% - 2rem);
-    height: calc(100% - 2rem);
-    padding: 0;
-    background: rgba(var(--base-rgb),var(--op-6));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    backdrop-filter: blur(3px);
-    z-index: var(--z-9);
-    max-height: 100vh;
-    max-width: 100vw;
-}
-
-.gallery .controls {
-    order: 3;
-    justify-content: flex-end;
-    --height: 2rem;
-}
-
-.gallery .controls .cancel {
-    order: 3;
-}
-
-dialog.gallery::backdrop {
-    background: rgba(var(--base-rgb), var(--op-4));
-}
-
-dialog.gallery .wrap {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-dialog.gallery .cancel:hover {
-    background: rgba(var(--base-rgb),var(--op-4));
-}
-
-dialog.gallery .content {
-    position: relative;
-    flex: 1 1 auto;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-}
-
-dialog.gallery .content .image {
-    max-width: 90vw;
-    max-height: 85vh;
-    object-fit: contain;
-    transition: transform 0.15s ease-out;
-    touch-action: none;
-}
-
-dialog.gallery .image-left,
-dialog.gallery .image-right {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-}
-
-dialog.gallery details {
-    position: absolute;
-    bottom: 2rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: calc(100% - 2rem);
-    max-width: 600px;
-    background: rgba(0,0,0,0.45);
-    color: #fff;
-    border-radius: 4px;
-    overflow: hidden;
-    z-index: 10;
-}
-
-dialog.gallery details summary {
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    user-select: none;
-}
-
-dialog.gallery details[open] .item-info {
-    padding: 1rem;
-}
-
-dialog.gallery .counter {
-    position: absolute;
-    bottom: 1rem;
-    left: 1rem;
-    background: rgba(var(--base-rgb),var(--op-4));
-    color: var(--contrast);
-    padding: 0.4rem 0.8rem;
-    border-radius: 3px;
-    font-size: 0.85rem;
-    z-index: 10;
-}
-
-dialog.gallery .favourite {
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-    z-index: 10;
-}
-
-dialog.gallery .image {
-    opacity: 0;
-    transition: opacity .2s ease, transform .15s ease-out;
-}
-
-dialog.gallery .image[src] {
-    opacity: 1;
-}
-
-/**************************************************
-REFERRAL SYSTEM
-**************************************************/
-.referral-reward-banner {
-    background: var(--base-100);
-    color: var(--action-0);
-    border: 2px dashed var(--action-0);
-    padding: 1.5rem;
-    border-radius: 8px;
-    text-align: center;
-    margin-bottom: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.referral-reward-banner .icon {
-    --w: 3rem;
-}
-
-.referral-reward-banner h4 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: var(--contrast);
-}
-
-.check-code-btn {
-    width: 100%;
-    margin-top: 0.5rem;
-    background: var(--base-100);
-    color: var(--contrast-100);
-    border: 1px solid var(--contrast-200);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-}
-
-.code-status {
-    padding: 0.75rem;
-    border-radius: 4px;
-    margin-top: 0.5rem;
-    font-size: 0.875rem;
-}
-
-.code-status.loading {
-    background: var(--base-200);
-    color: var(--contrast-200);
-}
-
-.code-status.success {
-    background: var(--successBack);
-    color: var(--successText);
-    border: 1px solid var(--successBack);
-}
-
-.code-status.error {
-    background: var(--errorBack);
-    color: var(--errorText);
-    border: 1px solid var(--errorBack);
-}
-
-.referral-footer {
-    text-align: center;
-    padding: 1rem 0;
-    border-top: 1px solid var(--base-200);
-    margin-top: 1rem;
-}
-
-.referral-footer .text-link {
-    color: var(--contrast-200);
-    text-decoration: none;
-    font-size: 0.875rem;
-}
-
-.referral-footer .text-link:hover {
-    color: var(--action-0);
-    text-decoration: underline;
-}
-
-.share-section {
-    margin-bottom: 1.5rem;
-}
-
-.share-section h4 {
-    margin: 0 0 0.75rem;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--contrast-200);
-}
-
-.copy-section {
-    margin-bottom: 1.5rem;
-}
-
-.copy-section h4 {
-    margin: 0 0 0.5rem;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--contrast-200);
-}
-
-.copy-group {
-    --gap: 0 .5rem;
-    margin-bottom: 0;
-}
-    .copy-group + .hint {
-        margin: .25rem 1rem 1rem;
-    }
-
-.copy-target {
-    flex: 1;
-    padding: 0.75rem;
-    background: var(--base-100);
-    border: 1px solid var(--base-200);
-    border-radius: 4px;
-    font-family: 'Monaco', 'Courier New', monospace;
-    font-size: 0.875rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    user-select: all;
-}
-
-.copy-btn {
-    flex-shrink: 0;
-    width: var(--chipchip);
-    height: var(--chipchip);
-    min-height: 0;
-    padding: 0;
-}
-.copy-btn.success .icon-copy,
-.copy-btn .icon-check-circle {
-    display: none;
-}
-.copy-btn.success .icon-check-circle {
-    display: inline-block;
-}
-
-.copy-btn.success {
-    background: var(--successBack);
-    color: var(--success);
-}
-
-.recent-referrals-section {
-    margin-bottom: 1.5rem;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid var(--contrast-200);
-}
-
-.recent-referrals-section h4 {
-    margin: 0 0 0.75rem;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--contrast-200);
-}
-
-.recent-referrals-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.referral-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem;
-    background: var(--base-100);
-    border-radius: 4px;
-    font-size: 0.875rem;
-}
-
-.referral-info {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.referral-info strong {
-    color: var(--contrast-200);
-}
-
-.referral-date {
-    font-size: 0.75rem;
-}
-
-.no-referrals,
-.loading,
-.message {
-    text-align: center;
-    padding: 1rem;
-    color: var(--contrast-200);
-    font-size: 0.875rem;
-}
-
-.stats-summary {
-    margin-bottom: 1.5rem;
-}
-
-.stat-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem;
-    border-bottom: 1px solid var(--base-200);
-}
-
-.stat-row:last-child {
-    border-bottom: none;
-}
-
-.stat-row.highlight {
-    background: var(--base-100);
-    border-radius: 4px;
-    border: 1px solid var(--base);
-    font-weight: 600;
-}
-
-.stat-label {
-    color: #666;
-    font-size: 0.875rem;
-}
-
-.stat-value {
-    color: #333;
-    font-weight: 600;
-    font-size: 1rem;
-}
-
-.stat-row.highlight .stat-value {
-    color: var(--action-0);
-    font-size: 1.25rem;
-}
-
-.view-dashboard-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    width: 100%;
-    padding: 0.875rem;
-    background: var(--action-0);
-    color: var(--action-contrast);
-    text-decoration: none;
-    border-radius: 8px;
-    font-weight: 600;
-    transition: all 0.2s ease;
-}
-aside button:not(.button, .qtoggle),
-aside a.button{
-    position: relative;
-    top: 0;
-    box-shadow: var(--shdw-none);
-    transition: top var(--trans-base), box-shadow var(--trans-base);
-}
-
-aside button:not(.button, .qtoggle, :disabled):hover,
-aside a.button:hover {
-    top: -4px;
-    box-shadow: rgba(var(--contrast-rgb),var(--op-45)) var(--shdw-down);
-}
-
-.view-dashboard-btn:visited {
-    color: var(--action-contrast);
-}
-.view-dashboard-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
-
-.success-content {
-    padding: 2rem 1rem;
-    text-align: center;
-}
-
-.success-content h3 {
-    color: var(--success);
-    margin-bottom: 1rem;
-}
-
-.success-content p {
-    margin-bottom: 0.75rem;
-    color: var(--base-200);
-}
-
-.success-content .hint {
-    font-size: 0.875rem;
-    color: var(--base-200);
-    font-style: italic;
-}
-
-.code-status.loading::before {
-/*.loading::before {*/
-    content: '';
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    border: 2px solid var(--action-200);
-    border-top: 2px solid var(--action-0);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-right: 0.5rem;
-    vertical-align: middle;
-}
-.share-buttons-grid a {
-    padding: 0;
-    min-height: 0;
-    width: var(--chipchip);
-    height: var(--chipchip);
-}
-.share-buttons-grid a .icon {
-    margin-right: 0;
-}
-@media (max-width: 768px) {
-    .share-buttons-grid {
-        grid-template-columns: repeat(3, 1fr);
-    }
-
-    .referral-item {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.5rem;
-    }
-}
-/***************
-TOGGLE TEXT
-***************/
-.toggle-text input {
-    display: none;
-}
-
-.toggle-text input + label {
-    font-weight: normal;
-    color: var(--contrast)!important;
-    text-transform: none;
-    cursor: pointer;
-    position: relative;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.toggle-text label::before,
-.toggle-text label::after {
-    display: none!important;
-}
-
-.toggle-text label {
-    padding-left: 0!important;
-}
-
-.toggle-text input + label .text {
-    position: relative;
-    margin: 0;
-    --gap: 0;
-    font-weight: bold;
-    width: fit-content;
-    padding: 2px 4px;
-    border: 1px solid var(--action-50);
-    border-radius: 4px;
-    color: var(--action-50)!important;
-}
-
-table .toggle-text input+label .text {
-    color: var(--contrast)!important;
-    border-color: var(--contrast);
-}
-
-.toggle-text:hover .text,
-table .toggle-text:hover .text {
-    background-color: var(--action-50);
-    color: var(--light-0)!important;
-    border-color: var(--action-50);
-}
-
-.toggle-text input + label .off,
-.toggle-text input + label .on {
-    transition: var(--trans-transform), opacity var(--trans-base);
-}
-
-.toggle-text input + label .off {
-    opacity: 1;
-    max-width: 100%;
-    transform: none;
-}
-
-.toggle-text input + label .on {
-    opacity: 0;
-    max-width: 0;
-    transform: translate3d(0, 100%, 0);
-}
-
-.toggle-text input:checked + label .off {
-    opacity: 0;
-    max-width: 0;
-    transform: translate3d(0, -100%, 0);
-}
-
-.toggle-text input:checked + label .on {
-    max-width: 100%;
-    opacity: 1;
-    transform: none;
-}
-
-/******************************************************************
-TAXONOMY SELECTOR
-******************************************************************/
-.items-container {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-}
-
-details.create-term {
-    margin-top: auto;
-    width: 100%;
-}
-#jvb-selector .search-wrapper {
-    margin-top: auto;
-    width:100%;
-}
-.search-wrapper:not(.open) .search {
-    margin-left: auto;
-}
-.search-wrapper + details.create-term {
-    margin-top: 0;
-}
-
-details.create-term .field,
-.create-term[open] summary {
-    margin-bottom: 1rem;
-}
-
-details.create-term .field {
-    max-width: 100%;
-}
-
-#jvb-selector > .wrap {
-    --wrap: nowrap;
-    --justify: flex-start;
-}
-
-#jvb-selector .items-wrap {
-    width: 100%;
-    padding: 1rem 0;
-    border-top: 1px solid var(--base-200);
-}
-
-#jvb-selector .items-container {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr)
-}
-#jvb-selector li {
-    list-style: none;
-}
-#jvb-selector li label {
-    padding-left: 0!important;
-}
-
-/*.auto-wrapper {*/
-/*    position: absolute;*/
-/*    bottom: -105%;*/
-/*    background-color: rgba(var(--base-rgb), var(--op-5));*/
-/*    backdrop-filter: blur(2px);*/
-/*    border-radius: var(--radius);*/
-/*    z-index: 1;*/
-/*}*/
-.autocomplete-dropdown {
-    width: 100%;
-    background-color: var(--base-100);
-    padding: .5rem;
-    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-}
-li.autocomplete {
-    list-style: none;
-    display: inline-flex;
-    margin: 0.25rem;
-    min-height: var(--chip);
-}
-
-.submit-term {
-    gap: 0;
-}
-.submit-term strong {
-    padding-right: 1rem;
-}
-.selected-items {
-    width:100%;
-    padding: .5rem;
-    border-radius: var(--radius);
-    background-color:var(--base);
-    --justify: flex-start;
-    --gap: .5rem;
-    margin-bottom: .5rem;
-}
-
-.selected-items.selected-items:empty {
-    padding:0;
-    background-color:transparent;
-    margin: 0;
-}
-
-.selected-item {
-    padding: .25rem .5rem;
-    margin: .125em;
-    background: var(--base-100);
-    border-radius: .25rem;
-    font-size: var(--txt-medium);
-    border: 1px solid var(--base-200);
-    position: relative;
-}
-.remove-term.remove-term {
-    min-height: 0;
-    height: var(--chip);
-    width: var(--chip);
-    padding: 0;
-    --w: .75em;
-}
-
-.clear-filters {
-    margin-left: auto;
-    border: 1px solid var(--base-200);
-}
-/**************************************************
-ANIMATIONS
-**************************************************/
+/** ANIMATIONS **/
 @keyframes shimmer {
     0% {
         left: -50%;
@@ -4113,17 +2852,3 @@
     }
 }
 
-
-.content-term-list, .content-term-list ul,
-.content-term-list li {
-    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);
-}
\ No newline at end of file

--
Gitblit v1.10.0