/* ==========================================================================
   SEERIEQUERIES V3 // CHARACTER CHRONICLES
   ==========================================================================
   PURPOSE:
   Character profiles should feel like living dossiers pulled from a strange
   archive rather than generic dropdown cards.

   PALETTE:
   THE WEB + STELLA MARIS + OATH OF THE DROWNED.
   ========================================================================== */


/* ==========================================================================
   01. CHARACTER PAGE PALETTE
   ========================================================================== */

.character-chronicles-page {
    --char-deep: var(--entity_web-1);
    --char-violet: var(--entity_web-3);
    --char-blue: var(--saint_stella_maris-3);
    --char-rose: var(--saint_stella_maris-5);
    --char-slate: var(--saint_oath_drowned-3);
    --char-bone: var(--saint_oath_drowned-5);
    --char-gold: var(--saint_oath_drowned-6);

    position: relative;

    background:
        radial-gradient(
            circle at 84% 8%,
            rgba(47, 75, 132, 0.065),
            transparent 26%
        ),
        radial-gradient(
            circle at 12% 70%,
            rgba(102, 81, 122, 0.055),
            transparent 28%
        );
}


/* ==========================================================================
   02. CHARACTER DRAWER FOUNDATION
   ========================================================================== */

summary.char-row-trigger::-webkit-details-marker,
summary.char-row-trigger::marker {
    display: none;
}


details.interactive-char-drawer[open] {
    margin-bottom: 15px;
}


/* ==========================================================================
   03. SERIES / CHARACTER ROWS
   ========================================================================== */

.character-chronicles-page summary.char-row-trigger {
    color: #d4d1dd !important;

    background:
        linear-gradient(
            90deg,
            rgba(11, 12, 25, 0.96),
            rgba(19, 20, 38, 0.96)
        ) !important;

    border:
        1px dashed rgba(130, 144, 170, 0.28) !important;

    font-size: 0.82rem !important;

    box-shadow:
        inset 0 0 10px rgba(130, 185, 216, 0.02);
}


.character-chronicles-page summary.char-row-trigger:hover {
    color: #ffffff !important;

    border-color:
        var(--char-violet) !important;

    box-shadow:
        inset 0 0 10px rgba(102, 81, 122, 0.08),
        0 0 10px rgba(47, 75, 132, 0.06);
}


/* ==========================================================================
   04. EXPANDED DOSSIER
   ========================================================================== */

.character-chronicles-page .profile-dropdown-interior {
    background:
        radial-gradient(
            circle at 92% 4%,
            rgba(47, 75, 132, 0.055),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            rgba(8, 9, 19, 0.88),
            rgba(15, 16, 30, 0.88)
        ) !important;

    border:
        1px solid rgba(102, 81, 122, 0.28) !important;

    box-shadow:
        inset 0 0 20px rgba(102, 81, 122, 0.025);
}


.character-chronicles-page .profile-dropdown-interior p,
.character-chronicles-page .profile-dropdown-interior li {
    color: #c0bdcb !important;

    font-size: 0.79rem !important;
    line-height: 1.55 !important;
}


/* ==========================================================================
   05. DOSSIER PANEL HEADERS
   ==========================================================================
   Existing HTML uses inline pastel colors. Attribute-based overrides let us
   keep the user's templates intact while replacing the palette.
   ========================================================================== */


/* ==================== INFO // THE WEB ==================== */

.character-chronicles-page
.dropdown-panel-box h4[style*="background-color: #ffca99"] {
    color: #efeaf5 !important;

    background:
        linear-gradient(
            90deg,
            var(--entity_web-2),
            var(--entity_web-3)
        ) !important;

    border-color:
        rgba(178, 195, 204, 0.28) !important;
}


/* ==================== RELATIONSHIPS // STELLA MARIS ==================== */

.character-chronicles-page
.dropdown-panel-box h4[style*="background-color: #ff9fb2"] {
    color: #fff0f4 !important;

    background:
        linear-gradient(
            90deg,
            #53204f,
            var(--saint_stella_maris-5)
        ) !important;

    border-color:
        rgba(232, 44, 102, 0.28) !important;
}


/* ==================== STORY // OATH OF THE DROWNED ==================== */

.character-chronicles-page
.dropdown-panel-box h4[style*="background-color: #bbf2be"] {
    color: #e8f1f1 !important;

    background:
        linear-gradient(
            90deg,
            var(--saint_oath_drowned-2),
            var(--saint_oath_drowned-3)
        ) !important;

    border-color:
        rgba(164, 180, 191, 0.3) !important;
}


/* ==================== TRIVIA // CANDELABRA ==================== */

