/**
 * Nocturne component design layer.
 * All decorative colours follow style.css, including data-palette="forest".
 * 01 Foundations / 02 Controls / 03 Directory / 04 Posts / 05 Community
 */
:root { color-scheme: dark; }
body { background-color: var(--nocturne-void); color: var(--nocturne-light); font-family: 'Rajdhani', system-ui, sans-serif; }
.grid-content, .content-box { min-width: 0; }
/* .content-box { margin-block: 1rem; } */
/* Keep the site background visible around each individual component. */
.nocturne-site-header { margin-top: 1.25rem; }
.nocturne-site-header small { color: var(--nocturne-muted); font-size: .65em; letter-spacing: .15em; }
.nocturne-site-footer {
    background: linear-gradient( 130deg, rgb(var(--nocturne-deep-rgb) / 0.9608), rgb(var(--nocturne-panel-rgb) / 0.9098) );
  border: 1px solid rgb(var(--nocturne-edge-rgb) / 0.6);
  padding: 15px;
  border-radius: 8px;
    margin-block: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--nocturne-edge);
    color: var(--nocturne-muted);
    text-align: center;
}
:focus-visible { outline: 2px solid var(--nocturne-muted); outline-offset: 4px; }
[hidden] { display: none !important; }
:is(input, select, textarea, button) { font: inherit; }
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]), select, textarea) {
 width: 100%; padding: .65rem .85rem; background-color: var(--nocturne-void); color: var(--nocturne-light); border: 1px solid var(--nocturne-edge); border-radius: .5rem;
}
/* :is(input, textarea)::placeholder { color: var(--nocturne-muted); opacity: 1; }
input:is([type="checkbox"], [type="radio"]) { accent-color: var(--nocturne-muted); }
:is(button, input[type="submit"], input[type="reset"], input[type="button"], .button, .mainoption, .liteoption) {
  background: var(--nocturne-panel); color: var(--nocturne-light); border: 1px solid var(--nocturne-edge); border-radius: .5rem; cursor: pointer;
} */
:is(input, textarea)::placeholder { color: var(--nocturne-muted); opacity: 1; }
input:is([type="checkbox"], [type="radio"]) { accent-color: var(--nocturne-muted); }
:is(button, input[type="submit"], input[type="reset"], input[type="button"], .button, .mainoption, .liteoption) {
  color: var(--nocturne-light); border-radius: .5rem; cursor: pointer;
}

