/*
=============================================================================
  THE LAST ECHO — INTERNAL WIKI
  styles.css
  Latent Dreams Limited | Confidential
=============================================================================

  COLOUR SYSTEM
  -------------
  All colours are defined as CSS variables in :root and referenced
  throughout. Never use hardcoded hex values outside of :root except
  for one-off exceptions noted inline.

  --bg          Page background. Darkest layer.
  --bg-2        Sidebar background. Slightly lighter than page.
  --bg-3        Surface background. Used for cards, callouts, inputs.
  --border      Subtle border colour throughout.
  --gold        Primary accent. Section titles, active nav, callout borders.
  --gold-dim    Muted gold. Subtitles, dividers, hover states.
  --amber       Desaturated amber. Design note callout borders.
  --teal        Secondary accent. Character callouts, teal tags, voice blocks.
  --teal-dim    Muted teal. Hover states, teal borders.
  --text        Body text colour.
  --text-dim    Muted text. Metadata, placeholders, inactive nav items.
  --text-bright Brightest text. Headings, callout content.
  --accent-red  Warning colour. ODD items, red callouts, hard rules.
  --tag-bg      Tag background.

  CALLOUT TYPES
  -------------
  .callout          Gold left border, italic. Lore — world truth, the Fable,
                    things that are true in Arnwyn.
  .callout.teal     Teal left border, normal weight. Character specific —
                    emotional beats, character truth, voice moments.
  .callout.red      Red left border, normal weight. Warnings — hard rules,
                    ODD flags, things that must not be broken.
  .callout.design   Amber left border, normal weight. Design notes — team-
                    facing information, mechanics explanations, build context.

  SECTION NAV
  -----------
  .section-nav      Pill-shaped anchor link row at the top of long sections.
                    Only add to sections with multiple subsections. Links
                    jump to h2 elements with matching id attributes.

  VOICE BLOCKS
  ------------
  .voice-block.brea   Teal left border. Brea's voice character entries.
  .voice-block.fenn   Warm brown left border. Fenn's voice character entries.
  .voice-block.nyra   Muted left border. Nyra's internal registers.

  TAG TYPES
  ---------
  .tag              Default. Neutral background and border.
  .tag.gold         Gold border and text. Locked or confirmed items.
  .tag.teal         Teal border and text. System or world references.
  .tag.red          Red border and text. ODD flags and warnings.
  .tag.locked       Gold border, dark background. Fully locked canon.

  IMAGE CLASSES
  -------------
  .wiki-image         Full width. Text above and below, no wrapping.
  .wiki-image-left    Floats left ~40% width. Text wraps to the right.
  .wiki-image-right   Floats right ~40% width. Text wraps to the left.
  .wiki-image-caption Small caption text beneath any image variant.
  .wiki-image-clear   Use after a float image block to resume full-width flow.

=============================================================================
*/

/* Import cinematic fonts for headers (Cinzel) and readable serif for body (Crimson Text) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

/* ── GLOBAL VARIABLES & RESET ── */
:root {
    --bg: #0a0908;
    --bg-2: #12100e;
    --bg-3: #1a1612;
    --bg-base: #131312;
    --border: #2a2520;
    --gold: #c8a04a;
    --gold-dim: #8a6e30;
    --amber: #8a6a2a;
    --teal: #4a8f8c;
    --teal-dim: #2d5856;
    --text: #d4cfc8;
    --text-dim: #8a857c;
    --text-bright: #ede8df;
    --accent-red: #7a2222;
    --tag-bg: #1e1b16;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Crimson Text', Georgia, serif;
    background: var(--bg-base);
    color: var(--text);
    display: flex;
    height: 100vh;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.7;
}