.character-chronicles-page
.dropdown-panel-box h4[style*="background-color: #d6d3f0"] {
    color: #241f23 !important;

    background:
        linear-gradient(
            90deg,
            var(--saint_candelabra-5),
            var(--saint_candelabra-6)
        ) !important;

    border-color:
        rgba(171, 144, 121, 0.34) !important;
}


.character-chronicles-page .dropdown-panel-box h4 {
    font-size: 1.02rem !important;
}


.character-chronicles-page .dropdown-panel-box h5 {
    color: var(--seer-spectral-bright) !important;

    font-size: 0.88rem !important;
}


/* ==========================================================================
   06. RIGHT-SIDE DOSSIER
   ========================================================================== */

.character-chronicles-page .profile-right-flow {
    color: #c5c2cf;
}


.character-chronicles-page .profile-right-flow > div {
    font-size: 0.8rem;

    border-color:
        rgba(130, 144, 170, 0.24) !important;
}


/* ==========================================================================
   07. LORE COMPLETION HUD
   ========================================================================== */

.lore-completion-box {
    padding: 10px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(7, 8, 18, 0.76),
            rgba(23, 20, 37, 0.76)
        );

    border:
        1px solid rgba(102, 81, 122, 0.46);

    border-radius: 6px;

    box-shadow:
        inset 0 0 9px rgba(102, 81, 122, 0.04),
        0 0 9px rgba(47, 75, 132, 0.035);
}


.lore-completion-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;

    color: var(--entity_web-5);

    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: bold;
}


.lore-completion-percent {
    color: var(--saint_oath_drowned-6);
}


.lore-completion-track {
    width: 100%;
    height: 8px;

    overflow: hidden;

    background-color: #050611;

    border:
        1px solid rgba(130, 144, 170, 0.2);

    border-radius: 3px;
}


.lore-completion-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--entity_web-3),
            var(--saint_stella_maris-3),
            var(--saint_oath_drowned-4)
        );

    box-shadow:
        0 0 7px rgba(47, 75, 132, 0.4);
}


.lore-completion-flags {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    margin-top: 8px;
}


.lore-flag {
    padding: 2px 5px;

    border-radius: 3px;

    font-family: monospace;
    font-size: 0.58rem;
    font-weight: bold;

    letter-spacing: 0.4px;
}


.lore-flag.complete {
    color: var(--seer-ghost);

    background-color: rgba(158, 216, 194, 0.04);

    border:
        1px solid rgba(158, 216, 194, 0.32);
}


.lore-flag.pending {
    color: #8f8ca0;

    background-color: rgba(95, 96, 119, 0.04);

    border:
        1px solid rgba(95, 96, 119, 0.28);
}


/* ==========================================================================
   08. RESPONSIVE
   ========================================================================== */

@media (max-width: 850px) {

    .character-chronicles-page .profile-left-flow,
    .character-chronicles-page .profile-right-flow {
        width: 100%;
        min-width: 0 !important;
    }

}

/* ==========================================================================
   09. V3.1 // CHARACTER CHRONICLES — LIVING DOSSIERS
   ==========================================================================
   This pushes Character Chronicles farther from the shared site shell.

   Palette language:
   ===> Stella Maris
   ===> The Web
   ===> Oath of the Drowned
   ===> Candelabra

   Each record now feels like a page pulled from a moonlit occult dossier.
   ========================================================================== */


/* ==========================================================================
   09.1 PAGE ATMOSPHERE
   ========================================================================== */

.character-chronicles-page {
    background:
        radial-gradient(
            circle at 88% 4%,
            rgba(47, 75, 132, 0.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 8% 52%,
            rgba(181, 31, 105, 0.055),
            transparent 28%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(178, 195, 204, 0.012) 0,
            rgba(178, 195, 204, 0.012) 1px,
            transparent 1px,
            transparent 34px
        );
}


/* ==================== PAGE THRESHOLD ==================== */

.character-chronicles-page > .welcome-box {
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(47, 75, 132, 0.11),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            rgba(17, 18, 36, 0.98),
            rgba(10, 10, 23, 0.98)
        );

    border-color:
        rgba(102, 81, 122, 0.40);

    box-shadow:
        inset 0 0 28px rgba(47, 75, 132, 0.035),
        0 8px 24px rgba(0, 0, 0, 0.22);
}


.character-chronicles-page > .welcome-box h1 {
    color: #c7b9e8;

    text-shadow:
        0 0 13px rgba(102, 81, 122, 0.28);
}


/* ==========================================================================
   09.2 SERIES FOLIOS
   ========================================================================== */

.character-chronicles-page .series-decks-flex-wrapper > .coming-up-container {
    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(11, 12, 25, 0.92),
            rgba(16, 17, 32, 0.92)
        );

    border-color:
        rgba(102, 81, 122, 0.26);

    box-shadow:
        inset 0 0 20px rgba(47, 75, 132, 0.025);
}


