/* ==================================================
   ASCII ART FILE HEADER BANNER
   A decorative comment block at the very top of the file containing a large
   ASCII-art 'TAWNY CYBER' logo/wordmark plus a file metadata header (project,
   author, dates, version, copyright). Purely a comment; contains no executable
   CSS.
   ================================================== */

/*
  =============================================
████████╗ █████╗ ██╗    ██╗███╗   ██╗██╗   ██╗     ██████╗██╗   ██╗██████╗ ███████╗██████╗ 
╚══██╔══╝██╔══██╗██║    ██║████╗  ██║╚██╗ ██╔╝    ██╔════╝╚██╗ ██╔╝██╔══██╗██╔════╝██╔══██╗
   ██║   ███████║██║ █╗ ██║██╔██╗ ██║ ╚████╔╝     ██║      ╚████╔╝ ██████╔╝█████╗  ██████╔╝
   ██║   ██╔══██║██║███╗██║██║╚██╗██║  ╚██╔╝      ██║       ╚██╔╝  ██╔══██╗██╔══╝  ██╔══██╗
   ██║   ██║  ██║╚███╔███╔╝██║ ╚████║   ██║       ╚██████╗   ██║   ██████╔╝███████╗██║  ██║
   ╚═╝   ╚═╝  ╚═╝ ╚══╝╚══╝ ╚═╝  ╚═══╝   ╚═╝        ╚═════╝   ╚═╝   ╚═════╝ ╚══════╝╚═╝  ╚═╝
  =============================================

        Project:         TAWNY CSS
        File:                style.css
        Description: The Roost. 

        Author:            TAWNY Cyber

        Created:         2026-04-08
        Updated:         2026-04-08
        Version:         1.0.0

        Copyright (c) 2026 TAWNY. All rights reserved.
    =============================================

 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$X:;X$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$X;:X$$$$$$$$$$$
 $$$$$$$$$$$x:;+X$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$X;;:x$$$$$$$$$$$
 $$$$$$$$$$$x:::;+X$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$x;;:::x$$$$$$$$$$$
 $$$$$$$$$$$x::::::;;;;+++xxX$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$XXxx++;;;;;::::::x$$$$$$$$$$$
 $$$$$$$$$$$X:::::::::::::::::;;;;+xX$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$X++;;;;::::::::::::::::::X$$$$$$$$$$$
 $$$$$$$$$$$$:::::::::::::::::::::::;;;;x$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$X+;;;:::::::::::::::::::::::::X$$$$$$$$$$$
 $$$$$$$$$$$$;:::::::::::::::::::::::::::;;;X$$$$$$$$$$$$$$$$$$$$$$$$$x;;;::::::::::::::::::::::::::::;$$$$$$$$$$$$
 $$$$$$$$$$$$+::::::::::::::::::::::::::::::;;;X$$$$$$$$$$$$$$$$$$$x;;;:::::::::::::::::::::::::::::::+$$$$$$$$$$$$
 $$$$$$$$$$$$X:::::::::::::::::::::::::::::::::;;+$$$$$$$$$$$$$$$+;:::::::::::::::::::::::::::::::::::x$$$$$$$$$$$$
 $$$$$$$$$$$$$+:::::::::::::::::::::::::::::::::::;+$$$$$$$$$$X;;::::::::::::::::::::::::::::::::::::;X$$$$$$$$$$$$
 $$$$$$$$$$$$$x::::::::::::::::::;;:::::::::::::::::;+$$$$$$$+;::::::::::::::::::::::::::::::::;;;:::x$$$$$$$$$$$$$
 $$$$$$$$$$$$$$;:::::::::::::::::;;::::::::::::::::::;;X$$$x;;::::::::::::::::::::::::::::::::::::::;X$$$$$$$$$$$$$
 $$$$$$$$$$$$$$x:::::::::::::::::;;;;:::::::::::::::::;;x$x;::::::::::::::::::::::::::::::::::::::::+$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$X;::::::::::;;+xXXXXXXx+;;:::::::::::::::;;;:::::::::::::::;;+XXXXXXXx+;;:::::::::::;X$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$x:::::::;+$$$$$$$$$$$$$$$$X;::::::::::::::::::::::::::;+$$$$$$$$$$$$$$$$X;::::::::;+$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$X;::::::::+X$$$$$$$$$$$$$$$$$+::::::::::::::::::::;;;X$$$$$$$$$$$$$$$$$X;:::::::::;X$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$x;::::::::;x$$$$$$$$$$$$$$$$$X;;;::::::::::::::::;+$$$$$$$$$$$$$$$$$$;::::::::::;x$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$Xx;;::::::::;x$$$$$$$$$$$$$$$$$+;;:::::::::::::;;x$$$$$$$$$$$$$$$$X;::::::::::;;xX$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$xx;;::::::::::;x$$$$$$$$$$$$$$$+;:::::::::::::;x$$$$$$$$$$$$$$X;;::::::::::::;xx$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$xx;::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::;Xx$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$xX;;:::::::::::::::::::::::::::::::::::::::::::::::::;::::::::::::::::::;+xx$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$+x;;::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::;;x+$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$$xxx;;::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::;;xxx$$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$$$$xx+;;:::::::::::::::::::::;;;xXXXXx+;;::::::::::::::::::::::;;;+xx$$$$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$$$$$$X+x+;;::::::::::::::;;;+$$X+;;;;+x$$X+;;:::::::::::::::;;;+x+X$$$$$$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$Xx+++;;;;;;;;;;;xX$$$X;:::::::::+$$$$X+;;;;;;;;;;;;+++x$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$;::::::::;x$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$X;::::::;+$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$X;::::;+$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$X;;:;x$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$x+X$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
*/

/* ==================================================
   END: ASCII ART FILE HEADER BANNER
   ================================================== */

/* ==================================================
   CSS VARIABLES — GLOBAL DESIGN TOKENS (V1)
   The first :root block defining the site's original design-token system:
   brand colors (brand-yellow, background-dark-blue, white, matte-black), and
   semantic tokens for backgrounds, accents, text, borders, glass surfaces,
   gradients, and shadows used site-wide before the theme system was layered on
   top.
   ================================================== */


/*===========================================
CSS Variables
===========================================*/

/**
 * CSS VARIABLES - Global Design Tokens
 * 
 * This file contains all color variables, spacing, and design tokens
 * used throughout TAWNY Cyber. These can be overridden
 * by the theme system for dark/light mode support.
 */

:root{
    /* TAWNY colour scheme */
    --background-dark-blue: #001A33;
    --white: #FFFDFB;

    /* Default mode: TAWNY navy and yellow */
    --bg-primary: #001A33;
    --bg-secondary: #0A2948;
    --bg-tertiary: #103354;

    --accent-primary: #FFC300;
    --accent-secondary: #FFC300;

    --text-primary: #FFFDFB;
    --text-secondary: #FFFDFB;
    --text-tertiary: #FFC300;
    --text-on-light: #001A33;

    --border-color: #103354;

    --glow-primary: #FFC300;

    --page-bg-start: #001A33;
    --page-bg-end: #001A33;

    --header-surface: #001A33;
    --header-border: #103354;

    --glass-surface: #0A2948;
    --glass-surface-strong: #103354;
    --glass-border: #103354;
    --glass-border-strong: #FFC300;

    --muted-on-theme: #FFFDFB;
    --subtle-on-theme: #FFFDFB;

    --surface-gradient-start: #0A2948;
    --surface-gradient-end: #001A33;
    --surface-card-start: #0A2948;
    --surface-card-end: #001A33;
    --header-strip-start: #103354;
    --header-strip-end: #0A2948;


    --interactive-hover-shadow: #FFC300;
    --interactive-soft-shadow: #FFC300;
    --interactive-strong-shadow: #FFC300;


}


/* ==================================================
   END: CSS VARIABLES — GLOBAL DESIGN TOKENS (V1)
   ================================================== */

/* ==================================================
   LAYOUT INTRO, CSS RESET, BASE BODY, ANIMATED GRID BACKGROUND
   Section-header comments introducing 'Layout Styles', the universal box-
   sizing/margin/padding reset, base body font-family/background/line-height,
   text-selection color, link underline removal, and the animated moving-grid
   background (body::before + @keyframes gridMove) used behind all pages. Also
   contains several now-empty placeholder comments (MAIN CONTAINER, HEADER &
   BRANDING, NAVIGATION) marking where inline styles used to live before being
   externalized.
   ================================================== */

/*===========================================
Layout Styles
===========================================*/

/**
 * LAYOUT STYLES - Base Structure & Grid System
 * 
 * This file contains:
 * - CSS reset and base styles
 * - Animated background grid
 * - Main container and page layout
 * - Header and navigation structure
 * - Responsive grid system
 */

/* ===================================
     CSS RESET & BASE STYLES
     =================================== */

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

