/**
 * HARNESS UI - Neutral Chrome Styling
 *
 * This stylesheet provides styling for the test harness chrome (controls, panels, validation UI)
 * using a separate variable namespace to avoid conflicts with Gravity UI components under test.
 *
 * Design Philosophy:
 * - Neutral, non-intrusive styling
 * - Clear visual separation from components under test
 * - Optimized for readability and functionality
 * - No Bootstrap or external framework dependencies
 *
 * CSS ISOLATION ARCHITECTURE:
 * ===========================
 *
 * CRITICAL RULES:
 *
 * 1. NEVER use generic class names in harness-specific CSS
 *    ❌ BAD:  .showcase-item, .demo-section, .label
 *    ✅ GOOD: .harness-{component}-showcase, .harness-{component}-demo
 *
 * 2. ALWAYS wrap components under test in .component-isolation
 *    <div class="component-isolation">
 *        <GravityButton /> ← Isolated from harness CSS
 *    </div>
 *
 * 3. Use BEM naming for harness-specific styles:
 *    - .harness-{component}-{element}
 *    - .harness-{component}-{element}--{modifier}
 *    - Example: .harness-combobox-showcase, .harness-button-demo--large
 *
 * 4. NEVER use --harness-bg-* variables inside component demo areas
 *    - Dark harness colors are for chrome ONLY
 *    - Use explicit light colors (#f9fafb) in demo areas
 */

:root {
    /* Harness Color Palette - Neutral grays */
    --harness-bg-primary: #1a1a1a;
    --harness-bg-secondary: #2d2d2d;
    --harness-bg-tertiary: #3d3d3d;
    --harness-bg-elevated: #252525;
    
    --harness-text-primary: #e5e5e5;
    --harness-text-secondary: #a3a3a3;
    --harness-text-tertiary: #737373;
    
    --harness-border-primary: #404040;
    --harness-border-secondary: #525252;
    
    /* Harness Semantic Colors */
    --harness-success: #22c55e;
    --harness-warning: #f59e0b;
    --harness-error: #ef4444;
    --harness-info: #3b82f6;
    --harness-accent-blue: #60a5fa;
    
    --harness-success-bg: rgba(34, 197, 94, 0.1);
    --harness-warning-bg: rgba(245, 158, 11, 0.1);
    --harness-error-bg: rgba(239, 68, 68, 0.1);
    --harness-info-bg: rgba(59, 130, 246, 0.1);
    
    /* Harness Spacing */
    --harness-space-1: 0.25rem;
    --harness-space-2: 0.5rem;
    --harness-space-3: 0.75rem;
    --harness-space-4: 1rem;
    --harness-space-6: 1.5rem;
    --harness-space-8: 2rem;
    
    /* Harness Typography */
    --harness-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --harness-font-mono: "Fira Code", "Courier New", monospace;
    --harness-font-size-xs: 0.75rem;
    --harness-font-size-sm: 0.875rem;
    --harness-font-size-base: 1rem;
    --harness-font-size-lg: 1.125rem;
    --harness-font-size-xl: 1.25rem;
    
    /* Harness Layout */
    --harness-radius-sm: 0.25rem;
    --harness-radius-md: 0.5rem;
    --harness-radius-lg: 0.75rem;
    --harness-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --harness-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --harness-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
    
    /* Harness Transitions */
    --harness-transition-fast: 150ms ease;
    --harness-transition-base: 250ms ease;
    --harness-transition-slow: 350ms ease;
}

/* Reset for harness elements */
.harness-app,
.harness-app * {
    box-sizing: border-box;
}

/* Harness App Container */
.harness-app {
    font-family: var(--harness-font-family);
    font-size: var(--harness-font-size-base);
    color: var(--harness-text-primary);
    background: var(--harness-bg-primary);
    min-height: 100vh;
    padding: var(--harness-space-4);
}

/* Component isolation area - white background for components under test */

.harness-container {
    width: 100%;
    padding: 0 var(--harness-space-4);
    margin: 0;
    display: grid;
    gap: var(--harness-space-4);
    grid-template-columns: 1fr;
    scroll-margin-top: 0;
    overflow-anchor: none; /* Prevent browser from auto-scrolling to focused elements */
}

/* Prevent auto-scroll on harness sections */
.harness-header,
.harness-controls,
.harness-preview,
.harness-events,
.harness-info {
    scroll-margin-top: 2rem;
    overflow-anchor: none;
}

/* ============================================
   CSS ISOLATION BOUNDARY
   ============================================

   CRITICAL: Wrap ALL Gravity UI components in this boundary
   to prevent harness CSS from bleeding into components.

   Usage in harness Razor files:

   <div class="harness-showcase-container">
       <label class="harness-label">Component Demo</label>
       <div class="component-isolation">
           <GravityButton /> ← Component starts with clean slate
       </div>
   </div>

   This ensures:
   1. Component receives NO inherited styles from harness
   2. Gravity UI variables work correctly
   3. Component's own CSS is authoritative
   ============================================ */

.component-isolation {
    all: unset; /* Reset all inherited properties */
    display: block; /* Restore necessary display */
    /* Component now has clean CSS context */
}

/* Harness Panels */
.harness-panel {
    background: var(--harness-bg-secondary);
    border: 1px solid var(--harness-border-primary);
    border-radius: var(--harness-radius-lg);
    overflow: hidden;
    box-shadow: var(--harness-shadow-sm);
}

