/* Default styles for base html types */
/* -------------------------------------------------------------------------- */
html
{
  font-size: 16pt; /* Base unit for rem scaling */
}

body
{
  color: var(--color-text-normal);
  background-color: var(--color-background);
  margin-left: .5rem;
  margin-right: .5rem;
  --border-radius: .5rem;
}

h2
{
  font-size: 1.7rem;
  color: var(--color-text-highlight);
  font-family: tangerine;
  font-weight: bold;
}

h3
{
  color: var(--color-text-highlight);
  margin: .5rem;
  font-size: 1.5rem;
  font-family: tangerine;
  font-weight: bold;
}

.bad
{
	color:red;
}

#content > div
{
  font-family:'almendra', serif;
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "calt" 0;
  background-color: var(--color-background);
  border-radius: var(--border-radius);
  padding: var(--border-radius);
  line-height: 1.4rem;
}

/* General use classes */
/* -------------------------------------------------------------------------- */
.clickable
{
	border: 1px solid var(--color-secondary4);
	cursor: pointer;
}

.clickable:hover
{
	border-color: var(--color-decoration-dark);
}

/* Text Styling */

/* Indented Text */
.main-paragraphs p,
.secondary-paragraphs p
{
  text-indent: 2rem;
}
.c2-text > p:first-of-type,
.main-paragraphs p:first-of-type
{
  padding-top: .5rem;
}

.c2-text > p:first-of-type::first-letter,
.main-paragraphs > p:first-of-type::first-letter
{
  letter-spacing: 0.2rem;
  font-family: lavishlyyours;
  color: var(--color-highlight);
  font-style: italic;
  font-size: 200%;
}

.c3-text p:first-of-type,
.secondary-paragraphs p:first-of-type
{
  padding-top: .5rem;
}

.c3-text > p:first-of-type::first-letter,
.secondary-paragraphs > p:first-of-type::first-letter
{
  letter-spacing: 0.2rem;
  font-family: lavishlyyours;
  color: var(--color-highlight);
  font-style: italic;
  font-size: 150%;
}

/* Link Styling */

a:link {
  color:var(--color-decoration);
}

a:visited {
  color:var(--color-text-highlight);
}

a:hover{
  color:var(--color-highlight);
}

a:active{
  color:var(--color-highlight);
}

/* Styles for the website banner */

#banner{
  color: var(--color-text-highlight);
  margin: 0px;
  font-size: 3rem;
  font-family: tangerine;
  font-weight: bold;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
}

#breadcrumbs{
  font-family: sans-serif;
  font-size: .6rem;
  background-color: var(--color-work-area);
  margin-top:2px;
  margin-bottom:2px;
  margin-left: .3rem;
  padding-bottom: .1rem;
}

#content{
  background-color: var(--color-border);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  padding: var(--border-radius);
  padding-top: 0;
}

/* Header and Content Boxes */
/* -------------------------------------------------------------------------- */

/* Rounded Corners*/
.h2-box,
.h3-box,
.h4-box,
.h5-box,
.c2-box,
.c3-box,
.section-box,
.article-box,
.icon-box
{
  border-radius: var(--border-radius);
}

/* General use classes */
/* -------------------------------------------------------------------------- */
.h2-box
{
  min-height: 35px;
  margin-top: var(--border-radius);
  padding-top: 25px;
  padding-bottom: .3rem;
  padding-left: 35px;
  overflow: visible;
  border: 1px solid var(--color-secondary4);
  background-image: url(/_resources/themes/starlight/images/shooting-stars.png), linear-gradient(var(--color-border), var(--color-background));
  background-repeat: no-repeat;
  clear: both;
}

.h2-box:first-child
{
  margin-top:0;
}

.h2-box p
{
  text-indent: 0;
}

.h2-box-meta
{
  margin-top: .5rem;
}

.h3-box{
  background-image: linear-gradient(178deg, var(--color-background), var(--color-border));
  border: 1px solid var(--color-secondary2);
  padding: .3rem 1rem;
  margin-top: .5rem;
  clear: both;
}

