/* ==========================================================================
   KEN UNIFIED STYLESHEET
   ========================================================================== */

/* ==========================================================================
   ROOT VARIABLES (from root.css)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');

:root {
    --font-main: 'Inter', sans-serif;
    --font-accent: 'VT323', monospace;
    /*--color-neutral-surface: #f0f0f0;
    --color-neutral-surface: #e0e0e0;
    --color-surface: #ffffff;
    --color-text: #222222;
    --color-supplementary-text: rgb(102, 102, 102, 0.75);
    --color-border: #999999;
    --color-top: rgb(31, 119, 180);      Dark Blue: #1f77b4 
    --color-lt-blue: rgba(31, 119, 180, 0.4);
    --color-bg-blue-opaque: rgba(31, 119, 180, 0.9);

    --color-highlight-pink: rgb(227, 119, 194);   Dirty Pink: #e377c2 
    --color-bg-pink: rgba(227, 119, 194, 0.5);
    --color-lt-pink: rgba(227, 119, 194, 0.4);

    --color-highlight-gold: rgb(255, 127, 14);     Orange: #ff7f0e
    --color-bg-gold: rgba(255, 127, 14, 0.5);
    --color-lt-gold: rgba(255, 127, 14, 0.4);
    --color-dark-gold: rgb(214, 107, 11);           Darker Orange 

    --color-accent: rgb(44, 160, 44);      Chartreuse: #2ca02c 
    --color-bg-teal: rgba(44, 160, 44, 0.5);
    --color-lt-teal: rgba(44, 160, 44, 0.4);

      This one is extra, from the D3 bright blue, for wikilinks 
    --color-highlight-cyan: rgb(23, 190, 207);     /* Bright Blue: #17becf */

    /* COLOR VARIABLES are now injected by ThemeManagerPlugin in the HTML head.
       Expected variables:
       --color-neutral-surface, --color-neutral-surface-rgb
       --color-background-surface, --color-background-surface-rgb
       --color-text, --color-text-rgb
       --color-base, --color-base-rgb
       --color-top, --color-top-rgb
       --color-accent, --color-accent-rgb
    */
    
    /* Semantic Mappings for UI components */
    --color-border: rgba(var(--color-background-surface-rgb), 0.9);
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-link: var(--color-base);
    --color-link-hover: var(--color-base);
    
    /* Derived Opacities for Backgrounds */
    --bg-base-weak: rgba(var(--color-base-rgb), 0.1);
    --bg-base-strong: rgba(var(--color-base-rgb), 0.9);
    --bg-top-weak: rgba(var(--color-top-rgb), 0.1);
    --bg-accent-weak: rgba(var(--color-accent-rgb), 0.1);
    --bg-base-shadow: rgba(var(--color-base-rgb), 0.4);
    --bg-top-shadow: rgba(var(--color-top-rgb), 0.4);
    --bg-accent-shadow: rgba(var(--color-accent-rgb), 0.4);


    --font-size-base: 18px;
    --font-size-h1: calc(var(--font-size-base) * 1.6 * 1.25);
    --font-size-h2: calc(var(--font-size-base) * 1.25);
    --font-size-h3: 1rem;
    --spacing-unit: 10px;
    --border-width: 1px;
    --border-radius: 3px;
    --grid-col-width: 300px;
    --grid-gap: calc(3.625 * var(--spacing-unit)); /* 36.25px */
}
@media (max-width: 600px) { 

    :root { --font-size-base: 16px; /*! flex-direction: column; */}

}

/* ==========================================================================
   GLOBAL STYLES & RESETS (from mac_theme.css)
   ========================================================================== */

body {
    font-family: var(--font-main);
    font-size: calc(var(--font-size-base) * 0.8);
    color: var(--color-text);
    line-height: calc(var(--font-size-base) * 1);
    background-color: var(--color-neutral-surface);
    background-image: linear-gradient(45deg, var(--color-neutral-surface) 25%, transparent 25%, transparent 75%, var(--bg-accent-weak) 75%),
                      linear-gradient(45deg, var(--color-background-surface) 25%, transparent 25%, transparent 75%, var(--color-neutral-surface) 75%);
    background-size: 1px 1px;
    background-position: 0 0, 2px 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: calc(var(--spacing-unit) * 1.6);
}
h1 { font-size: var(--font-size-h1); }
main > h1 { margin: 0; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

a {
    color: var(--color-base);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-accent);
    overflow-wrap: break-word; /* Ensure long links break */
    word-wrap: break-word; /* For older browsers */
    max-width: 100%; /* Prevent links from overflowing their container */ 
}
a:hover {
    background-color: var(--color-base);
    color: var(--color-top);
}
a.wikilink-new {
    color: var(--color-top);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-accent);
}
/* ==========================================================================
   DIGITAL PATINA: The Semantic Highlighter
   ========================================================================== */

/* TIER 3: THE HIGHLIGHTER (Top 3-5 Links)
   Uses --color-accent as a transparent background.
   Safe because text is usually --color-base or --color-top.
*/
a.patina-highlight {
    /* 20% opacity Accent color creates a "marker" effect */
    background-color: rgba(var(--color-accent-rgb), 0.2);
    
    /* Solid underline in the same color reinforces the meaning */
    border-bottom: 2px solid var(--color-accent);
    
    /* Slight bold to make it pop */
    font-weight: 700;
    
    /* Tiny padding prevents the color from looking cramped */
    padding: 0 3px;
    border-radius: 2px;
}

/* Hover: Flatten to standard link behavior */
a.patina-highlight:hover {
    background-color: var(--color-base) !important;
    color: #fff !important;
    border-color: var(--color-base);
}


/* TIER 2: VISITED (Standard)
   The "Desire Path". Just a solid border.
*/
a.patina-visited {
    border-bottom: 1px solid var(--color-border);
}


/* TIER 0: UNUSED (Fresh/Cold)
   We use a dotted line to suggest "connection not fully formed".
   We do NOT change color, to avoid conflict with "New Wikilink" (Red).
*/
a.patina-unused {
    border-bottom: 1px dotted var(--color-border);
    opacity: 0.85; /* Subtle push-back */
}

a.patina-unused:hover {
    opacity: 1.0;
    border-bottom: 1px solid var(--color-base);
}


/* ==========================================================================
   CORE RESPONSIVE LAYOUT
   ========================================================================== */

/* --- Mobile First --- */
header {
    width: 100%;
    box-sizing: border-box;
    display: flex; /* ADD THIS */
    flex-direction: column;
    justify-content: space-between; /* ADD THIS to push site name left, utility nav right */
    align-items: center; /* ADD THIS to vertically align items */
    padding: 0; /* ADD/ADJUST PADDING as needed */
    gap: var(--spacing-unit); 
}
header .header-utility-nav { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: var(--spacing-unit); 
}
/* Footer rule remains separate if it was */
footer {
    width: 100%;
    box-sizing: border-box;
}
footer p { margin: 0; padding: 0; }


/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* --- Main Page Container --- */
.site-grid-container {
    background-color: rgba(var(--color-neutral-surface-rgb),0.9);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 calc(var(--spacing-unit) / 2) calc(var(--spacing-unit) * 2) var(--color-shadow);
    padding: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 1);
    margin-bottom: calc(var(--spacing-unit) * 1);
    opacity: 1;
}


/* ==========================================================================
   THE LIVING SPECTROGRAM (Logo)
   ========================================================================== */

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 1. Main Container */
.logo-container {
    position: relative;
    /*! border-radius: var(--border-radius); */
    overflow: hidden; 
    background: var(--color-neutral-surface);
    /*! border: 1px solid var(--color-border); */
    min-width: 280px; 

    /* Ensure the cursor indicates interactivity */
    cursor: auto;
}

/* 2. The Data Layer (Spectrogram) */
.logo-spectrogram {
    position: absolute;
    inset: 0; 
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; 
    /* Ensure the blend modes interact with the white background */
    background-color: #fff;
}

.spectrogram-bar {
    height: 100%;
    opacity: 0.6; /* Higher opacity so the blend mode has fuel to work with */
    
    /* THE STAGGER EFFECT */
    /* Pull each bar left to overlap the previous one */
    margin-left: -20px;
    
    /* THE BLEND EFFECT */
    /* Multiply creates darker 'intersection' colors where bars overlap */
    mix-blend-mode: normal;
    
    /* Skew it slightly for a more dynamic 'data stream' look */
    /*! transform: skewX(-10deg); */
    
    /*! transition: opacity 0.2s ease, transform 0.2s ease; */
}

