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

/* Text Styling */

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

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

.centered-row
{
  display: flex;
  justify-content: center;
}

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

/* Every h5 is a bare lead-in label heading the content that follows, so it
   takes a trailing colon. Banded headings (h2-h4) read as headings on their own
   and get none. Sourcing the colon here keeps it out of templates. */
h5::after{
  content: ':';
}

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

.c5-box
{
  margin-top: .5rem;
  padding: .3rem .5rem;
}

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

.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: var(--shadow-decoration);
}

.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,
.tp-display
{
    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;
}

button,
input[type="submit"],
.button,
.btn-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;
	padding: .2rem .4rem;
	text-decoration:none;
	vertical-align: middle;
	box-shadow: var(--shadow-decoration);
}

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

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

.btn-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,
.task-chat-icon-fallback
{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
}

.task-chat-icon
{
    object-fit: cover;
    display: block;
}

.task-chat-icon-fallback
{
    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.
   Shared input look (font/color/border/radius/background) comes from the
   global input selector group above; only the picker-specific bits live here. */
.tp-display {
    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;
}


/* accordions (h2 + h3) */
/* -------------------------------------------------------------------------- */
/* The two tiers differ only in marker size, marker vertical offset, and the   */
/* panel chrome h2 carries; those vary via custom props so every shared rule   */
/* collapses to one grouped selector. */
.h2-accordion,
.h3-accordion
{
  margin-top: var(--border-radius);
}

.h2-accordion
{
  --marker-size: 2rem;
  --marker-shift: -.3rem;
  background-color: var(--color-background);
  border-radius: var(--border-radius);
}

.h3-accordion
{
  --marker-size: 1.7rem;
  --marker-shift: -.2rem;
}

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

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

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

.h2-accordion[open] > summary.h2-box::before,
.h3-accordion[open] > summary.h3-box::before
{
  transform: translateY(var(--marker-shift)) 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;
}


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

.type-tag
{
    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;
}

.compact-row-type
{
    flex-shrink: 0;
}

.compact-row-title
{
    flex: 1;
    font-family: courgette;
    font-size: .85rem;
    color: var(--color-text-highlight);
    min-width: 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
{
    margin-right: .3rem;
    vertical-align: middle;
}

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

/* -------------------------------------------------------------------------- */
/* Onboarding readiness strip (first unmet setup step, above the dashboard)    */
/* -------------------------------------------------------------------------- */
.readiness-strip
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .75rem;
  padding: .6rem .9rem;
  border: 1px solid var(--color-secondary4);
  border-left: 3px solid var(--color-decoration);
  border-radius: var(--border-radius);
  background-image: linear-gradient(var(--color-border), var(--color-background));
}

.readiness-text { min-width: 0; flex: 1 1 240px; }

/* Heading-like label without an actual <hN> (keeps the page heading order intact
   and sidesteps the global tangerine heading face -- this is a small UI label). */
.readiness-title
{
  margin: 0;
  font-family: alegreya, serif;
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-decoration);
}

.readiness-message { margin: .15rem 0 0; font-size: .8rem; color: var(--color-text-dimmed); }
.readiness-cta { flex: 0 0 auto; white-space: nowrap; }

/* Activate rung: a <details> dropdown of owned characters (portrait + name +
   server), each a one-click activation link. The menu scrolls when the roster is
   long so it never overflows the strip. Menu chrome mirrors .nav-character-menu;
   the rows reuse .nav-chips / .nav-character-chip. */
.readiness-activate { position: relative; flex: 0 0 auto; }
.readiness-activate > summary
{
  list-style: none;          /* hide the default disclosure marker */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.readiness-activate > summary::-webkit-details-marker { display: none; }
.rd-caret { font-size: .7em; transition: transform .15s ease; }
.readiness-activate[open] > summary .rd-caret { transform: rotate(180deg); }

.readiness-charmenu
{
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 5;
  min-width: 14rem;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--color-primary2);
  border: medium ridge var(--color-secondary2);
  border-radius: .5rem;
}

/* Timezone rung inlines the actual set-timezone form. Strip the SilverStripe
   form chrome down to a single row (select + Save) and hide the field label --
   the strip title already reads "Set your timezone". */