.h3-box h3{
  margin:0;
}

.h3-box p,
.h4-box p{
  font-size: .7rem;
  font-family: alegreya;
  color: var(--color-text-dimmed);
  line-height: 1rem;
  margin-left: 1rem;
  text-indent: 0;
}

.h4-box{
  background-image: linear-gradient(359deg, var(--color-background), var(--color-border));
  border: none;
  padding: .3rem 1rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
  clear: both;
}

.h5-box{
  border: none;
  padding: .2rem .5rem;
  margin-top: .3rem;
  margin-bottom: .3rem;
  clear: both;
}

.h5-box h5{
  color: var(--color-text-highlight);
  margin: 0;
  padding-top: .2rem;
  border-top: 1px solid var(--color-border);
}

.c2-box
{
  margin-top: .5rem;
  padding: .5rem;
  border: 3px solid var(--color-border);
}

.c3-box
{
  margin-top: .5rem;
  padding: .5rem;
  border: 1px solid var(--color-border);
}

.card-container
{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:.5rem;
}

.linked-card
{
	text-decoration:none;
}

.linked-card .card-box:hover
{
	border-color:var(--color-decoration-dark);
}

.card-box
{
  width: 300px;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--border-radius);
}

.clickable-card
{
	border-color: var(--color-secondary4);
	border-width: 1px;
	box-shadow: 1px 1px 6px var(--color-decoration-dark);
}

.clickable-card .icon-box
{
	border-color: var(--color-secondary4);
}

.clickable-card:hover
{
	border-color: var(--color-decoration-dark);
	color: var(--color-decoration);
	box-shadow: none;
}

.card-box.active
{
	background: var(--color-primary2);
}

.card-box.active .icon-box
{
	border-color: var(--color-decoration);
	border-width: 2px;
}

.card-header
{
  display: flex;
  align-items: center;
}

.card-content
{
	display:flex;
	flex-direction:column;
	gap:.5rem;
}

.card-content > div:first-child
{
  margin-top: .5rem;
}

.card-title
{
	flex:1;
	text-align:center;
	margin-left: .5rem;
	font-family: 'courgette';
	font-size: .8rem;
}

.icon-box
{
  height:50px;
  width:50px;
  overflow:hidden;
  border:1px solid;
  border-color: var(--color-border);
	
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;	
}

.icon-box img
{
  display:block;
  width:auto;
  height:100%;
}


/* Styles for the website notices or warnings */

.notice {
  font-size: .8rem;
  font-style: italic;
  line-height: 1rem;
  background-color: var(--color-background);
  border-radius: var(--border-radius);
  border: 2px solid var(--color-decoration);
  margin-left: .6rem;
  margin-right: .6rem;
  padding: .6rem;
  width: auto;
}

.notice > p{
margin: 0;
}

/* Styles for rounded tabs */