.harness-panel-header {
    background: var(--harness-bg-tertiary);
    padding: var(--harness-space-3) var(--harness-space-4);
    border-bottom: 1px solid var(--harness-border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.harness-panel-title-group {
    display: flex;
    align-items: center;
    gap: var(--harness-space-3);
}

.harness-back-link {
    font-size: var(--harness-font-size-sm);
    color: var(--harness-info);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--harness-transition-fast);
    cursor: pointer;
}

.harness-back-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.harness-panel-title {
    font-size: var(--harness-font-size-lg);
    font-weight: 600;
    margin: 0;
    color: var(--harness-text-primary);
}

.harness-panel-content {
    padding: var(--harness-space-4);
    transition: max-height var(--harness-transition-base);
}

.harness-panel-content.collapsed {
    max-height: 0;
    padding: 0;
    overflow: hidden;
}

/* Component Panel - Special Styling */
.harness-component-panel {
    background: #ffffff;
    border: 2px solid var(--harness-border-secondary);
}

.harness-component-panel .harness-panel-header {
    background: var(--harness-bg-elevated);
}

.harness-component-isolation {
    background: #ffffff;
    padding: var(--harness-space-6);
    color: #111827; /* Dark text for white background - components inherit naturally */
    /* Layout flows naturally - no flex centering for multi-component layouts */
}

/* Component Demo Container - for multi-component harnesses */
.harness-component-demo {
    display: block;
    width: 100%;
    background: #ffffff; /* Pure white background for components */
    padding: var(--harness-space-4);
    border-radius: var(--harness-radius-md);
    color: #111827; /* Dark text in white demo area - children inherit naturally */
}

.harness-component-demo h4 {
    color: #111827;
    margin-top: 0;
    margin-bottom: var(--harness-space-2);
    font-size: var(--harness-font-size-lg);
    font-weight: 600;
}

/* Variants Showcase - white background */
.harness-variants-showcase {
    background: #ffffff;
    padding: var(--harness-space-4);
    border-radius: var(--harness-radius-md);
    margin-top: var(--harness-space-4);
    color: #111827;
}

.harness-variants-showcase h4 {
    color: #111827;
    margin-top: var(--harness-space-4);
    margin-bottom: var(--harness-space-3);
    font-size: var(--harness-font-size-lg);
    font-weight: 600;
}

.harness-variants-showcase h4:first-child {
    margin-top: 0;
}

/* Variant grids */
.variant-grid,
.size-grid,
.icon-grid,
.state-grid {
    display: flex;
    gap: var(--harness-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--harness-space-4);
}

/* Buttons */
.harness-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--harness-space-2);
    padding: var(--harness-space-2) var(--harness-space-4);
    font-size: var(--harness-font-size-sm);
    font-weight: 500;
    border: 1px solid var(--harness-border-primary);
    border-radius: var(--harness-radius-md);
    background: var(--harness-bg-tertiary);
    color: var(--harness-text-primary);
    cursor: pointer;
    transition: all var(--harness-transition-fast);
}

.harness-btn:hover {
    background: var(--harness-bg-elevated);
    border-color: var(--harness-border-secondary);
}

.harness-btn:active {
    transform: translateY(1px);
}

.harness-btn-primary {
    background: var(--harness-info);
    border-color: var(--harness-info);
    color: white;
}

.harness-btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.harness-btn-danger {
    background: var(--harness-error);
    border-color: var(--harness-error);
    color: white;
}

.harness-btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.harness-btn-small {
    padding: var(--harness-space-1) var(--harness-space-2);
    font-size: var(--harness-font-size-xs);
}

.harness-btn-icon {
    padding: var(--harness-space-2);
    border: none;
    background: transparent;
    font-size: var(--harness-font-size-lg);
    cursor: pointer;
    transition: opacity var(--harness-transition-fast);
}

.harness-btn-icon:hover {
    opacity: 0.8;
}

/* Form Elements */
.harness-input,
.harness-select {
    width: 100%;
    padding: var(--harness-space-2) var(--harness-space-3);
    background: var(--harness-bg-tertiary);
    border: 1px solid var(--harness-border-primary);
    border-radius: var(--harness-radius-md);
    color: var(--harness-text-primary);
    font-size: var(--harness-font-size-sm);
    transition: border-color var(--harness-transition-fast);
}

.harness-input:focus,
.harness-select:focus {
    outline: none;
    border-color: var(--harness-info);
}

.harness-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* Settings Grid */
.harness-settings-grid {
    display: grid;
    gap: var(--harness-space-6);
}

.harness-settings-group {
    display: grid;
    gap: var(--harness-space-3);
}

.harness-settings-group-title {
    font-weight: 600;
    color: var(--harness-text-primary);
    font-size: var(--harness-font-size-base);
    margin-bottom: var(--harness-space-2);
}

.harness-setting-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--harness-space-3);
    align-items: center;
}

.harness-setting-label {
    font-size: var(--harness-font-size-sm);
    color: var(--harness-text-secondary);
    font-weight: 500;
}

.harness-setting-control {
    display: flex;
    align-items: center;
}

/* Validation Styles */
.harness-validation-score {
    padding: var(--harness-space-1) var(--harness-space-3);
    border-radius: var(--harness-radius-md);
    font-weight: 600;
    font-size: var(--harness-font-size-sm);
}