/* Ensure the first bar isn't pulled off-screen */
.spectrogram-bar:first-child {
    margin-left: -10px; /* Slight bleed for consistency */
}

/* On hover, slightly separate them to reveal distinct strands? 
   Or just intensify. Let's intensify. */
.logo-container:hover .spectrogram-bar {
    opacity: 0.7 !important;
}

.logo-container:hover .spectrogram-bar:hover {
    opacity: 1.0 !important;    
}

.logo-container a:hover { 
    background-color: transparent; 
}

/* 3. Foreground Layer (Text) */
.logo-link {
    position: relative;
    z-index: 10; /* Must be above bars */
    display: block;
    text-decoration: none;
    border: none;
    padding: 10px 20px;
}

.logo-title {
    font-family: var(--font-main);
    font-weight: 900;
    font-size: 2.5rem; 
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--color-neutral-surface);
    text-transform: uppercase;
    /* Strong white shadow to lift text off the busy data background */
    /*! text-shadow: 2px 2px 0px #ffffff, -1px -1px 0 #ffffff; */
    /* Or use blend mode difference for avant-garde look? 
       Let's stick to readable. */
}

/* 4. The Ghost Probe (Floating Tooltip) */
.logo-probe {
    display: none; /* Hidden until JS triggers it */
    position: fixed; /* Fixed allows it to escape overflow:hidden of parent */
    pointer-events: none; /* Don't block clicks */
    z-index: 1000;
    
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: var(--font-accent);
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    /* Slight offset from cursor */
    transform: translate(15px, 15px);
}

.logo-probe strong {
    color: var(--color-accent);
    text-transform: uppercase;
}

/* 5. Controls (Side Buttons) */
.logo-controls {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.control-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    color: var(--color-supplementary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.control-item:hover {
    background: var(--color-background-surface);
    border-color: var(--color-border);
    color: var(--color-text);
    transform: scale(1.1);
}

/* Tooltip Styling (Legend) */
.tooltip-trigger { position: relative; }
.logo-tooltip {
    display: none; 
    position: absolute;
    top: 50%; left: 100%; transform: translateY(-50%);
    margin-left: 12px;
    background: var(--color-neutral-surface);
    border: 1px solid var(--color-border);
    padding: 12px;
    width: 220px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text);
    z-index: 1000;
}
.tooltip-trigger:hover .logo-tooltip,
.tooltip-trigger:focus .logo-tooltip { display: block; }

.logo-tooltip ul { list-style: none; padding: 0; margin: 5px 0 0 0; }
.logo-tooltip li { margin-bottom: 6px; display: flex; align-items: center; }

/* Legend Graphics */
.dot-width { display: inline-block; width: 14px; height: 6px; background: #999; margin-right: 8px; border-radius: 2px;}
.dot-color { display: inline-block; width: 10px; height: 10px; background: linear-gradient(45deg, var(--color-top), var(--color-accent)); margin-right: 8px; border-radius: 50%; }
.dot-opacity { display: inline-block; width: 10px; height: 10px; background: #999; opacity: 0.3; margin-right: 8px; border-radius: 50%; }
.dot-overlap { display: inline-block; width: 16px; height: 10px; background: linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,0,255,0.5)); margin-right: 8px; border-radius: 2px; }
.dot-sound { display: inline-block; width: 10px; height: 10px; border: 2px solid #999; border-radius: 50%; margin-right: 8px; }


/* ==========================================================================
   MOBILE & COMPACT HEADER FIXES (Max Width: 874px)
   ========================================================================== */

@media (max-width: 874px) {
    
    /* 1. HEADER CONTAINER layout */
    header {
        /* Stack the Logo and Utility Nav vertically */
        flex-direction: column;
        align-items: stretch; /* Force full width */
        padding: var(--spacing-unit);
        gap: var(--spacing-unit);
    }

    /* 2. LOGO WRAPPER (Logo + Controls) */
    .logo-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px; /* Reduce gap */
    }

    /* 3. LOGO CONTAINER (The "Chip" / Spectrogram) */
    .logo-container {
        /* CRITICAL: Allow shrinking below the desktop 280px min-width */
        min-width: 0; 
        flex-grow: 1; /* Take up all space not used by controls */
    }

    .logo-link {
        /* Reduce internal padding */
        padding: 8px 12px; 
    }

    .logo-title {
        /* Smaller font size to prevent text overflow */
        font-size: 1.75rem; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* ... if title is still too long */
    }

    /* 4. LOGO CONTROLS (Play/Info Buttons) */
    .logo-controls {
        flex-shrink: 0; /* Never squash these buttons */
        margin-left: auto; /* Push firmly to the right */
    }

    /* 5. UTILITY NAV (Search + Login) */
    .header-utility-nav {
        display: flex;
        flex-direction: column-reverse; /* Put Search on top of Login for mobile thumb access? Or just column. Let's stick to column. */
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .header-utility-nav .site-actions {
        justify-content: center; /* Center links (Login/Admin) */
        font-size: 0.85rem;
    }

    /* 6. SEARCH BAR (Fixing the "Swallowed Button") */
    .header-utility-nav .nav-search-form {
        display: flex;
        width: 100%; /* Force full width */
        max-width: none; /* Remove any desktop constraints */
        box-sizing: border-box;
    }

    .header-utility-nav .nav-search-input {
        flex-grow: 1;    /* Expand to fill space */
        flex-shrink: 1;  /* Allow shrinking */
        min-width: 0;    /* CRITICAL for Flexbox: allows shrinking below content size */
        width: 100%;     /* Fallback */
    }

    .header-utility-nav button.nav-search-button {
        flex-shrink: 0;  /* Never squash the search icon */
        padding: 8px 12px; /* Ensure touch target is clickable */
    }
}

/* --- Flash Messages (from messages.css) --- */
.flash-messages {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 100%;
    max-width: 350px;
    z-index: 1050;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.flash-messages li {
    position: relative;
    font-family: var(--font-mono);
    padding: 1rem 2.5rem 1rem 1.5rem;
    margin-bottom: 1rem;
    border: 1px dotted;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out;
}
/* Success -> Accent (Greenish) */
.flash-messages .success { 
    background-color: var(--bg-accent-weak); 
    border-color: var(--color-accent); 
    color: var(--color-accent); 
}
/* Error -> Top (Pinkish/Reddish) */
.flash-messages .error { 
    background-color: var(--bg-top-weak); 
    border-color: var(--color-top); 
    color: var(--color-top); 
}
/* Info -> Base (Blueish) */
.flash-messages .info { 
    background-color: var(--bg-base-weak); 
    border-color: var(--color-base); 
    color: var(--color-base); 
}
.flash-dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: bold;
    color: inherit;
    opacity: 0.4;
    cursor: pointer;
    padding: 0;
}
.flash-dismiss:hover { opacity: 0.8; }

.consent-banner {
    position: fixed; bottom: 1rem; left: 1rem; right: 1rem;
    background-color: var(--bg-base-strong); 
    border: 1px solid var(--color-base); 
    color: var(--color-neutral-surface);
    border-radius: var(--border-radius); padding: 1rem; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 -2px 10px var(--color-shadow); flex-wrap: wrap; gap: 10px;
}
.consent-banner p { margin: 0; }
.consent-banner form {
    display: flex;
    gap: 10px;
    flex-direction: row;
}
.consent-banner button {
    padding: 5px 10px;
}


/* Buttons */
button, .button-primary, .button-secondary, .button-danger {
    font-family: var(--font-main); font-weight: bold;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    font-size: 0.9rem; text-decoration: none; cursor: pointer;
    transition: all 0.1s ease-in-out;
    background-color: var(--color-background-surface);
    color: var(--color-text);
}
button:hover {
    background-color: var(--color-top); /* Hover is Top Color */
    border-color: var(--color-top);
    color: var(--color-neutral-surface);
}

.button-primary {
    background-color: var(--color-base);
    color: var(--color-neutral-surface);
    border-color: var(--color-base);
}
.button-primary:hover {
    background-color: var(--color-text);
    border-color: var(--color-text);
}

.button-danger {
    background-color: var(--color-top);
    color: var(--color-neutral-surface);
    border-color: var(--color-top);
}


/* --- Cluster lists -- */ 

.cluster-list { 
    list-style-type: "- "; 
    margin: 0; 
    padding-left: calc(var(--spacing-unit) * 1.6); 
}




/* --- Compact Snippet Box --- */
.snippet-list {
    display: grid;
    grid-template-columns: 1fr; /* Single column snippets by default */
    gap: calc(0.625*var(--spacing-unit));
}
.snippet-box {
    height: 200px;
    display: flex;
    position: relative;
    background-color: var(--color-neutral-surface);
    background-size: cover;
    background-position: center;
    border: var(--border-width) solid #ddd;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out;
}
.snippet-box:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.15); }