/* ==================== CHARACTER RECORD COLOR CYCLE ====================
   These are generic dossier colors until individual characters get their
   own dedicated palette classes later.
   ================================================================ */

.character-chronicles-page .interactive-char-drawer:nth-child(4n + 1) {
    --record-accent: var(--saint_stella_maris-3);
    --record-accent-2: var(--saint_stella_maris-5);
}


.character-chronicles-page .interactive-char-drawer:nth-child(4n + 2) {
    --record-accent: var(--entity_web-4);
    --record-accent-2: var(--entity_web-6);
}


.character-chronicles-page .interactive-char-drawer:nth-child(4n + 3) {
    --record-accent: var(--saint_oath_drowned-3);
    --record-accent-2: var(--saint_oath_drowned-6);
}


.character-chronicles-page .interactive-char-drawer:nth-child(4n + 4) {
    --record-accent: var(--saint_candelabra-4);
    --record-accent-2: var(--saint_candelabra-6);
}


.character-chronicles-page summary.char-row-trigger {
    border-left:
        3px solid var(--record-accent, var(--seer-oracle)) !important;
}


.character-chronicles-page
.interactive-char-drawer[open]
summary.char-row-trigger {
    box-shadow:
        inset 0 0 12px
            color-mix(
                in srgb,
                var(--record-accent, var(--seer-oracle)) 10%,
                transparent
            ),
        0 0 10px rgba(0, 0, 0, 0.16);
}


/* ==========================================================================
   09.3 CHARACTER HEADER BADGES — UNIFORM HEIGHT
   ========================================================================== */

.character-chronicles-page .char-row-trigger .tag-row {
    align-items: center;

    gap: 5px;

    margin: 0;
}


.character-chronicles-page .char-row-trigger .micro-tag,
.character-chronicles-page .char-row-trigger .archive-stamp {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 20px;
    height: 20px;

    padding: 2px 7px;

    box-sizing: border-box;

    line-height: 1;

    vertical-align: middle;
}


.character-chronicles-page .char-row-trigger .archive-stamp::before {
    line-height: 1;
}


/* ==========================================================================
   09.4 DOSSIER PANEL BOUNDARIES
   ==========================================================================
   Each lore module gets a visibly lighter/tinted surface so the end of one
   subject and the beginning of another are unmistakable.
   ========================================================================== */

.character-chronicles-page .dropdown-panel-box {
    padding: 12px;

    box-sizing: border-box;

    background:
        rgba(26, 27, 42, 0.72);

    border:
        1px solid rgba(130, 144, 170, 0.18);

    border-radius: 6px;

    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.012);
}


/* ==================== INFO ==================== */

.character-chronicles-page
.dropdown-panel-box:has(h4[style*="background-color: #ffca99"]) {
    background:
        linear-gradient(
            145deg,
            rgba(70, 50, 95, 0.17),
            rgba(28, 29, 46, 0.80)
        );

    border-color:
        rgba(102, 81, 122, 0.30);
}


/* ==================== RELATIONSHIPS ==================== */

.character-chronicles-page
.dropdown-panel-box:has(h4[style*="background-color: #ff9fb2"]) {
    background:
        linear-gradient(
            145deg,
            rgba(113, 34, 78, 0.20),
            rgba(35, 28, 43, 0.84)
        );

    border-color:
        rgba(181, 31, 105, 0.28);
}


/* ==================== STORY CHRONICLES ==================== */

.character-chronicles-page
.dropdown-panel-box:has(h4[style*="background-color: #bbf2be"]) {
    background:
        linear-gradient(
            145deg,
            rgba(54, 85, 102, 0.20),
            rgba(26, 33, 42, 0.84)
        );

    border-color:
        rgba(102, 130, 145, 0.30);
}


/* ==================== TRIVIA & SECRETS ==================== */

.character-chronicles-page
.dropdown-panel-box:has(h4[style*="background-color: #d6d3f0"]) {
    background:
        linear-gradient(
            145deg,
            rgba(132, 118, 108, 0.18),
            rgba(34, 32, 38, 0.86)
        );

    border-color:
        rgba(171, 144, 121, 0.26);
}


/* ==================== PANEL HEADER FIT ==================== */

.character-chronicles-page .dropdown-panel-box h4 {
    margin:
        -12px -12px 12px -12px !important;

    padding:
        7px 11px !important;

    border-radius:
        5px 5px 2px 2px !important;
}


/* ==========================================================================
   09.5 LORE COMPLETION — RESTORE COLOR
   ========================================================================== */

.character-chronicles-page .lore-completion-track {
    position: relative;
}