.harness-validation-score.score-good {
    background: var(--harness-success-bg);
    color: var(--harness-success);
}

.harness-validation-score.score-warning {
    background: var(--harness-warning-bg);
    color: var(--harness-warning);
}

.harness-validation-score.score-error {
    background: var(--harness-error-bg);
    color: var(--harness-error);
}

/* Chrome Footer */
.harness-chrome-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--harness-bg-elevated);
    padding: var(--harness-space-2) var(--harness-space-4);
    border-top: 1px solid var(--harness-border-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--harness-font-size-xs);
    color: var(--harness-text-secondary);
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}

.footer-left,
.footer-right {
    display: flex;
    gap: var(--harness-space-4);
    align-items: center;
}

.status-item {
    display: flex;
    align-items: center;
    gap: var(--harness-space-1);
}

/* Floating Controls */
.harness-floating-controls {
    position: fixed;
    right: var(--harness-space-4);
    bottom: var(--harness-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--harness-space-2);
    z-index: 1000;
}

.harness-floating-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--harness-bg-tertiary);
    border: 1px solid var(--harness-border-primary);
    color: var(--harness-text-primary);
    font-size: var(--harness-font-size-lg);
    cursor: pointer;
    box-shadow: var(--harness-shadow-md);
    transition: all var(--harness-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.harness-floating-btn:hover {
    background: var(--harness-bg-elevated);
    transform: scale(1.05);
}

/* Utility Classes */
.harness-text-primary { color: var(--harness-text-primary); }
.harness-text-secondary { color: var(--harness-text-secondary); }
.harness-text-tertiary { color: var(--harness-text-tertiary); }

.harness-text-xs { font-size: var(--harness-font-size-xs); }
.harness-text-sm { font-size: var(--harness-font-size-sm); }
.harness-text-base { font-size: var(--harness-font-size-base); }
.harness-text-lg { font-size: var(--harness-font-size-lg); }

/* Hide Chrome Mode */
.harness-app[data-chrome-hidden="true"] [data-harness-chrome="true"] {
    display: none !important;
}

.harness-app[data-chrome-hidden="true"] .harness-component-panel {
    border: none;
    box-shadow: none;
}

.harness-app[data-chrome-hidden="true"] .harness-component-panel .harness-panel-header {
    display: none;
}

/* AI Boundary Markers (invisible but queryable) */
[data-ai-boundary] {
    position: relative;
}

[data-component-under-test] {
    /* Component under test - AI should focus here for visual analysis */
}

code {
    font-family: var(--harness-font-mono);
    padding: 2px 6px;
    border-radius: var(--harness-radius-sm);
    font-size: 0.9em;
    /* Inherit color from parent context - allows code in footer/white areas to adapt */
    color: inherit;
}

/* Query Result Display */
.harness-result-success {
    margin-top: var(--harness-space-2);
    padding: var(--harness-space-2);
    background: #f0fdf4;
    border-radius: var(--harness-radius-md);
    font-size: var(--harness-font-size-xs);
    color: #15803d; /* Darker green text for better contrast */
}

.harness-result-success-header {
    font-weight: 600;
    color: #15803d; /* Darker green for better contrast */
}

.harness-result-data {
    margin-top: var(--harness-space-1);
    color: #166534; /* Dark green for data values */
    font-weight: 500; /* Slightly bolder for readability */
}

.harness-result-error {
    margin-top: var(--harness-space-4);
    padding: var(--harness-space-4);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--harness-radius-md);
    color: #991b1b; /* Dark red text */
}

/* Layout Utilities */
/* .harness-grid definition moved to harness-browser.css for browser-specific styling */

.harness-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.harness-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.harness-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.harness-gap-4 {
    gap: var(--harness-space-4);
}

.harness-flex {
    display: flex;
}

.harness-flex-items-center {
    align-items: center;
}

.harness-flex-gap-2 {
    gap: var(--harness-space-2);
}

.harness-flex-justify-between {
    justify-content: space-between;
}

.harness-flex-justify-center {
    justify-content: center;
}

.harness-flex-align-center {
    align-items: center;
}

/* Padding Utilities */
.harness-p-2 {
    padding: var(--harness-space-2);
}

.harness-p-3 {
    padding: var(--harness-space-3);
}

/* Card/Panel Utilities */
.harness-card {
    border: 1px solid #e5e7eb;
    border-radius: var(--harness-radius-lg);
    padding: var(--harness-space-4);
    background: #f9fafb; /* Light gray for visibility on white background */
    color: #111827; /* Explicit dark text - children inherit naturally */
}

/* CRITICAL: Prism.js Syntax Highlighting */
/* Neutralize Gravity UI's code/pre backgrounds for Prism blocks */
.harness-card pre[class*="language-"],
.harness-card code[class*="language-"],
.harness-component-demo pre[class*="language-"],
.harness-component-demo code[class*="language-"] {
    background: transparent !important; /* Let Prism theme control background */
    color: inherit !important; /* Let Prism theme control base text color */
}

/* Prism.js will apply its own token colors via its stylesheet - no overrides needed */

/* Typography Utilities */
.harness-heading-5 {
    font-size: var(--harness-font-size-base);
    font-weight: 600;
    margin-bottom: var(--harness-space-2);
    color: #111827;
}

.harness-font-semibold {
    font-weight: 600;
}

.harness-description {
    font-size: var(--harness-font-size-sm);
    color: #4b5563; /* Medium gray */
    margin-bottom: var(--harness-space-4);
}