.readiness-inline-form { flex: 0 0 auto; }
.readiness-inline-form form { display: flex; align-items: center; gap: .4rem; margin: 0; }
.readiness-inline-form fieldset { margin: 0; padding: 0; border: 0; }
.readiness-inline-form .field { margin: 0; }
.readiness-inline-form label { display: none; }
.readiness-inline-form select { max-width: 220px; }
.readiness-inline-form .btn-toolbar { margin: 0; padding: 0; }

@media (max-width: 680px)
{
  .readiness-cta { width: 100%; text-align: center; }

  .readiness-activate { width: 100%; }
  .readiness-activate > summary { width: 100%; justify-content: center; }
  .readiness-charmenu { left: 0; right: 0; min-width: 0; }

  .readiness-inline-form,
  .readiness-inline-form form { width: 100%; }
  .readiness-inline-form fieldset,
  .readiness-inline-form .field { flex: 1; }
  .readiness-inline-form select { max-width: none; width: 100%; }
}

/* -------------------------------------------------------------------------- */
/* "Relevant to you" — top tier of the personalized home (live relevance items) */
/* -------------------------------------------------------------------------- */
.relevance
{
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .75rem;
}

.relevance-item
{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  border: 1px solid var(--color-secondary4);
  border-left: 3px solid var(--color-decoration);
  border-radius: var(--border-radius);
  background-image: linear-gradient(var(--color-border), var(--color-background));
  text-decoration: none;
  color: var(--color-text-normal);
}

.relevance-item:hover { border-color: var(--color-decoration); color: var(--color-decoration); }

.relevance-main  { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.relevance-title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relevance-meta  { font-size: .72rem; color: var(--color-text-dimmed); }

.relevance-roles { display: flex; gap: .25rem; flex: 0 0 auto; }
.relevance-roles img { width: 1.4rem; height: 1.4rem; }

/* The stateless "recent" kinds (Tier 2/3) get their own left-border accent so they
   read as a different category from the gold event rows (Tier 1/4). */
.relevance-task-interest { border-left-color: var(--color-priority-Interested); }
.relevance-activity-task { border-left-color: var(--color-text-accent); }

/* -------------------------------------------------------------------------- */
/* Notifications digest — tier-5 home surface (compact peek at the stream)      */
/* -------------------------------------------------------------------------- */
.notif-digest
{
  border: 1px solid var(--color-secondary4);
  border-radius: var(--border-radius);
  padding: .5rem .8rem;
  margin-bottom: .75rem;
}

.notif-digest-head
{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}

.notif-digest-title { font-weight: bold; }

.notif-digest-count
{
  font-size: .7rem;
  line-height: 1;
  padding: .15rem .4rem;
  border-radius: 1rem;
  background-color: var(--color-primary2);
  border: 1px solid var(--color-border);
}

.notif-digest-list { list-style: none; padding: 0; margin: 0; }

.notif-digest-item
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .15rem 0;
}

.notif-digest-all
{
  display: inline-block;
  margin-top: .3rem;
  font-size: .75rem;
  color: var(--color-text-dimmed);
}

.notif-digest-all:hover { color: var(--color-decoration); }

/* -------------------------------------------------------------------------- */
/* Home dashboard (signed-in hero replacement)                                */
/* -------------------------------------------------------------------------- */
.home-dashboard
{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}

.dash-panel
{
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-secondary4);
  border-radius: var(--border-radius);
  background-image: linear-gradient(var(--color-border), var(--color-background));
  overflow: hidden;
}

.dash-header
{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem .6rem;
  border-bottom: 1px solid var(--color-border);
}

/* Override the decorative tangerine heading font -- panel titles are small UI
   labels and need a legible face. alegreya is the theme's readable serif. */
.dash-header h3 { margin: 0; font-size: .95rem; font-family: alegreya, serif; font-weight: bold; }
.dash-header a  { font-size: .65rem; white-space: nowrap; }

.dash-list
{
  list-style: none;
  margin: 0;
  padding: .3rem .4rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1;
}

