/* Default styles for base html types */
/* -------------------------------------------------------------------------- */
html
{
  font-size: 16pt; /* Base unit for rem scaling */
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "calt" 0;
}

/* ── Global sky background + starfield ─────────────────────────────────────── */
/* Integrated from the "Until the Dawn" design. The hero's radial sky becomes the
   default background for every page. Two fixed layers on html so they cover the
   whole viewport (body has side margins, so the paint goes on html instead):
     1. a radial sky gradient built from the theme's primary blues;
     2. a fixed-position starfield — a pre-computed set of small radial-gradient
        dots. Positions are hard-coded (not JS-generated) so density is identical
        on every load and there is zero runtime cost. Retune on the styling pass. */
html
{
  background-color: var(--color-background);
  background-image:
    radial-gradient(60% 80% at 50% 0%,
      var(--color-primary3) 0%,
      var(--color-primary1) 55%,
      var(--color-background) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Starfield overlay — fixed, behind all content. pointer-events:none so it never
   intercepts clicks. The dot list is deliberately fixed for consistent density. */
body::before
{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .6;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.1px 1.1px at 12% 18%, #fff 60%, transparent 61%),
    radial-gradient(0.9px 0.9px at 27% 42%, #fff 60%, transparent 61%),
    radial-gradient(1.3px 1.3px at 41% 9%,  #fff5d8 60%, transparent 61%),
    radial-gradient(0.8px 0.8px at 55% 30%, #fff 60%, transparent 61%),
    radial-gradient(1.0px 1.0px at 63% 55%, #fff 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 73% 14%, #fff 60%, transparent 61%),
    radial-gradient(0.9px 0.9px at 81% 38%, #fff5d8 60%, transparent 61%),
    radial-gradient(1.1px 1.1px at 88% 67%, #fff 60%, transparent 61%),
    radial-gradient(0.8px 0.8px at 16% 61%, #fff 60%, transparent 61%),
    radial-gradient(1.0px 1.0px at 34% 78%, #fff 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 48% 88%, #fff5d8 60%, transparent 61%),
    radial-gradient(0.9px 0.9px at 69% 82%, #fff 60%, transparent 61%),
    radial-gradient(1.1px 1.1px at 92% 90%, #fff 60%, transparent 61%),
    radial-gradient(0.8px 0.8px at 7% 88%,  #fff 60%, transparent 61%);
}

body
{
  color: var(--color-text-normal);
  /* No background here — the fixed sky gradient + starfield live on html so they
     cover the full viewport regardless of body's side margins or page height. */
  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;
  /* background-color removed — the global sky gradient on html shows through. */
  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 */

.subtext
{
  font-size: .85rem;
  color: var(--color-text-dimmed);
}

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

#content{
  /* background-color removed — the global sky gradient on html shows through. */
  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;
}

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

input[type="text"],
input[type="email"],
input[type="password"],
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;
}
.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
{
    /* Integrated into the nav pane: no background/border/shadow of its own —
       the nav's bottom hairline + the input's own border provide separation.
       flex:1 so it fills the .search-tier row beside the (mobile) hamburger. */
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    padding: .3rem 28px;   /* horizontal padding matches .banner-inner */
}

#qb-inner
{
    max-width: 1320px;     /* line up under .banner-inner */
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

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

/* -------------------------------------------------------------------------- */
/* Hero — "Until the Dawn" landing block (Includes/Hero.ss)                    */
/* -------------------------------------------------------------------------- */
/* Sits at the top of the home page content as its own separator. The sky
   background is global (on html), so the hero itself is transparent and only
   supplies the centred eyebrow / title / motto and the closing star rule.
   Fonts: Cinzel display title, Alegreya italic motto, sans-serif eyebrow.
   Colours map onto existing tokens; retune on the styling pass. */
.hero
{
  position: relative;
  text-align: center;
  padding: 1.5rem;
}

.hero-eyebrow
{
  font-family: sans-serif;
  font-weight: 300;
  font-size: .6rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--color-accent4);
  margin-bottom: 1.2rem;
}

.hero-title
{
  font-family: cinzel, serif;
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: .06em;
  margin: 0 0 .8rem;
  color: var(--color-foreground);
}

.hero-sub
{
  font-family: alegreya, serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--color-text-normal);
  max-width: 760px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* Decorative star rule — closing separator beneath the motto */
.hero-rule
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 1.8rem;
}

.hero-rule span
{
  width: 60px;
  height: 1px;
  background: var(--color-decoration-dark);
}

.hero-rule svg
{
  color: var(--color-decoration);
}

/* Mobile */
@media (max-width: 680px)
{
  .hero
  {
    padding: 2.25rem 1rem 1.5rem;
  }

  .hero-title
  {
    font-size: 2rem;
  }

  .hero-sub
  {
    font-size: 1rem;
  }
}