/* ── SIDEBAR ── */
#sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#sidebar-header {
    padding: 20px 16px 14px;
    border-bottom: 1px solid var(--border);
}

    #sidebar-header .studio {
        font-family: 'Cinzel', serif;
        font-size: 9px;
        letter-spacing: 3px;
        color: var(--gold-dim);
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    #sidebar-header .title {
        font-family: 'Cinzel', serif;
        font-size: 14px;
        color: var(--gold);
        letter-spacing: 1px;
    }

    #sidebar-header .subtitle {
        font-size: 11px;
        color: var(--text-dim);
        margin-top: 3px;
    }

#search-wrap {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

#search {
    width: 100%;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 6px 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

    #search:focus {
        border-color: var(--gold-dim);
    }

    #search::placeholder {
        color: var(--text-dim);
    }

#nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 16px;
}

    #nav::-webkit-scrollbar {
        width: 4px;
    }

    #nav::-webkit-scrollbar-track {
        background: transparent;
    }

    #nav::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 2px;
    }

    .nav-item {
    display: block;
    padding: 7px 16px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border-left: 2px solid transparent;
    text-transform: uppercase;
    user-select: none;
}

    .nav-item:hover {
        color: var(--gold);
        background: rgba(200, 146, 42, 0.05); /* Adding that subtle "glow" we like */
        padding-left: 24px; /* Shifting text slightly to the right for interaction */
    }

    .nav-item.active {
        color: var(--gold);
        background: rgba(200, 146, 42, 0.08); /* Making the glow a bit more intense here */
        border-left: 3px solid var(--gold); /* Adding a solid gold border on the left side */
        font-weight: 600; /* Making the font bolder to show its importance */
    }

.nav-divider {
  padding: 16px 16px 8px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold-dim);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(138, 108, 63, 0.1);
  margin-bottom: 4px;
}

#odd-count {
    margin: 0 12px 8px;
    background: var(--accent-red);
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 11px;
    color: #e8c4c4;
    cursor: pointer;
    user-select: none;
}

    #odd-count:hover {
        opacity: 0.85;
    }

/* ── MAIN PANE ── */
#main {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    position: relative;
}

    #main::-webkit-scrollbar {
        width: 6px;
    }

    #main::-webkit-scrollbar-track {
        background: transparent;
    }

    #main::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 3px;
    }

#content {
    padding: 48px 56px 80px;
    max-width: 860px;
}

#loading {
    display: none;
    padding: 48px 56px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--text-dim);
    text-transform: uppercase;
}

#search-no-results {
    display: none;
    padding: 48px 56px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* ── SECTION CONTENT STYLES ── */

.section-badge {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 4px;
    color: var(--teal);
    text-transform: uppercase;
    margin-bottom: 8px;
}

h1.section-title {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--gold);
    line-height: 1.2;
    margin-bottom: 6px;
}

.section-meta {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

h2 {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--gold-dim);
    margin: 36px 0 12px;
    letter-spacing: 0.5px;
}

h3 {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--gold-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 24px 0 8px;
}

p {
    margin-bottom: 14px;
}

ul, ol {
    padding-left: 20px;
    margin-bottom: 14px;
}

li {
    margin-bottom: 4px;
}

.sep {
    border: none;
    border-top: 1px solid var(--border);
    margin: 32px 0;
}

strong, b {
    font-weight: 600;
}

/* ── CALLOUTS ── */
.callout {
    background: var(--bg-3);
    border-left: 3px solid var(--gold);
    padding: 14px 18px;
    margin: 20px 0;
    font-style: italic;
    color: var(--text-bright);
    font-size: 16px;
    line-height: 1.6;
}

    .callout.teal {
        border-left-color: var(--teal);
        font-style: normal;
    }

    .callout.red {
        border-left-color: var(--accent-red);
        font-style: normal;
        color: #e8c4c4;
    }

    .callout.design {
        border-left-color: var(--amber);
        font-style: normal;
        color: var(--text);
    }

/* ── CARDS ── */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0;
}