.dash-row
{
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .3rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--color-text-normal);
}

a.dash-row:hover { background: var(--color-primary2); color: var(--color-decoration); }

.dash-row-main  { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dash-row-title { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-meta  { font-size: .65rem; color: var(--color-text-dimmed); }

.dash-empty
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .5rem;
  flex: 1;
  padding: .9rem .6rem;
  font-size: .72rem;
  color: var(--color-text-dimmed);
}

.dash-empty p { margin: 0; }

@media (max-width: 680px)
{
  .dash-panel { flex-basis: 100%; }
}

/* -------------------------------------------------------------------------- */
/* Calendar                                                                   */
/* -------------------------------------------------------------------------- */
.cal-header
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}

.cal-nav
{
  display: flex;
  align-items: center;
  gap: .5rem;
}

.cal-month-label
{
  font-family: 'courgette';
  min-width: 9rem;
  text-align: center;
}

.cal-legend
{
  font-size: .75rem;
  color: var(--color-text-dimmed);
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin: .25rem 0 .75rem;
}

.cal-swatch
{
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: 3px;
  border: 1px solid var(--color-border);
}

.cal-swatch.in  { border-color: var(--color-border-good); background: var(--color-background-good); }
.cal-swatch.out { border-color: var(--color-border); background: transparent; }

.cal-empty
{
  color: var(--color-text-dimmed);
  font-style: italic;
}

/* Desktop / mobile view toggle (site breakpoint is 680px). */
.cal-desktop { display: none; }
.cal-mobile  { display: block; }

@media (min-width: 681px)
{
  .cal-desktop { display: block; }
  .cal-mobile  { display: none; }
}

/* Month grid */
.cal-weekdays,
.cal-week
{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-weekdays
{
  margin-bottom: .25rem;
}

.cal-weekdays span
{
  text-align: center;
  font-size: .7rem;
  color: var(--color-text-dimmed);
  padding: .25rem 0;
}

.cal-cell
{
  min-height: 6.5rem;
  border: 1px solid var(--color-border);
  margin: -1px 0 0 -1px; /* collapse shared borders */
  padding: .25rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.cal-cell.dim
{
  opacity: .45;
}

.cal-cell.today .cal-daynum
{
  background: var(--color-decoration);
  color: var(--color-background);
  border-radius: 50%;
}

.cal-daynum
{
  font-size: .75rem;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
}

.cal-cell-events
{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.cal-cell-event
{
  display: block;
  font-size: .7rem;
  line-height: 1.3;
  padding: .1rem .3rem;
  border-radius: 3px;
  border-left: 3px solid var(--color-decoration);
  background: var(--color-primary3);
  color: var(--color-text-normal);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-cell-event:hover { background: var(--color-primary4); }
.cal-cell-time { color: var(--color-text-dimmed); }

/* Availability accents (grid + agenda share the modifier classes) */
.cal-cell-event.avail-in,
.cal-agenda-event.avail-in
{
  border-left-color: var(--color-border-good);
}

.cal-cell-event.avail-out,
.cal-agenda-event.avail-out
{
  opacity: .6;
}

/* Agenda list */
.cal-agenda
{
  list-style: none;
  margin: 0;
  padding: 0;
}

.cal-agenda-day
{
  margin-bottom: .75rem;
}

.cal-agenda-date
{
  font-family: 'courgette';
  font-size: .9rem;
  color: var(--color-text-highlight);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .15rem;
  margin-bottom: .35rem;
}

.cal-agenda-events
{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.cal-agenda-event
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .35rem .5rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-decoration);
  border-radius: 4px;
  text-decoration: none;
  color: var(--color-text-normal);
}

.cal-agenda-event:hover { background: var(--color-primary3); }

.cal-agenda-time
{
  font-size: .8rem;
  color: var(--color-text-dimmed);
  min-width: 7rem;
}

.cal-agenda-title { flex: 1; }

.cal-avail-tag
{
  font-size: .7rem;
}

.cal-avail-tag.in  { color: var(--color-border-good); }
.cal-avail-tag.out { color: var(--color-text-dimmed); }

.cal-tag { font-size: .65rem; }