.snippet-box-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.625em;
    position: relative;
    z-index: 2;
}
.snippet-box h3, .snippet-box p {
    margin: 0;
    padding: 0;
    line-height: 1.3;
}
.snippet-box h3 a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: none;
    font-size: 1.05em;
    /*! white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}
.snippet-box h3 a:hover {
    background-color: transparent;
    color: var(--color-highlight-pink);
}
.snippet-box .snippet-text {
    font-size: 0.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.snippet-meta, .snippet-slugline {
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    padding-top: 0.625em;
    border-top: 1px solid #eee;
}
.snippet-slugline {
    justify-content: left;
    border-top: none;
    margin-top: 0;
    margin-bottom: auto;
    padding-top: 0;
    padding-bottom: 0; 
}
.snippet-slugline .snippet-nslabel { font-weight: bold; }

.snippet-slugline p:first-child::after { content: "  "; padding-right: 0.5em; }  
.snippet-slugline p:last-child::after { content: ""; padding-right: 0.2em; }  
                                         
.snippet-box[style*="background-image"] .snippet-meta { border-top: 1px solid rgba(255, 255, 255, 0.2); }

.snippet-box[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(var(--color-neutral-surface-rgb), 0.9);
    z-index: 1;
}
.snippet-box[style*="background-image"] h3 a,
.snippet-box[style*="background-image"] p {
    color: var(--color-text);
    border-bottom: none;
}
.snippet-box.has-gradient-bg h3 a,
.snippet-box.has-gradient-bg p {
    color: var(--color-text);
    text-shadow: none;
}
.gradient-base-top { background: linear-gradient(45deg, var(--color-base), var(--color-top)); }
.gradient-top-accent { background: linear-gradient(135deg, var(--color-top), var(--color-accent)); }
.gradient-accent-base { background: linear-gradient(45deg, var(--color-accent), var(--color-base)); }


.content-main {
    flex: 1; /* Takes up all available space */
    min-width: 0; /* Prevents flex overflow */
}

/* Defines the width for all major aside sections */
.page-analysis,
.page-relationships,
.recent-activity {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}
.dashboard-section { 
    margin-bottom: 1.5rem; 
    padding-top: 0.5rem;
    border-top: 1px dotted var(--color-border);
}
.page-keywords { 
    display: flex; flex-wrap: wrap; gap: calc(0.1625*var(--spacing-unit)); 
}
.keyword-tag { 
    display: inline-block; margin: 2px; padding: 2px 5px; 
    background: var(--color-neutral-surface); border-radius: 3px; 
    text-decoration: none; border-bottom: none; 
}
.keyword-tag:hover { 
    background-color: var(--color-neutral-surface); 
}
.topic-list { 
    list-style: none; padding: 0;  
}
.topic-list li { 
    margin-bottom: 10px; 
}
.topic-percentage { 
    font-weight: bold; 
}
.topic-percentage::after { 
    content: ": "; 
}
.topic-keywords { 
    margin-top: 5px; 
}
#plot-tooltip { 
    position: absolute; opacity: 0; background: #fff; 
    border: 1px solid #ccc; padding: 5px; 
    border-radius: 3px; pointer-events: none; z-index: 10; 
}

/* --- NEW Compact Snippet List (100px media box) --- */
.compact-snippet-list { 
    list-style: none; padding: 0; margin: 0; 
    display: flex; flex-direction: column; gap: calc(0.625*var(--spacing-unit)); 
}
.compact-snippet-item { 
    display: flex; border: 1px solid var(--color-neutral-surface); 
    border-radius: var(--border-radius); overflow: hidden; 
    transition: box-shadow 0.2s ease-in-out; position: relative; 
    height: 100px; background-size: cover; background-position: center; 
}
.compact-snippet-item:hover { box-shadow: 0 2px 5px var(--color-shadow); }
.compact-snippet-item.has-image-bg::before { 
    content: ''; position: absolute; inset: 0; 
    background-color: rgba(0, 0, 0, 0.5); z-index: 1; 
}
.compact-snippet-link { 
    display: flex; flex-direction: column; justify-content: space-between; 
    height: 100%; width: 100%; padding: 8px 12px; text-decoration: none; 
    border-bottom: none; color: var(--color-text); position: relative; z-index: 2; 
}
.compact-snippet-link:hover { background-color: transparent; }
.compact-snippet-slugline { 
    display: flex; gap: calc(0.625*var(--spacing-unit)); font-size: 0.8em; 
    color: var(--color-supplementary-text); text-shadow: none; 
}
.compact-snippet-slugline .snippet-nslabel { font-weight: bold; }
.compact-snippet-title { 
    font-weight: bold; line-height: 1.3; color: var(--color-text); 
    text-shadow: none; display: -webkit-box; -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; 
}
.compact-snippet-meta { 
    font-size: 0.85em; color: var(--color-supplementary-text); 
    text-shadow: none; margin-top: auto; 
}
.has-image-bg .compact-snippet-link, 
.has-image-bg .compact-snippet-slugline, 
.has-image-bg .compact-snippet-slugline .snippet-nslabel, 
.has-image-bg .compact-snippet-slugline .snippet-doctype, 
.has-image-bg .compact-snippet-title, 
.has-image-bg .compact-snippet-meta { 
    color: #fff; 
}
.has-image-bg .compact-snippet-link:hover .compact-snippet-title { 
    color: #fff; text-decoration: underline; 
}

/* --- NEW Simple List Item (Default Compact) --- */
.simple-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: calc(0.625*var(--spacing-unit));
}

.simple-list-item a {
    display: block;
    padding: 0;
    border-bottom: none;
    text-decoration: none;
    border-radius: var(--border-radius);
}

.simple-list-item-title {
    font-weight: bold;
    color: var(--color-text);
    line-height: 1.3;
}

.simple-list-item-meta {
    font-size: 0.85em;
    color: var(--color-supplementary-text);
}


/* ==========================================================================
   REFERENCE LIST (PANDOC)
   ========================================================================== */
/*
  Styles the bibliography section generated by Pandoc.
*/
.references {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: calc(var(--spacing-unit) * 3);
    padding-top: calc(var(--spacing-unit) * 1.6);
    border-top: 1px dotted var(--color-border);
}

.references h2 {
    font-size: var(--font-size-h3); /* Make the "References" title a bit smaller */
    margin-bottom: var(--spacing-unit);
}

/* This creates the hanging indent for each reference entry.
  The first line is pulled left by text-indent, and the entire block
  is pushed right by padding-left, aligning subsequent lines correctly.
*/
.references .csl-entry {
    text-indent: -2em;
    padding-left: 2em;
    margin-bottom: var(--spacing-unit); /* Adds space below each entry */
}


/* ==========================================================================
   BASIC TABLE STYLES
   ========================================================================== */
/*
  Styles for standard <table> elements within the main content area.
*/
.content table {
    width: 100%;
    margin: calc(var(--spacing-unit) * 2) 0;
    border-collapse: collapse; /* Ensures borders are clean and single-lined */
    font-size: 0.9em;
    table-layout: fixed; /* Force fixed table layout */
}

.content th,
.content td {
    padding: var(--spacing-unit);
    /* As requested: top and left alignment */
    text-align: left;
    vertical-align: top;
    /* A subtle border for readability, consistent with other site elements */
    border-bottom: 1px dotted var(--color-border);
    width: auto; /* Allow auto-sizing, or specify percentages for control */
    overflow-wrap: break-word; /* Ensure long words break */
    word-break: break-word; /* For older browsers and better cross-browser support */
}

.content th {
    font-weight: bold;
    background-color: var(--color-neutral-surface);
    /* A stronger border to separate the header from the body */
    border-bottom: 2px solid var(--color-border);
}