.toptab
{
  border-style: solid solid none solid;
  border-width: 2px;
  border-color: transparent;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.toptab:hover
{
  border-color: unset;
}

.dropdown{
  display: inline-block;
  position: relative;
}
.dropdown-content
{
  background-color: var(--color-border);
  position: absolute;
  display: none;
  padding: .6rem;
  z-index: 11;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content,
.dropdown.touch-open .dropdown-content
{
  display: block;
}

.formfield.field {
  margin-top: .25rem;
  margin-bottom: 1rem;
}

.formfield input,
.form-container input
{
  font-family: 'courgette';
  font-size: 1rem;
  color: var(--color-text-highlight);
  border: 1px solid var(--color-decoration-dark);
  border-radius: 4px;
  padding: .25rem;
  box-sizing: border-box;
  background: var(--color-primary2);
}

input[type="text"],
input[type="url"],
select,
textarea
{
    font-family: 'courgette';
    font-size: 1rem;
    color: var(--color-text-highlight);
    border: 1px solid var(--color-decoration-dark);
    border-radius: 4px;
    padding: .25rem;
    box-sizing: border-box;
    background: var(--color-primary2);

}

textarea
{
  width: 100%;
  font-family:'almendra', serif;
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "calt" 0;
}
.formfield label {
	font-family: 'tangerine';
	font-size: 2rem;
}

.btn-toolbar {
	display: flex;
	justify-content: center;
	align-items:center;
	gap:2rem;
}

button,
input[type="submit"],
.button,
.button-cancel
{
	color: var(--color-text-normal);
	border-color: var(--color-secondary4);
	border-radius: .5rem;
	border-style: solid;
	border-width: 1px;
	background-color: var(--color-primary3);
	font-family: 'courgette';
	font-size: 1rem;
	margin:.5rem .25rem;
	margin:.5rem .25rem;
	padding: .2rem .4rem;
	text-decoration:none;
	vertical-align: middle;
	box-shadow: 1px 1px 6px var(--color-decoration-dark);
}

a.button,
a.button:link,
a.button:visited,
a.button-cancel,
a.button-cancel:link,
a.button-cancel:visited
{
	color: var(--color-text-normal);
}

button:hover,
input[type="submit"]:hover,
a.button:hover,
a.button-cancel:hover
{
	color: var(--color-highlight);
}

.button-cancel
{
    background-color: var(--color-background);
}


input[type="checkbox"]
{
	vertical-align:middle;
}


/* Dialog Box Styling */
dialog
{
	background-color: var(--color-background);
	padding: .5rem;
	border-radius: var(--border-radius);
	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
	border-width: 1px;
	border-color: var(--color-secondary2);
	border-style: solid;
	color: var(--color-text-normal);
	outline: none; /* Focus is set programmatically to prevent buttons receiving it */
}
dialog::backdrop
{
	background-color: rgba(0,0,0,0.6);
}

/* Notification list */
/* -------------------------------------------------------------------------- */
.notification-list {
    list-style: none;
    padding: 0;
    margin: .5rem 0;
}

.notification-item {
    padding: .4rem .5rem;
    border-radius: var(--border-radius);
    margin-bottom: .3rem;
    border: 1px solid transparent;
}

.notification-item.unread {
    border-color: var(--color-border);
    background-color: var(--color-primary2);
}

/* Read but not yet purged — visible but de-emphasised */
.notification-item:not(.unread) {
    color: var(--color-text-dimmed);
}

.notification-item:not(.unread) a {
    color: var(--color-text-dimmed);
}

/* Toast notifications */
/* -------------------------------------------------------------------------- */
.toast-notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'courgette';
    font-size: 1rem;
    padding: .6rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid;
    color: var(--color-text-highlight);
}

.toast-notification.good-toast,
.toast-notification.good-ptoast {
    background-color: var(--color-background-good);
    border-color: var(--color-border-good);
    box-shadow: 0 0 12px var(--color-shadow-good);
}

.toast-notification.bad-toast,
.toast-notification.bad-ptoast {
    background-color: var(--color-background-bad);
    border-color: var(--color-border-bad);
    box-shadow: 0 0 12px var(--color-shadow-bad);
}

/* Auto-dismiss types animate out and block pointer events */
.toast-notification.good-toast,
.toast-notification.bad-toast {
    pointer-events: none;
    animation: toast-show 3.5s ease forwards;
}

/* Auto-dismiss types have no visible close button */
.toast-notification.good-toast .toast-close,
.toast-notification.bad-toast .toast-close {
    display: none;
}

@keyframes toast-show {
    0%   { opacity: 0; transform: translateY(-.5rem); }
    10%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Toast close button (overrides global button styles) */
.toast-close {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--color-text-dimmed);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.toast-close:hover {
    color: var(--color-text-highlight);
    box-shadow: none;
}

/* Task Chat Panel */
/* -------------------------------------------------------------------------- */
.task-chat-list
{
    list-style: none;
    padding: 0;
    margin: .5rem 0 .75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.task-chat-message
{
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.task-chat-avatar
{
    position: relative;
    flex-shrink: 0;
}

.task-chat-icon
{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    object-fit: cover;
    display: block;
}

.task-chat-icon-fallback
{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-primary4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    color: var(--color-text-dimmed);
    font-family: 'courgette';
}

/* Priority-coloured icon border -- reuses the same variables as priority badges */
.chat-priority-Top        { border-color: var(--color-priority-Top); }
.chat-priority-High       { border-color: var(--color-priority-High); }
.chat-priority-Medium     { border-color: var(--color-priority-Medium); }
.chat-priority-Low        { border-color: var(--color-priority-Low); }
.chat-priority-Interested { border-color: var(--color-priority-Interested); }
.chat-priority-Willing    { border-color: var(--color-priority-Willing); }

/* Event chat role borders */
.chat-event-owner     { border-color: var(--color-decoration); }
.chat-event-attending { border-color: var(--color-border-good); }

.task-chat-owner-star
{
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: .65rem;
    color: var(--color-decoration);
    line-height: 1;
    /* Subtle halo so the star reads against any icon colour */
    text-shadow: 0 0 3px var(--color-background), 0 0 3px var(--color-background);
}

.task-chat-body
{
    flex: 1;
    min-width: 0;
}

.task-chat-meta
{
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .2rem;
    flex-wrap: wrap;
}

.task-chat-name
{
    font-family: 'courgette';
    font-size: .85rem;
    color: var(--color-text-highlight);
    text-decoration: none;
}

.task-chat-name:hover
{
    color: var(--color-decoration);
}

.task-chat-time
{
    font-size: .7rem;
    color: var(--color-text-dimmed);
}

.task-chat-text
{
    font-size: .85rem;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-text-normal);
}

.task-chat-empty
{
    font-size: .85rem;
    color: var(--color-text-dimmed);
    margin-bottom: .5rem;
}


/* Time Picker */
/* -------------------------------------------------------------------------- */
.time-picker {
    margin-bottom: 1rem;
    max-width: 280px;
}

/* Styled like a text input — clicking opens the picker panel */
.tp-display {
    font-family: 'courgette';
    font-size: 1rem;
    color: var(--color-text-highlight);
    background: var(--color-primary2);
    border: 1px solid var(--color-decoration-dark);
    border-radius: 4px;
    padding: .25rem .4rem;
    margin: .1rem 0 0 0;
    cursor: pointer;
    display: inline-block;
    min-width: 7rem;
    user-select: none;
}

.tp-display:hover {
    border-color: var(--color-secondary4);
}

.time-picker.open .tp-display {
    border-color: var(--color-decoration);
}

/* Grid panel — hidden until the display is clicked */
.tp-panel {
    display: none;
    margin-top: .4rem;
    padding: .4rem;
    border: 1px solid var(--color-decoration-dark);
    border-radius: 4px;
    background: var(--color-primary2);
}

.time-picker.open .tp-panel {
    display: block;
}

.tp-section-label {
    font-size: .65rem;
    color: var(--color-text-dimmed);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: block;
    margin-top: .4rem;
    margin-bottom: .2rem;
}

.tp-section-label:first-child {
    margin-top: 0;
}

.tp-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
}

.tp-ampm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin-top: .4rem;
}

.tp-btn {
    font-family: 'courgette';
    font-size: .8rem;
    padding: .3rem 0;
    border-radius: 4px;
    border: 1px solid var(--color-secondary2);
    background: var(--color-primary3);
    color: var(--color-text-normal);
    cursor: pointer;
    text-align: center;
    margin: 0;
    box-shadow: none;
    line-height: 1;
}

.tp-btn:hover {
    border-color: var(--color-decoration-dark);
    color: var(--color-text-highlight);
    box-shadow: none;
}

.tp-btn.selected {
    background: var(--color-primary4);
    border-color: var(--color-decoration);
    color: var(--color-decoration);
}

.tp-ok {
    display: block;
    width: 100%;
    margin-top: 3px;
}


/* h2 accordion */
/* -------------------------------------------------------------------------- */
.h2-accordion
{
  margin-top: var(--border-radius);
  background-color: var(--color-background);
  border-radius: var(--border-radius);
}

.h2-accordion > summary.h2-box
{
  list-style: none;    /* Firefox */
  cursor: pointer;
  margin-top: 0;       /* Margin lives on .h2-accordion, not the summary */
  display: flex;
  align-items: center;
}

.h2-accordion > summary.h2-box::-webkit-details-marker
{
  display: none;
}

.h2-accordion > summary.h2-box::before
{
  content: '\00BB';
  font-family: alegreya;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-text-highlight);
  margin-right: .3rem;
  flex-shrink: 0;
  transform: translateY(-.3rem);
  transform-origin: 50% 60%;
  transition: transform .2s ease;
}