/* Query Header Styles - for L4 query handler harnesses */
.harness-query-header {
    margin-bottom: 1rem;
}

.harness-query-description {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #64748b; /* Slate gray for readability */
}

/* Spacing Utilities */
.harness-m-0 {
    margin: 0;
}

.harness-mb-2 {
    margin-bottom: var(--harness-space-2);
}

.harness-mb-4 {
    margin-bottom: var(--harness-space-4);
}

.harness-mb-6 {
    margin-bottom: var(--harness-space-6);
}

.harness-pb-4 {
    padding-bottom: var(--harness-space-4);
}

.harness-border-b-light {
    border-bottom: 1px solid #e5e7eb;
}

.harness-mt-1 {
    margin-top: var(--harness-space-1);
}

.harness-mt-4 {
    margin-top: var(--harness-space-4);
}

.harness-ml-2 {
    margin-left: var(--harness-space-2);
}

/* Width Utilities */
.harness-w-full {
    width: 100%;
}

/* Icon Color Utilities */
.harness-icon-blue {
    color: #2563eb;
}

.harness-icon-indigo {
    color: #4f46e5;
}

.harness-icon-green {
    color: #16a34a;
}

.harness-icon-orange {
    color: #ea580c;
}

.harness-icon-teal {
    color: #0d9488;
}

/* Text Color Utilities */
.harness-text-gray {
    color: #4b5563;
}

.harness-text-gray-dark {
    color: #374151;
}

/* Control Groups */
.control-group {
    margin-bottom: var(--harness-space-4);
}

.control-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--harness-space-2);
    color: var(--harness-text-primary);
}

.control-actions {
    display: flex;
    gap: var(--harness-space-2);
}

/* ================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   Reduce harness chrome padding on small screens
   to maximize component preview area
   ================================================ */

@media (max-width: 590px) {
    .harness-app {
        padding: var(--harness-space-2);
    }

    .harness-container {
        padding: 0 var(--harness-space-2);
    }

    .harness-panel-content {
        padding: var(--harness-space-2);
    }

    .harness-component-isolation {
        padding: var(--harness-space-3);
    }

    .harness-component-demo {
        padding: var(--harness-space-2);
    }

    /* Reduce navbar height on mobile */
    .navbar-container {
        height: 48px;
        padding: 0 var(--harness-space-2);
    }

    .brand-text {
        display: none; /* Hide text, show icon only */
    }

    .nav-text {
        display: none; /* Hide nav text, show icons only */
    }

    .nav-link {
        padding: var(--harness-space-2);
    }
}

/* Responsive Grid */
@media (min-width: 768px) {
    .harness-grid-md-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .harness-grid-lg-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Common Harness Control Panel Styles */
.harness-controls {
    padding: var(--harness-space-4);
}

.control-group {
    margin-bottom: var(--harness-space-4);
}

.control-group label {
    display: block;
    margin-bottom: var(--harness-space-2);
    color: var(--harness-text-primary);
    font-size: var(--harness-font-size-sm);
    font-weight: 500;
}

.control-group input[type="text"],
.control-group input[type="number"],
.control-group select {
    width: 100%;
    padding: var(--harness-space-2) var(--harness-space-3);
    border: 1px solid var(--harness-border-primary);
    border-radius: var(--harness-radius-md);
    background: var(--harness-bg-tertiary);
    color: var(--harness-text-primary);
    font-size: var(--harness-font-size-sm);
    font-family: inherit;
    transition: border-color var(--harness-transition-fast);
}

.control-group input[type="text"]:focus,
.control-group input[type="number"]:focus,
.control-group select:focus {
    outline: none;
    border-color: var(--harness-info);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--harness-space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--harness-font-size-sm);
    color: var(--harness-text-primary);
}

.checkbox-label input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.control-actions {
    display: flex;
    gap: var(--harness-space-2);
    margin-top: var(--harness-space-6);
    padding-top: var(--harness-space-4);
    border-top: 1px solid var(--harness-border-primary);
}

.control-actions .harness-btn {
    flex: 0 1 auto; /* Don't grow, shrink if needed, auto width */
    width: auto;
}

/* Common Debug Panel Styles */
.harness-debug-info {
    padding: var(--harness-space-4);
}

.harness-debug-info h5 {
    margin: 0 0 var(--harness-space-2) 0;
    color: var(--harness-text-primary);
    font-size: var(--harness-font-size-sm);
    font-weight: 600;
}

.harness-debug-info pre {
    margin: 0;
    padding: var(--harness-space-3);
    background: var(--harness-bg-tertiary);
    border: 1px solid var(--harness-border-primary);
    border-radius: var(--harness-radius-md);
    font-family: var(--harness-font-mono);
    font-size: var(--harness-font-size-xs);
    line-height: 1.6;
    color: var(--harness-text-primary);
    overflow-x: auto;
}

/* ============================================
   WCAG SIDE PANEL STYLES
   ============================================ */