.character-chronicles-page .lore-completion-fill {
    display: block;

    min-width: 2px;
    min-height: 100%;

    opacity: 1;

    background:
        linear-gradient(
            90deg,
            var(--entity_web-3),
            var(--saint_stella_maris-3),
            var(--saint_oath_drowned-4)
        );

    box-shadow:
        0 0 8px rgba(47, 75, 132, 0.45);
}


/* ==================== LORE FLAG COLOR CODING ==================== */

.character-chronicles-page .lore-flag.complete:nth-child(1) {
    color: var(--entity_web-6);
    border-color: rgba(178, 195, 204, 0.34);
}


.character-chronicles-page .lore-flag.complete:nth-child(2) {
    color: var(--saint_stella_maris-5);
    border-color: rgba(181, 31, 105, 0.30);
}


.character-chronicles-page .lore-flag.complete:nth-child(3) {
    color: var(--saint_oath_drowned-4);
    border-color: rgba(164, 180, 191, 0.32);
}


.character-chronicles-page .lore-flag.complete:nth-child(4) {
    color: var(--saint_candelabra-5);
    border-color: rgba(227, 211, 189, 0.28);
}


/* ==========================================================================
   09.6 CHARACTER PAGE MICRO-ORNAMENT
   ========================================================================== */

.character-chronicles-page .interactive-char-drawer[open]
.profile-dropdown-interior {
    border-left:
        3px solid var(--record-accent, var(--seer-oracle)) !important;
}

/* ==========================================================================
   10. V3.2 // CHARACTER CHRONICLES CORRECTIONS
   ==========================================================================
   REQUESTED:
   ===> Trivia & Secrets gets a brighter brown identity.
   ===> Lore Completion fill becomes unambiguously visible.
   ===> Background dots / lines become easier to perceive.
   ========================================================================== */


/* ==========================================================================
   10.1 STRONGER DOSSIER CONSTELLATION BACKGROUND
   ==========================================================================
   Two quiet grid lines + sparse dots.
   The contrast is deliberately stronger than V3.1 while remaining behind
   the actual profile content.
   ========================================================================== */

.character-chronicles-page {
    background-image:
        radial-gradient(
            circle at 88% 4%,
            rgba(47, 75, 132, 0.14),
            transparent 25%
        ),
        radial-gradient(
            circle at 8% 52%,
            rgba(181, 31, 105, 0.065),
            transparent 28%
        ),
        radial-gradient(
            circle,
            rgba(178, 195, 204, 0.10) 1px,
            transparent 1.7px
        ),
        linear-gradient(
            rgba(102, 81, 122, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(47, 75, 132, 0.05) 1px,
            transparent 1px
        );

    background-size:
        auto,
        auto,
        56px 56px,
        112px 112px,
        112px 112px;

    background-position:
        0 0,
        0 0,
        12px 18px,
        0 0,
        0 0;
}


/* ==========================================================================
   10.2 TRIVIA & SECRETS // BRIGHTER BROWN
   ==========================================================================
   Warm tobacco / old-leather brown. Brighter than V3.1, but intentionally
   avoids cream, yellow, or parchment.
   ========================================================================== */

.character-chronicles-page
.dropdown-panel-box h4[style*="background-color: #d6d3f0"] {
    color: #fff0e8 !important;

    background:
        linear-gradient(
            90deg,
            #795548,
            #986b58,
            #ad8068
        ) !important;

    border-color:
        rgba(190, 139, 110, 0.50) !important;

    text-shadow:
        0 1px 2px rgba(32, 17, 13, 0.55) !important;
}


.character-chronicles-page
.dropdown-panel-box:has(h4[style*="background-color: #d6d3f0"]) {
    background:
        linear-gradient(
            145deg,
            rgba(102, 73, 61, 0.30),
            rgba(39, 32, 35, 0.90)
        );

    border-color:
        rgba(173, 128, 104, 0.42);
}


/* ==========================================================================
   10.3 LORE COMPLETION // HARDENED FILL
   ==========================================================================
   Uses explicit colors instead of palette variables here so the meter remains
   visible even if a future palette preset is being edited.
   ========================================================================== */

.character-chronicles-page .lore-completion-track {
    position: relative;

    height: 10px;

    overflow: hidden;

    background:
        #050612;

    border-color:
        rgba(169, 154, 226, 0.28);

    box-shadow:
        inset 0 0 6px rgba(0, 0, 0, 0.65);
}


.character-chronicles-page .lore-completion-fill {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    height: auto !important;
    min-height: 0;

    display: block;

    background:
        linear-gradient(
            90deg,
            #66517a 0%,
            #2f4b84 46%,
            #668291 76%,
            #a4b4bf 100%
        ) !important;

    box-shadow:
        0 0 8px rgba(102, 130, 145, 0.62),
        inset 0 0 3px rgba(255, 255, 255, 0.14);

    opacity: 1 !important;
}