.h2-accordion[open] > summary.h2-box::before
{
  transform: translateY(-.3rem) rotate(90deg);
}


/* Inline form layout (field + button side by side) */
/* -------------------------------------------------------------------------- */
#Form_setUsernameForm,
#Form_setEmailForm
{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}

#Form_setUsernameForm fieldset,
#Form_setEmailForm fieldset
{
  border: none;
  padding: 0;
  margin: 0;
}

#Form_setUsernameForm .field,
#Form_setEmailForm .field
{
  margin: 0;
}


/* h3 accordion */
/* -------------------------------------------------------------------------- */
.h3-accordion
{
  margin-top: var(--border-radius);
}

.h3-accordion > summary.h3-box
{
  list-style: none;    /* Firefox */
  cursor: pointer;
  margin-top: 0;
  display: flex;
  align-items: center;
}

.h3-accordion > summary.h3-box::-webkit-details-marker
{
  display: none;
}

.h3-accordion > summary.h3-box::before
{
  content: '\00BB';
  font-family: alegreya;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-text-highlight);
  margin-right: .3rem;
  flex-shrink: 0;
  transform: translateY(-.2rem);
  transform-origin: 50% 60%;
  transition: transform .2s ease;
}

.h3-accordion[open] > summary.h3-box::before
{
  transform: translateY(-.2rem) rotate(90deg);
}