/* WCAG Side Panel Container */
.harness-wcag-sidepanel {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    height: 100vh;
    background: var(--harness-bg-secondary);
    border-left: 2px solid var(--harness-border-secondary);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* WCAG Panel Header */
.harness-wcag-sidepanel-header {
    background: var(--harness-bg-tertiary);
    padding: var(--harness-space-4);
    border-bottom: 1px solid var(--harness-border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.harness-wcag-sidepanel-header .harness-panel-title {
    font-size: var(--harness-font-size-xl);
    font-weight: 600;
    margin: 0;
    color: var(--harness-text-primary);
}

.harness-wcag-close {
    font-size: 2rem;
    line-height: 1;
    padding: var(--harness-space-1);
    color: var(--harness-text-secondary);
    transition: color var(--harness-transition-fast);
}

.harness-wcag-close:hover {
    color: var(--harness-text-primary);
}

/* WCAG Panel Content */
.harness-wcag-sidepanel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--harness-space-4);
}

/* WCAG Floating Icon (when chrome hidden) */
.harness-wcag-floating-icon {
    position: fixed;
    bottom: var(--harness-space-4);
    right: var(--harness-space-4);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--harness-info);
    border: 2px solid var(--harness-border-secondary);
    color: white;
    font-size: 1.75rem;
    cursor: pointer;
    box-shadow: var(--harness-shadow-lg);
    transition: all var(--harness-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.harness-wcag-floating-icon:hover {
    background: #2563eb;
    transform: scale(1.1);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.8);
}

/* Hide WCAG Panel when chrome is hidden AND panel is closed */
.harness-app[data-chrome-hidden="true"] .harness-wcag-sidepanel {
    /* Allow panel to show even when chrome is hidden, if user opened it */
    /* display: inherit; */
}

/* Ensure WCAG Panel content has proper styling */
.harness-wcag-sidepanel-content .wcag-panel {
    background: transparent;
    padding: 0;
}

/* Override any dark backgrounds on WCAG panel cards */
.harness-wcag-sidepanel-content .harness-card {
    background: var(--harness-bg-elevated);
    color: var(--harness-text-primary);
    border: 1px solid var(--harness-border-primary);
}

.harness-wcag-sidepanel-content .harness-card * {
    color: var(--harness-text-primary);
}

/* Responsive: Narrow screens */
@media (max-width: 768px) {
    .harness-wcag-sidepanel {
        width: 100%;
    }
}

/* ============================================
   WCAG PANEL CONTENT STYLES
   ============================================ */

/* WCAG Summary Box */
.wcag-summary {
    margin-bottom: var(--harness-space-4);
    padding: var(--harness-space-3);
    background: var(--harness-bg-elevated);
    border: 1px solid var(--harness-border-primary);
    border-radius: var(--harness-radius-md);
    font-size: var(--harness-font-size-sm);
    color: var(--harness-text-primary);
}

/* WCAG Section Headers */
.wcag-section-title {
    margin-top: var(--harness-space-6);
    margin-bottom: var(--harness-space-3);
    font-size: var(--harness-font-size-sm);
    font-weight: 600;
    color: var(--harness-text-primary);
}

/* WCAG Violation List Item Number */
.wcag-violation-number {
    color: var(--harness-text-tertiary);
    font-weight: normal;
    margin-right: var(--harness-space-2);
}

/* WCAG Actions Container */
.wcag-actions {
    margin-top: var(--harness-space-6);
    display: flex;
    gap: var(--harness-space-2);
    flex-wrap: wrap;
}

/* WCAG Empty State Actions */
.wcag-empty-actions {
    margin-top: var(--harness-space-6);
}

/* WCAG Remediation Modal Content */
.wcag-modal-title {
    margin-top: 0;
    margin-bottom: var(--harness-space-4);
    color: var(--harness-text-primary);
    font-size: var(--harness-font-size-xl);
    font-weight: 600;
}

.wcag-modal-section {
    margin-bottom: var(--harness-space-4);
}

.wcag-modal-description {
    color: var(--harness-text-secondary);
    margin-bottom: var(--harness-space-4);
    line-height: 1.6;
}

.wcag-modal-tags {
    margin-bottom: var(--harness-space-4);
    font-size: var(--harness-font-size-sm);
}

.wcag-modal-tag {
    margin-right: var(--harness-space-1);
}

.wcag-modal-subsection-title {
    margin-bottom: var(--harness-space-2);
    font-size: var(--harness-font-size-sm);
    font-weight: 600;
    color: var(--harness-text-primary);
}

.wcag-failure-box {
    background: var(--harness-error-bg);
    border-left: 4px solid var(--harness-error);
    padding: var(--harness-space-3);
    border-radius: var(--harness-radius-sm);
    font-size: var(--harness-font-size-sm);
    color: var(--harness-text-primary);
}

.wcag-code-block {
    background: var(--harness-bg-tertiary);
    padding: var(--harness-space-3);
    border-radius: var(--harness-radius-md);
    overflow-x: auto;
    font-size: var(--harness-font-size-xs);
    font-family: var(--harness-font-mono);
    color: var(--harness-text-primary);
}

.wcag-modal-footer {
    margin-top: var(--harness-space-6);
    padding-top: var(--harness-space-4);
    border-top: 1px solid var(--harness-border-primary);
}

.wcag-external-link {
    color: var(--harness-info);
    text-decoration: none;
    font-size: var(--harness-font-size-sm);
    transition: color var(--harness-transition-fast);
}

.wcag-external-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* ================================================
   Dynamic Harness Router - Not Found Page
   ================================================ */
.harness-not-found {
    max-width: 600px;
    margin: 4rem auto;
    padding: 2rem;
    text-align: center;
    background: var(--harness-bg-elevated);
    border: 1px solid var(--harness-border-primary);
    border-radius: 8px;
}

.harness-not-found h1 {
    color: var(--harness-text-primary);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.harness-not-found p {
    color: var(--harness-text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.harness-not-found code {
    background: var(--harness-bg-tertiary);
    color: var(--harness-accent-blue);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.harness-not-found button {
    margin-top: 1.5rem;
}

/* ================================================
   Command Harness Card - 4 Tab Styling
   ================================================ */

/* Command Badge */
.command-badge {
    display: inline-block;
    background: var(--harness-warning);
    color: #1a1a1a;
    font-size: var(--harness-font-size-xs);
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* About Tab Styling */
.about-tab .section-heading {
    font-size: var(--harness-font-size-base);
    color: var(--harness-text-primary);
    margin-bottom: var(--harness-space-4);
    font-weight: 600;
}

.metadata-grid {
    display: flex;
    flex-direction: column;
    gap: var(--harness-space-4);
}

.metadata-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--harness-space-4);
    padding-bottom: var(--harness-space-3);
    border-bottom: 1px solid var(--harness-border-primary);
}

.metadata-label {
    font-weight: 600;
    color: var(--harness-text-secondary);
    font-size: var(--harness-font-size-sm);
}

.metadata-value {
    color: var(--harness-text-primary);
    font-size: var(--harness-font-size-sm);
    line-height: 1.6;
}

.metadata-list {
    margin: 0;
    padding-left: var(--harness-space-4);
    list-style-type: disc;
}

.metadata-list li {
    margin-bottom: var(--harness-space-2);
    color: var(--harness-text-primary);
}

/* Parameter Form Section */
.parameter-form-section {
    background: var(--harness-bg-elevated);
    padding: var(--harness-space-4);
    border-radius: var(--harness-radius-md);
    margin-bottom: var(--harness-space-4);
    border: 1px solid var(--harness-border-primary);
}

.parameter-form-section .section-heading {
    font-size: var(--harness-font-size-base);
    color: var(--harness-text-primary);
    margin-bottom: var(--harness-space-4);
    font-weight: 600;
}

/* State Changes Tab */
.state-changes-tab .section-heading {
    font-size: var(--harness-font-size-base);
    color: var(--harness-text-primary);
    margin-bottom: var(--harness-space-4);
    font-weight: 600;
}

/* Event Logs Tab */
.event-logs-tab .section-heading {
    font-size: var(--harness-font-size-base);
    color: var(--harness-text-primary);
    margin-bottom: var(--harness-space-4);
    font-weight: 600;
}

/* ================================================
   CQRS Operation Type Badges
   ================================================ */

.operation-type-badge {
    display: inline-block;
    font-size: var(--harness-font-size-xs);
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.operation-type-badge.query-type {
    background: rgba(59, 130, 246, 0.2);
    color: var(--harness-info);
    border: 1px solid var(--harness-info);
}

.operation-type-badge.command-type {
    background: rgba(245, 158, 11, 0.2);
    color: var(--harness-warning);
    border: 1px solid var(--harness-warning);
}

.badge-query {
    background: rgba(59, 130, 246, 0.2);
    color: var(--harness-info);
}

.badge-command {
    background: rgba(245, 158, 11, 0.2);
    color: var(--harness-warning);
}

.category-tag-more {
    font-size: var(--harness-font-size-xs);
    color: var(--harness-text-tertiary);
    font-style: italic;
}

/* Utility Classes */
.harness-max-w-300 {
    max-width: 300px;
}

/* =====================================================
   MEGALAB NAVBAR
   ===================================================== */

.megalab-navbar {
    background: var(--harness-bg-secondary);
    border-bottom: 1px solid var(--harness-border-primary);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--harness-shadow-sm);
}

.navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--harness-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--harness-space-3);
}

.brand-link {
    display: flex;
    align-items: center;
    gap: var(--harness-space-2);
    color: var(--harness-text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--harness-font-size-lg);
    transition: color var(--harness-transition-fast);
}

.brand-link:hover {
    color: var(--harness-accent-blue);
}

.brand-icon {
    font-size: 1.5rem;
}

.brand-text {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.navbar-links {
    display: flex;
    gap: var(--harness-space-2);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--harness-space-2);
    padding: var(--harness-space-2) var(--harness-space-4);
    border-radius: var(--harness-radius-md);
    color: var(--harness-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--harness-font-size-sm);
    transition: all var(--harness-transition-fast);
    border: 1px solid transparent;
}

.nav-link:hover {
    color: var(--harness-text-primary);
    background: var(--harness-bg-tertiary);
}

.nav-link.active {
    color: var(--harness-accent-blue);
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.3);
}

.nav-icon {
    font-size: 1.125rem;
}

.nav-text {
    font-weight: 600;
}

/* =====================================================
   MEGALAB HOME PAGE
   ===================================================== */

.megalab-home {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--harness-space-8) var(--harness-space-4);
}