.card {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px 18px;
}

    .card h4 {
        font-family: 'Cinzel', serif;
        font-size: 11px;
        letter-spacing: 2px;
        color: var(--gold);
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .card p {
        font-size: 15px;
        margin-bottom: 0;
    }

/* ── TABLES ── */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 15px;
}

th {
    background: var(--bg-3);
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gold-dim);
    text-transform: uppercase;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: var(--bg-3);
}

/* ── TAGS ── */
.tag {
    display: inline-block;
    background: var(--tag-bg);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 1px 7px;
    font-size: 11px;
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin: 2px 3px 2px 0;
}

    .tag.gold {
        border-color: var(--gold-dim);
        color: var(--gold);
    }

    .tag.teal {
        border-color: var(--teal-dim);
        color: var(--teal);
    }

    .tag.red {
        border-color: var(--accent-red);
        color: #e8c4c4;
    }

    .tag.locked {
        border-color: var(--gold-dim);
        color: var(--gold);
        background: #1e1a12;
    }

/* ── STATS ── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.stat-card {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 14px;
    text-align: center;
}

    .stat-card .stat-val {
        font-family: 'Cinzel', serif;
        font-size: 22px;
        color: var(--gold);
        display: block;
        margin-bottom: 4px;
    }

    .stat-card .stat-label {
        font-size: 11px;
        color: var(--text-dim);
    }

/* ── VOICE BLOCKS ── */
.voice-block {
    border-left: 3px solid var(--border);
    padding: 10px 16px;
    margin: 12px 0;
}

    .voice-block.brea {
        border-color: var(--teal);
    }

    .voice-block.fenn {
        border-color: #7a5030;
    }

    .voice-block.nyra {
        border-color: var(--text-dim);
    }

.voice-label {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.voice-block.brea .voice-label {
    color: var(--teal);
}

.voice-block.fenn .voice-label {
    color: #c07848;
}

.voice-block.nyra .voice-label {
    color: var(--text-dim);
}

/* ── PSYCHE BAR ── */
.psyche-bar {
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, #7a2222 0%, #3a2a18 35%, #1a2a2a 50%, #2d5856 65%, #1a2a2a 85%, #3a2a18 100%);
    border-radius: 4px;
    margin: 8px 0 4px;
}

.psyche-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-dim);
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
}

/* ── ODD ITEMS ── */
.odd-item {
    background: var(--bg-3);
    border: 1px solid var(--accent-red);
    border-radius: 4px;
    padding: 14px 16px;
    margin: 10px 0;
}

.odd-id {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: #e8c4c4;
    margin-bottom: 4px;
}

.odd-title {
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 4px;
}

.odd-context {
    font-size: 14px;
    color: var(--text-dim);
}

/* ── MISC ── */
code {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--teal);
}

.deprecated {
    text-decoration: line-through;
    color: var(--text-dim);
}

mark {
    background: #4a3a10;
    color: var(--gold);
    border-radius: 2px;
    padding: 0 2px;
}

/* ── SECTION NAV ── */
.section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

    .section-nav a {
        font-family: 'Cinzel', serif;
        font-size: 9px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--text);
        text-decoration: none;
        border: 1px solid var(--gold-dim);
        border-radius: 999px;
        background: var(--bg-3);
        padding: 5px 14px;
        transition: color 0.15s, border-color 0.15s;
    }

        .section-nav a:hover {
            color: var(--gold);
            border-color: var(--gold);
            background: var(--bg-2);
        }

/* ── IMAGES ── */

/* Full width — text above and below, no wrapping */
.wiki-image {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 3px;
    border: 1px solid var(--border);
    margin: 24px auto 8px;
}

/* Float left — text wraps to the right */
.wiki-image-left {
    float: left;
    width: clamp(200px, 30%, 380px);
    height: auto;
    border-radius: 3px;
    border: 1px solid var(--border);
    margin: 4px 24px 16px 0;
}