/* Optional: Removes the border from the last row for a cleaner finish */
.content tr:last-child td {
    border-bottom: none;
}
@media (max-width: 899px) {
  .content table {
    display: block;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; /* Provides smoother scrolling on iOS devices */
  }
}



.standfirst {
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--color-supplementary-text);
    padding-bottom: calc(var(--spacing-unit) * 1.6);
    border-bottom: 1px dotted var(--color-border);
    margin-bottom: 0;
}
.page-metadata, .page-actions, .page-doctype {
    color: var(--color-supplementary-text);
    font-size: 0.9rem;
    list-style: none;
    padding: calc(var(--spacing-unit) * 1.6) 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dotted var(--color-border);
}
.page-doctype {
    border-bottom: none;
    padding: 0;
    padding-bottom: var(--spacing-unit);
}
.page-doctype a {
    color: inherit;
    border-bottom: none; 
}
.page-doctype .nslabel {font-weight: bold;}
.page-doctype .nslabel::after { content: " "; padding-right: 0.5em; }   
.page-metadata p, .page-actions p, .page-doctype p { margin: 0; color: var(--color-supplementary-text); }
.page-metadata li, .page-actions li { margin-right: calc(var(--spacing-unit) * 1/1.6); }

button {
    font-family: var(--font-main);
    font-weight: bold;
    background-color: var(--color-neutral-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
button:hover {
    background-color: var(--color-accent);
    border-color: var(--color-text);
}

.main-image-container {
    width: 100%;
    margin: 1em auto 1.5em auto;
}
.main-image-container img {
    width: 100%;
    height: auto;
    display: block;
}
.main-image-container figcaption {
    font-size: 0.8em;
    color: var(--color-supplementary-text);
}
.main-image-container .caption { 
    display: inline; 
}
.main-image-container .image-credits { list-style-type: none; display: inline; margin: 0; padding: 0;}
.main-image-container .image-credits::before { content: "("}
.main-image-container .image-credits::after { content: ")"}
.main-image-container .image-credits li { display: inline; list-style-type: none; }
.main-image-container .image-credits li:not(:first-child)::before { content: ", "; }

.media-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.media-item {
    width: 200px;
    max-width: 200px;
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.media-item img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
    .main-image-container.portrait,
    .main-image-container.square {
        width: 48%;
        float: right;
        margin-left: 1.5em;
        margin-top: 0.5em;
    }
    .content::after {
        content: "";
        display: table;
        clear: both;
    }
}



/* ==========================================================================
   KEN ADMIN & FUNCTIONAL PAGE STYLES
   ========================================================================== */

/* ==========================================================================
   1. FORMS (Create Page, Search)
   ========================================================================== */
form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
}
input[type="text"],
input[type="search"] {
    font-family: var(--font-main);
    font-size: 1.2rem;
    padding: var(--spacing-unit);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-neutral-surface);
    color: var(--color-text);
}
input[type="text"]:focus,
input[type="search"]:focus {
    outline: 2px solid var(--color-top);
    border-color: var(--color-top);
}
.search-form {
    flex-direction: row;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.search-form .search-input {
    flex-grow: 1;
}
.search-form .search-button {
    padding: var(--spacing-unit);
    background-color: var(--color-background-surface);
    color: var(--color-neutral-surface);
    border: none;
}
.search-form .search-button:hover {
    background-color: var(--color-text);
}

/* ==========================================================================
   LISTS (Search Results, History, Namespace)
   ========================================================================== */
.results-list,
.revisions,
.namespace-listing ul {
    list-style: none;
    padding: 0;
    margin-top: calc(var(--spacing-unit) * 2);
}
.results-list li,
.revisions li,
.namespace-listing li {
    padding: var(--spacing-unit) 0;
    border-bottom: 1px solid var(--color-neutral-surface);
}
.results-list .result-title {
    font-size: 1.2em;
    font-weight: bold;
}
.results-list .result-url {
    font-size: 0.9em;
    color: var(--color-supplementary-text);
    margin-bottom: 0.5em;
}
.results-list .result-score {
    font-size: 0.8em;
    font-family: var(--font-accent);
    color: var(--color-accent);
}
.revisions .revision-byline {
    margin-left: 1.5em;
    font-size: 0.9em;
    color: var(--color-supplementary-text);
}
.namespace-listing {
    margin-top: calc(var(--spacing-unit) * 2);
}
.namespace-listing ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    gap: calc(var(--spacing-unit) * 2);
}
.namespace-listing a {
    font-family: var(--font-accent);
    font-size: 1.1rem;
}

/* ==========================================================================
   PAGE EDITOR (page_edit.html)
   ========================================================================== */
/* ... existing editor styles ... */
form textarea[name="raw_content"] {
    width: 100%;
    min-height: 60vh;
    font-family: var(--font-accent);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-neutral-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    box-sizing: border-box;
}
.edit-actions {
    display: flex;
    gap: var(--spacing-unit);
    margin-top: var(--spacing-unit);
}
.delete-form {
    margin-top: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--color-border);
}
.button-primary { background-color: var(--color-base); color: white; }
.button-secondary { background-color: #ccc; color: var(--color-text); }
.button-danger { background-color: #c00; color: white; }

/* ==========================================================================
   SYSTEM & ERROR PAGES
   ========================================================================== */
/* ... existing error page styles ... */
.error-container {
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) var(--spacing-unit);
    margin-top: calc(var(--spacing-unit) * 2);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-neutral-surface);
}
.error-container h1 {
    color: #c00;
}
.error-container .actions {
    list-style: none;
    padding: 0;
    margin-top: calc(var(--spacing-unit) * 2);
}
.error-container .error-code {
    margin-top: calc(var(--spacing-unit) * 2);
    font-family: var(--font-accent);
    color: var(--color-supplementary-text);
}



/* ==========================================================================
   SEQUENCE NAVIGATION (Symbolic)
   ========================================================================== */

/* 1. Accessibility class to hide text */
.visually-hidden {
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* Keep it on one line for screen readers */
}

/* 2. The <nav> container */
.sequence-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Pushes outer items to edges */
    align-items: center;
    padding: var(--spacing-unit) 0;
    margin-top: calc(var(--spacing-unit) * 2);
    border-top: 1px dotted var(--color-border);
    font-size: 0.9em;
    gap: 10px; /* Gap between buttons on mobile */
}

/* 3. The <a ...> link styles (as buttons) */
.sequence-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* Standard accessible touch target size */
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-text);
    background-color: var(--color-neutral-surface);
    transition: all 0.2s ease;
}

/* 4. Icon styles */
.sequence-nav .nav-link svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* 5. Hover/Focus states */
.sequence-nav .nav-link:not(.is-disabled):hover,
.sequence-nav .nav-link:not(.is-disabled):focus {
    background-color: var(--color-background-surface);
    color: var(--color-neutral-surface);
    border-color: var(--color-border);
    outline: none;
}

/* 6. Disabled state */
.sequence-nav .nav-link.is-disabled {
    color: var(--color-border);
    background-color: var(--color-neutral-surface);
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
    border-bottom: 1px solid var(--color-border); /* Fix for border-bottom style */
}

.sequence-nav .nav-link.home {
    margin-right: auto; /* Pushes all other buttons to the right */
}


/* Site nav */

.header-utility-nav .site-actions {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Make list items inline */
    gap: var(--spacing-unit); /* Space between individual list items */
    align-items: center; /* Vertically align items */
}

.header-utility-nav .site-actions li {
    margin: 0; /* Remove default li margins */
    padding: 0; /* Remove default li padding */
}

.header-utility-nav .nav-search-form {
    display: flex; /* Keep it flex for input/button alignment */
    flex-direction: row;
    border: 1px solid var(--color-border); /* Use theme border */
    border-radius: var(--border-radius); /* Use theme border-radius */
    overflow: hidden;
    background-color: var(--color-neutral-surface); /* Match header background or choose a contrasting color */
    margin: 0; /* Remove any default margins */
}

.header-utility-nav .nav-search-input {
    border: none;
    padding: 5px 8px; /* Adjust padding for inline fit */
    font-size: 0.9em; /* Keep font size reasonable */
    background: transparent; /* Ensure it doesn't have a conflicting background */
}