.home-hero {
    text-align: center;
    margin-bottom: var(--harness-space-8);
    padding: var(--harness-space-8) 0;
}

.home-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--harness-text-primary);
    margin: 0 0 var(--harness-space-4);
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--harness-space-4);
}

.home-icon {
    font-size: 3.5rem;
    filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.3));
}

.home-subtitle {
    font-size: var(--harness-font-size-xl);
    color: var(--harness-text-secondary);
    margin: 0 0 var(--harness-space-6);
    font-weight: 500;
}

.home-description {
    font-size: var(--harness-font-size-base);
    color: var(--harness-text-tertiary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.home-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--harness-space-6);
    margin-bottom: var(--harness-space-8);
}

.nav-card {
    background: var(--harness-bg-secondary);
    border: 2px solid var(--harness-border-primary);
    border-radius: var(--harness-radius-lg);
    padding: var(--harness-space-6);
    cursor: pointer;
    transition: all var(--harness-transition-base);
    position: relative;
    overflow: hidden;
}

.nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--harness-accent-blue), var(--harness-info));
    opacity: 0;
    transition: opacity var(--harness-transition-base);
}

.nav-card:hover {
    border-color: var(--harness-accent-blue);
    transform: translateY(-4px);
    box-shadow: var(--harness-shadow-lg);
}