/* :is(button, input[type="submit"], input[type="reset"], input[type="button"]):hover { background-color: var(--nocturne-edge); } */
:is(button, input):disabled { opacity: .55; cursor: default; }
.row1, .row1.odd, .row2, .row1.even, .row3 { color: var(--nocturne-light); border: 1px solid rgb(var(--nocturne-edge-rgb) / .6); box-shadow: none; }
.row1, .row1.odd { background: rgb(var(--nocturne-deep-rgb) / .92); }
.row2, .row1.even, .row3 { background: rgb(var(--nocturne-panel-rgb) / .65); }
.cat, .catHead, .catSides, .catLeft, .catRight, .catBottom {
 padding: .9rem 1.15rem; background: linear-gradient(110deg, var(--nocturne-panel), var(--nocturne-deep)); color: var(--nocturne-light); border: 1px solid var(--nocturne-edge); box-shadow: none; white-space: normal;
}
:is(.forum-list-actions > a, .forum-post-topic-button, .forum-list-pagination :is(a,b,strong), .forum-mini-pagination-item) { background: var(--nocturne-panel); box-shadow: none; border-radius: .5rem; }
:is(.forum-list-pagination .current, .forum-list-pagination [aria-current="page"]) { background: var(--nocturne-light); color: var(--nocturne-void); }
.forum-list-title-text { white-space: normal; }
.forum-list-description, .forum-list-meta { color: var(--nocturne-muted); }
.forum-list .forum-list-row { padding: 1.25rem; }
.forum-list-image { width: 48px; height: 48px; object-fit: contain; margin-inline-end: 1rem; }
/* Topic reading: a quiet author rail and generously spaced message area. */
.forum-post { border-radius: .85rem; background: rgb(var(--nocturne-deep-rgb) / .94); box-shadow: none; overflow: clip; }
.forum-post-author-name, .forum-post-toolbar { background: rgb(var(--nocturne-panel-rgb) / .65); }
.forum-post-content { padding: 1.5rem; line-height: 1.65; }
.forum-post-author { background: rgb(var(--nocturne-panel-rgb) / .3); }
.forum-post-message :is(img,video,iframe) { max-width: 100%; }
.forum-post-message pre, .code, .php { max-width: 100%; overflow-x: auto; }
.quote, .bbcode-access-notice { margin-bottom: 1rem; border-inline-start: 3px solid var(--nocturne-muted); border-radius: .4rem; background-color: var(--nocturne-panel); }
@media (min-width: 900px) {
 .forum-post { --forum-post-author-width: 180px; }
}
/* The full template set shares the same palette, surfaces and spacing. */
:is(.forum-posting, .forum-search, .forum-profile, .forum-groups, .forum-modcp, .nocturne-pm-reader, .nocturne-members) { min-width: 0; }
:is(.forum-posting,.forum-search,.forum-profile,.forum-groups,.forum-modcp,.nocturne-pm-reader,.nocturne-members) header { box-shadow: none; }
.nocturne-member { border-radius: 1rem; border-top-width: 1px; box-shadow: none; }
.nocturne-member__avatar { border-radius: 50%; }
.nocturne-pm-reader-layout { gap: 1.25rem; }
.nocturne-pm-reader-letter { border-radius: .85rem; box-shadow: none; }
.forum-posting-panel-toggle { width: 100%; text-align: start; }
@media (max-width: 575px) {
 .nocturne-site-header { padding: 1rem; }
 .nocturne-site-header .brand { letter-spacing: .1em; flex-wrap: wrap; }
 .hero { min-height: 180px; padding: 1.5rem; }
 .hero h1 span { letter-spacing: .2em; }
 .forum-post-content { padding: 1rem; }
 .forum-list-actions > a { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
 *, ::before, ::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.bbcode-inline-code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
/** Responsive header navigation: desktop links, mobile disclosure. */
.nocturne-site-header { gap: 1.25rem; flex-wrap: wrap; position: relative; z-index: 20; }
.nocturne-site-header .brand { flex-shrink: 0; }
.nocturne-navigation { margin-inline-start: auto; }
.nocturne-navigation ul { list-style: none; padding: 0; margin: 0; }
.nocturne-navigation-links { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.nocturne-navigation-item { position: relative; display: flex; align-items: center; border-radius: .5rem; }
.nocturne-navigation a { display: block; padding: .7rem .8rem; color: var(--nocturne-muted); border-radius: .5rem; line-height: 1.3; font-weight: 600; text-transform: uppercase; }
.nocturne-navigation :is(a:hover, a:focus-visible), .nocturne-navigation-item.is-active > a { color: var(--nocturne-light); background: rgb(var(--nocturne-edge-rgb) / .35); }
.nocturne-navigation-dropdown summary { display: flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px; cursor: pointer; list-style: none; border-radius: .4rem; }
.nocturne-navigation-dropdown summary::-webkit-details-marker { display: none; }
.nocturne-navigation-chevron { width: .45rem; height: .45rem; border-right: 2px solid var(--nocturne-muted); border-bottom: 2px solid var(--nocturne-muted); transform: rotate(45deg); margin-top: -.25rem; }
.nocturne-navigation-dropdown[open] .nocturne-navigation-chevron { transform: rotate(225deg); margin-top: .25rem; }
.nocturne-navigation .nocturne-navigation-submenu { position: absolute; inset-inline-start: 0; inset-inline-end: auto; top: 100%; min-width: 210px; padding: .5rem; background: var(--nocturne-deep); border: 1px solid var(--nocturne-edge); border-radius: .65rem; box-shadow: 0 12px 24px rgb(var(--nocturne-void-rgb) / .65); z-index: 30; }
.nocturne-navigation-submenu a { padding: .75rem; }
.nocturne-navigation-toggle { display: none; align-items: center; gap: .65rem; min-height: 44px; }
.nocturne-navigation-bars { width: 18px; height: 14px; border-block: 2px solid var(--nocturne-light); position: relative; }
.nocturne-navigation-bars::before { content: ""; position: absolute; inset-inline: 0; top: 4px; border-top: 2px solid var(--nocturne-light); }
@media (max-width: 1199px) {
 .nocturne-navigation { width: 100%; margin-inline-start: 0; }
 .nocturne-navigation.is-enhanced .nocturne-navigation-toggle { display: flex; position: absolute; inset-inline-end: 1rem; top: 1rem; background: transparent; }
 /* .nocturne-site-header:has(.nocturne-navigation.is-enhanced) { padding-inline-end: 8rem; } */
 .nocturne-navigation.is-enhanced:not(.is-open) .nocturne-navigation-links { display: none; }
 .nocturne-navigation.is-enhanced:not(.is-open) { width: 0; height: 0; }
 .nocturne-navigation.is-open { flex-basis: 100%; }
 .nocturne-navigation-links { flex-direction: column; align-items: stretch; border-top: 1px solid var(--nocturne-edge); padding-top: .75rem !important; }
 .nocturne-navigation-item { flex-wrap: wrap; }
 .nocturne-navigation-item > a { flex: 1; }
 .nocturne-navigation-dropdown { position: static; }
 .nocturne-navigation .nocturne-navigation-submenu { inset-inline: 0; min-width: 0; }
}
@media (max-width: 400px) {
 .nocturne-site-header .brand { gap: .5rem; font-size: .85rem; }
 .nocturne-site-header .brand small { display: none; }
}


/* Mobile submenu expansion stays in the navigation flow. */
@media (max-width: 1199px) {
 .nocturne-navigation-item > a { padding-inline-end: 3rem; }
 .nocturne-navigation-dropdown { flex-basis: 100%; }
 .nocturne-navigation-dropdown summary { position: absolute; inset-inline-end: 0; top: 0; min-width: 44px; }
 .nocturne-navigation .nocturne-navigation-submenu { position: static; width: 100%; margin-block: .35rem .65rem; box-shadow: none; }
}

/* Smoothly rotate the submenu arrow. */
.nocturne-navigation-chevron {
    transition: transform .2s ease, margin-top .2s ease;
}

/* Animate the submenu when its disclosure opens. */
.nocturne-navigation-dropdown[open] > .nocturne-navigation-submenu {
    animation: nocturne-submenu-reveal .2s ease-out both;
}

@keyframes nocturne-submenu-reveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .nocturne-navigation-chevron {
        transition: none;
    }

    .nocturne-navigation-dropdown[open] > .nocturne-navigation-submenu {
        animation: none;
    }
}

@media (min-width: 1200px) {
    .nocturne-navigation .nocturne-navigation-submenu {
        margin-top: 5px;
    }

    .nocturne-navigation-submenu::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: -6px;
        height: 6px;
    }
}

.nocturne-navigation-item:has(.nocturne-navigation-dropdown):hover > a,
.nocturne-navigation-item:has(.nocturne-navigation-dropdown[open]) > a {
    color: var(--nocturne-light);
    background: rgb(var(--nocturne-edge-rgb) / .35);
}

/** Header palette toggle. aria-pressed indicates the forest palette. */
.nocturne-header-tools { display: flex; align-items: center; gap: .75rem; min-width: 0; }
/* Responsive palette previews between navigation and the hero. */
.nocturne-palette-selector[hidden] { display: none !important; }
.nocturne-palette-selector { margin-top: 18px; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--nocturne-edge); border-radius: 8px; background: var(--nocturne-deep); min-width: 0; }
.nocturne-palette-selector h2 { margin: 0 0 1rem; font-size: 1.25rem; color: var(--nocturne-light); }
.nocturne-palette-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: .75rem; }
.nocturne-palette-card { position: relative; min-width: 0; padding: .65rem; border: 2px solid rgb(var(--nocturne-edge-rgb)); border-radius: .6rem; background: rgb(var(--nocturne-deep-rgb)); color: rgb(var(--nocturne-light-rgb)); cursor: pointer; text-align: start; font: inherit; transition: border-color .18s ease, box-shadow .18s ease; }
.nocturne-palette-card:hover, .nocturne-palette-card[aria-pressed="true"] { border-color: rgb(var(--nocturne-light-rgb)); box-shadow: 0 0 0 1px rgb(var(--nocturne-muted-rgb) / .35); }
.nocturne-palette-card:focus-visible { outline: 2px solid var(--nocturne-light); outline-offset: 3px; }
.nocturne-palette-swatches { display: flex; height: 30px; overflow: hidden; border-radius: .3rem; margin-bottom: .5rem; }
.nocturne-palette-swatches span { flex: 1; }
.nocturne-palette-swatches span:nth-child(1) { background: rgb(var(--nocturne-void-rgb)); }
.nocturne-palette-swatches span:nth-child(2) { background: rgb(var(--nocturne-deep-rgb)); }
.nocturne-palette-swatches span:nth-child(3) { background: rgb(var(--nocturne-panel-rgb)); }
.nocturne-palette-swatches span:nth-child(4) { background: rgb(var(--nocturne-edge-rgb)); }
.nocturne-palette-swatches span:nth-child(5) { background: rgb(var(--nocturne-muted-rgb)); }
.nocturne-palette-swatches span:nth-child(6) { background: rgb(var(--nocturne-light-rgb)); }
.nocturne-palette-name { padding-inline-end: 1.5rem; overflow-wrap: anywhere; }
.nocturne-palette-card .fa-check { position: absolute; inset-inline-end: .65rem; bottom: .9rem; visibility: hidden; }
.nocturne-palette-card[aria-pressed="true"] .fa-check { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .nocturne-palette-card { transition: none; } }

/* Independent dashboard action styling. */
.nocturne-palette-swatches > span { display: block; min-width: 0; height: 100%; }

/* Shared appearance for dashboard, notification and palette controls. */
.nocturne-header-button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--nocturne-edge); border-radius: .6rem; background: var(--nocturne-deep); color: var(--nocturne-light); font: inherit; font-size: 1.15rem; line-height: 1; text-decoration: none; list-style: none; cursor: pointer; }
.nocturne-header-button::-webkit-details-marker { display: none; }
.nocturne-header-button:hover,
.nocturne-header-button[aria-expanded="true"],
.nocturne-notifications[open] > .nocturne-header-button { background: var(--nocturne-panel); color: var(--nocturne-light); }
.nocturne-header-button:focus-visible { outline: 2px solid var(--nocturne-muted); outline-offset: 3px; }