/* Float right — text wraps to the left */
.wiki-image-right {
    float: right;
    width: clamp(200px, 30%, 380px);
    height: auto;
    border-radius: 3px;
    border: 1px solid var(--border);
    margin: 4px 0 16px 24px;
}

/* Caption — use beneath any image variant */
.wiki-image-caption {
    display: block;
    text-align: center;
    
    /* 1. Using the official body font from your guide */
    font-family: 'Crimson Pro', serif; 
    
    /* 2. Professional size & style */
    font-size: 14px; 
    font-style: italic; /* Traditional "note" look for captions */
    line-height: 1.5;
    
    /* 3. Color & Spacing */
    color: var(--text-dim); /* Muted color to keep focus on the image */
    margin: 4px auto 32px auto; /* 4px on top to stay close to icons */
    max-width: 600px;
}

/* Clear — place after a float image block to resume full-width flow */
.wiki-image-clear {
    clear: both;
}

/* ── LIGHTBOX ── */

/* AC edition of Lightbox to CSS 06-04-2026*/
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

    #lightbox.open {
        display: flex;
    }

    #lightbox img {
        max-width: 90vw;
        max-height: 90vh;
        border-radius: 4px;
        border: 1px solid var(--border);
        box-shadow: 0 0 60px rgba(0,0,0,0.8);
    }

#lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-dim);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

    #lightbox-close:hover {
        color: var(--gold);
    }

/* ── SEARCH RESULTS ── */
#search-results {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-base);
    z-index: 10;
    overflow-y: auto;
    padding: 48px 56px 80px;
    max-width: 860px;
}

    #search-results h2 {
        font-family: 'Cinzel', serif;
        font-size: 13px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold-dim);
        margin-bottom: 24px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }

.search-result {
    margin-bottom: 24px;
    padding: 16px 18px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .search-result:hover {
        border-color: var(--gold-dim);
    }

.search-result-section {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 4px;
}

.search-result-heading {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--gold);
    margin-bottom: 8px;
}

.search-result-excerpt {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.6;
}

    .search-result-excerpt mark {
        background: #4a3a10;
        color: var(--gold);
        border-radius: 2px;
        padding: 0 2px;
    }

#search-results-count {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 28px;
}
/* ── SEASONAL CARDS (Horizontal Lock) ── */
/* 
   Container: 
   We use flex-nowrap to force all 4 icons to stay in a single horizontal line. 
*/
.seasonal-grid {
    display: flex;
    flex-direction: row;      /* Keep them in a row */
    flex-wrap: nowrap;        /* DO NOT allow them to jump to the next line */
    justify-content: center;   /* Center them horizontally */
    gap: 8px;                 /* Tight gap so they stay close to each other */
    margin: 40px auto 0 auto;
    padding: 0;
    width: 100%;              /* Take full available width */
    max-width: 720px;         /* Limit total width so they don't spread too far */
}

/* 
   Individual Card: 
   flex: 1 1 0; allows each card to shrink as much as needed to fit.
*/
.seasonal-card {
    flex: 1 1 0;              /* Grow and shrink equally to fit the row */
    min-width: 0;             /* Crucial: allows flex items to shrink below content size */
    background: transparent;
    border-radius: 10px;
    padding: 4px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect: Subtle scale up */
.seasonal-card:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(200, 146, 42, 0.15);
}

/* Image scaling: The image will shrink automatically within the card */
.seasonal-card-image {
    width: 100%;              /* Image scales with the card's width */
    max-width: 140px;         /* Prevents images from being too big on large screens */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Labels */
.seasonal-card-label {
    margin-top: 10px;
    font-family: 'Cinzel', serif;
    font-size: 10px;          /* Slightly smaller font to fit tight spaces */
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold-dim);
    transition: color 0.3s ease;
    white-space: nowrap;      /* Prevent text from wrapping to 2 lines */
}

.seasonal-card:hover .seasonal-card-label {
    color: var(--gold);
}