.header-utility-nav button.nav-search-button {
    background-color: var(--color-background-surface); /* Use a subtle background */
    border: none;
    padding: 5px 8px; /* Adjust padding */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.header-utility-nav .nav-search-button:hover {
    background-color: var(--color-background-surface);
}
.header-utility-nav .nav-search-button svg {
    fill: var(--color-text); /* Ensure icon color is visible */
}


.header-utility-nav {
    display: flex; /* Show on desktop */
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 1.5); /* Space between nav list and search form */
}

/* Mobile: Hide the site name in the main header, show the one in the sidebar */
.site-grid-container > header .site-name {
    display: block;
    padding-right: var(--spacing-unit);
}



.cluster-visualization img { 

    margin: 0;
    border: var(--border-width) dotted var(--color-supplementary-text);
    border-radius: var(--border-radius);
}




/* ==========================================================================
   PLOT TOOLTIP SNIPPET
   ========================================================================== */
#plot-tooltip {
    /* Override default padding to match card snippet */
    padding: 5px 10px;
    min-width: 200px;
    max-width: 250px; /* Prevent it from getting too wide */
    background: var(--color-neutral-surface);
    box-shadow: 0 2px 5px var(--color-shadow);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}
.plot-tooltip-slugline {
    font-size: 0.8em;
    color: var(--color-supplementary-text);
}
.plot-tooltip-slugline .plot-tooltip-nslabel {
    font-weight: 700;
}
/* Adds the " / " separator */
.plot-tooltip-slugline.has-nslabel .plot-tooltip-doctype::before {
    content: " / ";
    font-weight: 400;
    padding: 0 0.25em;
}
.plot-tooltip-title {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--color-text);
    white-space: normal; /* Override any nowrap */
}
.plot-tooltip-meta {
    font-size: 0.8em;
    color: var(--color-supplementary-text);
    white-space: nowrap;
    margin-top: 4px;
    padding-top: 4px;
}
/* Adds the " / " separator */
.plot-tooltip-meta .meta-author + .meta-date::before {
    content: " / ";
    padding: 0 0.25em;
}

#interactive-plot-container { 
    background-color: var(--color-neutral-surface);
    background-image: linear-gradient(45deg, var(--color-neutral-surface) 25%, transparent 25%, transparent 75%, var(--color-neutral-surface) 75%), linear-gradient(45deg, var(--color-neutral-surface) 25%, transparent 25%, transparent 75%, var(--color-neutral-surface) 75%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    width: 300px; 
}

/* ==========================================================================
   CLUSTER GROUP STYLING
   ========================================================================== */

.cluster-group {
    border: 1px solid var(--color-neutral-surface);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    background: var(--color-neutral-surface);
    /* Add a subtle shadow on hover to lift it */
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease;
}

/* Make the group "pop" a little on hover */
.cluster-group:hover {
     border-color: var(--color-border);
     box-shadow: 0 2px 5px var(--color-shadow);
}

/* Make the cluster headers slightly different from other h2s */
.cluster-group h2 {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-neutral-surface);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.form-group input[type="number"] {
    padding: 8px;
    font-size: 1rem;
    width: 100px;
}


/* ==========================================================================
   SITE ACTIVITY CONTAINER (FLEXBOX)
   ========================================================================== */

.site-activity-container {
    display: none; /* Hide by default */
    width: 100%;
    padding-top: calc(3.625 * var(--spacing-unit));
}

/* Only show on content/home pages */
body:not(.template-edit):not(.template-admin) .site-activity-container {
    display: block;
}

.site-activity-container .site-activity {
    display: flex;
    flex-direction: column; /* Stack vertically */
    flex-wrap: nowrap; /* No wrapping needed for vertical stack */
    gap: var(--grid-gap); /* Use consistent gap */
    width: 100%;
}

/* Make dashboard sections full width in this container */
.site-activity-container .dashboard-section {
    width: 100%;
    max-width: 100%;
    flex-basis: auto;
    box-sizing: border-box;
}

/* --- Cluster Stack Layout --- */
.cluster-stack { 
    display: flex; 
    flex-direction: column; 
    gap: 25px; 
    width: 100%;
}

.cluster-unit {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-neutral-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* --- Header (Meta Snippet) --- */
.cluster-meta-header {
    display: flex; 
    align-items: center; 
    gap: 15px;
    padding: 12px;
    background: var(--color-neutral-surface);
    border-bottom: 1px solid var(--color-neutral-surface);
}

.cluster-spark-icon svg { 
    width: 50px; height: 50px; 
    background: #fff; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    display: block;
}

.cluster-title-block {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cluster-name { 
    font-weight: bold; 
    font-size: 1rem; 
    color: var(--color-text); 
}

.cluster-tags { 
    display: flex; 
    gap: 6px; 
    align-items: center; 
    flex-wrap: wrap; 
    line-height: 1.2;
}

.cluster-type-tag { 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    font-weight: bold; 
    background: #555; 
    color: #fff; 
    padding: 1px 6px; 
    border-radius: 3px; 
}

.cluster-keyword { 
    font-size: 0.85rem; 
    color: var(--color-top); 
    text-decoration: none; 
    border-bottom: 1px dotted var(--color-highlight-pink);
}
.cluster-keyword:hover { 
    background-color: var(--color-top);
    color: #fff;
    border-bottom: none;
}

/* --- Scrollable Member List --- */
ul.cluster-members-scroll {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin: 0;
    list-style: none; /* Remove default bullets */
    overflow-x: auto;
    background-color: #f9f9f9;
    
    /* Nice scrolling behavior */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Target the LI elements directly */
ul.cluster-members-scroll .card-snippet-item {
    min-width: 260px; /* Force card width */
    max-width: 260px;
    height: 90px;     /* Fixed height for uniformity */
    flex-shrink: 0;   /* Prevent squishing */
    margin: 0;        /* Override default margins */
}

/* Adjust internal padding/text for horizontal context */
ul.cluster-members-scroll .card-snippet-content {
    padding: 8px;
}
ul.cluster-members-scroll .card-snippet-title {
    font-size: 0.95rem;
    -webkit-line-clamp: 2; /* Allow 2 lines for title */
}

/* --- 4. NEW Grid Layout (Replaces old grid) --- */
.site-grid-container > header {
    grid-area: site-header;
}
main {
    grid-area: main-content;
    min-width: 0; 
}
.dashboard-sidebar {
    grid-area: dashboard-sidebar;
    min-width: 0; 
}
.site-grid-container > footer {
    grid-area: site-footer;
}
.site-activity-container {
    grid-area: site-activity;
    min-width: 0;
}



/* Default (Narrow/Mobile): Hide complex context */
.stream-context {
    display: none; 
}
.stream-meta {
    font-size: 0.75rem;
}

@container (min-width: 500px) {
    .stream-item {
        padding: 15px;
    }
    .stream-context {
        display: flex; /* Reveal the swimlanes/tags */
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dotted var(--color-neutral-surface);
    }
    .stream-anchor {
        flex-direction: row;
        align-items: baseline;
    }
}

/* Mobile-first: 1-column */
.site-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
        "site-header"
        "main-content"
        "dashboard-sidebar"
        "site-activity"
        "site-footer";
    min-height: 100vh;
    gap: calc(3.625*var(--spacing-unit));
}
main {
    width: 100%;
    margin: 0;
}
body.template-edit .dashboard-sidebar,
body.template-admin .dashboard-sidebar {
    display: none;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    /* This matches the gap you already have on the sidebar */
    gap: calc(3.625 * var(--spacing-unit));
    min-width: 0; /* Prevents flex items from overflowing */
}

/* ==========================================================================
   Mobile Viewport Adjustments - max-width: 499px
   ========================================================================== */

@media (max-width: 499px) {
    /* Adjustments for the search form within the header utility navigation */
    .header-utility-nav .nav-search-form {
        /* Reduce overall width if it's too wide, e.g., to 90% of its container *
        width: 50%; */
        /* Or set a max-width to prevent it from getting too large on slightly wider narrow screens */
        margin: 0 auto; /* Center the form if its width is less than 100% */
    }

    .header-utility-nav .nav-search-input {
        padding: 4px 6px; /* Reduce padding for a smaller input field */
        font-size: 0.8em; /* Make the font size slightly smaller */
    }

    .header-utility-nav .nav-search-button {
        padding: 4px 8px; /* Reduce padding for a smaller button */
    }

    .header-utility-nav .nav-search-button svg {
        width: 16px; /* Smaller icon */
        height: 16px; /* Smaller icon */
    }
}

@media (min-width: 635px) { 
    header {
    width: 100%;
    box-sizing: border-box;
    display: flex; /* ADD THIS */
    flex-direction: row;
    justify-content: space-between; /* ADD THIS to push site name left, utility nav right */
    align-items: center; /* ADD THIS to vertically align items */
    padding: 0; /* ADD/ADJUST PADDING as needed */
    gap: var(--spacing-unit); 
    }
    header .header-utility-nav { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: var(--spacing-unit); 
    }

    .page-analysis,
    .page-relationships,
    .recent-activity {
    width: 300px;
    }

    .site-activity-container .dashboard-section {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
        max-width: 100%; /* Force it to 300px */
    }
}



/* Desktop: 2-column with flexible sidebar */
@media (min-width: 950px) {
    .site-grid-container {
            grid-template-columns:auto 500px 300px auto; /* Flexible main, 300px sidebar */
            grid-template-rows: auto 1fr auto auto;
            grid-template-areas:
                "site-header   site-header       site-header        site-header"
                ".             main-content      dashboard-sidebar  ."
                ".             site-activity     site-activity      ."
                "site-footer   site-footer       site-footer        site-footer";
            gap: calc(3.625 * var(--spacing-unit));
            margin: 0 auto;
    }

    .dashboard-sidebar {
        display: flex;
        flex-direction: column; /* Creates the single side column */
        gap: calc(3.625 * var(--spacing-unit));
        font-size: 0.85em;
    }

    body.template-edit .site-grid-container,
    body.template-admin .site-grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "site-header"
            "main-content"
            "site-footer";
    }
    .card-snippet-meta, .card-snippet-content, .card-snippet-title, .card-snippet-text {
    font-size: 0.8em;   
    }
       
 }

/* Desktop: 2-column with flexible sidebar */
@media (min-width: 1300px) {
    .site-grid-container {
        grid-template-columns: auto calc(60ch + 3.625 * var(--spacing-unit)) calc(600px + 3.625 * var(--spacing-unit)) auto; /* Flexible main, auto-width sidebar */
        grid-template-rows: auto 1fr auto auto;
        grid-template-areas:
                "site-header   site-header       site-header        site-header"
                ".             main-content      dashboard-sidebar  ."
                ".             site-activity     site-activity      ."
                "site-footer   site-footer       site-footer        site-footer";
        gap: calc(3.625 * var(--spacing-unit));
        margin: 0 auto;
    }
    .dashboard-sidebar {
        display: flex;
        flex-direction: row;  /* Becomes a horizontal flexbox */
        flex-wrap: wrap;      /* Allows wrapping */
        align-content: flex-start; /* Aligns items to the top */
        gap: calc(3.625 * var(--spacing-unit));
        font-size: 0.85em;
    }

    .dashboard-column {
        display: flex;
        flex-direction: row;  /* Becomes a horizontal flexbox */
        flex: 0;
        flex-basis: 300px; /* Each column starts at 300px wide */
    }

    body.template-edit .site-grid-container,
    body.template-admin .site-grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "site-header"
            "main-content"
            "site-footer";
    }

}

}