.nav-card:hover::before {
    opacity: 1;
}

.nav-card-icon {
    font-size: 3rem;
    margin-bottom: var(--harness-space-4);
    filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.2));
}

.nav-card-title {
    font-size: var(--harness-font-size-xl);
    font-weight: 700;
    color: var(--harness-text-primary);
    margin: 0 0 var(--harness-space-2);
}

.nav-card-description {
    font-size: var(--harness-font-size-sm);
    color: var(--harness-text-secondary);
    margin: 0 0 var(--harness-space-6);
    line-height: 1.6;
}

.nav-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--harness-space-4);
    margin-bottom: var(--harness-space-6);
    padding: var(--harness-space-4);
    background: var(--harness-bg-tertiary);
    border-radius: var(--harness-radius-md);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--harness-space-1);
}

.stat-label {
    font-size: var(--harness-font-size-xs);
    color: var(--harness-text-tertiary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: var(--harness-font-size-xl);
    color: var(--harness-accent-blue);
    font-weight: 700;
}

.nav-card-action {
    color: var(--harness-accent-blue);
    font-weight: 600;
    font-size: var(--harness-font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--harness-space-2);
}

.home-recent {
    margin-bottom: var(--harness-space-8);
}

.home-section-title {
    font-size: var(--harness-font-size-xl);
    font-weight: 700;
    color: var(--harness-text-primary);
    margin: 0 0 var(--harness-space-6);
}

.recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--harness-space-6);
}

.recent-section {
    background: var(--harness-bg-secondary);
    border: 1px solid var(--harness-border-primary);
    border-radius: var(--harness-radius-lg);
    padding: var(--harness-space-6);
}

.recent-section-title {
    font-size: var(--harness-font-size-lg);
    font-weight: 600;
    color: var(--harness-text-primary);
    margin: 0 0 var(--harness-space-4);
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: var(--harness-space-2);
}

.recent-item {
    display: flex;
    align-items: center;
    gap: var(--harness-space-3);
    padding: var(--harness-space-3) var(--harness-space-4);
    background: var(--harness-bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--harness-radius-md);
    cursor: pointer;
    transition: all var(--harness-transition-fast);
}

.recent-item:hover {
    background: var(--harness-bg-elevated);
    border-color: var(--harness-accent-blue);
}

.recent-icon {
    font-size: 1.25rem;
}

.recent-name {
    flex: 1;
    font-size: var(--harness-font-size-sm);
    color: var(--harness-text-primary);
    font-weight: 500;
}

.recent-meta {
    font-size: var(--harness-font-size-xs);
    color: var(--harness-text-tertiary);
    font-weight: 600;
}

.home-footer {
    text-align: center;
    padding: var(--harness-space-8) 0;
    border-top: 1px solid var(--harness-border-primary);
}

.footer-text {
    font-size: var(--harness-font-size-sm);
    color: var(--harness-text-tertiary);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.footer-text strong {
    color: var(--harness-accent-blue);
    font-weight: 600;
}

/* Browser Cross-Link */
.browser-cross-link {
    display: inline-block;
    margin-top: var(--harness-space-3);
    padding: var(--harness-space-2) var(--harness-space-4);
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: var(--harness-radius-md);
    color: var(--harness-accent-blue);
    text-decoration: none;
    font-size: var(--harness-font-size-sm);
    font-weight: 600;
    transition: all var(--harness-transition-fast);
}

.browser-cross-link:hover {
    background: rgba(96, 165, 250, 0.2);
    border-color: var(--harness-accent-blue);
    transform: translateX(4px);
}

/* ================================================
   CurricuMap Harness - Additional Utility Classes
   ================================================ */

/* Demo container with padding and background */
.harness-demo-container {
    min-height: 400px;
    background: var(--harness-bg-secondary);
    padding: var(--harness-space-4);
    border-radius: var(--harness-radius-lg);
}

/* Text utilities */
.harness-text-center { text-align: center; }
.harness-text-muted { opacity: 0.8; }

/* Margin utilities */
.harness-mb-3 { margin-bottom: var(--harness-space-3); }

/* Flex utilities */
.harness-flex-wrap { flex-wrap: wrap; gap: var(--harness-space-2); }

/* Divider */
.harness-divider {
    margin: var(--harness-space-4) 0;
    border: none;
    border-top: 1px solid var(--harness-border-primary);
}

/* Grid utilities for 3 and 4 columns */
.harness-grid-3 { grid-template-columns: repeat(3, 1fr); }
.harness-grid-4 { grid-template-columns: repeat(4, 1fr); }
.harness-grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Indicator circles for visualization levels */
.harness-indicator-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto var(--harness-space-2);
}