body{
    font-family:
        "Avenir",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

::selection{
    background: #FFC300; /* BRAND GOLD */
    color: #0A2948; /* Article Colour */
}

a,
a:hover,
a:focus,
a:active,
a:visited{
    text-decoration: none;
}

/* ===================================
     ANIMATED BACKGROUND GRID
     =================================== */

/* Creates a subtle animated grid pattern in the background */
body::before{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
    linear-gradient(#FFFDFB09 1px, transparent 1px),
    linear-gradient(90deg, #FFFDFB09 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
    animation: gridMove 20s linear infinite;
    pointer-events: none;
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(20px, 20px);
    }
}

/* ===================================
     MAIN CONTAINER
     =================================== */

/* Primary application container - holds all content */


/* ===================================
     HEADER & BRANDING
     =================================== */

/* Main header with logo and navigation */


/* Logo styling with Tawny (gold) and BLUE branding */


/* ===================================
     NAVIGATION
     =================================== */

/* Main navigation bar */


/* ==================================================
   END: LAYOUT INTRO, CSS RESET, BASE BODY, ANIMATED GRID BACKGROUND
   ================================================== */

/* ==================================================
   BASE NAV LINK STYLING
   The original .nav-link pill button style (border, uppercase text, hover
   glow) and its .active state gradient fill — the earliest, simplest version
   of the site's navigation link appearance, later refined further down the
   file.
   ================================================== */

/* Navigation links */
.nav-link{
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-link:hover{
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 3px 8px var(--glow-primary);
}

/* Active navigation state */
.nav-link.active{
    background: linear-gradient(
    135deg,
    var(--accent-primary),
    var(--accent-secondary)
    );
    color: var(--bg-primary);
    border-color: transparent;
}


/* ==================================================
   END: BASE NAV LINK STYLING
   ================================================== */

/* ==================================================
   APP HEADER SHELL, MAIN NAV CENTERING, DASHBOARD GRID
   Defines the sticky full-width .app-header bar and its centered .header-
   content wrapper, the flex-centered .main-nav, and the two-column .dashboard-
   grid layout used on dashboard-style pages. Includes several empty
   placeholder comments for brand/status-bar/page-content sections that were
   since externalized.
   ================================================== */


/* ===================================
     APP HEADER & CENTERED PAGE LAYOUT
     =================================== */

/* Full-width navbar across the top */
.app-header{
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    backdrop-filter: blur(6px);
}

/* Center the header content inside the full-width navbar */
.header-content{
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Brand styling for live header */


/* Center the main page content */


/* Keep nav centered across the top bar */
.main-nav{
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 20px;
}


/* ===================================
     STATUS BAR
     =================================== */

/* Header status bar with system health indicator */


/* Pulsing status indicator dot */


/* ===================================
     PAGE CONTENT CONTAINERS
     =================================== */

/* Individual page content wrapper */


/* ===================================
     DASHBOARD GRID SYSTEM
     =================================== */

/* Main dashboard grid layout */
.dashboard-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    align-items: start;
}

/* ==================================================
   END: APP HEADER SHELL, MAIN NAV CENTERING, DASHBOARD GRID
   ================================================== */

/* ==================================================
   RESPONSIVE BREAKPOINTS — TABLET & MOBILE (EARLY VERSION)
   Early tablet (max-width 1200px) and mobile (max-width 768px) media queries
   collapsing the dashboard grid to one column and stacking the header/nav
   vertically on small screens; also wraps the glass footer grid on mobile.
   ================================================== */



/* ===================================
     RESPONSIVE BREAKPOINTS
     =================================== */

/* Tablet view */
@media (max-width: 1200px) {
    .dashboard-grid{
        grid-template-columns: 1fr;
    }

}

/* Mobile view */
@media (max-width: 768px) {
    .header-content{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .main-nav{
        flex-wrap: wrap;
        justify-content: center;
    }

    

    .dashboard-grid{
        grid-template-columns: 1fr;
    }
    
    .glass-footer-grid{
    justify-content: center;
    flex-wrap: wrap;
    }
    
    
}

/* ==================================================
   END: RESPONSIVE BREAKPOINTS — TABLET & MOBILE (EARLY VERSION)
   ================================================== */

/* ==================================================
   COMPONENT STYLES INTRO + CARD COMPONENTS
   Section-header comment introducing reusable component styles, followed by
   the .card-header, .card-title, and .card-action (with hover) rules used for
   dashboard/panel-style cards throughout the site.
   ================================================== */

/*===========================================
Component Styles
===========================================*/

/**
 * COMPONENT STYLES - Reusable UI Elements
 * 
 * This file contains styles for:
 * - Cards and containers
 * - Buttons (primary, secondary, action buttons)
 * - Form inputs, textareas, selects
 * - Badges and labels
 * - User management components
 * - Note items and lists
 */

/* ===================================
     CARDS
     =================================== */

/* Primary card container */


/* Card header with title and action button */
.card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
}

/* Card title */
.card-title{
    font-family: "Libre Baskerville", serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Card action button (e.g., "+ Add User") */
.card-action{
    display: inline-block;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

.card-action:hover{
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 3px 8px var(--glow-primary);
}


/* ==================================================
   END: COMPONENT STYLES INTRO + CARD COMPONENTS
   ================================================== */

/* ==================================================
   PRIMARY BUTTON COMPONENT
   The .btn-primary gold-gradient call-to-action button style plus its hover
   (lift + glow) and active (press) states, used as the base button treatment
   across the site.
   ================================================== */

/* ===================================
     BUTTONS
     =================================== */

/* Primary button - Gold gradient */
.btn-primary{
    background: linear-gradient(
        135deg,
        var(--accent-primary),
        var(--accent-secondary)
    );
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    color: var(--bg-primary);
    font-family:
        "Avenir",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--glow-primary);
}

.btn-primary:active{
    transform: translateY(0);
}



/* ==================================================
   END: PRIMARY BUTTON COMPONENT
   ================================================== */

/* ==================================================
   FORM ELEMENTS + EMPTY MODAL/FORM PLACEHOLDER COMMENTS
   Text input (.form-input) and select dropdown (.form-select) styling with
   focus rings, plus a long run of now-empty comment placeholders (textarea,
   form actions, section title, empty state, modal
   overlay/content/animation/title/message/actions) marking spots where those
   styles used to live before being moved or removed.
   ================================================== */

/* ===================================
     FORM ELEMENTS
     =================================== */

/* Form group container */


/* Text input fields */
.form-input{
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-family:
        "Avenir",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-input:focus{
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--glow-primary);
}

/* Textarea fields */


/* Select dropdowns */
.form-select{
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-family:
        "Avenir",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-select:focus{
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--glow-primary);
}

/* Form action button container */


/* Section title */


/* Empty state message */


/* Modal overlay (darkens background) */


/* Modal content box */


/* Modal slide up animation */


/* Modal title */


/* Modal message text */


/* Modal action buttons container */

/*===========================================
Theme System Styles
===========================================*/

/* ==================================================
   END: FORM ELEMENTS + EMPTY MODAL/FORM PLACEHOLDER COMMENTS
   ================================================== */

/* ==================================================
   THEME SYSTEM INTRO + REFRESHED DESIGN-TOKEN ROOT (V2)
   Section-header comments for the theme system and its (now mostly empty)
   theme-picker UI placeholders, followed by a second, expanded :root token
   block ('UPDATE' section) adding surface-0..4, radius, transition, shadow
   tokens and refreshed semantic tokens (page-bg, glass-surface, header-strip,
   interactive shadows) for the modernized interface, without changing the JS
   data model.
   ================================================== */

/**
 * THEME SYSTEM STYLES
 * 
 * This file contains:
 * - Theme selection UI components
 * - Theme switching animations
 * - Responsive theme grid
 */

/* ===================================
     THEME SELECTION COMPONENTS
     =================================== */

/* Grid container for theme options */


/* Individual theme option card */


/* Active theme indicator */


/* Theme name label */


/* Checkmark for active theme */


/* Show checkmark on active theme */


/* ===================================
     RESPONSIVE THEME GRID
     =================================== */

/* Stack themes vertically on mobile */


/* ==================================================
     UPDATE
     This section modernizes the interface without
     changing the JavaScript data model or page IDs.
     ================================================== */

:root{
    --text-on-light: #001A33;
    --shadow-lg: 0 20px 45px #0B0B0B;
    --shadow-md: 0 12px 30px #0B0B0B;
    --radius-xl: 24px;
    --transition-fast: 180ms ease;

    /* Theme-aware semantic tokens for the refreshed interface */
    --page-bg-start: #001A33;
    --page-bg-end: #001A33;
    --header-surface: #001A33;
    --header-border: #FFFDFB;
    --glass-surface: #FFFDFB;
    --glass-surface-strong: #FFFDFB;
    --glass-border: #FFFDFB;
    --glass-border-strong: #FFFDFB;
    --muted-on-theme: #FFFDFB;
    --subtle-on-theme: #FFFDFB;
    --surface-gradient-start: #001A33;
    --surface-gradient-end: #001A33;
    --surface-card-start: #0A2948;
    --surface-card-end: #001A33;
    --header-strip-start: #FFFDFB;
    --header-strip-end: #FFFDFB;
    --interactive-hover-shadow: #FFC300;
    --interactive-soft-shadow: #FFC300;
    --interactive-strong-shadow: #FFC300;
}


/* ==================================================
   END: THEME SYSTEM INTRO + REFRESHED DESIGN-TOKEN ROOT (V2)
   ================================================== */

/* ==================================================
   DARK THEME TOKEN OVERRIDES (V2, FIRST PASS)
   body[data-theme="dark"] override block redefining the V2 semantic tokens
   (page background, glass surfaces, header strip, shadows) for dark mode.
   ================================================== */

body[data-theme="dark"]{
    --page-bg-start: #0B0B0B;
    --page-bg-end: #0B0B0B;
    --header-surface: #103354;
    --header-border: #103354;
    --glass-surface: #FFFDFB;
    --glass-surface-strong: #FFFDFB;
    --glass-border: #103354;
    --glass-border-strong: #103354;
    --muted-on-theme: #103354;
    --subtle-on-theme: #103354;
    --surface-gradient-start: #001A33;
    --surface-gradient-end: #103354;
    --surface-card-start: #0A2948;
    --surface-card-end: #103354;
    --header-strip-start: #FFFDFB;
    --header-strip-end: #FFFDFB;
    --interactive-hover-shadow: #FFC300;
    --interactive-soft-shadow: #FFC300;
    --interactive-strong-shadow: #FFC300;
}


/* ==================================================
   END: DARK THEME TOKEN OVERRIDES (V2, FIRST PASS)
   ================================================== */

/* ==================================================
   LIGHT THEME TOKEN OVERRIDES (V2, FIRST PASS)
   body[data-theme="light"] override block redefining the V2 semantic tokens
   for light mode — warm-white surfaces with navy text/border accents.
   ================================================== */

body[data-theme="light"]{
    --page-bg-start: #FFFDFB;
    --page-bg-end: #FFFDFB;
    --header-surface: #FFFDFB;
    --header-border: #0A2948;
    --glass-surface: #FFFDFB;
    --glass-surface-strong: #FFFDFB;
    --glass-border: #0A2948;
    --glass-border-strong: #0A2948;
    --muted-on-theme: #0A2948;
    --subtle-on-theme: #0A2948;
    --surface-gradient-start: #FFFDFB;
    --surface-gradient-end: #FFFDFB;
    --surface-card-start: #FFFDFB;
    --surface-card-end: #FFFDFB;
    --header-strip-start: #001A33;
    --header-strip-end: #001A33;
    --interactive-hover-shadow: #FFC300;
    --interactive-soft-shadow: #FFC300;
    --interactive-strong-shadow: #FFC300;
}


/* ==================================================
   END: LIGHT THEME TOKEN OVERRIDES (V2, FIRST PASS)
   ================================================== */

/* ==================================================
   HTML/BODY BASE REFINEMENTS, SCROLLBAR STYLING, FOCUS STATES
   Sets smooth scrolling and scrollbar-gutter on html, updates the body font
   stack and background gradient, styles the custom WebKit scrollbar (gold
   gradient thumb with glow), normalizes font on button/a/input/select, sets
   button cursor, and defines a shared focus-visible gold outline for
   interactive elements.
   ================================================== */

html{
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    scrollbar-color: var(--accent-primary) transparent;
    scrollbar-width: thin;
}

body{
    font-family:
        "Inter",
        "Avenir",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: var(--text-primary);
    background: linear-gradient(180deg, var(--page-bg-start) 0%, var(--page-bg-end) 100%);
    min-height: 100vh;
}


body::-webkit-scrollbar,
html::-webkit-scrollbar{
    width: 10px;
}

body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track{
    background: transparent;
}

body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb{
    background: linear-gradient(
        180deg,
        var(--accent-primary),
        var(--accent-secondary)
    );
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 14px #FFC300;
}

body::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(
        180deg,
        var(--accent-primary),
        var(--accent-secondary)
    );
    background-clip: padding-box;
}

button,
a,
input,
select{
    font: inherit;
}

button{
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
    outline: 3px solid #FFC300;
    outline-offset: 2px;
}


/* ==================================================
   END: HTML/BODY BASE REFINEMENTS, SCROLLBAR STYLING, FOCUS STATES
   ================================================== */

/* ==================================================
   REFINED HEADER, BRAND CLUSTER, NAV TOGGLE, PAGE HERO
   Restyles .app-header/.header-content with backdrop blur, adds .brand-
   cluster, .brand-badge/.eyebrow/.section-kicker pill labels, the .nav-toggle
   hamburger button, an updated pill-style .nav-link with hover/active
   gradient, and the .page-hero/.page-title/.page-subtitle heading block used
   atop most pages.
   ================================================== */

.app-header{
    background: var(--header-surface);
    border-bottom: 1px solid var(--header-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.header-content{
    max-width: 1440px;
    padding: 18px 20px;
    gap: 18px;
}

.brand-cluster{
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-badge,
.eyebrow,
.section-kicker{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-on-theme);
}

.brand-badge{
    padding: 6px 10px;
    border: 1px solid var(--glass-border-strong);
    border-radius: 999px;
    background: var(--glass-surface);
}

.nav-toggle{
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--glass-border-strong);
    background: var(--glass-surface);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span{
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--text-primary);
}

.nav-link{
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--glass-surface);
    color: var(--muted-on-theme);
    padding: 12px 16px;
    letter-spacing: 0.08em;
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active{
    color: var(--text-on-light);
    background: linear-gradient(135deg, var(--accent-primary) 0%, #FFC300 100%);
    border-color: transparent;
    box-shadow: 0 3px 8px var(--interactive-hover-shadow);
    transform: translateY(-1px);
}

.page-hero{
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.page-title{
    margin-top: 8px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}

.page-subtitle{
    max-width: 2000px;
    margin-top: 12px;
    color: var(--muted-on-theme);
    font-size: 1rem;
}

/* ==================================================
   END: REFINED HEADER, BRAND CLUSTER, NAV TOGGLE, PAGE HERO
   ================================================== */

/* ==================================================
   OVERVIEW TILES, DASHBOARD CARDS, CARD HEADER/ACTION REFINEMENTS
   Defines .analysis-overview stat-tile grid and its label/value text, tightens
   dashboard/admin grid gaps, introduces the glassy .dashboard-card container
   with gradient background and shadow, an elevated card header variant,
   refined .card-title typography, and updated .card-action/.btn-primary sizing
   plus .panel-body padding.
   ================================================== */



.analysis-overview{
    display: grid;
    gap: 16px;
}


.overview-tile{
    padding: 18px;
}

.overview-label{
    display: block;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--subtle-on-theme);
}

.overview-value{
    display: block;
    margin-top: 8px;
    font-size: 1rem;
    color: var(--text-primary);
}

.analysis-overview{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 24px;
}

.dashboard-grid,
.admin-grid{
    gap: 20px;
}

.dashboard-card{
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    background: linear-gradient(
        180deg,
        var(--surface-gradient-start),
        var(--surface-gradient-end)
    );
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}


.card-header,
.card-header--elevated{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    background: linear-gradient(
        180deg,
        var(--header-strip-start),
        var(--header-strip-end)
    );
    border-bottom: 1px solid var(--header-border);
}


.card-title{
    font-family: "Inter", sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--text-primary);
}

.card-action,
.btn-primary{
    min-height: 46px;
    border-radius: 14px;
    padding: 12px 18px;
    border: 1px solid transparent;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.card-action{
    background: var(--glass-surface-strong);
    color: var(--text-primary);
    border-color: var(--glass-border-strong);
}

.card-action:hover{
    transform: translateY(-1px);
    border-color: #FFC300;
    color: var(--text-primary);
    box-shadow: 0 3px 8px var(--interactive-soft-shadow);
}

.btn-primary{
    color: var(--text-on-light);
    background: linear-gradient(135deg, var(--accent-primary) 0%, #FFC300 100%);
    box-shadow: none;
}

.btn-primary:hover{
    color: #0A2948;
    transform: translateY(-1px);
}

.panel-body{
    padding: 24px;
}



/* ==================================================
   END: OVERVIEW TILES, DASHBOARD CARDS, CARD HEADER/ACTION REFINEMENTS
   ================================================== */

/* ==================================================
   MOBILE HEADER LAYOUT (MAX-WIDTH 900PX)
   Media query collapsing the header into a two-column grid (brand +
   hamburger), showing the .nav-toggle button, and turning .main-nav into a
   full-width dropdown panel with its own border/background/shadow on small
   screens.
   ================================================== */

@media (max-width: 900px) {
        .header-content{
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 12px;
        }


        .brand-cluster{
                min-width: 0;
        }


        .nav-toggle{
                display: inline-flex;
        }


        .main-nav{
                display: none;
                grid-column: 1 / -1;
                width: 100%;
                margin-top: 10px;
                padding: 14px;
                border: 1px solid var(--border-color);
                border-radius: 14px;
                background: linear-gradient(135deg, #001A33, #0A2948);
                box-shadow: 0 18px 36px #0B0B0B;
                flex-direction: column;
                align-items: stretch;
        }

    

}


/* ==================================================
   END: MOBILE HEADER LAYOUT (MAX-WIDTH 900PX)
   ================================================== */

/* ==================================================
   THEME-CONSISTENT FORM CONTROLS + LIGHT/DARK MODAL COLOR FIXES
   Adds a custom CSS-drawn dropdown arrow to .form-select, sets per-theme
   (light/dark/tawny) background colors for select options, and fixes several
   light/dark theme color overrides for nav-toggle icon bars, card headers, and
   the app-header/dashboard-card/overview-tile text color in dark mode —
   explicitly using background-color instead of the background shorthand to
   avoid wiping out the custom arrow image.
   ================================================== */

/* ==================================================
     CONFIRMATION MODAL + THEME-CONSISTENT FORM CONTROLS
     These overrides keep dropdowns and small popups
     consistent across tawny, dark, and light themes.
     ================================================== */


.form-select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
        linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px);
    background-size:
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;
    padding-right: 44px;
}

.form-select option,
select option{
    background: var(--bg-secondary);
    color: var(--text-primary);
}

body[data-theme="light"] .form-input,
body[data-theme="light"] .form-select{
    /* background-color, not the background shorthand: the shorthand resets
       background-image (among other sub-properties) to none whenever it
       isn't specified, which was silently deleting .form-select's custom
       dropdown-arrow background-image every time this rule applied. */
    background-color: #FFFDFB;
    color: var(--text-primary);
    border-color: var(--border-color);
}


body[data-theme="dark"] .form-input,
body[data-theme="dark"] .form-select{
    background-color: var(--login-form-surface);
}

body[data-theme="dark"] .form-select option,
body[data-theme="dark"] select option{
    background: #0B0B0B;
    color: var(--text-primary);
}

body[data-theme="tawny"] .form-select option,
body[data-theme="tawny"] select option{
    background: #0A2948;
    color: var(--text-primary);
}


body[data-theme="light"] .nav-toggle span{
    background: var(--text-primary);
}

body[data-theme="light"] .card-header,
body[data-theme="light"] .card-header--elevated{
    border-color: var(--glass-border);
}

body[data-theme="dark"] .app-header,
body[data-theme="dark"] .dashboard-card,
body[data-theme="dark"] .overview-tile{
    color: var(--text-primary);
}



/* ==================================================
   END: THEME-CONSISTENT FORM CONTROLS + LIGHT/DARK MODAL COLOR FIXES
   ================================================== */

/* ==================================================
   THEME TOGGLE BUTTON, MOVING CANVAS BACKGROUND, Z-INDEX STACKING
   Defines the .sr-only screen-reader-only utility, the fixed full-viewport #bg
   canvas layer (behind the animated grid), sticky z-index for the header, and
   the .header-theme-cycle pill button (icon + label) with hover state, plus
   its icon/text sub-elements and a mobile (max-width 640px) full-width
   variant.
   ================================================== */

/* ==================================================
     HEADER THEME TOGGLE + MODAL BUTTON ALIGNMENT
     ================================================== */


/* This is the moving canvas background from moving.html. Sits furthest
   back (behind the animated grid-line layer defined earlier), so it
   never overlaps content. */
#bg{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    pointer-events: none;
    z-index: -2;
}

/* This creates a stacking layer for the main app above both backgrounds. */


/* This keeps each page section above the grid and the canvas. */


/* This keeps the sticky header above the grid and canvas too. */
.app-header{
    position: sticky;
    z-index: 1001;
}

/* This keeps the shared confirmation modal above everything else. */


.header-theme-cycle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--glass-border, #FFFDFB);
    background: var(--glass-surface, #FFFDFB);
    color: var(--text-primary);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.header-theme-cycle:hover,
.header-theme-cycle:focus-visible{
    outline: none;
    transform: translateY(-1px);
    border-color: #FFC300;
    background: var(--bg-secondary);
    color: #FFC300;
    box-shadow: 0 3px 8px #0B0B0B;
}

.theme-cycle-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 18px;
    line-height: 1;
}

.theme-cycle-text{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


@media (max-width: 640px) {
    .header-theme-cycle{
        width: 100%;
    }
}


/* ==================================================
   END: THEME TOGGLE BUTTON, MOVING CANVAS BACKGROUND, Z-INDEX STACKING
   ================================================== */

/* ==================================================
   NEWSBOT THEME ICONS + CIRCULAR THEME-CYCLE BUTTON
   NewsBot-page-specific theme icon backgrounds (default logo image, plus
   inline SVG sun/moon icons for light/dark), followed by a redesigned circular
   icon-only .header-theme-cycle button with hover state and a light-mode
   variant with inset border styling.
   ================================================== */

/* NEWSBOT PAGE EXTERNALIZED STYLES */
.theme-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 1.4rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.theme-icon--default{
    background-image: url("mike.png");
}
.theme-icon--light::before,
.theme-icon--dark::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.theme-icon--light::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC300' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M2 12h2.5M19.5 12H22M4.93 19.07l1.77-1.77M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E");
}
.theme-icon--dark::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbeafe' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
}

.header-theme-cycle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    border-radius: 999px;
    padding: 0;
    border: 1px solid var(--glass-border-strong, #FFFDFB);
    background: var(--glass-surface, #FFFDFB);
    color: var(--text-primary);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}
.header-theme-cycle:hover,
.header-theme-cycle:focus-visible{
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--interactive-soft-shadow, #0B0B0B);
    border-color: #FFC300;
    background: var(--bg-secondary);
    color: #FFC300;
}

body[data-theme="light"] .header-theme-cycle{
    border-color: #FFC300;
    background: linear-gradient(135deg, #001A33, #0A2948);
    color: #FFC300;
    box-shadow: inset 0 0 0 1px #FFC300;
}

body[data-theme="light"] .header-theme-cycle:hover,
body[data-theme="light"] .header-theme-cycle:focus-visible{
    background: #001A33;
    border-color: #FFC300;
    box-shadow:
        inset 0 0 0 1px #FFC300,
        0 3px 8px var(--interactive-soft-shadow, #0B0B0B);
}


/* ==================================================
   END: NEWSBOT THEME ICONS + CIRCULAR THEME-CYCLE BUTTON
   ================================================== */

/* ==================================================
   NEWSBOT REFRESH ICON BUTTON
   Icon-only "Refresh feeds" control (two copies on the page, kept in sync via
   .js-refresh-feeds-btn in script.js) replacing the old "Refresh feeds" text
   pill. Circular button sized/styled to match .header-theme-cycle. The icon
   itself — not the button background — is brand gold (#FFC300) by default,
   switching to the dark brand blue (#0A2948) in light mode for contrast
   against the light background, and spins while a refresh is in flight
   (script.js sets aria-busy="true"/"false" on the button).
   ================================================== */
.refresh-icon-btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--glass-border-strong, #FFFDFB);
    background: var(--glass-surface, #FFFDFB);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}
.refresh-icon-btn:hover,
.refresh-icon-btn:focus-visible{
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--interactive-soft-shadow, #0B0B0B);
    border-color: #FFC300;
    background: var(--bg-secondary);
}
.refresh-icon-btn:disabled{
    cursor: default;
}
/* aria-busy="true" (set by setRefreshButtonState() in script.js while a
   refresh is in flight) is what has to carry "this is working" — the loading
   banner further up the page doesn't help here, since it can easily be
   scrolled out of view from either button's position (especially the one
   down in the Coverage & feed status panel). A ring outline on its own read
   as too close to the button's normal hover state to register as a distinct
   "busy" mode, so this instead flips the whole button to a solid, filled
   look — the same visual language a "loading" toggle/switch uses — which
   reads as changed at a glance rather than on close inspection: solid gold
   fill (was: outlined) plus the icon spinning in a contrasting dark stroke
   against that fill. (A pulsing scale, and a "Refreshing…" text bubble, were
   both here too at one point — removed at request: the pulse read as
   cheap/tacky, and the word "Refreshing" wasn't wanted appearing on screen
   at all.) */
.refresh-icon-btn[aria-busy="true"]{
    border-color: #FFC300;
    background: #FFC300;
    box-shadow:
        0 0 0 4px var(--glow-primary, rgba(255, 195, 0, 0.4)),
        0 6px 16px rgba(11, 11, 11, 0.35);
}
.refresh-icon{
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC300' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
}
/* Our own display:inline-flex above beats the browser's default [hidden]
   rule (an author-origin rule always wins over a user-agent-origin one,
   whatever the specificity), so setRefreshButtonState() setting icon.hidden
   = true wouldn't actually hide this without an explicit override here. */
.refresh-icon[hidden]{
    display: none !important;
}
body[data-theme="light"] .refresh-icon{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2948' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
}
.refresh-icon-btn[aria-busy="true"] .refresh-icon{
    animation: refresh-icon-spin 0.9s linear infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2948' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){
    .refresh-icon-btn[aria-busy="true"] .refresh-icon{
        animation: none;
    }
}
@keyframes refresh-icon-spin{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* Belt-and-suspenders spinner: setRefreshButtonState() in script.js
   explicitly toggles this element's `hidden` attribute (swapping it in for
   .refresh-icon) the same way the page's other loading wheels already do —
   featuredLoadingWheel, activeFilterLoadingWheel — rather than leaning only
   on the [aria-busy] CSS above. It reuses the exact ring-spin animation
   (newsbotLoadingWheel) those wheels use elsewhere on this page, so it's a
   proven, already-working spin rather than a new one. Colored dark navy, not
   the gold used elsewhere, so it stays visible against this button's own
   solid-gold busy fill instead of disappearing into it.
   ================================================== */
.refresh-icon-spinner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.refresh-icon-spinner[hidden]{
    display: none !important;
}
.refresh-icon-spinner span{
    width: 18px !important;
    height: 18px !important;
    border: 3px solid #0A294840 !important;
    border-top-color: #0A2948 !important;
    border-right-color: #0A2948 !important;
    border-radius: 50%;
    animation: newsbotLoadingWheel 0.8s linear infinite;
}

/* ==================================================
   END: NEWSBOT REFRESH ICON BUTTON
   ================================================== */

/* ==================================================
   404 PAGE - BACK ARROW BUTTON
   Circular icon button, top-left corner of .hero-panel (which is already
   position:relative), matching .refresh-icon-btn / .header-theme-cycle in
   size, border, hover treatment and theme-aware icon color so it reads as
   part of the same button family rather than a one-off. Navigates back via
   history.back() (inline, see 404.html) rather than a script.js listener,
   since this control exists on this one page only.
   ================================================== */
.back-arrow-btn{
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--glass-border-strong, #FFFDFB);
    background: var(--glass-surface, #FFFDFB);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}
.back-arrow-btn:hover,
.back-arrow-btn:focus-visible{
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--interactive-soft-shadow, #0B0B0B);
    border-color: #FFC300;
    background: var(--bg-secondary);
}
.back-arrow-btn::before{
    content: "";
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC300' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
}
body[data-theme="light"] .back-arrow-btn::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2948' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
}
@media (max-width: 640px){
    .back-arrow-btn{
        top: 14px;
        left: 14px;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }
}

/* ==================================================
   END: 404 PAGE - BACK ARROW BUTTON
   ================================================== */

/* ==================================================
   BLOG SHELL LAYOUT, FEATURED STORY GRID, BLOG CARD GRIDS
   Defines the .blog-shell page wrapper, full-width admin-grid cards, the
   .blog-feature two-column featured-story grid, shared image styling for
   feature/blog-card/category-tile visuals, .feature-copy/title/text
   typography, .hero-actions button row, and the .blog-stat-grid / .blog-cards-
   grid grid containers — the core layout used by the Blog and NewsBot listing
   pages.
   ================================================== */

.blog-shell{
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 20px 56px;
}
.admin-grid > .dashboard-card.full-width{
    grid-column: 1 / -1;
    width: 100%;
}
.blog-feature{
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 22px;
    align-items: stretch;
}
.feature-visual,
.blog-card-image,
.category-tile-visual{
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(
        135deg,
        #FFC300,
        #FFC300
    );
    border: 1px solid var(--glass-border);
    min-height: 240px;
}
.feature-visual img,
.blog-card-image img,
.category-tile-visual img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.feature-copy{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}
.feature-title{
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.04em;
}
.feature-text{
    max-width: 62ch;
}
.hero-actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.blog-stat-grid,
.blog-cards-grid{
    display: grid;
    gap: 16px;
}
.blog-stat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ==================================================
   END: BLOG SHELL LAYOUT, FEATURED STORY GRID, BLOG CARD GRIDS
   ================================================== */

/* ==================================================
   CATEGORY/RESOURCE TILES, TOOLBAR LAYOUT, SEARCH FIELD
   Styles the .category-tile / .resource-tile glass cards (including hover lift
   and active state), category tile title/copy text, the .toolbar-layout three-
   column filter bar, the .search-shell wrapper, and its magnifying-glass
   .search-icon.
   ================================================== */

.category-tile,
.resource-tile{
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(
        180deg,
        var(--surface-card-start, #0A2948),
        var(--surface-card-end, #001A33)
    );
    box-shadow: var(--shadow-md, 0 18px 40px #0B0B0B);
}
.category-tile{
    min-height: 240px;
    display: grid;
    grid-template-rows: 130px auto;
    gap: 14px;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.category-tile:hover,
.category-tile.is-active{
    transform: translateY(-3px);
    border-color: #FFC300;
    box-shadow: 0 16px 32px var(--interactive-soft-shadow, #0B0B0B);
}
.category-tile .section-kicker{
    margin-bottom: 8px;
}
.category-tile-title{
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}
.category-tile-copy,
.resource-copy,
.blog-card-blurb{
    font-size: 0.96rem;
}
.toolbar-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px 220px;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
}
.search-shell{
    position: relative;
}
.search-shell .form-input{
    padding-left: 46px;
}
.search-icon{
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #FFC300;
    pointer-events: none;
}

/* ==================================================
   END: CATEGORY/RESOURCE TILES, TOOLBAR LAYOUT, SEARCH FIELD
   ================================================== */

/* ==================================================
   FILTER PILLS, RESULTS META, BLOG CARD BASE + IMAGE
   Defines the .filter-pill-row and individual .filter-pill toggle buttons
   (with hover/active gold fill), the .results-meta row, the responsive .blog-
   cards-grid column count, the base .blog-card container with hover lift, and
   its .blog-card-image visual.
   ================================================== */

.filter-pill-row{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 20px;
}
.filter-pill{
    border: 1px solid var(--glass-border-strong, #FFFDFB);
    background: var(--glass-surface, #FFFDFB);
    color: var(--text-secondary);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}
.filter-pill:hover,
.filter-pill.is-active{
    color: var(--text-on-light, #0A2948);
    background: linear-gradient(135deg, var(--accent-primary) 0%, #FFC300 100%);
    border-color: transparent;
    transform: translateY(-1px);
}
.results-meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    color: var(--text-secondary);
}
.blog-cards-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.blog-card{
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 24px;
    border: 1px solid var(--glass-border, #FFFDFB);
    background: linear-gradient(
        180deg,
        var(--surface-gradient-start, #0A2948),
        var(--surface-gradient-end, #001A33)
    );
    box-shadow: var(--shadow-md, 0 18px 40px #0B0B0B);
    overflow: hidden;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.blog-card:hover{
    transform: translateY(-5px);
    border-color: #FFC300;
    box-shadow: 0 18px 34px var(--interactive-soft-shadow, #0B0B0B);
}

.blog-card-image{
    min-height: 220px;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    border: 0;
}


/* ==================================================
   END: FILTER PILLS, RESULTS META, BLOG CARD BASE + IMAGE
   ================================================== */

/* ==================================================
   BLOG CARD BODY — TOPLINE, CATEGORY, TITLE, FOOTER, CTA, DATE
   The inner anatomy of a blog/news article card: .blog-card-body layout,
   .blog-card-topline row, .blog-card-category label, .blog-card-
   title, .blog-card-footer, the .blog-card-cta 'read more' button with hover
   glow, and the .blog-card-date text.
   ================================================== */

.blog-card-body{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    flex: 1;
}

.blog-card-topline{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.blog-card-category{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-on-theme, #FFC300);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
}

.blog-card-title{
    font-size: 1.2rem;
    line-height: 1.08;
    color: var(--text-primary);
}

.blog-card-footer{
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 14px;
}

.blog-card-cta{
    transition: all 0.3s ease;
}

.blog-card-cta:hover{
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 3px 8px var(--glow-primary);
}

.blog-card-date{
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: right;
    margin-left: auto;
}


/* ==================================================
   END: BLOG CARD BODY — TOPLINE, CATEGORY, TITLE, FOOTER, CTA, DATE
   ================================================== */

/* ==================================================
   EMPTY RESULTS STATE, RESOURCE STACK, ANCHOR SCROLL OFFSET
   Styles the dashed-border .empty-results placeholder shown when a
   search/filter yields nothing, the .resource-stack list and .resource-title
   heading, and .anchor-link's scroll-margin-top used for in-page jump links
   under the sticky header.
   ================================================== */

.empty-results{
    text-align: center;
    padding: 52px 24px;
    border-radius: 22px;
    border: 1px dashed var(--glass-border-strong, #FFFDFB);
    color: var(--text-secondary);
    background: var(--glass-surface, #FFFDFB);
    grid-column: 1 / -1;
}

.resource-stack{
    display: grid;
    gap: 14px;
}

.resource-title{
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.anchor-link{
    scroll-margin-top: 110px;
}


/* ==================================================
   END: EMPTY RESULTS STATE, RESOURCE STACK, ANCHOR SCROLL OFFSET
   ================================================== */

/* ==================================================
   DUPLICATE FLEX-WRAP / BRAND / FORM-SELECT REFINEMENTS + SEARCH PLACEHOLDER
   A cluster of follow-up refinements: forces flex-wrap on several
   header/card/results rows, restates .brand-cluster and .brand-badge with
   tighter sizing, redefines .form-select's custom dropdown arrow and
   hover/option colors again (a later iteration), styles the search placeholder
   text color, sets .feature-visual's min-height, adds the .source-chip tag,
   and restates the .sr-only utility.
   ================================================== */

.header-content,
.brand-cluster,
.card-header,
.hero-actions,
.results-meta,
.blog-card-footer{
    flex-wrap: wrap;
}


.brand-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--glass-border-strong, #FFFDFB);
    background: var(--glass-surface, #FFFDFB);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--glass-border-strong, #FFFDFB);
    box-shadow: var(--shadow-sm, 0 8px 18px #0B0B0B);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--accent-primary) 50%),
        linear-gradient(135deg, var(--accent-primary) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size:
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

.form-select:hover{
    border-color: #FFC300;
    box-shadow: 0 3px 8px var(--glow-primary);
}

.form-select option{
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.search-shell .form-input::placeholder{
    color: var(--text-tertiary);
}

.feature-visual{
    min-height: 280px;
}


.source-chip{
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--glass-border-strong, #FFFDFB);
    background: var(--glass-surface, #FFFDFB);
    color: var(--text-secondary);
    font-size: 12px;
}
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================================================
   END: DUPLICATE FLEX-WRAP / BRAND / FORM-SELECT REFINEMENTS + SEARCH PLACEHOLDER
   ================================================== */

/* ==================================================
   BLOG/NEWSBOT RESPONSIVE BREAKPOINTS (1180 / 900 / 720 / 520PX)
   A cascading set of media queries reflowing the blog feature grid, card grid
   column counts, toolbar layout, card header alignment, image heights/aspect-
   ratio, and header text alignment as the viewport narrows from 1180px down to
   520px, ending with a dedicated 520px rule that turns the app header into a
   two-column grid with the nav pushed below.
   ================================================== */

@media (max-width: 1180px) {
    .blog-feature{
        grid-template-columns: 1fr;
    }
    
    .blog-cards-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .header-content{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .main-nav{
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .toolbar-layout{
        grid-template-columns: 1fr;
    }
    .card-header{
        align-items: flex-start;
    }
}
@media (max-width: 720px) {
    .blog-stat-grid,
.blog-cards-grid{
        grid-template-columns: 1fr;
    }
    .blog-shell{
        padding-left: 16px;
        padding-right: 16px;
    }
    .feature-visual,
.blog-card-image{
        min-height: 190px;
    }
    .blog-card-image{
        aspect-ratio: 16 / 9;
    }
    .card-header,
.blog-card-footer,
.results-meta{
        flex-direction: column;
        align-items: flex-start;
    }
    .blog-card-date{
        margin-left: 0;
        text-align: left;
    }
    .header-content{
        align-items: stretch;
        text-align: left;
    }
    .brand-cluster{
        justify-content: space-between;
    }
}
@media (max-width: 520px) {
    .blog-shell{
        padding-top: 20px;
        padding-bottom: 40px;
    }
    .feature-title{
        font-size: clamp(1.5rem, 7vw, 2rem);
    }
    .toolbar-layout{
        gap: 12px;
    }
    .feature-visual{
        min-height: 220px;
    }
}

@media (max-width: 520px) {
    .app-header .header-content{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .app-header .brand-cluster{
        justify-self: start;
        justify-content: flex-start;
        width: auto;
        gap: 10px;
    }

    .app-header .brand-badge{
        display: none;
    }

    .app-header{
        display: flex;
        justify-self: end;
        align-items: center;
    }

    .app-header .main-nav{
        grid-column: 1 / -1;
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .app-header .brand-name{
        text-align: left;
    }
}


/* ==================================================
   END: BLOG/NEWSBOT RESPONSIVE BREAKPOINTS (1180 / 900 / 720 / 520PX)
   ================================================== */

/* ==================================================
   NEWSBOT PAGE TYPOGRAPHY & TEXT-COLOR OVERRIDES
   body.newsbot-page-scoped overrides that force consistent text colors (title,
   subtitle, category, footer/meta strings like #resultsCount) regardless of
   theme gradients, set the Inter font stack for NewsBot, color the search
   icon gold, force no underline on article card links, and swap the
   text-color tokens to navy in light mode.
   ================================================== */

/* NEWSBOT PAGE TYPOGRAPHY AND COLOR OVERRIDES */
body.newsbot-page{
    --text-primary: #FFFDFB;
    --text-secondary: #FFFDFB;
    --text-tertiary: #FFFDFB;
    font-family:
        "Inter",
        "Avenir",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body.newsbot-page .page-title,
body.newsbot-page .card-title,
body.newsbot-page .feature-title,
body.newsbot-page .category-tile-title,
body.newsbot-page .resource-title,
body.newsbot-page .blog-card-title,
body.newsbot-page .overview-value{
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
}

body.newsbot-page .page-subtitle,
body.newsbot-page .feature-text,
body.newsbot-page .resource-copy,
body.newsbot-page .blog-card-blurb,
body.newsbot-page .blog-card-date,
body.newsbot-page #resultsCount,
body.newsbot-page #activeFilterLabel,
body.newsbot-page #lastUpdatedLabel,
body.newsbot-page #errorSummary{
    color: var(--text-secondary);
}

body.newsbot-page .section-kicker,
body.newsbot-page .overview-label,
body.newsbot-page .blog-card-category,
body.newsbot-page .brand-badge,
body.newsbot-page .nav-link,
body.newsbot-page .card-action{
    color: var(--text-secondary);
}

body.newsbot-page .search-icon{
    color: #FFC300;
}

body.newsbot-page .blog-card-link,
body.newsbot-page .blog-card-link:hover,
body.newsbot-page .blog-card-link:focus,
body.newsbot-page .blog-card-link:active,
body.newsbot-page .blog-card-link *{
    text-decoration: none !important;
}

body[data-theme="light"].newsbot-page{
    --text-primary: #0A2948;
    --text-secondary: #103354;
    --text-tertiary: #103354;
}


/* ==================================================
   END: NEWSBOT PAGE TYPOGRAPHY & TEXT-COLOR OVERRIDES
   ================================================== */

/* ==================================================
   NEWSBOT LINK/IMAGE FIXES + V16 LAYOUT TWEAKS
   Fixes the active/hover nav-link color on the NewsBot page, makes the whole
   article card a single non-underlined .blog-card-link, styles the logo-only
   category tile visual, and (in the 'V16' follow-up) restyles the toolbar
   section container, hides the featured card's hero actions, and adjusts blog-
   card-image/body sizing with a small mobile padding tweak.
   ================================================== */

/* ===================================
     NEWSBOT FIX OVERRIDES
     =================================== */


.newsbot-page .main-nav .nav-link.active,
.newsbot-page .main-nav .nav-link:hover{
    color: #0A2948;
}

.newsbot-page .blog-card-link{
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none !important;
}

.newsbot-page .blog-card-link,
.newsbot-page .blog-card-link:hover,
.newsbot-page .blog-card-link:focus,
.newsbot-page .blog-card-link:active,
.newsbot-page .blog-card-link *{
    text-decoration: none !important;
}

.newsbot-page .blog-card-link:focus-visible{
    outline: 2px solid var(--accent-primary);
    outline-offset: 4px;
    border-radius: 24px;
}

.newsbot-page .category-tile-visual--logo{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    min-height: 130px;
    background: #FFFDFB;
}

.newsbot-page .category-tile-visual--logo img{
    width: clamp(44px, 22vw, 88px);
    height: clamp(44px, 22vw, 88px);
    max-width: 88px;
    max-height: 88px;
    object-fit: contain;
    object-position: center;
}

.newsbot-page .blog-card-image img,
.newsbot-page #featuredImage{
    display: block;
}

/* ===================================
     NEWSBOT V16 TWEAKS
     Focused overrides to preserve the existing visual system.
     =================================== */

.newsbot-toolbar-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}


#featuredSection .card-header .hero-actions{
    display: none;
}

@media (max-width: 768px) {
    .newsbot-toolbar-section{
        padding: 16px;
    }

    

    
}

/* ==================================================
   END: NEWSBOT LINK/IMAGE FIXES + V16 LAYOUT TWEAKS
   ================================================== */

/* ==================================================
   SHARED SHELL PROGRESS BAR + GLASS FOOTER
   The thin gold .progress-container/.progress-bar reading-progress indicator
   shown under the sticky header, plus the full three-column .glass-footer
   (brand/logo/title/copyright, and two link columns) used on every page,
   including its responsive (max-width 900px) single-column stacked layout.
   ================================================== */


/* =====================================================================
     SHARED SHELL PROGRESS + GLASS FOOTER
     ===================================================================== */

.page-shell-progress{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

.app-header .page-shell-progress{
    position: relative;
    z-index: 2;
    padding-bottom: 0;
}

main > .page-shell-progress{
    margin-top: 0;
    margin-bottom: 20px;
}

.progress-container.progress-container--shell{
    width: 100%;
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.app-header .progress-container.progress-container--shell{
    margin-top: 0;
    border-radius: 0 0 999px 999px;
}

.progress-container.progress-container--shell .progress-bar{
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--accent-primary, #FFC300),
        var(--accent-secondary, #FFC300)
    );
    box-shadow: 0 0 14px #FFC300;
    transition: width 0.1s linear;
}

.glass-footer{
    width: min(100%, 1400px);
    margin: 48px auto 0;
    padding: 28px clamp(24px, 4vw, 56px) 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}


.glass-footer-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.glass-footer-grid > :nth-child(1){
    justify-self: start;
    text-align: left;
}

.glass-footer-grid > :nth-child(2){
    justify-self: center;
    text-align: center;
}

.glass-footer-grid > :nth-child(3){
    justify-self: end;
    text-align: right;
    padding-right: 0;
}

.glass-footer-brand{
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease;
}

.glass-footer-brand:hover,
.glass-footer-brand:focus-within{
    transform: translateY(-1px);
}

.glass-footer-brand a,
.glass-footer-brand-link{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "logo title"
        "copy copy";
    align-items: center;
    justify-content: start;
    column-gap: 14px;
    row-gap: 8px;
    text-decoration: none;
    color: inherit;
}

.glass-footer-logo{
    grid-area: logo;
    width: clamp(32px, 3vw, 40px);
    height: auto;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
}

.glass-footer-brand-title{
    grid-area: title;
    margin: 0;
    font-family: "Libre Baskerville", serif;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    letter-spacing: 0.08em;
    color: var(--text-primary);
}

.glass-footer-brand-copy{
    grid-area: copy;
    margin: 0;
    color: var(--accent-primary);
    max-width: 16ch;
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: 0.12em;
    text-transform: capitalize;
}

.glass-footer-heading{
    margin: 0 0 18px;
    font-size: 0.9rem;
    font-family: "Libre Baskerville", serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #FFFDFB;
}

.glass-footer-links{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.glass-footer-grid > :nth-child(2) .glass-footer-links{
    justify-content: center;
}

.glass-footer-grid > :nth-child(3) .glass-footer-links{
    justify-content: flex-end;
}

.glass-footer-links a{
    color: var(--accent-primary);
    text-decoration: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.glass-footer-links a:hover,
.glass-footer-links a:focus-visible{
    color: #FFFDFB;
    opacity: 1;
    box-shadow: none;
    transform: none;
    outline: none;
}

.glass-footer-bottom{
    margin-top: 34px;
    padding-top: 0;
    border-top: 0;
    color: var(--accent-primary);
    font-size: 0.95rem;
    text-align: center;
}

.glass-footer-copyright{
    display: inline-block;
    text-align: center;
}

@media (max-width: 900px) {
    .glass-footer{
        width: min(100%, 1400px);
        padding: 24px 20px 18px;
    }

    .glass-footer-grid{
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .glass-footer-grid > :nth-child(1),
.glass-footer-grid > :nth-child(2),
.glass-footer-grid > :nth-child(3){
        justify-self: stretch;
        text-align: left;
    }

    .glass-footer-grid > :nth-child(2) .glass-footer-links,
.glass-footer-grid > :nth-child(3) .glass-footer-links{
        justify-content: flex-start;
    }

    .glass-footer-links{
        gap: 14px;
    }

    .glass-footer-links a,
.glass-footer-brand-copy,
.glass-footer-heading{
        letter-spacing: 0.12em;
    }

    .glass-footer-bottom{
        margin-top: 24px;
        text-align: left;
    }
}


/* ==================================================
   END: SHARED SHELL PROGRESS BAR + GLASS FOOTER
   ================================================== */

/* ==================================================
   LANDING PAGE — HERO PANEL & INTRO TOKENS
   Introductory comment noting the landing/blog CSS was extracted from inline
   HTML and still needs merging, followed by body.landing-page-scoped design
   tokens and the hero section: .landing-shell wrapper, header background,
   .hero-story/.hero-panel, .eyebrow label, .hero-grid, .hero-title, .hero-
   copy, .hero-actions spacing, and the .hero-stat-grid.
   ================================================== */


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

lANDING PAGE SPECIFIC CODE - NEEDS MERGED 
WITH BELOW BLOG PAGE SPECIFIC CODE
PROBLEM CAUSED BY CODE BEING INLINE IN HTML
AND THEN EXTRACTED TO THIS DOCUMENT 
(FEATURES ARE THE SAME)

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


body.landing-page{
    --glass-surface: #FFFDFB;
    --glass-border: #FFFDFB;
    --glass-border-strong: #FFFDFB;
    --surface-card-start: #0A2948;
    --surface-card-end: #001A33;
    --surface-gradient-start: #0A2948;
    --surface-gradient-end: #001A33;
    --interactive-soft-shadow: #0B0B0B;
    --shadow-md: 0 18px 40px #0B0B0B;
    --shadow-sm: 0 10px 24px #0B0B0B;
    --text-on-light: #0A2948;
    --muted-on-theme: #FFC300;
}

body.landing-page{
    color: var(--text-primary);
}

body.landing-page .landing-shell{
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 20px 80px;
}

body.landing-page .app-header{
    border-bottom-color: var(--glass-border-strong);
    background: #001A33;
    backdrop-filter: blur(14px);
}

body.landing-page .hero-story{
    /* Was min-height: calc(100vh - 150px) with 32px/56px top/bottom padding,
       which forced this section to fill almost the entire viewport height and
       left a large empty gap above and below the "Stay informed, stay
       secure." content once it was vertically centered inside that tall box.
       Dropping the forced min-height and shrinking the padding keeps the
       section sized to its actual content instead. */
    min-height: auto;
    display: grid;
    align-items: center;
    padding: 16px 0 24px;
}

body.landing-page .hero-panel{
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border-strong);
    border-radius: 34px;
    background: linear-gradient(180deg, #0A2948, #001A33);
    box-shadow: var(--shadow-md);
    padding: clamp(26px, 5vw, 54px);
}

body.landing-page .eyebrow{
    color: var(--muted-on-theme);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 16px;
}

body.landing-page .hero-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(22px, 4vw, 42px);
    align-items: center;
}

body.landing-page .hero-title{
    font-size: clamp(2.8rem, 7vw, 5.9rem);
    line-height: 0.92;
    letter-spacing: -0.06em;
    margin-bottom: 18px;
    color: var(--text-primary);
}

body.landing-page .hero-copy{
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.55vw, 1.18rem);
    max-width: 62ch;
    margin-bottom: 24px;
}

body.landing-page .hero-actions{
    margin-bottom: 26px;
}

body.landing-page .hero-stat-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* Landing page cards now inherit the shared surface system below. */



/* ==================================================
   END: LANDING PAGE — HERO PANEL & INTRO TOKENS
   ================================================== */

/* ==================================================
   LANDING PAGE — STORY SECTIONS, PATH/DETAIL CARDS, VISUALS
   Landing-page heading/copy colors for path/detail/story cards, the .story-
   section spacing, .story-grid (with a reversible column order), .section-
   heading typography, .story-card, .feature-list/.feature-item/.feature-dot
   bullet list, the .story-visual image panel with .floating-caption overlay,
   and the .path-grid/.path-card and .detail-grid/.detail-card tile grids.
   ================================================== */

body.landing-page .path-card h3,
body.landing-page .detail-card h3,
body.landing-page .story-content h3{
    color: var(--text-primary);
    font-family: "Libre Baskerville", serif;
}

body.landing-page .path-card p,
body.landing-page .detail-card p,
body.landing-page .story-copy{
    color: var(--text-secondary);
}

body.landing-page .story-section{
    padding: 48px 0;
    scroll-margin-top: 120px;
}

body.landing-page .story-grid{
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
}

body.landing-page .story-grid.reverse .story-content{
    order: 2;
}

body.landing-page .story-grid.reverse .story-visual{
    order: 1;
}

body.landing-page .section-heading{
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 0.98;
    margin-bottom: 14px;
    letter-spacing: -0.04em;
}


body.landing-page .story-card{
    padding: 24px;
}

body.landing-page .story-copy{
    margin-bottom: 18px;
}

body.landing-page .feature-list{
    display: grid;
    gap: 10px;
}

body.landing-page .feature-item{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-secondary);
}

body.landing-page .feature-dot{
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        var(--accent-primary),
        var(--accent-secondary)
    );
    box-shadow: 0 0 14px #FFC300;
    flex: 0 0 10px;
}

body.landing-page .story-visual{
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    min-height: 440px;
    border: 1px solid var(--glass-border-strong);
    background: linear-gradient(
        135deg,
        #FFC300,
        #FFFDFB
    );
    box-shadow: var(--shadow-md);
}

body.landing-page .floating-caption{
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #001A33;
    border: 1px solid #FFFDFB;
    backdrop-filter: blur(10px);
}

body.landing-page .path-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

body.landing-page .path-card{
    padding: 22px;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

body.landing-page .detail-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

body.landing-page .detail-card{
    padding: 20px;
    min-height: 100%;
}



/* ==================================================
   END: LANDING PAGE — STORY SECTIONS, PATH/DETAIL CARDS, VISUALS
   ================================================== */

/* ==================================================
   SHARED BACK-TO-TOP BUTTON + STANDALONE LOGO BLOCK
   Site-wide (not landing-only) styles for the .back-to-top / .button-match-top
   pill buttons and the centered .standalone-logo-block/.standalone-logo used
   identically across the landing, blog, and NewsBot pages, including its hover
   lift.
   ================================================== */

.back-to-top-wrap{
        display: flex;
        justify-content: center;
        padding: 20px 0 10px;
}

.back-to-top,
.button-match-top{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
        border-radius: 999px;
        padding: 12px 24px;
        box-shadow: none;
}

body.landing-page .standalone-logo-block,
body.blog-page .standalone-logo-block,
body.newsbot-page .standalone-logo-block{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 32px;
}


body.landing-page .standalone-logo,
body.blog-page .standalone-logo,
body.newsbot-page .standalone-logo{
    width: clamp(120px, 22vw, 220px);
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.2s ease;
}

body.landing-page .standalone-logo:hover,
body.blog-page .standalone-logo:hover,
body.newsbot-page .standalone-logo:hover,
body.landing-page .standalone-logo-block a:focus-visible .standalone-logo,
body.blog-page .standalone-logo-block a:focus-visible .standalone-logo,
body.newsbot-page .standalone-logo-block a:focus-visible .standalone-logo{
    transform: translateY(-1px);
}


/* ==================================================
   END: SHARED BACK-TO-TOP BUTTON + STANDALONE LOGO BLOCK
   ================================================== */

/* ==================================================
   LANDING PAGE — DARK/LIGHT THEME OVERRIDES + RESPONSIVE
   Per-theme (dark/light) token and component overrides for the landing page's
   header, hero panel, story visual, and floating caption, followed by
   responsive breakpoints (1180 / 760 / 520px) that collapse the
   hero/story/path/detail grids to fewer columns and shrink the hero title on
   mobile.
   ================================================== */

body.landing-page[data-theme="dark"]{
    --glass-surface: #FFFDFB;
    --glass-border: #103354;
    --glass-border-strong: #103354;
    --surface-card-start: #0A2948;
    --surface-card-end: #103354;
    --surface-gradient-start: #001A33;
    --surface-gradient-end: #103354;
    --interactive-soft-shadow: #FFC300;
    --shadow-md: 0 18px 40px #0B0B0B;
    --shadow-sm: 0 10px 24px #0B0B0B;
    --text-on-light: #0A2948;
    --muted-on-theme: #103354;
}

body.landing-page[data-theme="light"]{
    --glass-surface: #FFFDFB;
    --glass-border: #0A2948;
    --glass-border-strong: #0A2948;
    --surface-card-start: #FFFDFB;
    --surface-card-end: #FFFDFB;
    --surface-gradient-start: #FFFDFB;
    --surface-gradient-end: #FFFDFB;
    --interactive-soft-shadow: #FFC300;
    --shadow-md: 0 18px 40px #001A33;
    --shadow-sm: 0 10px 24px #001A33;
    --text-on-light: #0A2948;
    --muted-on-theme: #0A2948;
}

body.landing-page[data-theme="dark"] .app-header{
    background: #103354;
}

body.landing-page[data-theme="light"] .app-header{
    background: #FFFDFB;
}

body.landing-page[data-theme="dark"] .hero-panel{
    background: linear-gradient(180deg, #001A33, #103354);
}

body.landing-page[data-theme="light"] .hero-panel{
    background: linear-gradient(180deg, #FFFDFB, #FFFDFB);
}

body.landing-page[data-theme="dark"] .story-visual{
    background: linear-gradient(
        135deg,
        #FFC300,
        #FFFDFB
    );
}

body.landing-page[data-theme="light"] .story-visual{
    background: linear-gradient(
        135deg,
        #FFC300,
        #0A2948
    );
}

body.landing-page[data-theme="dark"] .floating-caption{
    background: #103354;
    border: 1px solid #103354;
}

body.landing-page[data-theme="light"] .floating-caption{
    background: #FFFDFB;
    border: 1px solid #0A2948;
}

@media (max-width: 1180px) {
    body.landing-page .hero-grid,
body.landing-page .story-grid,
body.landing-page .story-grid.reverse{
        grid-template-columns: 1fr;
    }

    body.landing-page .story-grid.reverse .story-content,
body.landing-page .story-grid.reverse .story-visual{
        order: initial;
    }

    body.landing-page .path-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.landing-page .hero-stat-grid{
        grid-template-columns: 1fr;
    }

    

    body.landing-page .story-visual{
        min-height: 360px;
    }
}

@media (max-width: 760px) {
    body.landing-page .header-content{
        align-items: center;
    }

    body.landing-page .landing-shell{
        padding-left: 16px;
        padding-right: 16px;
    }

    body.landing-page .hero-story{
        min-height: auto;
    }

    body.landing-page .hero-panel{
        padding: 22px;
    }

    body.landing-page .path-grid,
body.landing-page .detail-grid{
        grid-template-columns: 1fr;
    }

    body.landing-page .story-visual{
        min-height: 300px;
    }
}

@media (max-width: 520px) {
    /* Keep the shared header wordmark identical across Home, Blog, and NewsBot. */
    .app-header .brand-name{
        font-size: clamp(1.6rem, 9vw, 2.2rem);
    }

    body.landing-page .hero-title{
        font-size: clamp(2.2rem, 14vw, 3.2rem);
    }

    body.landing-page .story-visual{
        min-height: 260px;
    }

    body.landing-page .cta-actions a{
        flex: 1 1 auto;
        text-align: center;
    }
}



/* ==================================================
   END: LANDING PAGE — DARK/LIGHT THEME OVERRIDES + RESPONSIVE
   ================================================== */

/* ==================================================
   BLOG PAGE SPECIFIC CODE
   body.blog-page-scoped overrides: a wider three-column toolbar layout, a
   three-column article card grid, larger card titles, and hover/checked/focus
   colors for native <option> elements in the category/sort dropdowns. A
   comment flags this as needing to be merged with the landing-page block above
   (both were extracted from inline HTML).
   ================================================== */

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

BLOG PAGE SPECIFIC CODE - NEEDS MERGED 
WITH ABOVE LANDING PAGE SPECIFIC CODE

PROBLEM CAUSED BY CODE BEING INLINE IN HTML
AND THEN EXTRACTED TO THIS DOCUMENT 
(FEATURES ARE THE SAME)

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


body.blog-page .blog-card-title{
        font-size: 1.35rem;
}

body.blog-page .form-select option:hover,
body.blog-page .form-select option:checked,
body.blog-page .form-select option:focus{
        background: var(--accent-primary);
        color: var(--bg-primary);
}



/* ==================================================
   END: BLOG PAGE SPECIFIC CODE
   ================================================== */

/* ==================================================
   NEWSBOT SPECIFIC CSS — SCROLL-TO-TOP BUTTON
   An ASCII-art 'TAWNY NEWS BOT' banner comment introduces the NewsBot-only
   styles, followed by the floating .newsbot-top-button (fixed, mid-right, gold
   pill) with its visible/hover/focus states and a mobile (max-width 900px)
   repositioning to the bottom-right corner.
   ================================================== */

/* ===================================
		NEWSBOT SPECIFIC CSS


			 \  /
			  \/
		.===============.
		| .-----------. |
		| |   TAWNY   | |
		| |   NEWS    | |
		| |    BOT    | |   __
		| '-----------'o|  |o.|
		|===============|  |::|
		|###############|  |::|
		'==============='  '--'

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

.newsbot-top-button{
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 950;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
    135deg,
    var(--accent-primary),
    var(--accent-secondary)
    );
    color: #001A33;;
    font-family:
        "Avenir",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease,
        box-shadow 0.2s ease;
}

.newsbot-top-button.is-visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.newsbot-top-button.is-visible:hover,
.newsbot-top-button.is-visible:focus-visible{
    transform: translateY(calc(-50% - 2px));
    box-shadow:
        0 4px 8px #0B0B0B,
        0 0 0 1px var(--glow-primary);
}

.newsbot-top-button:focus-visible{
    outline: none;
}

@media (max-width: 900px) {
    .newsbot-top-button{
        right: 14px;
        bottom: 18px;
        top: auto;
        transform: none;
        max-width: calc(100vw - 28px);
    }

    .newsbot-top-button.is-visible:hover,
.newsbot-top-button.is-visible:focus-visible{
    
    }
}


/* ==================================================
   END: NEWSBOT SPECIFIC CSS — SCROLL-TO-TOP BUTTON
   ================================================== */

/* ==================================================
   SITE-WIDE HEADER + FOOTER CONSOLIDATION
   A later consolidation pass restating .app-header/.header-content/.brand-
   cluster/.site-logo/.brand-name for consistency across pages, adding the
   .brand-name-cyber accent span (white by default, navy in light mode, hidden
   below 1180px to avoid overlap), and restating the circular .header-theme-
   cycle button and its hover state.
   ================================================== */

/* ===================================
     SITE-WIDE HEADER + FOOTER CONSOLIDATION
     =================================== */

.app-header{
    border-bottom-color: var(--glass-border-strong, #FFFDFB);
    background: #001A33;
    backdrop-filter: blur(14px);
}

.header-content{
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.brand-cluster{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.site-logo{
    width: clamp(56px, 7vw, 76px);
    height: clamp(56px, 7vw, 76px);
    object-fit: contain;
    display: block;
}

.brand-name{
    text-decoration: none;
    color: var(--text-primary);
    font-family: "Libre Baskerville", serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: 0.08em;
    /* 1.2, not 1 - at line-height:1 the descender on the
       lowercase "y" in "Cyber" sat right on this box's edge and got
       clipped by overflow:hidden below. 1.2 gives descenders room while
       staying visually tight next to the logo. */
    line-height: 1.2;
    /* Same overflow safety net as the landing/blog/newsbot-scoped brand-name
	   rule: truncates with an ellipsis rather than overflowing past this
	   box and getting visually painted over by the nav links, on pages
	   (the policy pages, template.html) that fall through to this generic
	   rule instead of the page-scoped one. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.brand-name:hover{
    color: var(--text-primary);
}

/* Distinguishes the "Cyber" portion of the brand wordmark from "TAWNY".
   -webkit-text-fill-color is set explicitly (not just color) because other
   theme rules on .brand-name set that property too, and WebKit browsers
   paint text using -webkit-text-fill-color over color when both are set;
   without this override "Cyber" would inherit the wrong theme color. */
.brand-name-cyber{
    color: var(--white);
    -webkit-text-fill-color: var(--white);
}

/* Light mode swaps "Cyber" from white to the brand's navy blue so it stays
   readable against the light background. Uses --background-dark-blue (the
   brand blue token) directly rather than --text-on-light, since the intent
   here is specifically "blue", not "whatever the current text color is". */
body[data-theme="light"] .brand-name-cyber{
    color: var(--background-dark-blue);
    -webkit-text-fill-color: var(--background-dark-blue);
}

/* The inline "Home / Blog / Newsbot" nav links only collapse into the
   hamburger menu below 900px (see the .nav-toggle / .main-nav rules), but
   the full "TAWNY Cyber" wordmark plus those inline links plus the
   theme-cycle button stop fitting side by side well above that, starting
   to visually overlap around ~1130px. Dropping "Cyber" at this wider
   1180px breakpoint (reusing the site's existing "medium" tier, with a
   safety margin past the ~1130px overlap point) keeps the wordmark from
   ever colliding with the nav, not just once the header has already
   switched to its mobile layout. */
@media (max-width: 1180px) {
    .brand-name-cyber{
        display: none;
    }
}

.header-theme-cycle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    border-radius: 999px;
    padding: 0;
    border: 1px solid var(--glass-border-strong, #FFFDFB);
    background: var(--glass-surface, #FFFDFB);
    color: var(--text-primary);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.header-theme-cycle:hover,
.header-theme-cycle:focus-visible{
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--interactive-soft-shadow, #0B0B0B);
    border-color: #FFC300;
}


/* ==================================================
   END: SITE-WIDE HEADER + FOOTER CONSOLIDATION
   ================================================== */

/* ==================================================
   FOOTER COLUMN ACCORDION + MOBILE FOOTER LAYOUT
   Adds .glass-footer-column and a (initially non-interactive) .glass-footer-
   toggle with rotating chevron icon, centers the footer grid on tablets (max-
   width 900px), and on phones (max-width 768px) turns each footer column
   heading into a clickable accordion toggle that shows/hides its link list.
   ================================================== */

.glass-footer-column{
    display: flex;
    flex-direction: column;
}

.glass-footer-toggle{
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: inherit;
    cursor: default;
}

.glass-footer-toggle-label{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.glass-footer-toggle-icon{
    display: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.2s ease;
}

.glass-footer-column.is-open .glass-footer-toggle-icon{
    transform: rotate(225deg) translateY(-1px);
}

@media (max-width: 900px) {
    .glass-footer-grid{
        justify-items: center;
        text-align: center;
    }

    .glass-footer-grid > :nth-child(1),
.glass-footer-grid > :nth-child(2),
.glass-footer-grid > :nth-child(3){
        justify-self: center;
        text-align: center;
    }

    .glass-footer-brand,
.glass-footer-brand a,
.glass-footer-brand-link,
.glass-footer-column{
        align-items: center;
        justify-items: center;
        text-align: center;
    }

    .glass-footer-links,
.glass-footer-grid > :nth-child(2) .glass-footer-links,
.glass-footer-grid > :nth-child(3) .glass-footer-links{
        justify-content: center;
        align-items: center;
    }

    .glass-footer-bottom{
        text-align: center;
    }
}


@media (max-width: 768px) {
    .glass-footer{
        padding-left: 16px;
        padding-right: 16px;
    }

    .glass-footer-grid{
        gap: 18px;
    }

    .glass-footer-brand a,
    .glass-footer-brand-link{
        grid-template-columns: auto auto;
        grid-template-areas:
            "logo title"
            "copy copy";
        justify-content: center;
    }
}



/* ==================================================
   END: FOOTER COLUMN ACCORDION + MOBILE FOOTER LAYOUT
   ================================================== */

/* ==================================================
   FINAL SHARED MOBILE HEADER/FOOTER OVERRIDES (768PX)
   High-specificity !important media-query overrides forcing the header into a
   two-column grid with the brand cluster and hamburger visible and the base
   .app-header hidden by default at 768px, plus a repeated copy of the footer-
   column accordion behavior for the same breakpoint.
   ================================================== */

/* ===================================
     FINAL SHARED MOBILE HEADER / FOOTER OVERRIDES
     =================================== */
@media (max-width: 768px) {
    .app-header .header-content{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
    }

    .app-header .brand-cluster{
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        justify-self: start !important;
        min-width: 0;
        width: auto !important;
    }

    .app-header .nav-toggle{
        display: inline-flex !important;
        justify-self: end !important;
        margin-left: 0 !important;
    }

    .app-header{
        display: none !important;
    }

    .app-header .main-nav{
        grid-column: 1 / -1;
        width: 100%;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .glass-footer-column{
        width: 100%;
    }

    .glass-footer-toggle{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
    }

    .glass-footer-toggle-icon{
        display: inline-block;
    }

    .glass-footer-column .glass-footer-links[hidden]{
        display: none !important;
    }

    .glass-footer-column .glass-footer-links{
        margin-top: 10px;
    }
}



/* ==================================================
   END: FINAL SHARED MOBILE HEADER/FOOTER OVERRIDES (768PX)
   ================================================== */

/* ==================================================
   SHARED SURFACES — UNIFIED CARD/PANEL STYLE ACROSS PAGES
   A unifying pass giving overview tiles, story/path/detail cards, resource
   tiles, category tiles, and blog cards one shared glassy gradient-card look
   (radius, border, shadow, blur, hover lift), plus shared
   label/value/title/text color rules and a shared flex layout for
   hero/cta/news-library/newsbot-toolbar action button rows.
   ================================================== */

/* =====================================================================
     SHARED SURFACES / FEATURE PANELS / ACTION GROUPS
     Unified presentation for landing, blog, and newsbot
     ===================================================================== */

.overview-tile,
.story-card,
.path-card,
.detail-card,
.resource-tile,
.category-tile,
.blog-card{
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl, 22px);
    border: 1px solid var(--glass-border, #FFFDFB);
    background: linear-gradient(
        180deg,
        var(--surface-card-start, #0A2948),
        var(--surface-card-end, #001A33)
    );
    box-shadow: var(--shadow-md, 0 18px 40px #0B0B0B);
    backdrop-filter: blur(8px);
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast);
}

.overview-tile,
.story-card,
.path-card,
.detail-card,
.resource-tile,
.category-tile{
    padding: 18px;
}


.path-card:hover,
.detail-card:hover,
.resource-tile:hover,
.category-tile:hover,
.blog-card:hover,
.story-card:hover{
    transform: translateY(-4px);
    border-color: #FFC300;
    box-shadow: 0 16px 34px var(--interactive-soft-shadow, #0B0B0B);
}

.overview-label,
.path-kicker{
    display: block;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    margin-bottom: 6px;
}

.overview-value{
    color: var(--text-primary);
    font-size: 1rem;
}

.feature-title,
.resource-title,
.category-tile-title,
.section-heading{
    color: var(--text-primary);
    font-family: "Libre Baskerville", serif;
}

.feature-text,
.resource-copy,
.category-tile-copy,
.story-copy,
.blog-card-blurb{
    color: var(--text-secondary);
}

.hero-actions,
.cta-actions,
.news-library-actions,
.newsbot-toolbar-actions{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.news-library-actions{
    display: inline-flex;
}

.newsbot-toolbar-actions{
    justify-content: center;
    width: 100%;
}


/* ==================================================
   END: SHARED SURFACES — UNIFIED CARD/PANEL STYLE ACROSS PAGES
   ================================================== */

/* ==================================================
   FEATURED STORY LINK WRAPPER + SHARED IMAGE/CARD REFINEMENTS
   Makes the whole featured-story block a clickable, accessible .featured-
   story-link (hover/focus/disabled states) wrapping .blog-feature, restates
   shared image styling for feature/blog-card/category-tile/story visuals, sets
   blog-card-image sizing and multi-line text clamping for card titles/blurbs,
   restyles .blog-card-cta as a solid gold pill, and adds a matching responsive
   breakpoint at 1180px.
   ================================================== */

.featured-story-link{
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none !important;
}

.featured-story-link:hover,
.featured-story-link:focus,
.featured-story-link:active,
.featured-story-link *{
    text-decoration: none !important;
}

.featured-story-link[role="link"]{
    cursor: pointer;
}

.featured-story-link.is-disabled{
    cursor: default;
    pointer-events: none;
}

.featured-story-link:focus-visible{
    outline: 2px solid var(--accent-primary);
    outline-offset: 4px;
    border-radius: 24px;
}

.featured-story-link .blog-feature{
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 22px;
    align-items: stretch;
}

/* Levitate the whole rounded featured-story card (not just the inner
   .blog-feature rectangle) when the featured story link inside it is
   hovered/focused. :has() lets the outer .dashboard-card react to a
   descendant's hover state. */
.dashboard-card:has(.featured-story-link){
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.dashboard-card:has(.featured-story-link:hover),
.dashboard-card:has(.featured-story-link:focus-visible){
    transform: translateY(-4px);
    box-shadow: 0 18px 36px #0B0B0B;
}

.feature-visual,
.blog-card-image,
.category-tile-visual,
.story-visual{
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--glass-border, #FFFDFB);
    box-shadow: var(--shadow-md, 0 18px 40px #0B0B0B);
}

.feature-visual img,
.blog-card-image img,
.category-tile-visual img,
.story-visual img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.blog-card-image{
    min-height: 170px;
    aspect-ratio: 16 / 9;
}

.blog-card-body{
    gap: 12px;
    padding: 18px;
}

.blog-card-title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-blurb{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: 8px;
    color: var(--bg-primary);
    font-family: "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    box-shadow: none;
}

.blog-card-cta:hover,
.blog-card-cta:focus-visible{
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--interactive-strong-shadow, #0B0B0B);
    color: var(--bg-primary);
    outline: none;
}

@media (max-width: 1180px) {
    .featured-story-link .blog-feature{
        grid-template-columns: 1fr;
    }
}



/* ==================================================
   END: FEATURED STORY LINK WRAPPER + SHARED IMAGE/CARD REFINEMENTS
   ================================================== */

/* ==================================================
   UNIFIED PRIMARY NAVIGATION (PILL NAV LINKS)
   The consolidated .app-header .main-nav pill-button navigation styling with
   hover/active gradient fill and focus outline, plus its collapsed/expanded
   mobile behavior (max-width 900px) via the .is-open class.
   ================================================== */

/* ===================================
     UNIFIED PRIMARY NAVIGATION
     =================================== */

.app-header .main-nav{
        display: flex;
        align-items: center;
        gap: 12px;
}


.app-header .main-nav .nav-link{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        border-radius: 999px;
        border: 1px solid transparent;
        background: var(--glass-surface);
        color: var(--muted-on-theme);
        padding: 12px 18px;
        letter-spacing: 0.08em;
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: uppercase;
        transition:
                transform var(--transition-fast),
                background var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
}


.app-header .main-nav .nav-link:hover,
.app-header .main-nav .nav-link:focus-visible,
.app-header .main-nav .nav-link.active{
        color: var(--text-on-light);
        background: linear-gradient(135deg, var(--accent-primary) 0%, #FFC300 100%);
        border-color: transparent;
        box-shadow: 0 3px 8px var(--interactive-hover-shadow);
        transform: translateY(-1px);
}


.app-header .main-nav .nav-link:focus-visible{
        outline: 2px solid #FFC300;
        outline-offset: 2px;
}


@media (max-width: 900px) {
        .app-header .main-nav{
                display: none;
                align-items: stretch;
                gap: 10px;
        }


        .app-header .main-nav.is-open{
                display: flex;
        }

}



/* ==================================================
   END: UNIFIED PRIMARY NAVIGATION (PILL NAV LINKS)
   ================================================== */

/* ==================================================
   END: BLOG RESOURCE NOTE / RANDOM QUOTE BLOCK
   ================================================== */

/* ==================================================
   FINAL ARTICLE CARD, HEADER ALIGNMENT & LOGO-LINK FIXES
   Rounds blog-card corners, locks the
   header into a three-column grid (brand / nav / theme-toggle) so navigation
   never shifts between pages, forces brand-name color per theme regardless of
   page-specific rules, adds a repeated 900px header breakpoint, gives article
   images their own inset border, and turns the header/footer logo images into
   proper parts of their surrounding home links.
   ================================================== */

/* ===================================
     FINAL ARTICLE CARD + HEADER ALIGNMENT FIXES
     =================================== */

/* Keep the article cards visually rounded while preserving the hover lift. */
.blog-card{
    border: 1px solid var(--glass-border, #FFFDFB);
    border-radius: 24px;
    overflow: hidden;
}

.blog-card-image{
    border: 0;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}

.blog-card-image img{
    display: block;
    border: 0;
    border-radius: 24px 24px 0 0;
}

/* Keep the header layout consistent so navigation does not shift between pages. */
.app-header .header-content{
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
    align-items: center;
}

.app-header .brand-cluster{
    justify-self: start;
}

.app-header .main-nav{
    justify-self: center;
    justify-content: center;
    width: auto;
}

.app-header{
    justify-self: end;
}

/* Prevent page-specific rules from changing the shared header branding style. */
body[data-theme="tawny"] .app-header .brand-name,
body[data-theme="dark"] .app-header .brand-name,
body[data-theme="tawny"] .app-header .brand-link .brand-name,
body[data-theme="dark"] .app-header .brand-link .brand-name{
    color: #FFC300;
    background: none;
    -webkit-text-fill-color: #FFC300;
}

body[data-theme="light"] .app-header .brand-name,
body[data-theme="light"] .app-header .brand-link .brand-name{
    color: #001A33;
    background: none;
    -webkit-text-fill-color: #001A33;
}

@media (max-width: 900px) {
    .app-header .header-content{
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .app-header .main-nav{
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }
}

/* ===================================
     FINAL ARTICLE IMAGE + LOGO LINK FIXES
     =================================== */

/* Give article images their own subtle curved border inside each card. */
.blog-card-image{
    margin: 14px 14px 0;
    width: calc(100% - 28px);
    border: 1px solid var(--glass-border, #FFFDFB);
    border-radius: 18px;
    overflow: hidden;
}

.blog-card-image img{
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    border-radius: inherit;
    object-fit: cover;
}

/* Keep footer brand artwork clickable as part of the home link. */
.glass-footer-brand-link{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "logo title"
        "copy copy";
    align-items: center;
}


/* ==================================================
   END: FINAL ARTICLE CARD, HEADER ALIGNMENT & LOGO-LINK FIXES
   ================================================== */

/* ==================================================
   FINAL ARTICLE PREVIEW YELLOW-EDGE REMOVAL
   Fixes a stray yellow image-well border on blog card thumbnails by giving
   .blog-card-image an explicit navy background and removing any
   ::before/::after pseudo-element edge, while keeping the footer logo artwork
   clickable as part of the home link.
   ================================================== */

/* ===================================
     FINAL ARTICLE PREVIEW YELLOW REMOVAL
     =================================== */

/* Keep the article preview corners while removing any yellow image-well edge. */
.blog-card .blog-card-image{
    background: #001A33;
    border: 1px solid var(--glass-border, #FFFDFB);
    border-radius: 18px;
    box-shadow: none;
    overflow: hidden;
}

.blog-card .blog-card-image::before,
.blog-card .blog-card-image::after{
    content: none !important;
}

.blog-card .blog-card-image img{
    border: 0;
    border-radius: inherit;
}

/* Make the footer logo artwork itself part of the homepage link. */
.glass-footer-brand-link .glass-footer-logo{
    cursor: pointer;
}


/* ==================================================
   END: FINAL ARTICLE PREVIEW YELLOW-EDGE REMOVAL
   ================================================== */

/* ==================================================
   FINAL BLOG-PAGE CARD RESPONSIVE BEHAVIOUR
   Matches the Blog page's article-card resizing behavior to NewsBot's: a
   responsive three/two/one-column .blog-cards-grid, full-height flexible
   cards, min-width fixes to prevent text overflow, word-wrapping on long
   titles, and breakpoints at 1180/900/720/520px adjusting columns, padding,
   and image sizing.
   ================================================== */

/* ===================================
     FINAL BLOG CARD RESPONSIVE BEHAVIOUR
     =================================== */

/* Match the Newsbot article-card behaviour on the Blog page so cards resize cleanly instead of squeezing. */
body.blog-page .blog-cards-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 22px);
    align-items: stretch;
}

body.blog-page .blog-card,
body.blog-page .blog-card-body,
body.blog-page .blog-card-link{
    min-width: 0;
}

body.blog-page .blog-card{
    height: 100%;
}

body.blog-page .blog-card-image{
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    min-height: clamp(160px, 22vw, 220px);
    aspect-ratio: 16 / 9;
}

body.blog-page .blog-card-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.blog-page .blog-card-title,
body.blog-page .blog-card-blurb,
body.blog-page .blog-card-category{
    overflow-wrap: anywhere;
    word-break: normal;
}

body.blog-page .blog-card-footer{
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 1180px) {
    body.blog-page .blog-cards-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    body.blog-page .blog-cards-grid{
        grid-template-columns: 1fr;
    }

    body.blog-page .blog-card-body{
        padding: 16px;
    }

    body.blog-page .blog-card-footer{
        align-items: flex-start;
        flex-direction: column;
    }

    body.blog-page .blog-card-date{
        margin-left: 0;
        text-align: left;
    }
}

@media (max-width: 520px) {
    body.blog-page .blog-shell,
body.blog-page .panel-body{
        padding-left: 14px;
        padding-right: 14px;
    }

    body.blog-page .blog-card-image{
        margin: 12px 12px 0;
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        min-height: 150px;
    }

    body.blog-page .blog-card-title{
        font-size: clamp(1.15rem, 7vw, 1.35rem);
    }

    body.blog-page .blog-card-cta{
        width: 100%;
    }
}



/* ==================================================
   END: FINAL BLOG-PAGE CARD RESPONSIVE BEHAVIOUR
   ================================================== */

/* ==================================================
   NEWSBOT IMAGE-LESS ARTICLE LAYOUT + RSS PLACEHOLDER HARDENING
   Two related passes handling NewsBot articles that have no image: a narrower
   toolbar column layout, auto-height cards, top padding when there's no
   thumbnail, a single-column featured layout for image-less stories, and (in
   the hardening pass) rules to fully hide the image slot (including an :empty
   selector) rather than just leave it collapsed.
   ================================================== */

/* ===================================
   NEWSBOT IMAGELESS ARTICLE LAYOUT FIXES
   =================================== */
body.newsbot-page .toolbar-layout{
    grid-template-columns: minmax(0, 1fr) 220px;
}

body.newsbot-page .blog-card-link,
body.newsbot-page .blog-card{
    height: auto;
    min-height: 0;
}

body.newsbot-page .blog-card--no-image .blog-card-blurb{
    display: block;
}

body.newsbot-page .feature-visual[hidden]{
    display: none !important;
}

@media (max-width: 900px) {
    body.newsbot-page .toolbar-layout{
        grid-template-columns: 1fr;
    }
}


/* ===================================
   NEWSBOT RSS IMAGE PLACEHOLDER HARDENING
   =================================== */
body.newsbot-page .blog-cards-grid{
    align-items: start;
}

body.newsbot-page .blog-card-link,
body.newsbot-page .blog-card{
    height: auto;
    min-height: 0;
}

body.newsbot-page .blog-card--no-image .blog-card-image,
body.newsbot-page .blog-card-image:empty,
body.newsbot-page .feature-visual[hidden]{
    display: none !important;
}

body.newsbot-page .blog-card--no-image .blog-card-body{
    padding-top: 24px;
}

body.newsbot-page .featured-story-link .blog-feature.blog-feature--no-image{
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

body.newsbot-page .featured-story-link .blog-feature.blog-feature--no-image .feature-copy{
    min-height: 0;
    justify-content: flex-start;
}


/* ==================================================
   END: NEWSBOT IMAGE-LESS ARTICLE LAYOUT + RSS PLACEHOLDER HARDENING
   ================================================== */

/* ==================================================
   BLOGPOST PAGE-SPECIFIC REFINEMENTS
   The single article/blogpost page'''s full styling: article/dashboard card
   backgrounds and borders, hero title sizing, the constrained-width story
   visual, and the .article-card content column (headings, paragraphs, pills,
   callouts, code blocks, checklists, divider).
   ================================================== */

/* ===================================
   BLOGPOST PAGE-SPECIFIC REFINEMENTS
   =================================== */
body.blogpost-page{
    --blogpost-card-bg: linear-gradient(180deg, #0A2948, #001A33);
    --blogpost-card-border: #FFFDFB;
}

body.blogpost-page .article-card,
body.blogpost-page .dashboard-card{
    background: var(--blogpost-card-bg);
    border-color: var(--blogpost-card-border);
    box-shadow: 0 22px 48px #0B0B0B;
}

body.blogpost-page .hero-title{
    font-size: clamp(2rem, 4.8vw, 4.2rem);
    line-height: 1;
    max-width: 980px;
}

body.blogpost-page .story-visual{
    width: min(100%, 1040px);
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 1200 / 620;
    margin: 0 auto 22px;
}

body.blogpost-page .blog-article-shell,
body.blogpost-page #resourcesSection,
body.blogpost-page .back-to-top-wrap{
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

body.blogpost-page .blog-article-shell{
    display: grid;
    gap: clamp(28px, 4vw, 48px);
}

body.blogpost-page #resourcesSection{
    margin-top: clamp(28px, 4vw, 48px);
}

body.blogpost-page .article-card{
    padding: clamp(22px, 4vw, 46px);
    border: 1px solid var(--blogpost-card-border);
    border-radius: 28px;
    overflow: hidden;
}

body.blogpost-page .article-card p,
body.blogpost-page .article-card li,
body.blogpost-page .article-card .article-callout p,
body.blogpost-page .article-card .article-checklist p,
body.blogpost-page .article-card .article-code-card{
    color: var(--text-primary);
}

body.blogpost-page .article-card h2,
body.blogpost-page .article-card h3,
body.blogpost-page .article-card strong,
body.blogpost-page .article-card .eyebrow,
body.blogpost-page .article-card .article-pill{
    color: var(--text-primary);
}

body.blogpost-page .article-card h2,
body.blogpost-page .article-card h3{
    font-family: "Libre Baskerville", serif;
    line-height: 1.12;
    margin: 1.35em 0 0.55em;
}

body.blogpost-page .article-card p,
body.blogpost-page .article-card ul,
body.blogpost-page .article-card .article-meta-row,
body.blogpost-page .article-card .article-callout,
body.blogpost-page .article-card .article-code-card,
body.blogpost-page .article-card .article-checklist{
    margin-bottom: 18px;
}

body.blogpost-page .article-card ul{
    padding-left: 1.25rem;
}

/* ==================================================
   NOTION-IMPORTED ARTICLE PROSE — READABLE ARTICLE TYPOGRAPHY
   The Notion export lands as plain markdown -> HTML (h2/h3, p, ul/ol, a,
   strong/em, blockquote, code/pre, img, hr, table) with no custom classes,
   so it all flows straight into .article-card. This block gives that plain
   content a proper editorial read: a comfortable measure, a slightly larger
   body size with generous leading, a distinct look for links/quotes/code/
   images/tables, and a bit more visual rhythm between sections — without
   touching the callout/checklist/pill styling above, which belongs to a
   different (hand-authored) content path.
   ================================================== */

body.blogpost-page .article-prose{
    max-width: 720px;
    margin: 0 auto;
    font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.125rem);
    line-height: 1.75;
}

body.blogpost-page .article-prose > *:first-child{
    margin-top: 0;
}

body.blogpost-page .article-prose > p:first-of-type{
    font-size: 1.2em;
    line-height: 1.65;
}

body.blogpost-page .article-prose h2,
body.blogpost-page .article-prose h3{
    position: relative;
    padding-top: 0.6em;
}

body.blogpost-page .article-prose h2::before,
body.blogpost-page .article-prose h3::before{
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 0.65em;
    background: var(--accent-primary);
}

body.blogpost-page .article-prose h2{
    font-size: clamp(1.5rem, 1vw + 1.25rem, 1.875rem);
}

body.blogpost-page .article-prose h3{
    font-size: clamp(1.15rem, 0.6vw + 1.05rem, 1.375rem);
}

body.blogpost-page .article-prose strong{
    font-weight: 700;
}

body.blogpost-page .article-prose em{
    font-style: italic;
}

body.blogpost-page .article-prose a{
    color: var(--accent-primary);
    text-decoration: underline;
    text-decoration-color: #FFC30099;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

body.blogpost-page .article-prose a:hover,
body.blogpost-page .article-prose a:focus-visible{
    text-decoration-color: currentColor;
}

body.blogpost-page .article-prose ul,
body.blogpost-page .article-prose ol{
    padding-left: 1.35rem;
    margin-bottom: 1.15em;
}

body.blogpost-page .article-prose ol{
    padding-left: 1.5rem;
}

body.blogpost-page .article-prose li{
    margin-bottom: 0.5em;
    padding-left: 0.3rem;
}

body.blogpost-page .article-prose li::marker{
    color: var(--accent-primary);
}

body.blogpost-page .article-prose li > ul,
body.blogpost-page .article-prose li > ol{
    margin-top: 0.5em;
    margin-bottom: 0;
}

body.blogpost-page .article-prose blockquote{
    margin: 1.75em 0;
    padding: 0.2em 0 0.2em 1.35em;
    border-left: 3px solid var(--accent-primary);
    font-family: "Libre Baskerville", serif;
    font-style: italic;
    font-size: 1.15em;
    line-height: 1.55;
    color: var(--text-secondary);
    text-align: left;
}

body.blogpost-page .article-prose blockquote p{
    margin-bottom: 0.5em;
}

body.blogpost-page .article-prose blockquote p:last-child{
    margin-bottom: 0;
}

body.blogpost-page .article-prose code{
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.88em;
    background: #FFFDFB14;
    border: 1px solid #FFFDFB1F;
    border-radius: 6px;
    padding: 0.15em 0.4em;
}

body.blogpost-page .article-prose pre{
    margin: 1.5em 0;
    padding: 1.15rem 1.25rem;
    border-radius: 14px;
    border: 1px solid #FFFDFB1F;
    background: #00131F;
    overflow-x: auto;
}

body.blogpost-page .article-prose pre code{
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.85em;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre;
}

body.blogpost-page .article-prose img{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.85em auto;
    border-radius: 16px;
    border: 1px solid #FFFDFB1F;
    box-shadow: 0 18px 36px #0B0B0B66;
}

body.blogpost-page .article-prose p:has(> img:only-child){
    margin-bottom: 1.85em;
}

body.blogpost-page .article-prose p:has(> img:only-child) img{
    margin-bottom: 0;
}

body.blogpost-page .article-prose hr{
    height: 1px;
    border: 0;
    margin: 2.75em 0;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}

body.blogpost-page .article-prose table{
    width: 100%;
    margin: 1.75em 0;
    border-collapse: collapse;
    font-size: 0.92em;
}

body.blogpost-page .article-prose th,
body.blogpost-page .article-prose td{
    padding: 0.7em 1em;
    text-align: left;
    border-bottom: 1px solid #FFFDFB2E;
}

body.blogpost-page .article-prose th{
    color: var(--accent-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid #FFFDFB4D;
}

@media (max-width: 640px){
    body.blogpost-page .article-prose table{
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ==================================================
   END: NOTION-IMPORTED ARTICLE PROSE
   ================================================== */

body.blogpost-page .article-meta-row{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.blogpost-page .article-pill{
    display: inline-flex;
    align-items: center;
    border: 1px solid #FFC300;
    border-radius: 999px;
    padding: 7px 12px;
    background: #FFC300;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.blogpost-page .article-callout,
body.blogpost-page .article-code-card,
body.blogpost-page .article-checklist article{
    border: 1px solid #FFFDFB;
    border-radius: 18px;
    background: #001A33;
}

body.blogpost-page .article-callout,
body.blogpost-page .article-code-card{
    padding: 18px;
}

body.blogpost-page .article-code-card{
    overflow-x: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    white-space: pre;
}

body.blogpost-page .article-checklist{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body.blogpost-page .article-checklist article{
    padding: 16px;
}

body.blogpost-page .article-divider{
    height: 1px;
    margin: 28px 0;
    background: linear-gradient(90deg, transparent, #FFC300, transparent);
}

@media (max-width: 720px) {
    body.blogpost-page .article-checklist{
        grid-template-columns: 1fr;
    }

}



/* ==================================================
   END: BLOGPOST PAGE-SPECIFIC REFINEMENTS
   ================================================== */

/* ==================================================
   TAWNY THEME SOURCE OF TRUTH — DEFAULT/TAWNY TOKENS
   The authoritative, !important-flagged token block for the default 'tawny'
   theme (applied via [data-theme="tawny"] or no data-theme attribute at all),
   redefining every background/text/accent/glass/shadow token to the brand
   navy-and-gold palette.
   ================================================== */

/* ===================================
   TAWNY THEME SOURCE OF TRUTH
   =================================== */

/* Default mode: TAWNY navy with brand yellow highlights */
html[data-theme="tawny"],
body[data-theme="tawny"],
:root:not([data-theme]),
body:not([data-theme]){
    --bg-primary: #001A33 !important;
    --bg-secondary: #0A2948 !important;
    --bg-tertiary: #103354 !important;
    --text-primary: #FFFDFB !important;
    --text-secondary: #FFFDFB !important;
    --text-tertiary: #FFC300 !important;
    --text-on-light: #001A33 !important;
    --border-color: #103354 !important;
    --accent-primary: #FFC300 !important;
    --accent-secondary: #FFC300 !important;
    --glow-primary: #FFC300 !important;
    --page-bg-start: #001A33 !important;
    --page-bg-end: #001A33 !important;
    --header-surface: #001A33 !important;
    --header-border: #103354 !important;
    --glass-surface: #0A2948 !important;
    --glass-surface-strong: #103354 !important;
    --glass-border: #103354 !important;
    --glass-border-strong: #FFC300 !important;
    --muted-on-theme: #FFFDFB !important;
    --subtle-on-theme: #FFFDFB !important;
    --surface-gradient-start: #0A2948 !important;
    --surface-gradient-end: #001A33 !important;
    --surface-card-start: #0A2948 !important;
    --surface-card-end: #001A33 !important;
    --header-strip-start: #103354 !important;
    --header-strip-end: #0A2948 !important;

    --interactive-hover-shadow: #FFC300 !important;
    --interactive-soft-shadow: #FFC300 !important;
    --interactive-strong-shadow: #FFC300 !important;

}


/* ==================================================
   END: TAWNY THEME SOURCE OF TRUTH — DEFAULT/TAWNY TOKENS
   ================================================== */

/* ==================================================
   TAWNY THEME SOURCE OF TRUTH — DARK MODE TOKENS
   The authoritative dark-mode token block ([data-theme="dark"]): a near-black
   matte background with gold borders/accents, overriding every semantic token
   with !important.
   ================================================== */

/* Dark mode: matte black base with brand yellow highlights */
html[data-theme="dark"],
body[data-theme="dark"]{
    --bg-primary: #0B0B0B !important;
    --bg-secondary: #0B0B0B !important;
    --bg-tertiary: #0B0B0B !important;
    --text-primary: #FFFDFB !important;
    --text-secondary: #FFFDFB !important;
    --text-tertiary: #FFC300 !important;
    --text-on-light: #001A33 !important;
    --border-color: #FFC300 !important;
    --accent-primary: #FFC300 !important;
    --accent-secondary: #FFC300 !important;
    --glow-primary: #FFC300 !important;
    --page-bg-start: #0B0B0B !important;
    --page-bg-end: #0B0B0B !important;
    --header-surface: #0B0B0B !important;
    --header-border: #FFC300 !important;
    --glass-surface: #0B0B0B !important;
    --glass-surface-strong: #0B0B0B !important;
    --glass-border: #FFC300 !important;
    --glass-border-strong: #FFC300 !important;
    --muted-on-theme: #FFFDFB !important;
    --subtle-on-theme: #FFFDFB !important;
    --surface-gradient-start: #0B0B0B !important;
    --surface-gradient-end: #0B0B0B !important;
    --surface-card-start: #0B0B0B !important;
    --surface-card-end: #0B0B0B !important;
    --header-strip-start: #0B0B0B !important;
    --header-strip-end: #0B0B0B !important;

    --interactive-hover-shadow: #FFC300 !important;
    --interactive-soft-shadow: #FFC300 !important;
    --interactive-strong-shadow: #FFC300 !important;

}


/* ==================================================
   END: TAWNY THEME SOURCE OF TRUTH — DARK MODE TOKENS
   ================================================== */

/* ==================================================
   TAWNY THEME SOURCE OF TRUTH — LIGHT MODE TOKENS
   The authoritative light-mode token block ([data-theme="light"]): warm-white
   surfaces with deep navy text and gold accents, overriding every semantic
   token with !important.
   ================================================== */

/* Light mode: warm white base, navy text and yellow accents */
html[data-theme="light"],
body[data-theme="light"]{
    --bg-primary: #FFFDFB !important;
    --bg-secondary: #FFFDFB !important;
    --bg-tertiary: #FFFDFB !important;
    --text-primary: #001A33 !important;
    --text-secondary: #0A2948 !important;
    --text-tertiary: #103354 !important;
    --text-on-light: #001A33 !important;
    --border-color: #103354 !important;
    --accent-primary: #FFC300 !important;
    --accent-secondary: #FFC300 !important;
    --glow-primary: #FFC300 !important;
    --page-bg-start: #FFFDFB !important;
    --page-bg-end: #FFFDFB !important;
    --header-surface: #FFFDFB !important;
    --header-border: #103354 !important;
    --glass-surface: #FFFDFB !important;
    --glass-surface-strong: #FFFDFB !important;
    --glass-border: #103354 !important;
    --glass-border-strong: #FFC300 !important;
    --muted-on-theme: #0A2948 !important;
    --subtle-on-theme: #103354 !important;
    --surface-gradient-start: #FFFDFB !important;
    --surface-gradient-end: #FFFDFB !important;
    --surface-card-start: #FFFDFB !important;
    --surface-card-end: #FFFDFB !important;
    --header-strip-start: #FFFDFB !important;
    --header-strip-end: #FFFDFB !important;

    --interactive-hover-shadow: #FFC300 !important;
    --interactive-soft-shadow: #FFC300 !important;
    --interactive-strong-shadow: #FFC300 !important;

    /* Cards were picking up the site-wide opaque navy/black box-shadow
       (--shadow-lg/md/sm), which reads as a heavy colored glow/halo against
       light, warm-white surfaces. Light mode gets no glow at all. */
    --shadow-lg: none !important;
    --shadow-md: none !important;
    --shadow-sm: none !important;

}


/* ==================================================
   END: TAWNY THEME SOURCE OF TRUTH — LIGHT MODE TOKENS
   ================================================== */

/* ==================================================
   LIGHT-MODE TEXT COLOR + PER-THEME FORM/NAV BACKGROUND FIXES
   Forces body text elements to navy in light mode, sets background-color
   (deliberately not the background shorthand, to avoid erasing the select's
   custom arrow image) on nav-link/card-action/story-card/article-card/form-
   input/form-select per theme (light/dark/tawny), and standardizes the
   primary-button and active-nav-link fill plus gold hover color for
   links/badges/eyebrows across all themes.
   ================================================== */

body[data-theme="light"],
body[data-theme="light"] p,
body[data-theme="light"] li,
body[data-theme="light"] span,
body[data-theme="light"] label,
body[data-theme="light"] input,
body[data-theme="light"] select{
    color: #001A33;
}

/* background-color (not the background shorthand) throughout this trio of
   rules: the shorthand silently resets background-image to none on every
   element it matches, which was wiping .form-select's custom dropdown-arrow
   background-image each time one of these theme rules applied — the actual
   cause of the sort dropdown periodically rendering with no visible arrow
   or styling depending on theme. */
body[data-theme="light"] .nav-link,
body[data-theme="light"] .card-action,
body[data-theme="light"] .story-card,
body[data-theme="light"] .article-card,
body[data-theme="light"] .form-input,
body[data-theme="light"] .form-select{
    background-color: #FFFDFB;
    color: #001A33;
    border-color: #103354;
}

body[data-theme="dark"] .nav-link,
body[data-theme="dark"] .card-action,
body[data-theme="dark"] .story-card,
body[data-theme="dark"] .article-card,
body[data-theme="dark"] .form-input,
body[data-theme="dark"] .form-select{
    background-color: #0B0B0B;
    color: #FFFDFB;
    border-color: #FFC300;
}

body[data-theme="tawny"] .nav-link,
body[data-theme="tawny"] .card-action,
body[data-theme="tawny"] .story-card,
body[data-theme="tawny"] .article-card,
body[data-theme="tawny"] .form-input,
body[data-theme="tawny"] .form-select{
    background-color: #0A2948;
    color: #FFFDFB;
    border-color: #103354;
}

body[data-theme] .btn-primary,
body[data-theme] .nav-link.active{
    background: #FFC300;
    color: #001A33;
    border-color: #FFC300;
}

body[data-theme] a:hover,
body[data-theme] .brand-name,
body[data-theme] .brand-badge,
body[data-theme] .eyebrow{
    color: #FFC300;
}



/* ==================================================
   END: LIGHT-MODE TEXT COLOR + PER-THEME FORM/NAV BACKGROUND FIXES
   ================================================== */

/* ==================================================
   FINAL HEADER/NAV PARITY ACROSS LANDING/BLOG/NEWSBOT + FEATURED BLURB FIX
   Re-declares the app-header, header-content grid, brand-cluster, main-nav,
   and pill nav-link hover/active styling identically scoped to body.landing-
   page/.blog-page/.newsbot-page so all three pages render an identical header
   regardless of page-specific rules, adds matching dark/light/tawny header
   background overrides, removes a max-width cap on the NewsBot featured blurb,
   and repeats the 900px/768px responsive header collapse for all three page
   types.
   ================================================== */

/* ===================================
   FINAL HEADER / NAV PARITY + NEWSBOT FEATURED BLURB FIX
   =================================== */
body.landing-page .app-header,
body.blog-page .app-header,
body.newsbot-page .app-header{
    background: var(--header-surface, #001A33);
    border-bottom: 1px solid var(--header-border, var(--glass-border-strong, #FFC300));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.landing-page .app-header .header-content,
body.blog-page .app-header .header-content,
body.newsbot-page .app-header .header-content{
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
    align-items: center;
    gap: 18px;
}

body.landing-page .app-header .brand-cluster,
body.blog-page .app-header .brand-cluster,
body.newsbot-page .app-header .brand-cluster{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    /* justify-self was "start", which makes a grid item shrink-wrap to its
	   content's natural (max-content) width instead of filling its grid
	   column. That left this item with no definite width of its own, so it
	   was free to render wider than the column actually allotted it and
	   visually spill out of its cell — painting straight over the nav pills
	   that follow it in the DOM, which is what the "TAWNY Cyber" wordmark
	   overlapping the nav really was. Percentage sizing further down the
	   chain (.brand-name's max-width:100%) also can't resolve against an
	   ancestor with no definite width, so the overflow/ellipsis safety net
	   on .brand-name never got the chance to engage either. Stretching to
	   fill the column instead gives every descendant a real width to shrink
	   and clip against. */
    justify-self: stretch;
}

body.landing-page .app-header .main-nav,
body.blog-page .app-header .main-nav,
body.newsbot-page .app-header .main-nav{
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 12px;
    width: auto;
}

body.landing-page[data-theme="dark"] .app-header,
body.blog-page[data-theme="dark"] .app-header,
body.newsbot-page[data-theme="dark"] .app-header,
body.landing-page[data-theme="light"] .app-header,
body.blog-page[data-theme="light"] .app-header,
body.newsbot-page[data-theme="light"] .app-header,
body.landing-page[data-theme="tawny"] .app-header,
body.blog-page[data-theme="tawny"] .app-header,
body.newsbot-page[data-theme="tawny"] .app-header{
    background: var(--header-surface);
    border-bottom-color: var(--header-border);
}

body.newsbot-page #featuredBlurb,
body.newsbot-page .featured-story-link .feature-text{
    max-width: none;
    width: 100%;
}

@media (max-width: 768px) {
    body.landing-page .app-header .header-content,
body.blog-page .app-header .header-content,
body.newsbot-page .app-header .header-content{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body.landing-page .app-header .nav-toggle,
body.blog-page .app-header .nav-toggle,
body.newsbot-page .app-header .nav-toggle{
        display: inline-flex !important;
        justify-self: end !important;
    }

    body.landing-page .app-header .main-nav,
body.blog-page .app-header .main-nav,
body.newsbot-page .app-header .main-nav{
        display: none;
        align-items: stretch;
        gap: 10px;
    }

    body.landing-page .app-header .main-nav.is-open,
body.blog-page .app-header .main-nav.is-open,
body.newsbot-page .app-header .main-nav.is-open{
        display: flex;
    }
}


/* ==================================================
   END: FINAL HEADER/NAV PARITY ACROSS LANDING/BLOG/NEWSBOT + FEATURED BLURB FIX
   ================================================== */

/* ==================================================
   REQUESTED THEME REFINEMENTS (ROUND 1 & 2)
   Two small rounds of client-requested tweaks: light-mode back-to-top text
   color, footer link color, landing floating-caption/hero-panel colors in dark
   and light mode, removing a hero-copy max-width cap, dark-mode footer link
   gold color, and a light-mode body background/removal of a stray ::after
   overlay.
   ================================================== */

/* ===================================
   Requested theme refinements
   =================================== */

body[data-theme="light"] .back-to-top{
    color: #001A33 !important;
}

.glass-footer-links a,
.glass-footer-links a:visited,
.glass-footer-links a:hover,
.glass-footer-links a:focus-visible{
    color: #103354;
}

body.landing-page[data-theme="light"] .floating-caption{
    color: #103354;
}

body.landing-page[data-theme="dark"] .hero-panel{
    background: #0B0B0B;
}

body.landing-page .hero-copy{
    max-width: none;
}

/* ===================================
   Additional requested theme refinements
   =================================== */

body[data-theme="dark"] .glass-footer-links a,
body[data-theme="dark"] .glass-footer-links a:visited,
body[data-theme="dark"] .glass-footer-links a:hover,
body[data-theme="dark"] .glass-footer-links a:focus-visible{
    color: #FFC300;
}

body.landing-page[data-theme="dark"] .floating-caption{
    background: #0B0B0B;
    border-color: #0B0B0B;
}

body[data-theme="light"] .brand-badge{
    color: #103354;
}

body[data-theme="light"]{
    background: linear-gradient(180deg, var(--page-bg-start) 0%, var(--page-bg-end) 100%);
}

body[data-theme="light"]::after{
    background: none;
}

body.landing-page[data-theme="light"] .hero-panel{
    background: #FFFDFB;
}


/* ==================================================
   END: REQUESTED THEME REFINEMENTS (ROUND 1 & 2)
   ================================================== */

/* ==================================================
   FINAL THEME REFINEMENTS + CUSTOM SORT-SELECT PILL BUTTON
   Finalizes footer-link and back-to-top colors per theme, then restyles the
   #sortSelect dropdown as a solid gold pill button matching .btn-primary's
   exact computed style (with a custom navy chevron icon) including hover/focus
   states, its option-list styling, and an IE/Edge ::-ms-expand fix.
   ================================================== */

/* ===================================
   Final requested theme refinements
   =================================== */

/* Default/dark footer policy and social links stay TAWNY gold. */
body:not([data-theme="light"]) .glass-footer-links a,
body:not([data-theme="light"]) .glass-footer-links a:visited,
body:not([data-theme="light"]) .glass-footer-links a:hover,
body:not([data-theme="light"]) .glass-footer-links a:focus-visible,
body[data-theme="tawny"] .glass-footer-links a,
body[data-theme="tawny"] .glass-footer-links a:visited,
body[data-theme="tawny"] .glass-footer-links a:hover,
body[data-theme="tawny"] .glass-footer-links a:focus-visible,
body[data-theme="dark"] .glass-footer-links a,
body[data-theme="dark"] .glass-footer-links a:visited,
body[data-theme="dark"] .glass-footer-links a:hover,
body[data-theme="dark"] .glass-footer-links a:focus-visible{
    color: #FFC300;
}

/* Keep light-mode footer links in the requested deep blue. */
body[data-theme="light"] .glass-footer-links a,
body[data-theme="light"] .glass-footer-links a:visited,
body[data-theme="light"] .glass-footer-links a:hover,
body[data-theme="light"] .glass-footer-links a:focus-visible{
    color: #103354;
}

/* Light-mode back-to-top text color. */
body[data-theme="light"] .back-to-top,
body[data-theme="light"] .button-match-top{
    color: #0A2948 !important;
}

/* Sort control (Newest first / Oldest first): styled to match the site's
   pill buttons (e.g. #refreshFeedsBtn / .btn-primary) rather than looking
   like a plain form field, per the request to make it "look like one of
   the buttons". Values below are copied from .btn-primary's actual
   computed style (solid #FFC300 fill, #001A33 text, 999px radius, Avenir
   13px/700/uppercase) rather than approximated, so it's a genuine match
   and not just a similar-looking select. The dropdown arrow is navy
   (#001A33) instead of the old yellow-on-navy version, since it now needs
   to read against a yellow fill instead of a dark one. */
#sortSelect{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 46px;
    padding: 12px 44px 12px 24px;
    border-radius: 999px;
    background-color: #FFC300;
    color: #001A33;
    font-family: "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23001A33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 14px 14px;
    transition:
        transform var(--transition-fast, 0.2s ease),
        box-shadow var(--transition-fast, 0.2s ease),
        background-color var(--transition-fast, 0.2s ease);
}

#sortSelect:hover{
    color: #0A2948;
    transform: translateY(-1px);
}

#sortSelect:focus-visible{
    outline: 2px solid #001A33;
    outline-offset: 2px;
}

/* The popup list of options keeps the site's usual dark dropdown-list
   styling (matching .form-select option elsewhere) — only the closed
   control itself becomes a yellow pill, matching how a native <select>'s
   listbox is a separate rendering surface from the control. */
#sortSelect option{
    background: #0A2948;
    color: #FFFDFB;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

/* Legacy Edge (EdgeHTML, pre-Chromium) ignores `appearance: none` on
   <select> and draws its own dropdown arrow via a ::-ms-expand pseudo
   element, which would otherwise sit on top of / next to the custom arrow
   above. Hiding it is harmless everywhere else since only that engine
   recognizes the selector. */
#sortSelect::-ms-expand{
    display: none;
}


/* ==================================================
   END: FINAL THEME REFINEMENTS + CUSTOM SORT-SELECT PILL BUTTON
   ================================================== */

/* ==================================================
   DEFAULT NAV BACKGROUND, SOFTER GLOW SHADOWS, ACTIVE-NAV GOLD FIX
   Gives the default/tawny main-nav a navy pill background (with a smaller-
   radius mobile variant), dials back the harsh yellow glow shadows used across
   buttons/links/nav into softer semi-transparent tokens, and adds a high-
   specificity fix keeping the current-page nav link gold across every theme
   after cycling themes.
   ================================================== */

/* ===================================
     FINAL DEFAULT NAV + SOFTER GLOW TUNING
     =================================== */

/* Default/Tawny mode: keep the primary site navigation on the deep brand navy. */
body:not([data-theme]) .app-header .main-nav,
body[data-theme="tawny"] .app-header .main-nav{
    background: #001A33;
    border-radius: 999px;
    padding: 6px;
}

@media (max-width: 900px) {
    body:not([data-theme]) .app-header .main-nav,
body[data-theme="tawny"] .app-header .main-nav{
        background: #001A33;
        border-radius: 14px;
    }
}

/* Reduce the harshness of interactive yellow glows across buttons and navigation. */
:root,
body:not([data-theme]),
body[data-theme="tawny"],
body[data-theme="dark"],
body[data-theme="light"]{
    --glow-primary: #FFC30029;
    --interactive-hover-shadow: #FFC3001F;
    --interactive-soft-shadow: #FFC30017;
    --interactive-strong-shadow: #FFC30024;
}

.nav-link:hover,
.nav-link.active{
    box-shadow: 0 3px 8px var(--interactive-hover-shadow);
}

.card-action:hover,
.header-theme-cycle:hover,
.header-theme-cycle:focus-visible{
    box-shadow: 0 3px 8px var(--interactive-soft-shadow);
}

.btn-primary:hover,
.blog-card-cta:hover,
.blog-card-cta:focus-visible,
.back-to-top:hover,
.back-to-top:focus-visible,
.button-match-top:hover,
.button-match-top:focus-visible{
    box-shadow: 0 4px 8px var(--interactive-strong-shadow);
}


/* ===================================
     ACTIVE NAV LINK THEME TOGGLE FIX
     =================================== */

/* Keep the current page nav item gold after cycling Default, Light, and Dark themes. */
.app-header .main-nav .nav-link.active,
.app-header .main-nav .nav-link.active:visited,
.app-header .main-nav .nav-link.active:hover,
.app-header .main-nav .nav-link.active:focus-visible,
body:not([data-theme]) .app-header .main-nav .nav-link.active,
body:not([data-theme]) .app-header .main-nav .nav-link.active:visited,
body:not([data-theme]) .app-header .main-nav .nav-link.active:hover,
body:not([data-theme]) .app-header .main-nav .nav-link.active:focus-visible,
body[data-theme="tawny"] .app-header .main-nav .nav-link.active,
body[data-theme="tawny"] .app-header .main-nav .nav-link.active:visited,
body[data-theme="tawny"] .app-header .main-nav .nav-link.active:hover,
body[data-theme="tawny"] .app-header .main-nav .nav-link.active:focus-visible,
body[data-theme="light"] .app-header .main-nav .nav-link.active,
body[data-theme="light"] .app-header .main-nav .nav-link.active:visited,
body[data-theme="light"] .app-header .main-nav .nav-link.active:hover,
body[data-theme="light"] .app-header .main-nav .nav-link.active:focus-visible,
body[data-theme="dark"] .app-header .main-nav .nav-link.active,
body[data-theme="dark"] .app-header .main-nav .nav-link.active:visited,
body[data-theme="dark"] .app-header .main-nav .nav-link.active:hover,
body[data-theme="dark"] .app-header .main-nav .nav-link.active:focus-visible{
    background: #FFC300 !important;
    background-image: none !important;
    color: #001A33 !important;
    border-color: #FFC300 !important;
    box-shadow: 0 3px 8px #FFC3001F !important;
}


/* ==================================================
   END: DEFAULT NAV BACKGROUND, SOFTER GLOW SHADOWS, ACTIVE-NAV GOLD FIX
   ================================================== */

/* ==================================================
   FINAL BLOG/NEWSBOT SEARCH BAR + FOOTER REFINEMENTS
   Hides the redundant category dropdown on the Blog page, narrows its toolbar
   to two columns, adds a gold outline to the Blog/NewsBot search inputs (with
   a stronger focus ring) and a matching border to #sortSelect, keeps the 'Read
   Article' CTA text navy in light mode, golds the NewsBot library header's
   divider, and turns footer links warm-white on hover in default/dark themes.
   ================================================== */

/* ===================================
   FINAL BLOG / NEWSBOT SEARCH + FOOTER REFINEMENTS
   =================================== */

body.blog-page .toolbar-layout{
    grid-template-columns: minmax(0, 1fr) 220px !important;
}

@media (max-width: 900px) {
    body.blog-page .toolbar-layout{
        grid-template-columns: 1fr !important;
    }
}

/* Blog and Newsbot: TAWNY gold outline on the search field, so it reads as
   a styled, on-brand part of the toolbar instead of a plain unstyled input.
   This overrides the per-theme border-color rules above (whose specificity
   would otherwise win on the default "tawny" theme, where the border
   blended into the background). The sort dropdown (#sortSelect) has its
   own solid-fill pill-button styling instead (see "Sort control" above) —
   it doesn't need this outline treatment on top of that. */
body.blog-page .search-shell .form-input,
body.newsbot-page .search-shell .form-input,
body.blog-page #blogSearch,
body.newsbot-page #blogSearch{
    border-color: #FFC300 !important;
    outline: 1px solid #FFC300;
    outline-offset: 0;
}

body.blog-page .search-shell .form-input:focus,
body.newsbot-page .search-shell .form-input:focus,
body.blog-page #blogSearch:focus,
body.newsbot-page #blogSearch:focus{
    border-color: #FFC300 !important;
    outline: 2px solid #FFC300;
    outline-offset: 0;
    box-shadow: 0 0 0 3px #FFC30029 !important;
}

body.blog-page #sortSelect,
body.newsbot-page #sortSelect{
    border: 1px solid #FFC300 !important;
}

/* Light mode: keep Read article text deep navy. */
body[data-theme="light"] .blog-card-cta,
body[data-theme="light"] .blog-card-cta:visited,
body[data-theme="light"] .blog-card-cta:hover,
body[data-theme="light"] .blog-card-cta:focus-visible{
    color: #0A2948 !important;
}

/* Newsbot: make the divider beneath the library header TAWNY gold. */
body.newsbot-page #blogLibrary .card-header,
body.newsbot-page #blogLibrary .card-header--elevated{
    border-bottom-color: #FFC300 !important;
}

/* Default and dark mode: footer links turn warm white on hover/focus. */
body:not([data-theme="light"]) .glass-footer-links a:hover,
body:not([data-theme="light"]) .glass-footer-links a:focus-visible,
body[data-theme="tawny"] .glass-footer-links a:hover,
body[data-theme="tawny"] .glass-footer-links a:focus-visible,
body[data-theme="dark"] .glass-footer-links a:hover,
body[data-theme="dark"] .glass-footer-links a:focus-visible{
    color: #FFFDFB !important;
}


/* ==================================================
   END: FINAL BLOG/NEWSBOT SEARCH BAR + FOOTER REFINEMENTS
   ================================================== */

/* ==================================================
   NEWSBOT RSS LOADING POPUP — TAWNY HERO STYLE
   Styles the NewsBot RSS-refresh loading popup as a hero-style glass panel:
   deep-navy gradient with a faint grid pattern, gold border/glow, an animated
   diagonal light sweep (@keyframes rssPopupSweep), a centered eyebrow label,
   sized action buttons, a light-theme color variant, and a mobile padding
   adjustment; ends with a follow-up comment and the @keyframes
   newsbotLoadingWheel spinner animation.
   ================================================== */

/* ===================================
   NEWSBOT RSS LOADING POPUP - TAWNY HERO STYLE
   Matches the landing hero treatment: deep navy glass, subtle grid,
   fine TAWNY-gold outline, rounded corners, and gold loading accents.
   =================================== */
body.newsbot-page{
    --rss-popup-bg: #001A33EB;
    --rss-popup-bg-soft: #0A2948BD;
    --rss-popup-border: #FFC300B8;
    --rss-popup-grid: #FFFDFB0E;
    --rss-popup-glow: #FFC30042;
}

body.newsbot-page .newsbot-toolbar-section{
    position: relative;
    margin: clamp(18px, 3vw, 32px) 0 clamp(26px, 4vw, 42px);
    padding: clamp(18px, 2.4vw, 28px);
    border: 1px solid var(--rss-popup-border);
    border-radius: clamp(22px, 2vw, 34px);
    overflow: hidden;
    background:
        linear-gradient(var(--rss-popup-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--rss-popup-grid) 1px, transparent 1px),
        linear-gradient(135deg, var(--rss-popup-bg-soft), var(--rss-popup-bg));
    background-size: 22px 22px, 22px 22px, auto;
    box-shadow:
        0 0 0 1px #FFC3001F inset,
        0 18px 46px #0000005C,
        0 0 34px var(--rss-popup-glow);
}

body.newsbot-page .newsbot-toolbar-section::before{
    content: "Cybersecurity intelligence • learning • news";
    display: block;
    width: 100%;
    margin-bottom: 4px;
    color: #FFC300;
    font-size: clamp(0.68rem, 1vw, 0.78rem);
    font-weight: 800;
    letter-spacing: 0.34em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

body.newsbot-page .newsbot-toolbar-section::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0%, #FFFDFB14 44%, transparent 68%);
    transform: translateX(-120%);
    animation: rssPopupSweep 6.5s ease-in-out infinite;
}


body.newsbot-page .newsbot-toolbar-section .button-match-top,
body.newsbot-page .newsbot-toolbar-section .btn-primary{
    min-width: 180px;
    border-radius: 14px;
    box-shadow: none;
}

/* Compatibility for RSS loading popups added by script or future markup. */


@keyframes rssPopupSweep {
    0%,
48%,
100% {
        transform: translateX(-120%);
    }
    68% {
        transform: translateX(120%);
    }
}


body[data-theme="light"].newsbot-page{
    --rss-popup-bg: #FFFDFBF0;
    --rss-popup-bg-soft: #FFFDFBD1;
    --rss-popup-grid: #0A294814;
    --rss-popup-glow: #FFC3003D;
}

@media (max-width: 720px) {
    body.newsbot-page .newsbot-toolbar-section{
        padding: 18px;
        border-radius: 24px;
    }

    body.newsbot-page .newsbot-toolbar-section::before{
        letter-spacing: 0.2em;
    }

    
}


/* ===================================
   Newsbot RSS loading popup revision
   =================================== */


@keyframes newsbotLoadingWheel { to { transform: rotate(360deg); } }



/* ==================================================
   END: NEWSBOT RSS LOADING POPUP — TAWNY HERO STYLE
   ================================================== */

/* ==================================================
   REQUESTED NEWSBOT REFINEMENTS — HOVER LIFT, SUMMARY LAYOUT, BLUR BACKDROP
   Adds a subtle 1px hover-lift transition to footer links, the site logo, and
   the brand name; reflows the 'News summary' stat tiles into a borderless flex
   row; blurs the page content (but not the header/footer) behind the loading
   popup while it's visible using :has(); and strips the newsbot toolbar
   section back down to an unboxed, transparent layout.
   ================================================== */

/* ===================================
   Requested Newsbot refinements
   =================================== */

/* Footer and header hover movement: standard subtle 1px lift. */
.glass-footer-links a{
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    will-change: transform;
}

.glass-footer-links a:hover,
.glass-footer-links a:focus-visible{
    transform: translateY(-1px);
}

.brand-name{
    transition: color 0.2s ease, transform 0.2s ease;
    will-change: transform;
}

.brand-name{
    display: inline-block;
}

.brand-name:hover,
.brand-name:focus-visible{
    transform: translateY(-1px);
}

/* Newsbot RSS loading popup: centred modal, with a subtle blurred page backdrop. */


/* News summary only: remove boxed/card grid treatment so it floats on the page. */
body.newsbot-page section.analysis-overview[aria-label="News summary"]{
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 2.4vw, 28px);
    align-items: flex-start;
    margin: 0 0 24px;
}

body.newsbot-page section.analysis-overview[aria-label="News summary"] .overview-tile{
    flex: 1 1 220px;
    min-width: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.newsbot-page section.analysis-overview[aria-label="News summary"] .overview-label,
body.newsbot-page section.analysis-overview[aria-label="News summary"] .overview-value{
    text-shadow: none;
}

/* Newsbot toolbar only: remove the outer boxed/grid treatment so its contents float on the page. */
body.newsbot-page .newsbot-toolbar-section{
    position: relative;
    margin: clamp(18px, 3vw, 32px) 0 clamp(26px, 4vw, 42px);
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    background-image: none;
    background-size: auto;
    box-shadow: none;
}

body.newsbot-page .newsbot-toolbar-section::after{
    content: none;
    display: none;
    animation: none;
    background: none;
}

body.newsbot-page .newsbot-toolbar-actions{
    position: relative;
    z-index: 1;
}


@media (max-width: 720px) {
    body.newsbot-page .newsbot-toolbar-section{
        padding: 0;
        border-radius: 0;
    }

    
}


/* ==================================================
   END: REQUESTED NEWSBOT REFINEMENTS — HOVER LIFT, SUMMARY LAYOUT, BLUR BACKDROP
   ================================================== */

/* ==================================================
   FINAL RSS POPUP SIZING, SUMMARY TILES REINSTATED, CTA HOVER COLORS
   Tightens the loading popup's title/copy/actions spacing with !important
   overrides, refines which elements stay unblurred behind it, reinstates the
   boxed three-column card grid for the NewsBot summary tiles, and standardizes
   the navy hover/focus text color on the Read Article, Blog Posts, Newsbot,
   and Visit-blog CTA buttons across NewsBot/landing/blog pages, closing with
   the intro comment for the next (loading-notice) section.
   ================================================== */

/* ===================================
   Final RSS loading popup adjustment
   =================================== */


body.newsbot-page #newsbotLoadingPopup .hero-title{
    margin-bottom: 5px !important;
    font-size: clamp(1.25rem, 2vw, 2rem) !important;
    line-height: 1.05 !important;
}

body.newsbot-page #newsbotLoadingPopup .hero-copy{
    margin-bottom: 8px !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
}


body.newsbot-page #newsbotLoadingPopup .hero-actions{
    margin: 7px 0 8px !important;
}



/* ===================================
   NewsBot summary tiles reinstated
   =================================== */
body.newsbot-page section.analysis-overview[aria-label="News summary"]{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 24px;
}

body.newsbot-page section.analysis-overview[aria-label="News summary"] .overview-tile{
    position: relative;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--glass-border, #FFFDFB);
    border-radius: var(--radius-xl, 22px);
    background: linear-gradient(
        180deg,
        var(--surface-card-start, #0A2948),
        var(--surface-card-end, #001A33)
    );
    box-shadow: var(--shadow-md, 0 18px 40px #0B0B0B);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
    body.newsbot-page section.analysis-overview[aria-label="News summary"]{
        grid-template-columns: 1fr;
    }
}

/* ===================================
   Requested button hover text colour update
   =================================== */

/* Newsbot: Read Article / Open Article card CTA. */
body.newsbot-page .blog-card-link:hover .blog-card-cta,
body.newsbot-page .blog-card-link:focus-visible .blog-card-cta,
body.newsbot-page .blog-card-cta:hover,
body.newsbot-page .blog-card-cta:focus-visible{
    color: #001A33 !important;
}

/* Newsbot loading popup: Blog Posts button. */


/* Newsbot: Explore Sources button. */
body.newsbot-page .newsbot-toolbar-actions .btn-primary:hover,
body.newsbot-page .newsbot-toolbar-actions .btn-primary:focus-visible,
body.newsbot-page .newsbot-toolbar-actions .button-match-top:hover,
body.newsbot-page .newsbot-toolbar-actions .button-match-top:focus-visible{
    color: #001A33 !important;
}

/* Landing page: Blog Posts, Newsbot, Visit blog page, and Open Newsbot buttons. */
body.landing-page .hero-actions .btn-primary:hover,
body.landing-page .hero-actions .btn-primary:focus-visible,
body.landing-page .cta-actions .btn-primary:hover,
body.landing-page .cta-actions .btn-primary:focus-visible{
    color: #001A33 !important;
}

/* Blog page: ensure the "Read Article" CTA text turns navy on hover/focus. */
body.blog-page .blog-card-cta:hover,
body.blog-page .blog-card-cta:focus-visible,
body.blog-page .blog-card-link:hover .blog-card-cta,
body.blog-page .blog-card-link:focus-visible .blog-card-cta{
    color: #001A33 !important;
}

/* ===================================
   NewsBot loading notice section
   Compact in-page hero section. Content is centred and scaled down from the landing hero.
   =================================== */

/* ==================================================
   END: FINAL RSS POPUP SIZING, SUMMARY TILES REINSTATED, CTA HOVER COLORS
   ================================================== */

/* ==================================================
   NEWSBOT LOADING NOTICE SECTION — LAYOUT RESET
   A heavily !important-qualified reset turning the #newsbotLoadingPopup
   element from an overlay popup into an in-page, centered notice section
   (position, sizing, background, opacity all normalized), removes its former
   backdrop ::before pseudo-element, and defines its is-hidden / is-visible /
   __shell display states.
   ================================================== */

body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 1 !important;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 22px 0 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--text-primary);
    text-align: center;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
    isolation: auto !important;
}

body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section::before,
body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section.is-visible::before{
    content: none !important;
    display: none !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section.is-hidden,
body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section:not(.is-visible){
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
}

body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section.is-visible{
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
}

body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__shell{
    width: 100% !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}


/* ==================================================
   END: NEWSBOT LOADING NOTICE SECTION — LAYOUT RESET
   ================================================== */

/* ==================================================
   NEWSBOT LOADING NOTICE — HERO PANEL, SPINNER, FEATURED POST
   Lays out the loading-notice's inner hero panel and centered grid, its
   eyebrow/title/copy text, the spinning gold loading wheel, and the embedded
   featured-post preview card (title, copy, meta) shown while NewsBot content
   is loading.
   ================================================== */

body.newsbot-page #newsbotLoadingPopup .hero-panel{
    position: relative;
    overflow: hidden;
    max-width: 980px;
    margin: 0 auto;
    border: 1px solid var(--glass-border-strong);
    border-radius: 26px;
    background: linear-gradient(180deg, #0A2948, #001A33);
    box-shadow: var(--shadow-md);
    padding: clamp(18px, 3vw, 32px);
}

body.newsbot-page #newsbotLoadingPopup .hero-grid{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: 16px;
    min-height: 0;
    text-align: center;
}

body.newsbot-page #newsbotLoadingPopup .hero-grid > div{
    width: min(100%, 780px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body.newsbot-page #newsbotLoadingPopup .eyebrow{
    color: var(--muted-on-theme);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    font-weight: 800;
    margin: 0 0 8px !important;
    text-align: left;
    align-self: flex-start;
    width: 100%;
}

body.newsbot-page #newsbotLoadingPopup .hero-title{
    max-width: 700px;
    margin: 0 auto 10px !important;
    color: var(--text-primary);
    font-size: clamp(1.55rem, 3.5vw, 2.75rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em;
    text-align: center;
}

body.newsbot-page #newsbotLoadingPopup .hero-copy{
    max-width: 60ch !important;
    margin: 0 auto 14px !important;
    color: var(--text-secondary);
    font-size: clamp(0.88rem, 1.2vw, 1rem) !important;
    line-height: 1.5 !important;
    text-align: center;
}

body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__spinner{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 14px !important;
}

body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__spinner span{
    width: 30px !important;
    height: 30px !important;
    border: 3px solid #FFC30038 !important;
    border-top-color: #FFC300 !important;
    border-right-color: #FFC300 !important;
    border-radius: 50%;
    box-shadow: 0 0 18px #FFC30061;
    animation: newsbotLoadingWheel 0.8s linear infinite;
}

body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__featured-post{
    width: min(100%, 680px);
    max-width: 680px;
    margin: 0 auto 14px !important;
    padding: clamp(12px, 1.8vw, 18px) !important;
    border: 1px solid #FFC3005C;
    border-radius: 18px;
    background: #001A3373;
    text-align: center;
}

body.newsbot-page #newsbotLoadingPopup .section-kicker{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__featured-title{
    margin: 3px auto 6px !important;
    color: var(--text-primary);
    font-family: "Libre Baskerville", serif;
    font-size: clamp(1rem, 1.45vw, 1.28rem) !important;
    text-align: center;
}

body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__featured-copy{
    max-width: 58ch;
    margin: 0 auto 10px !important;
    color: #FFFDFBD1;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    text-align: center;
}

body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__featured-meta{
    max-width: 520px;
    margin: 0 auto;
}


/* ==================================================
   END: NEWSBOT LOADING NOTICE — HERO PANEL, SPINNER, FEATURED POST
   ================================================== */

/* ==================================================
   NEWSBOT LOADING NOTICE — ACTIONS, QUOTE CALLOUT, LIGHT THEME, MOBILE
   Centers the loading notice's action-button row and shrinks its .btn-primary,
   styles a left-accented gold quote callout, ensures the surrounding page
   stays unblurred, sets light-mode color variants, and adjusts sizing/spacing
   at the 768px breakpoint.
   ================================================== */

body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__actions,
body.newsbot-page #newsbotLoadingPopup .hero-actions{
    display: flex;
    justify-content: center;
    margin: 0 auto 14px !important;
}

body.newsbot-page #newsbotLoadingPopup .btn-primary{
    padding: 10px 18px;
    font-size: 0.78rem;
}

body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__quote{
    display: block;
    width: min(100%, 620px);
    max-width: 620px;
    margin: 0 auto !important;
    padding: 11px 14px !important;
    border: 1px solid #FFC3004C;
    border-left: 4px solid #FFC300;
    border-radius: 16px;
    background: #FFC30014;
    color: #FFFDFBE6;
    font-size: 0.88rem;
    line-height: 1.45;
    text-align: center;
}

body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__quote p{
    margin: 0 auto;
    text-align: center;
}

body.newsbot-page:has(#newsbotLoadingPopup.newsbot-loading-section.is-visible) .blog-shell > :not(#newsbotLoadingPopup):not(.glass-footer),
body.newsbot-page:has(#newsbotLoadingPopup.newsbot-loading-section.is-visible) .app-header,
body.newsbot-page:has(#newsbotLoadingPopup.newsbot-loading-section.is-visible) .glass-footer{
    filter: none !important;
}

body[data-theme="light"].newsbot-page #newsbotLoadingPopup .hero-panel{
    background: linear-gradient(180deg, #FFFDFB, #f4f7fb);
}

body[data-theme="light"].newsbot-page #newsbotLoadingPopup .newsbot-loading-section__featured-post,
body[data-theme="light"].newsbot-page #newsbotLoadingPopup .newsbot-loading-section__quote{
    background: #FFC3001A;
}

body[data-theme="light"].newsbot-page #newsbotLoadingPopup .newsbot-loading-section__featured-copy,
body[data-theme="light"].newsbot-page #newsbotLoadingPopup .newsbot-loading-section__quote{
    color: #001A33D1;
}

@media (max-width: 768px) {
    body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section{
        margin: 18px 0 28px !important;
    }

    body.newsbot-page #newsbotLoadingPopup .hero-panel{
        padding: 18px;
        border-radius: 22px;
    }

    body.newsbot-page #newsbotLoadingPopup .hero-title{
        font-size: clamp(1.45rem, 8vw, 2.2rem) !important;
    }

    body.newsbot-page #newsbotLoadingPopup .hero-copy,
body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__featured-copy,
body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__quote{
        font-size: 0.84rem !important;
    }

    body.newsbot-page #newsbotLoadingPopup .newsbot-loading-section__featured-meta{
        grid-template-columns: 1fr;
    }
}


/* ==================================================
   END: NEWSBOT LOADING NOTICE — ACTIONS, QUOTE CALLOUT, LIGHT THEME, MOBILE
   ================================================== */

/* ==================================================
   NEWSBOT SPINNER VARIANTS + RESULTS-META GRID LAYOUT
   Forces navy button text across all loading-section button states, defines an
   inline (non-popup) spinner variant used inline in the feature copy, and
   restructures NewsBot's .results-meta into a two-column grid so the result
   count and active-filter label align left/right with a shared inline spinner
   slot.
   ================================================== */

/* ===================================
   NewsBot loading/status wheel refinements
   =================================== */
body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section .btn-primary,
body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section .btn-primary:visited,
body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section .btn-primary:hover,
body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section .btn-primary:focus,
body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section .btn-primary:focus-visible,
body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section .btn-primary:active{
    color: #001A33 !important;
}

body.newsbot-page .newsbot-loading-section__spinner--inline{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10px auto 0 !important;
    text-align: center;
}

body.newsbot-page .newsbot-loading-section__spinner--inline[hidden]{
    display: none !important;
}

body.newsbot-page .newsbot-loading-section__spinner--inline span{
    width: 30px !important;
    height: 30px !important;
    border: 3px solid #FFC30038 !important;
    border-top-color: #FFC300 !important;
    border-right-color: #FFC300 !important;
    border-radius: 50%;
    box-shadow: 0 0 18px #FFC30061;
    animation: newsbotLoadingWheel 0.8s linear infinite;
}

body.newsbot-page .feature-copy .newsbot-loading-section__spinner--inline{
    margin: 12px auto 0 !important;
}

body.newsbot-page .results-meta{
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: flex-start;
    column-gap: 20px;
    row-gap: 8px;
    text-align: left;
}

body.newsbot-page .results-meta #resultsCount{
    grid-column: 1;
    width: auto;
    margin: 0;
    text-align: left;
    justify-self: start;
}

body.newsbot-page .active-filter-loading-group{
    display: contents;
}

body.newsbot-page .active-filter-loading-group #activeFilterLabel{
    grid-column: 2;
    margin: 0;
    text-align: right;
    justify-self: end;
}

body.newsbot-page .newsbot-loading-section__spinner--meta{
    grid-column: 1 / -1;
    justify-self: center;
    align-self: center;
    width: auto;
    margin: 2px auto 0 !important;
}



/* ==================================================
   END: NEWSBOT SPINNER VARIANTS + RESULTS-META GRID LAYOUT
   ================================================== */

/* ==================================================
   HEADER BRAND COMBINED LOGO+WORDMARK LINK
   Wraps the header logo image and 'TAWNY' wordmark into a single .brand-link,
   with a code comment explaining a flex-shrink fix that stops the wordmark
   from overflowing and visually overlapping the nav links, plus its
   hover/focus and per-theme text-color rules.
   ================================================== */

/* ===================================
   HEADER BRAND COMBINED LINK
   Combines mike.png and TAWNY into one home link while preserving the
   existing visual spacing, logo sizing, typography, and hover lift.
   =================================== */
.app-header .brand-link{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* flex-shrink is intentionally 1 (not the previous 0): with shrink
       disabled, this link refused to shrink even as its .brand-cluster
       parent shrank around it, so its content (the wordmark text) would
       overflow past its own box and get painted underneath whatever
       header element came after it — the exact "Cyber overlaps the nav"
       bug. Allowing it to shrink, combined with the overflow/ellipsis
       safety net on .brand-name below, means the wordmark truncates
       instead of ever visually overlapping a sibling, at any viewport
       width or font-fallback scenario. See the matching fix on the
       body.landing-page/blog-page/newsbot-page .brand-link override below. */
    flex: 0 1 auto;
    min-width: 0;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    will-change: transform;
}

.app-header .brand-link:hover,
.app-header .brand-link:focus-visible{
    color: var(--text-primary);
    transform: translateY(-1px);
}

.app-header .brand-link:focus-visible{
    outline: 2px solid #FFC300;
    outline-offset: 4px;
    border-radius: 14px;
}

.app-header .brand-link .site-logo{
    flex: 0 0 auto;
}

.app-header .brand-link .brand-name,
.app-header .brand-link:hover .brand-name,
.app-header .brand-link:focus-visible .brand-name{
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
    transform: none !important;
}

body[data-theme] .app-header .brand-link,
body[data-theme] .app-header .brand-link:hover,
body[data-theme] .app-header .brand-link:focus-visible{
    color: var(--text-primary);
}

/* ==================================================
   END: HEADER BRAND COMBINED LOGO+WORDMARK LINK
   ================================================== */

/* ==================================================
   NEWSBOT LOADING SECTION — DARK-MODE BACKGROUND FIX
   Scoped, triple-selector (body/body/html attribute) overrides forcing the
   loading notice's background, shell, hero panel, featured-post card, and
   quote callout to solid matte black in dark mode instead of the default navy
   gradient.
   ================================================== */

/* ===================================
   NewsBot loading section dark-mode fix
   Keep this scoped to the in-page loading section only.
   =================================== */
body.newsbot-page[data-theme="dark"] #newsbotLoadingPopup.newsbot-loading-section,
body[data-theme="dark"].newsbot-page #newsbotLoadingPopup.newsbot-loading-section,
html[data-theme="dark"] body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section{
    background: #0B0B0B !important;
}

body.newsbot-page[data-theme="dark"] #newsbotLoadingPopup.newsbot-loading-section .newsbot-loading-section__shell,
body[data-theme="dark"].newsbot-page #newsbotLoadingPopup.newsbot-loading-section .newsbot-loading-section__shell,
html[data-theme="dark"] body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section .newsbot-loading-section__shell,
body.newsbot-page[data-theme="dark"] #newsbotLoadingPopup.newsbot-loading-section .hero-panel,
body[data-theme="dark"].newsbot-page #newsbotLoadingPopup.newsbot-loading-section .hero-panel,
html[data-theme="dark"] body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section .hero-panel{
    background: #0B0B0B !important;
    background-image: none !important;
}

body.newsbot-page[data-theme="dark"] #newsbotLoadingPopup.newsbot-loading-section .newsbot-loading-section__featured-post,
body[data-theme="dark"].newsbot-page #newsbotLoadingPopup.newsbot-loading-section .newsbot-loading-section__featured-post,
html[data-theme="dark"] body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section .newsbot-loading-section__featured-post,
body.newsbot-page[data-theme="dark"] #newsbotLoadingPopup.newsbot-loading-section .newsbot-loading-section__quote,
body[data-theme="dark"].newsbot-page #newsbotLoadingPopup.newsbot-loading-section .newsbot-loading-section__quote,
html[data-theme="dark"] body.newsbot-page #newsbotLoadingPopup.newsbot-loading-section .newsbot-loading-section__quote{
    background: #0B0B0B !important;
    background-image: none !important;
}


/* ==================================================
   END: NEWSBOT LOADING SECTION — DARK-MODE BACKGROUND FIX
   ================================================== */

/* ==================================================
   REQUESTED LANDING CARD REFINEMENTS
   Adds a gold border to landing-page story cards, story visuals, and floating
   captions, and centers the floating-caption and blockquote text/alignment.
   ================================================== */

/* ===================================
   Requested landing card refinements
   =================================== */

body.landing-page .story-card,
body.landing-page .story-visual,
body.landing-page .floating-caption{
    border: 1px solid #FFC300;
}

body.landing-page .floating-caption,
body.landing-page blockquote{
    text-align: center;
}

body.landing-page blockquote{
    margin-left: auto;
    margin-right: auto;
}




/* ==================================================
   END: REQUESTED LANDING CARD REFINEMENTS
   ================================================== */

/* ==================================================
   MOBILE HEADER VISIBILITY + COLLAPSIBLE NAV FIX (900PX)
   A comprehensive mobile-header rebuild at max-width 900px: a named-grid-area
   layout (brand / theme-toggle / hamburger on one row, nav below), sized
   theme-toggle and hamburger buttons, the collapsible .main-nav panel with
   .is-open, an animated hamburger-to-X icon transform, a narrower 420px
   padding tweak, and hiding the animated #bg canvas entirely on mobile for
   performance.
   ================================================== */

/* ===================================
   MOBILE HEADER VISIBILITY + COLLAPSIBLE NAV FIX
   Keeps the header visible on small screens, with the theme toggle
   and burger on the same row and nav links collapsed underneath.
   =================================== */
@media (max-width: 900px) {
    .app-header{
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 1001;
    }

    .app-header .header-content{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        grid-template-areas:
            "brand theme toggle"
            "nav nav nav";
        align-items: center !important;
        gap: 10px 12px !important;
        text-align: left !important;
    }

    .app-header .brand-cluster{
        grid-area: brand;
        min-width: 0;
        width: auto !important;
        justify-self: start !important;
    }

    .app-header .user-info,
    .app-header .user-control-panel{
        grid-area: theme;
        display: inline-flex !important;
        justify-self: end !important;
        align-items: center !important;
        width: auto !important;
    }

    .app-header .header-theme-cycle{
        width: 48px !important;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0 !important;
        border-radius: 14px;
    }

    .app-header .nav-toggle{
        grid-area: toggle;
        display: inline-flex !important;
        justify-self: end !important;
        align-self: center !important;
        flex: 0 0 auto;
    }

    .app-header .main-nav{
        grid-area: nav;
        grid-column: 1 / -1 !important;
        display: none !important;
        width: 100% !important;
        margin-top: 4px;
        padding: 12px;
        border: 1px solid var(--header-border, var(--border-color));
        border-radius: 16px;
        background: var(--header-surface, var(--bg-primary));
        box-shadow: 0 18px 36px #0B0B0B;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
    }

    .app-header .main-nav.is-open{
        display: flex !important;
    }

    .app-header .main-nav .nav-link{
        width: 100%;
    }

    .app-header .nav-toggle.is-active span:nth-child(1){
        transform: translateY(7px) rotate(45deg);
    }

    .app-header .nav-toggle.is-active span:nth-child(2){
        opacity: 0;
    }

    .app-header .nav-toggle.is-active span:nth-child(3){
        transform: translateY(-7px) rotate(-45deg);
    }

    .app-header .nav-toggle span{
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
}

@media (max-width: 420px) {
    .app-header .header-content{
        padding-left: 14px;
        padding-right: 14px;
        gap: 8px;
    }

    .app-header .brand-badge{
        display: none;
    }
}

/* Mobile performance: remove the moving canvas dots and connector lines when the header collapses. */
@media (max-width: 900px) {
    #bg{
        display: none !important;
        visibility: hidden !important;
    }
}


/* ==================================================
   END: MOBILE HEADER VISIBILITY + COLLAPSIBLE NAV FIX (900PX)
   ================================================== */

/* ==================================================
   BLOG RANDOM QUOTE PILL, TEMPLATE-PAGE FIXES, MOBILE FILTER SCROLLER
   Styles the .random-quote-pill reinstated between the Blog article grid and
   footer, sizes/aligns the template-page's article card and story visual with
   larger body copy, adds a generic .mobile-hide-on-small-screens utility, and
   (max-width 768px) turns the Blog/NewsBot category filter-pill row into a
   horizontally scrollable single line with a styled scrollbar.
   ================================================== */

/* ===================================================================
   BLOG PAGE: RANDOM QUOTE PILL
   Just the quote pill from the home page's random-message feature,
   reinstated between the article library and the footer. Reuses the
   site's existing unscoped .resource-tile card (already used the same
   way elsewhere, so it needs no page-specific scoping) and adds only
   the gold border + centering + spacing to match.
   =================================================================== */

.random-quote-pill{
    max-width: 720px;
    margin: 40px auto;
    border-color: #FFC300;
    text-align: center;
}

.random-quote-pill blockquote{
    margin: 0;
}

.random-quote-pill #random-message{
    margin: 0;
    color: var(--text-primary);
}

/* ==================================================
   TEMPLATE PAGE: ARTICLE BORDER + BACK-TO-TOP SPACING
   Keeps the template aligned with the shared site layout.
   ================================================== */

body.template-page .article-card{
    border: 1px solid var(--accent-primary, #FFC300);
}

body.template-page .story-visual{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* Bigger, easier-to-read article body copy, matched against the narrower
   760px article-card column above. */
body.template-page .article-card p,
body.template-page .article-card li,
body.template-page .article-card .article-callout p,
body.template-page .article-card .article-checklist p,
body.template-page .article-card .article-code-card{
    font-size: 1.15rem;
    line-height: 1.8;
}

body.template-page .article-card h2{
    font-size: clamp(1.6rem, 3vw, 2.1rem);
}

body.template-page .article-card h3{
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

body.template-page .back-to-top-wrap{
    margin-top: clamp(28px, 4vw, 48px);
}


/* Hide non-essential summary/feature groups on mobile-sized screens. */
@media (max-width: 768px) {
    .mobile-hide-on-small-screens{
        display: none !important;
    }
}

/* ===================================
   NEWSBOT MOBILE SOURCE FILTER SCROLLER
   Keep source pills on one line and allow horizontal touch scrolling.
   =================================== */
@media (max-width: 768px) {
    body.newsbot-page .filter-pill-row,
    body.blog-page .filter-pill-row {
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--accent-primary) transparent;
    }

    body.newsbot-page .filter-pill-row::-webkit-scrollbar,
    body.blog-page .filter-pill-row::-webkit-scrollbar {
        height: 5px;
    }

    body.newsbot-page .filter-pill-row::-webkit-scrollbar-track,
    body.blog-page .filter-pill-row::-webkit-scrollbar-track {
        background: transparent;
    }

    body.newsbot-page .filter-pill-row::-webkit-scrollbar-thumb,
    body.blog-page .filter-pill-row::-webkit-scrollbar-thumb {
        background: var(--accent-primary);
        border-radius: 999px;
    }

    body.newsbot-page .filter-pill,
    body.blog-page .filter-pill {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}


/* ==================================================
   END: BLOG RANDOM QUOTE PILL, TEMPLATE-PAGE FIXES, MOBILE FILTER SCROLLER
   ================================================== */

/* ==================================================
   CANONICAL HEADER BRANDING PARITY + FEATURED STORY BORDER
   Makes the home page's header logo+wordmark the single source of truth, re-
   applying identical sizing/spacing/flex-shrink and per-theme color rules to
   the .brand-link on the landing, blog, and NewsBot pages so the header
   renders pixel-identical everywhere, and adds a matching gold border to the
   featured-story panel on Blog/NewsBot.
   ================================================== */

/* ==================================================
   CANONICAL HEADER BRANDING PARITY
   Home (index.html) is the source of truth for the header logo + wordmark.
   Keep Blog and NewsBot visually identical regardless of page-level tokens.
   ================================================== */
body.landing-page .app-header .brand-link,
body.blog-page .app-header .brand-link,
body.newsbot-page .app-header .brand-link{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Matches the flex-shrink fix on the base .app-header .brand-link rule
       above — this page-scoped override has higher specificity and was
       still winning with flex-shrink:0, which is what let the wordmark
       overflow into and visually overlap the nav on the home/blog/newsbot
       pages specifically. */
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1;
}

body.landing-page .app-header .brand-link .site-logo,
body.blog-page .app-header .brand-link .site-logo,
body.newsbot-page .app-header .brand-link .site-logo{
    width: clamp(56px, 7vw, 76px);
    height: clamp(56px, 7vw, 76px);
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

body.landing-page .app-header .brand-link .brand-name,
body.blog-page .app-header .brand-link .brand-name,
body.newsbot-page .app-header .brand-link .brand-name{
    display: inline-block;
    margin: 0;
    padding: 0;
    font-family: "Libre Baskerville", serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    /* 1.2, not 1 - at line-height:1 the descender on the lowercase "y"
       in "Cyber" sat right on this box's edge and got clipped by
       overflow:hidden below. 1.2 gives descenders room while staying
       visually tight next to the logo. */
    line-height: 1.2;
    text-decoration: none;
    background: none;
    transform: none;
    /* Overflow safety net: if the wordmark still doesn't have room (a
       fallback font substituted for Libre Baskerville, browser zoom,
       an unusually narrow window) this truncates the text with an
       ellipsis instead of letting it spill past its box and get
       visually painted over by the nav links that follow it — which is
       what "overlap" actually was. min-width:0 lets this flex item
       shrink at all; without it, overflow/ellipsis never gets a chance
       to engage because the box is never smaller than the text. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Match the Home page wordmark colour in each shared theme. */
body.landing-page[data-theme="tawny"] .app-header .brand-name,
body.blog-page[data-theme="tawny"] .app-header .brand-name,
body.newsbot-page[data-theme="tawny"] .app-header .brand-name,
body.landing-page[data-theme="dark"] .app-header .brand-name,
body.blog-page[data-theme="dark"] .app-header .brand-name,
body.newsbot-page[data-theme="dark"] .app-header .brand-name{
    color: #FFC300;
    -webkit-text-fill-color: #FFC300;
}

body.landing-page[data-theme="light"] .app-header .brand-name,
body.blog-page[data-theme="light"] .app-header .brand-name,
body.newsbot-page[data-theme="light"] .app-header .brand-name{
    color: #001A33;
    -webkit-text-fill-color: #001A33;
}

/* ==================================================
   FEATURED STORY BRAND BORDER
   Match the yellow border used by the Home page hero panel.
   ================================================== */
body.blog-page #featuredSection,
body.newsbot-page #featuredSection{
    border: 1px solid var(--glass-border-strong);
}


/* ==================================================
   END: CANONICAL HEADER BRANDING PARITY + FEATURED STORY BORDER
   ================================================== */

/* ==================================================
   ASCII ART FILE FOOTER BANNER
   A closing decorative comment block containing the same large ASCII-art
   'TAWNY CYBER' logo used at the top of the file, marking the end of
   style.css.
   ================================================== */

/*
	████████╗ █████╗ ██╗    ██╗███╗   ██╗██╗   ██╗     ██████╗██╗   ██╗██████╗ ███████╗██████╗ 
	╚══██╔══╝██╔══██╗██║    ██║████╗  ██║╚██╗ ██╔╝    ██╔════╝╚██╗ ██╔╝██╔══██╗██╔════╝██╔══██╗
	   ██║   ███████║██║ █╗ ██║██╔██╗ ██║ ╚████╔╝     ██║      ╚████╔╝ ██████╔╝█████╗  ██████╔╝
	   ██║   ██╔══██║██║███╗██║██║╚██╗██║  ╚██╔╝      ██║       ╚██╔╝  ██╔══██╗██╔══╝  ██╔══██╗
	   ██║   ██║  ██║╚███╔███╔╝██║ ╚████║   ██║       ╚██████╗   ██║   ██████╔╝███████╗██║  ██║
	   ╚═╝   ╚═╝  ╚═╝ ╚══╝╚══╝ ╚═╝  ╚═══╝   ╚═╝        ╚═════╝   ╚═╝   ╚═════╝ ╚══════╝╚═╝  ╚═╝
*/

/* ==================================================
   END: ASCII ART FILE FOOTER BANNER
   ================================================== */