.dashboard-sidebar, .site-activity-container {
    container-type: inline-size;
}

/* --- 2. New Section Headers (Replaces clunky <h2>) --- */
.dashboard-section h2,
.page-analysis h2 {
    font-size: 1em; /* 100% of body text (or slightly smaller) */
    color: rgba(var(--color-text-rgb), 0.6);
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 0;
    padding-top: 0;
    line-height: 1;
}
.dashboard-section h2 a {
    border-bottom: none;
    color: inherit;
}


/* --- 3. The New "Card Snippet" (Default Compact List Item) --- */
.card-snippet-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: calc(0.625*var(--spacing-unit)); /* Space between cards */
}
.card-snippet-item {
    display: flex; /* This is the card itself */
    background-color: var(--color-neutral-surface);
    border: 1px solid var(--color-neutral-surface);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease;
    height: 4.5rem; /* ~72px, achieves your ~4rem goal */
    background-size: cover;
    background-position: center;
    position: relative;
}
.card-snippet-item:hover {
    box-shadow: 0 2px 5px var(--color-shadow);
    border-color: var(--color-border);
}
.card-snippet-item.has-image-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.card-snippet-link {
    display: flex; /* Changed from row to column */
    flex-direction: column; 
    width: 100%;
    height: 100%; /* Make link fill the list item */
    text-decoration: none;
    border-bottom: none;
    color: var(--color-text);
    position: relative;
    z-index: 2;
}
.card-snippet-link:hover {
    background-color: transparent;
}

.card-snippet-content {
    flex-grow: 1; /* This will make it fill the height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* This still works to space content */
    padding: 5px 10px;
    overflow: hidden;
}

.card-snippet-slugline {
    font-size: 1em;
    color: var(--color-supplementary-text);
}
.card-snippet-slugline .card-snippet-nslabel {
    font-weight: 700;
}

.card-snippet-title {
    font-size: 1em;
    font-weight: 700;
    color: var(--color-text);
    /* 1-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-snippet-link:hover .card-snippet-title {
    color: var(--color-highlight-pink);
}
.card-snippet-text {
    font-size: 1em;
    color: var(--color-supplementary-text);
    /* 1-line clamp */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none; /* Hide snippet by default, title is enough */
}
.card-snippet-meta {
    font-size: 1em;
    color: var(--color-supplementary-text);
    white-space: nowrap;
}
.card-snippet-slugline, .card-snippet-meta {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Adds a " / " between nslabel and doctype */
.card-snippet-slugline.has-nslabel .card-snippet-doctype::before {
    content: "";
    font-weight: 400; /* Don't bold the separator */
    padding: 0 0.25em;
    color: var(--color-supplementary-text);
}

/* Ensures the " / " is white on dark image backgrounds */
.has-image-bg .card-snippet-slugline.has-nslabel .card-snippet-doctype::before {
    color: #fff;
}

/* Adds a " - " between author and date */
.card-snippet-meta .meta-author + .meta-date::before {
    content: "";
    padding: 0 0.25em;
}

/* Text color overrides for image backgrounds */
.has-image-bg .card-snippet-link,
.has-image-bg .card-snippet-slugline,
.has-image-bg .card-snippet-title,
.has-image-bg .card-snippet-meta {
    color: #fff;
}
.has-image-bg .card-snippet-link:hover .card-snippet-title {
    color: #fff;
    text-decoration: underline;
}

/* ==========================================================================
   CLUSTER DISPLAY UPDATES
   ========================================================================== */

/* 1. Cluster Card Specifics */
.cluster-card-item {
    background-color: var(--color-neutral-surface); /* Slightly distinct background */
    border-color: var(--color-border);
    height: auto; /* Allow height to grow to fit keywords */
    min-height: 4.5rem;
}

.cluster-spark-mini svg {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
}

.cluster-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Re-using keyword tag style but ensuring they fit in the card */
.cluster-keywords-list .keyword-tag {
    font-size: 0.75rem;
    padding: 1px 4px;
    margin: 0;
}

/* 2. Site Activity Grid Layout */

/* Remove old stack styles if present (optional cleanup) */
.cluster-stack, .cluster-unit, .cluster-members-scroll {
    display: none; 
}

/* The new grid container */
.cluster-activity-grid {
    display: grid;
    /* Create columns that are at least 300px wide, filling space */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: calc(2 * var(--spacing-unit));
    align-items: start; /* Align columns to top */
}

.cluster-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ==========================================================================
   UPDATED CLUSTER CARD LAYOUT
   ========================================================================== */

/* 1. Force the main content area to be a horizontal row */
.cluster-content-row {
    flex-direction: row !important; /* Override default column direction */
    align-items: flex-start;        /* Align items to top */
    justify-content: space-between; /* Push left and right cols apart */
    gap: 15px;
    padding: 10px !important;       /* Add some breathing room */
}

/* 2. The Left Column (Info + Keywords) */
.cluster-info-col {
    display: flex;
    flex-direction: column; /* Stack slugline on top of keywords */
    gap: 8px;              /* Space between slugline and keywords */
    flex-grow: 1;           /* Allow this column to take up available space */
    min-width: 0;           /* Critical for text-overflow to work in flex children */
}

/* 3. The Right Column (Sparkline) */
.cluster-spark-mini {
    flex-shrink: 0; /* Prevent the sparkline from squishing */
    margin-left: auto; /* Ensure it pushes to the far right */
}

.cluster-spark-mini svg {
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
}

/* 4. Tweaks for inner elements */
.cluster-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.2;
}