/* Legacy CurricuMap level indicators (0-3) */
.harness-indicator-0 { background: #dc3545; }
.harness-indicator-1 { background: #ffc107; }
.harness-indicator-2 { background: #28a745; }
.harness-indicator-3 { background: #007bff; }

/* GravityTreemap confidence scale indicators (0-100%) */
.harness-indicator-critical { background: hsl(0, 70%, 50%); }     /* 0-25% red */
.harness-indicator-warning { background: hsl(30, 70%, 50%); }     /* 25-50% orange */
.harness-indicator-developing { background: hsl(60, 70%, 50%); }  /* 50-70% yellow */
.harness-indicator-proficient { background: hsl(90, 70%, 50%); }  /* 70-85% lime */
.harness-indicator-mastery { background: hsl(120, 70%, 45%); }    /* 85-100% green */

/* Event log container */
.harness-event-log {
    max-height: 200px;
    overflow-y: auto;
    font-family: var(--harness-font-mono);
    font-size: var(--harness-font-size-xs);
}

/* Tree view for debug panel */
.harness-tree-view {
    font-family: var(--harness-font-mono);
    font-size: var(--harness-font-size-xs);
}

.harness-tree-indent-1 { margin-left: var(--harness-space-4); }
.harness-tree-indent-2 { margin-left: var(--harness-space-8); }
.harness-tree-indent-3 { margin-left: calc(var(--harness-space-8) + var(--harness-space-4)); }
.harness-tree-indent-4 { margin-left: calc(var(--harness-space-8) * 2); }

/* =====================================================
   JOURNEY TIME SLIDER - Phase 4 CurricuMap
   ===================================================== */

.journey-controls {
    background: var(--harness-bg-elevated);
    border: 2px solid var(--harness-accent-warning);
    border-radius: var(--harness-radius-lg);
    padding: var(--harness-space-3);
}

.journey-slider-container {
    display: flex;
    flex-direction: column;
    gap: var(--harness-space-2);
}

.journey-month-label {
    text-align: center;
    font-size: var(--harness-font-size-lg);
    color: var(--harness-accent-warning);
}

.journey-slider-row {
    display: flex;
    align-items: center;
    gap: var(--harness-space-2);
}

.journey-slider-row .slider-endpoint {
    font-size: var(--harness-font-size-xs);
    color: var(--harness-text-secondary);
    white-space: nowrap;
}

.journey-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(
        to right,
        #dc3545 0%,
        #ffc107 50%,
        #28a745 100%
    );
    border-radius: 4px;
    outline: none;
}

.journey-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--harness-text-primary);
    border: 3px solid var(--harness-accent-warning);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.journey-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--harness-text-primary);
    border: 3px solid var(--harness-accent-warning);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.journey-playback-controls {
    display: flex;
    justify-content: center;
    gap: var(--harness-space-2);
    margin-top: var(--harness-space-2);
}

.harness-mt-2 {
    margin-top: var(--harness-space-2);
}

/* =====================================================
   THEME TOGGLE BUTTON
   ===================================================== */

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: var(--harness-space-2);
    background: var(--harness-bg-tertiary);
    border: 1px solid var(--harness-border-primary);
    border-radius: var(--harness-radius-md);
    cursor: pointer;
    transition: all var(--harness-transition-fast);
    font-size: 1.25rem;
    line-height: 1;
}

.theme-toggle-btn:hover {
    background: var(--harness-bg-elevated);
    border-color: var(--harness-accent-blue);
    transform: scale(1.05);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

/* =====================================================
   COMPONENT PREVIEW DARK MODE
   Triggered by data-component-theme="dark" on html/body
   ===================================================== */

/* Component isolation area - dark mode */
[data-component-theme="dark"] .component-isolation {
    background: #1f2937;
    color: #f3f4f6;
}

/* Component panel isolation - dark mode */
[data-component-theme="dark"] .harness-component-isolation {
    background: #1f2937;
    color: #f3f4f6;
}

/* Component demo container - dark mode */
[data-component-theme="dark"] .harness-component-demo {
    background: #1f2937;
    color: #f3f4f6;
}

[data-component-theme="dark"] .harness-component-demo h4 {
    color: #f3f4f6;
}

/* Variants showcase - dark mode */
[data-component-theme="dark"] .harness-variants-showcase {
    background: #1f2937;
    color: #f3f4f6;
}

[data-component-theme="dark"] .harness-variants-showcase h4 {
    color: #f3f4f6;
}

/* Component panel - dark mode */
[data-component-theme="dark"] .harness-component-panel {
    background: #1f2937;
    border-color: #374151;
}

/* Harness card in component areas - dark mode */
[data-component-theme="dark"] .harness-component-demo .harness-card,
[data-component-theme="dark"] .harness-component-isolation .harness-card,
[data-component-theme="dark"] .component-isolation .harness-card {
    background: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
}

[data-component-theme="dark"] .harness-component-demo .harness-heading-5,
[data-component-theme="dark"] .harness-component-isolation .harness-heading-5,
[data-component-theme="dark"] .component-isolation .harness-heading-5 {
    color: #f3f4f6;
}

[data-component-theme="dark"] .harness-component-demo .harness-description,
[data-component-theme="dark"] .harness-component-isolation .harness-description,
[data-component-theme="dark"] .component-isolation .harness-description {
    color: #9ca3af;
}