/* Compact Row — shared list-item layout */
/* -------------------------------------------------------------------------- */
.compact-row
{
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--color-border);
}

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

.compact-row-type
{
    display: inline-block;
    padding: .05rem .3rem;
    border: 1px solid var(--color-primary4);
    border-radius: calc(var(--border-radius) / 2);
    color: var(--color-text-dimmed);
    font-size: .65rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.compact-row-title
{
    flex: 1;
    font-family: courgette;
    font-size: .85rem;
    color: var(--color-text-highlight);
    min-width: 0;
}

.compact-row-summary
{
    font-size: .75rem;
    color: var(--color-text-dimmed);
    flex-shrink: 0;
}

/* Quick Access Bar */
/* -------------------------------------------------------------------------- */
#quick-access-bar
{
    margin-bottom: 0;
    padding: .3rem .6rem;
    background: linear-gradient(135deg, var(--color-primary1) 0%, var(--color-primary2) 100%);
    border: 1px solid var(--color-decoration-dark);
    border-radius: var(--border-radius);
    box-shadow: 0 0 8px rgba(203, 160, 12, 0.2);
    font-variant-ligatures: no-common-ligatures;
    font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "calt" 0;
}

#qb-inner
{
    display: flex;
    align-items: center;
    gap: .5rem;
}

#qb-ornament
{
    color: var(--color-decoration);
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
}

#qb-search-wrap
{
    position: relative;
    flex: 1;
    min-width: 0;
}

#qb-search
{
    width: 100%;
    box-sizing: border-box;
    background: var(--color-background);
    border: 1px solid var(--color-secondary2);
    border-radius: calc(var(--border-radius) / 2);
    color: var(--color-text-normal);
    font-family: 'almendra', serif;
    font-size: .85rem;
    padding: .25rem .5rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

#qb-search:focus
{
    border-color: var(--color-decoration);
    box-shadow: 0 0 5px rgba(203, 160, 12, 0.4);
}

#qb-search::placeholder
{
    color: var(--color-text-dimmed);
    font-style: italic;
}

#qb-results
{
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    background: var(--color-primary1);
    border: 1px solid var(--color-decoration-dark);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
    z-index: 50;
    max-height: 18rem;
    overflow-y: auto;
}

.qb-result,
a.qb-result:link,
a.qb-result:visited
{
    display: block;
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--color-primary3);
    text-decoration: none;
    color: var(--color-text-normal);
    transition: background .1s;
}

.qb-result:last-child { border-bottom: none; }

.qb-result:hover,
a.qb-result:hover
{
    background: var(--color-primary2);
    color: var(--color-text-highlight);
}

.qb-result-title
{
    display: block;
    color: var(--color-text-highlight);
    font-size: .9rem;
}

.qb-result-type
{
    display: inline-block;
    padding: .05rem .3rem;
    margin-right: .3rem;
    border: 1px solid var(--color-primary4);
    border-radius: calc(var(--border-radius) / 2);
    color: var(--color-text-dimmed);
    font-size: .65rem;
    vertical-align: middle;
    white-space: nowrap;
}

.qb-result-summary
{
    display: block;
    color: var(--color-text-dimmed);
    font-size: .75rem;
    margin-top: .1rem;
}

.qb-no-results
{
    padding: .4rem .6rem;
    color: var(--color-text-dimmed);
    font-style: italic;
    font-size: .85rem;
}

#qb-filter-wrap
{
    position: relative;
    flex-shrink: 0;
}

#qb-filter-btn
{
    display: inline-block;
    padding: .2rem .5rem;
    background: transparent;
    border: 1px solid var(--color-decoration-dark);
    border-radius: calc(var(--border-radius) / 2);
    color: var(--color-decoration);
    font-family: 'almendra', serif;
    font-size: .8rem;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
    box-shadow: none;
    transition: background .15s, color .15s, border-color .15s;
}

#qb-filter-btn:hover,
#qb-filter-wrap.open #qb-filter-btn
{
    background: var(--color-decoration-dark);
    border-color: var(--color-decoration);
    color: var(--color-text-highlight);
    box-shadow: none;
}

#qb-filter-panel
{
    display: none;
    position: absolute;
    top: calc(100% + .3rem);
    right: 0;
    background: var(--color-primary1);
    border: 1px solid var(--color-decoration-dark);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
    padding: .4rem;
    flex-direction: column;
    gap: .3rem;
    z-index: 50;
    min-width: 7rem;
}

#qb-filter-wrap.open #qb-filter-panel
{
    display: flex;
}

.qb-filter-toggle
{
    display: block;
    width: 100%;
    padding: .25rem .5rem;
    background: transparent;
    border: 1px solid var(--color-secondary2);
    border-radius: calc(var(--border-radius) / 2);
    color: var(--color-text-dimmed);
    font-family: 'almendra', serif;
    font-size: .8rem;
    font-variant-ligatures: no-common-ligatures;
    font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "calt" 0;
    cursor: pointer;
    text-align: left;
    margin: 0;
    box-shadow: none;
    transition: background .1s, border-color .1s, color .1s;
}

.qb-filter-toggle:hover
{
    border-color: var(--color-decoration-dark);
    color: var(--color-text-highlight);
    box-shadow: none;
}

.qb-filter-toggle.active
{
    border-color: var(--color-decoration);
    color: var(--color-decoration);
    background: var(--color-primary2);
}

.qb-filter-toggle.active:hover
{
    background: var(--color-primary3);
    color: var(--color-text-highlight);
    box-shadow: none;
}