.cluster-keywords-list .keyword-tag {
    font-size: 0.75rem;
    padding: 2px 6px;
    margin: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

/* Adjust slugline spacing for this specific card context */
.cluster-info-col .card-snippet-slugline {
    margin-bottom: 0;
    white-space: normal; /* Allow wrapping if needed on small screens */
}

/* ==========================================================================
   SNIPPETS & LISTS
   ========================================================================== */

.snippet-list, .card-snippet-list {
    display: grid; grid-template-columns: 1fr; gap: calc(0.625*var(--spacing-unit));
}

.snippet-box, .card-snippet-item {
    background-color: var(--color-neutral-surface);
    border: var(--border-width) solid var(--color-background-surface);
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease;
    position: relative; overflow: hidden;
}
.snippet-box:hover, .card-snippet-item:hover { 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border-color: var(--color-border);
}

.snippet-box h3 a, .card-snippet-title {
    color: var(--color-text);
    text-decoration: none; border-bottom: none;
}
.snippet-box h3 a:hover, .card-snippet-link:hover .card-snippet-title {
    background-color: transparent;
    color: var(--color-top); /* Highlights are Top color */
}

.snippet-slugline, .card-snippet-slugline { color: var(--color-supplementary-text); }
.snippet-meta, .card-snippet-meta { color: var(--color-supplementary-text); }
/* Gradient Backgrounds for Snippets */
.gradient-1 { background: linear-gradient(45deg, rgba(var(--color-accent-rgb),0.5), rgba(var(--color-base-rgb),0.5)); }
.gradient-2 { background: linear-gradient(135deg, rgba(var(--color-top-rgb),0.5), rgba(var(--color-base-rgb),0.3)); }
.gradient-3 { background: linear-gradient(45deg, rgba(var(--color-top-rgb),0.3), rgba(var(--color-accent-rgb),0.5)); }
.gradient-4 { background: linear-gradient(135deg, rgba(var(--color-base-rgb),0.5), rgba(var(--color-top-rgb),0.5)); }

/* Text colors on gradient/image backgrounds */
.has-gradient-bg h3 a, .has-gradient-bg p,
.has-image-bg .card-snippet-title, .has-image-bg .card-snippet-slugline,
.has-image-bg .card-snippet-meta {
    color: var(--color-background-surface); /* Keep text dark on light gradients? Or White? */
    /* Assuming gradients are light/pastel based on alpha=0.5. 
       If you want white text on cards, check contrast. 
       For now, let's keep default behavior or force white if needed. */
}
.has-image-bg { color: #fff !important; } /* Force white on images */
.has-image-bg .card-snippet-title { color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }
.has-image-bg::before {
    content: ''; position: absolute; inset: 0;
    background-color: rgba(0, 0, 0, 0.5); z-index: 1;
}

/* ==========================================================================
   CLUSTER CARDS & VISUALIZATION
   ========================================================================== */

.cluster-card-item {
    background-color: var(--color-neutral-surface); /* Slightly darker than card */
    border-color: var(--color-border);
    min-height: 5.5rem;
}

.cluster-spark-mini svg {
    background: var(--color-neutral-surface);
    border: 1px solid var(--color-border);
}

.cluster-keywords-list .keyword-tag {
    background: var(--color-neutral-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.cluster-keywords-list .wikilink-new {
    color: var(--color-top);
    text-decoration: none;
}
.cluster-keywords-list .keyword-tag:hover {
    background-color: var(--color-background-surface);
}

/* Main Plot Container */
#interactive-plot-container { 
    background-color: var(--color-background-surface);
    background-image: 
        linear-gradient(45deg, var(--color-neutral-surface) 25%, transparent 25%, transparent 75%, var(--color-neutral-surface) 75%),
        linear-gradient(45deg, var(--color-neutral-surface) 25%, transparent 25%, transparent 75%, var(--color-neutral-surface) 75%);
    background-size: 4px 4px;
    border: 1px solid var(--color-border);
}
#plot-tooltip {
    background: var(--color-neutral-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

/* ==========================================================================
   NAVIGATION & UTILITIES
   ========================================================================== */

.sequence-nav .nav-link {
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background-color: var(--color-background-surface);
}
.sequence-nav .nav-link:hover {
    background-color: var(--color-base);
    color: var(--color-neutral-surface);
    border-color: var(--color-base);
}

.header-utility-nav .nav-search-form {
    border: 1px solid var(--color-border);
    background-color: var(--color-neutral-surface);
}
.header-utility-nav button.nav-search-button {
    background-color: var(--color-background-surface);
}
.header-utility-nav button.nav-search-button:hover {
    background-color: var(--color-border);
}
.header-utility-nav button.nav-search-button svg {
    fill: var(--color-text);
}


/* Pile File Styles */
.pile-file-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pile-file-item {
    background: var(--color-neutral-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: 0 2px 5px var(--color-shadow);
}

.pf-anchor {
    border-bottom: 1px solid var(--color-neutral-surface);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.pf-title {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-text);
    text-decoration: none;
    border: none;
}

.pf-swimlanes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-lane {
    display: flex;
    align-items: baseline;
    font-size: 0.85rem;
    line-height: 1.4;
}

.pf-term {
    font-weight: bold;
    color: var(--color-accent);
    width: 100px; /* Fixed label width */
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-connector {
    color: var(--color-supplementary-text);
    margin: 0 8px;
}

.pf-neighbors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pf-neighbor {
    color: var(--color-supplementary-text);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-border);
    transition: color 0.2s;
}
.pf-neighbor:hover {
    color: var(--color-top);
    background: transparent;
}

/* --- Activity Stream (Shared Component) --- */

.activity-stream-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}



/* The Anchor (Top Row) */
.stream-anchor {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px dotted var(--color-neutral-surface);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.stream-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: none;
}
.stream-title:hover {
    color: var(--color-top);
}

.stream-meta {
    font-size: 0.85rem;
    color: var(--color-supplementary-text);
}

.meta-badge {
    background: var(--color-neutral-surface);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 8px;
    font-size: 0.8em;
}

/* The Context (Bottom Rows) */
.stream-context {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
}

.stream-row {
    display: flex;
    align-items: baseline;
    line-height: 1.4;
}

.row-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--color-supplementary-text);
    width: 100px;
    flex-shrink: 0;
    text-align: right;
    margin-right: 10px;
}
.term-label {
    color: var(--color-accent);
    font-weight: bold;
    text-transform: none; /* Keep casing for terms */
}

.row-connector {
    color: var(--color-border);
    margin-right: 10px;
}

.row-content {
    flex-grow: 1;
}

/* Tags Style */
.context-tag {
    display: inline-block;
    background: var(--color-neutral-surface);
    border: 1px solid var(--color-border);
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 4px;
    margin-bottom: 2px;
    font-size: 0.85em;
}

/* Neighbors Style */
.neighbor-link {
    color: var(--color-supplementary-text);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-border);
    margin-right: 8px;
}
.neighbor-link:hover {
    color: var(--color-top);
}

/* Ensure the sidebar doesn't squash the grid */
.dashboard-sidebar {
    min-width: 300px;
}

/* --- Universal Stream Item --- */

.stream-item {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: var(--color-neutral-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s ease;
}

.stream-item:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Header Layout */
.stream-anchor {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.stream-title {
    font-weight: bold;
    font-size: 1rem;
    color: var(--color-text);
    text-decoration: none;
    border: none;
}
.stream-title:hover { color: var(--color-top); }

.anchor-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #999;
}


/* Context / Swimlanes */
.stream-context {
    font-size: 0.85rem;
    color: var(--color-supplementary-text);
    border-top: 1px dotted var(--color-border);
    padding-top: 8px;
}

.stream-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 4px;
}

.row-label {
    width: 120px;
    flex-shrink: 0;
    text-align: right;
    margin-right: 10px;
    font-weight: bold;
    color: var(--color-top);
    word-wrap: break-word;
}

.neighbor-link {
    margin-right: 8px;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
}

/* Compact Mode Overrides */
.mode-compact .stream-context {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.mode-compact .stream-text-row {
    font-size: 0.8em;
    color: #888;
}
.via-label { font-weight: bold; opacity: 0.7; margin-right: 4px; }


/* --- Dynamic Status Badges --- */

/* Badges & Dots */
.role-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }


.meta-strength {
    background: #eee;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
    color: #666;
}


/* Base Badge Style */
.meta-status, .meta-velocity, .role-badge {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid;
    /* Default Transition */
    transition: all 0.2s ease;
}

/* HOT: Derived from semantic 'hot' variable */
.status-Hot {
    color: var(--color-status-hot);
    /* 15% opacity background using the RGB triplet */
    background-color: rgba(var(--color-status-hot-rgb), 0.15);
    border-color: rgba(var(--color-status-hot-rgb), 0.3);
}

/* WARM: Derived from semantic 'warm' variable */
.status-Warm {
    color: var(--color-status-warm);
    background-color: rgba(var(--color-status-warm-rgb), 0.15);
    border-color: rgba(var(--color-status-warm-rgb), 0.3);
}

/* COOL: Derived from semantic 'cool' variable */
.status-Cool {
    color: var(--color-status-cool);
    background-color: rgba(var(--color-status-cool-rgb), 0.15);
    border-color: rgba(var(--color-status-cool-rgb), 0.3);
}

/* COLD: Derived from semantic 'cold' variable */
.status-Cold {
    color: var(--color-status-cold);
    background-color: rgba(var(--color-status-cold-rgb), 0.15);
    border-color: rgba(var(--color-status-cold-rgb), 0.3);
}

/* --- Optional: Role Badges (Solid) --- */
/* If you want roles like "Hub" or "Clique" to also use these colors */

.role-Hub {
    /* Hubs often align with "Hot" or "Base" importance */
    background-color: var(--color-status-cool); 
    color: var(--color-neutral-surface); /* White/Light text */
    border: none;
}

.role-Clique {
    background-color: var(--color-status-cold);
    color: var(--color-neutral-surface);
    border: none;
}

/* ==========================================================================
   NEW HYBRID UI (Cards & Rich Lists)
   ========================================================================== */

/* --- 1. HERO CARD (Featured) --- */
.hero-card {
    position: relative;
    height: 320px; /* Tall, high impact */
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: var(--spacing-unit);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--color-border);
}

/* Hero Text Layout */
.hero-link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push text to bottom */
    width: 100%; height: 100%;
    text-decoration: none; border: none;
    color: white; /* Always white text on heroes */
}

/* Gradient Overlay for Readability */
.hero-overlay {
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.9) 100%);
    padding: 25px;
    width: 100%;
}

/* Hero: No Image Fallback (Typographic Mode) */
.hero-card.no-image {
    background-color: var(--color-base); /* Fallback brand color */
}
/* Utilize your existing gradients if available */
.hero-card.no-image.gradient-accent-base { background: linear-gradient(135deg, var(--color-base), var(--color-accent)); }

.hero-card.no-image .hero-link {
    justify-content: flex-end; /* Center text if no image */
}
.hero-card.no-image .hero-overlay {
    background: none; /* Remove dark gradient */
    text-align: left;
}
.hero-card.no-image .hero-title {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: none;
}

/* Typography */
.hero-kicker {
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: var(--color-neutral-surface);
}
.hero-title {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero-meta {
    font-family: var(--font-accent);
    font-size: 1rem;
    opacity: 0.9;
}


/* --- 2. RICH LIST ITEM (Standard) --- */
.rich-list-item {
    padding: 0;
    list-style: none;
    position: relative;
    margin-bottom: 1em;
}
.rich-list-item:last-child { border-bottom: none; }

.rich-list-link {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    text-decoration: none; border: none;
    color: var(--color-text);
}

/* Text Column */
.rich-list-content {
    flex: 1; /* Grow to fill space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* Fix flexbox truncation */
}

.rich-list-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.75rem;
}
.ns-label {
    font-weight: bold;
    color: var(--color-supplementary-text);
    text-transform: uppercase;
}
.collection-badge {
    background: var(--color-neutral-surface);
    color: var(--color-text);
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: bold;
}

.rich-list-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.rich-list-meta {
    font-size: 0.85rem;
    color: var(--color-supplementary-text);
}

/* Excerpt (Only shown when no image) */
.rich-list-excerpt {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--color-text);
    opacity: 0.8;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Thumbnail Column */
.rich-list-thumb {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--color-neutral-surface);
    border: 1px solid var(--color-border);
}
.rich-list-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Chevron */
.rich-list-arrow {
    align-self: center;
    font-size: 1.5rem;
    color: var(--color-neutral-surface);
    font-weight: 300;
}


/* --- 3. DYNAMIC LISTING STACK EFFECT --- */
/* If an item is a collection, we add a pseudo-border to look like a stack */
.rich-list-item.is-collection .rich-list-thumb {
    box-shadow: 
        4px 4px 0 var(--color-neutral-surface), 
        5px 5px 0 var(--color-border),
        8px 8px 0 var(--color-neutral-surface),
        9px 9px 0 rgba(0,0,0,0.1);
    margin-right: 10px; /* Make room for the shadow */
}

/* --- 4. SWIMLANE CLEANUP --- */
.stream-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 4px;
    font-size: 0.9rem;
}
.row-label {
    width: 110px; /* Fixed width for alignment */
    text-align: right;
    margin-right: 12px;
    font-weight: bold;
    color: var(--color-accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.row-connector { color: var(--color-border); margin-right: 8px; }
.neighbor-link {
    font-weight: 500;
    color: var(--color-text);
    margin-right: 10px;
    border-bottom: 1px solid var(--color-neutral-surface);
}
.neighbor-link:hover { color: var(--color-accent); border-color: var(--color-accent); }

.concept-header { margin-bottom: var(--spacing-unit); }


/* Styling to match the Orbital Position widget */
.hub-item, .stream-item.mode-compact {
    border: none;
    box-shadow: none;
    transition: none;
    padding: 0;
    margin: 0;
}
.hub-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.hub-link {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: none;
}
.hub-link:hover { color: var(--color-top); }

.hub-badges { display: flex; gap: 5px; align-items: center; }

.hub-row-meta {
    font-size: 0.85em;
    color: var(--color-supplementary-text);
}



.hero-link:hover {
    background-color: transparent !important;
    color: white; /* Ensure text stays white even if global hover changes it */
}

/* ==========================================================================
   MOSAIC WIDGET STYLES (Cleaned)
   ========================================================================== */

/* Container */
.mosaic-widget {
}

.mosaic-grid {
    display: grid;
    gap: 0px;
    background: transparent;
    border: none;
    margin-bottom: 15px;
}

/* Individual Cell (Base State) */
.mosaic-cell {
    background-color: var(--color-neutral-surface);
    width: 100%;
    height: 100%; 
    position: relative;
    cursor: pointer;
    transition: transform 0.1s ease;
    
    /* RESET GLOBAL LINK STYLES */
    text-decoration: none !important;
    border: none !important; 
    box-shadow: none !important;
}

/* Cell Hover State */
.mosaic-cell:hover {
    transform: scale(1.4);
    z-index: 10;
    
    /* Visual Pop */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    
    /* Ensure opacity is full on hover */
    opacity: 1.0 !important; 
    
    /* CRITICAL: Do NOT set background-color here. 
       Leaving it unset allows the JS inline style to persist. */
}

/* Tooltip */
.mosaic-cell:hover::after {
    content: attr(data-title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    margin-bottom: 5px;
}

/* Legend Styles */
.mosaic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid transparent;
    user-select: none;
}
.legend-item:hover {
    background: var(--color-background-surface);
    border-color: var(--color-border);
}
.legend-item.inactive {
    opacity: 0.4;
    filter: grayscale(100%);
}
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}

.mosaic-widget a { color: inherit; border-bottom: none;}

.hero-link:hover {
    background-color: transparent !important;
    color: white; /* Ensure text stays white even if global hover changes it */
}

/* GLOBAL RESET FOR DASHBOARD LINKS (Excluding Mosaic) */
.dashboard-section a:not(.mosaic-cell):hover, 
.rich-list-link:hover {
    background-color: transparent !important;
}