/**
 * RMACD Framework - Custom Styles
 * Minimalist design system with Swiss/International typography influence
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Color Palette - Refined Minimalist */
    --white: #ffffff;
    --grey-50: #fafafa;
    --grey-100: #f5f5f5;
    --grey-200: #e5e5e5;
    --grey-300: #d4d4d4;
    --grey-400: #a3a3a3;
    --grey-500: #737373;
    --grey-600: #525252;
    --grey-700: #374151;
    --grey-800: #1f2937;
    --grey-900: #111827;

    /* Accent - Reserved for CTAs only */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-subtle: rgba(59, 130, 246, 0.1);

    /* Feedback colors - Muted, not overwhelming */
    --success: #10b981;
    --success-subtle: rgba(16, 185, 129, 0.1);
    --error: #ef4444;
    --error-subtle: rgba(239, 68, 68, 0.1);
    --warning: #f59e0b;
    --warning-subtle: rgba(245, 158, 11, 0.1);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Shadows - Subtle, almost invisible */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);

    /* Border radius - Sharp with subtle rounding */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
}


/* ============================================
   Typography - Inter Optimized
   ============================================ */

/* Base body text */
body {
    font-family: var(--font-sans);
    font-size: 1rem; /* 16px base */
    line-height: 1.625; /* 1.6-1.75 for readability */
    font-weight: 400;
    color: var(--grey-800);
}

/* Global heading styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    color: var(--grey-900);
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.5em;
}

/* H1 - Display/Hero headings */
h1 {
    font-weight: 700; /* Bold */
    font-size: 2.5rem;
    letter-spacing: -0.02em; /* Tighter tracking for display */
}

/* H2 - Section headings */
h2 {
    font-weight: 600; /* SemiBold */
    font-size: 2rem;
    letter-spacing: -0.01em;
}

/* H3-H6 - Subsection headings */
h3 {
    font-weight: 600; /* SemiBold */
    font-size: 1.5rem;
}

h4 {
    font-weight: 500; /* Medium */
    font-size: 1.25rem;
}

h5 {
    font-weight: 500; /* Medium */
    font-size: 1.125rem;
}

h6 {
    font-weight: 500; /* Medium */
    font-size: 1rem;
}

/* Display text utility - for hero sections */
.text-display {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Paragraph text */
p {
    line-height: 1.7;
    margin-bottom: 1em;
}

/* Small text */
small, .text-sm {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Navigation text */
nav a, .nav-link {
    font-weight: 400; /* Regular */
    font-size: 0.875rem;
    letter-spacing: 0;
}

nav a:hover, .nav-link:hover {
    font-weight: 500; /* Medium on hover for emphasis */
}

/* ============================================
   Code Syntax Highlighting (Neutral Greys)
   ============================================ */
.highlight,
pre code,
code.hljs {
    background: var(--grey-100);
    border-radius: var(--radius-md);
}

pre {
    background: var(--grey-100);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
}

code {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

/* Inline code */
:not(pre) > code {
    background: var(--grey-100);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    color: var(--grey-800);
}

/* Pygments syntax highlighting - Muted colors for readability */
.highlight .hll { background-color: var(--grey-200); }
.highlight .c { color: var(--grey-500); font-style: italic; }  /* Comment */
.highlight .k { color: var(--grey-900); font-weight: 600; }    /* Keyword */
.highlight .o { color: var(--grey-700); }                      /* Operator */
.highlight .p { color: #6b7280; }                              /* Punctuation - brackets, colons */
.highlight .cm { color: var(--grey-500); font-style: italic; } /* Comment.Multiline */
.highlight .cp { color: var(--grey-600); }                     /* Comment.Preproc */
.highlight .c1 { color: var(--grey-500); font-style: italic; } /* Comment.Single */
.highlight .cs { color: var(--grey-500); font-style: italic; } /* Comment.Special */
.highlight .gd { color: var(--error); }                        /* Generic.Deleted */
.highlight .ge { font-style: italic; }                         /* Generic.Emph */
.highlight .gr { color: var(--error); }                        /* Generic.Error */
.highlight .gh { color: var(--grey-900); font-weight: 600; }   /* Generic.Heading */
.highlight .gi { color: var(--success); }                      /* Generic.Inserted */
.highlight .go { color: var(--grey-600); }                     /* Generic.Output */
.highlight .gp { color: var(--grey-600); }                     /* Generic.Prompt */
.highlight .gs { font-weight: 600; }                           /* Generic.Strong */
.highlight .gu { color: var(--grey-600); }                     /* Generic.Subheading */
.highlight .gt { color: var(--error); }                        /* Generic.Traceback */
.highlight .kc { color: #64748b; }                             /* Keyword.Constant - true/false/null */
.highlight .kd { color: var(--grey-900); font-weight: 600; }   /* Keyword.Declaration */
.highlight .kn { color: var(--grey-900); font-weight: 600; }   /* Keyword.Namespace */
.highlight .kp { color: var(--grey-800); }                     /* Keyword.Pseudo */
.highlight .kr { color: var(--grey-900); font-weight: 600; }   /* Keyword.Reserved */
.highlight .kt { color: var(--grey-800); }                     /* Keyword.Type */
.highlight .m { color: #b45309; }                              /* Literal.Number - amber */
.highlight .s { color: #0d9488; }                              /* Literal.String - teal */
.highlight .na { color: #374151; font-weight: 500; }           /* Name.Attribute - JSON keys */
.highlight .nb { color: var(--grey-800); }                     /* Name.Builtin */
.highlight .nc { color: var(--grey-900); font-weight: 600; }   /* Name.Class */
.highlight .no { color: var(--grey-800); }                     /* Name.Constant */
.highlight .nd { color: var(--grey-600); }                     /* Name.Decorator */
.highlight .ni { color: var(--grey-700); }                     /* Name.Entity */
.highlight .ne { color: var(--grey-900); font-weight: 600; }   /* Name.Exception */
.highlight .nf { color: var(--grey-900); }                     /* Name.Function */
.highlight .nl { color: #374151; font-weight: 500; }           /* Name.Label - JSON keys */
.highlight .nn { color: var(--grey-800); }                     /* Name.Namespace */
.highlight .nt { color: #374151; font-weight: 500; }           /* Name.Tag - JSON keys */
.highlight .nv { color: var(--grey-800); }                     /* Name.Variable */
.highlight .ow { color: var(--grey-900); font-weight: 600; }   /* Operator.Word */
.highlight .w { color: var(--grey-400); }                      /* Text.Whitespace */
.highlight .mf { color: #b45309; }                             /* Literal.Number.Float - amber */
.highlight .mh { color: #b45309; }                             /* Literal.Number.Hex - amber */
.highlight .mi { color: #b45309; }                             /* Literal.Number.Integer - amber */
.highlight .mo { color: #b45309; }                             /* Literal.Number.Oct - amber */
.highlight .sb { color: #0d9488; }                             /* Literal.String.Backtick - teal */
.highlight .sc { color: #0d9488; }                             /* Literal.String.Char - teal */
.highlight .sd { color: var(--grey-500); font-style: italic; } /* Literal.String.Doc */
.highlight .s2 { color: #0d9488; }                             /* Literal.String.Double - teal */
.highlight .se { color: var(--grey-600); }                     /* Literal.String.Escape */
.highlight .sh { color: #0d9488; }                             /* Literal.String.Heredoc - teal */
.highlight .si { color: #0d9488; }                             /* Literal.String.Interpol - teal */
.highlight .sx { color: #0d9488; }                             /* Literal.String.Other - teal */
.highlight .sr { color: #0d9488; }                             /* Literal.String.Regex - teal */
.highlight .s1 { color: #0d9488; }                             /* Literal.String.Single - teal */
.highlight .ss { color: #0d9488; }                             /* Literal.String.Symbol - teal */
.highlight .bp { color: var(--grey-600); }                     /* Name.Builtin.Pseudo */
.highlight .vc { color: var(--grey-800); }                     /* Name.Variable.Class */
.highlight .vg { color: var(--grey-800); }                     /* Name.Variable.Global */
.highlight .vi { color: var(--grey-800); }                     /* Name.Variable.Instance */
.highlight .il { color: #b45309; }                             /* Literal.Number.Integer.Long - amber */

/* ============================================
   Highlight.js JSON Theme Overrides
   Muted, professional colors matching RMACD design
   ============================================ */
.hljs {
    background: #f5f5f5;  /* Light grey background */
    color: #374151;       /* Dark grey default text */
}

/* JSON keys (attribute names) - dark grey */
.hljs-attr {
    color: #374151;
    font-weight: 500;
}

/* Strings - muted teal */
.hljs-string {
    color: #0d9488;
}

/* Numbers - muted amber */
.hljs-number {
    color: #b45309;
}

/* Booleans and null - slate grey */
.hljs-literal {
    color: #64748b;
}

/* Brackets and punctuation - medium grey */
.hljs-punctuation {
    color: #6b7280;
}


/* ============================================
   Button Styles
   ============================================ */

/* Primary CTA - Blue accent, used sparingly */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--accent);
    color: var(--white);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-fast);
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

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

/* Secondary - Grey outlined */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: transparent;
    color: var(--grey-700);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--grey-300);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-secondary:hover {
    background: var(--grey-100);
    border-color: var(--grey-400);
    color: var(--grey-900);
}

/* Ghost button - No border */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: transparent;
    color: var(--grey-700);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-ghost:hover {
    background: var(--grey-100);
    color: var(--grey-900);
}


/* ============================================
   Card Styles
   ============================================ */
.card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--grey-300);
}

.card-subtle {
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}


/* ============================================
   Form Elements
   ============================================ */
.input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--grey-800);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.input:hover {
    border-color: var(--grey-300);
}

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

.input::placeholder {
    color: var(--grey-400);
}

textarea.input {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-mono);
}


/* ============================================
   Prose Styles (for rendered markdown)
   ============================================ */
.prose {
    color: var(--grey-800);
    line-height: 1.75;
    max-width: 65ch;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: var(--grey-900);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 0.75em;
}

.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose h4 { font-size: 1.125rem; }

.prose p {
    margin-bottom: 1.25em;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: var(--accent-hover);
}

.prose ul,
.prose ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}

.prose li {
    margin-bottom: 0.5em;
}

.prose blockquote {
    border-left: 3px solid var(--grey-300);
    padding-left: var(--space-4);
    color: var(--grey-600);
    font-style: italic;
    margin: 1.5em 0;
}

.prose hr {
    border: none;
    border-top: 1px solid var(--grey-200);
    margin: 2em 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.prose th,
.prose td {
    border: 1px solid var(--grey-200);
    padding: var(--space-3) var(--space-4);
    text-align: left;
}

.prose th {
    background: var(--grey-100);
    font-weight: 600;
}

.prose tr:hover {
    background: var(--grey-50);
}


/* ============================================
   Utility Classes
   ============================================ */
.text-balance {
    text-wrap: balance;
}

.animate-in {
    opacity: 0;
}

.animate-in.visible {
    animation: fadeIn 0.6s ease-out forwards;
}

/* ============================================
   Mobile Navigation
   ============================================ */
.mobile-nav-menu {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.mobile-nav-menu.open {
    display: block;
    max-height: 500px;
}

/* Toggle icon visibility */
[data-mobile-nav-toggle] [data-icon-close] {
    display: none;
}

[data-mobile-nav-toggle][aria-expanded="true"] [data-icon-open] {
    display: none;
}

[data-mobile-nav-toggle][aria-expanded="true"] [data-icon-close] {
    display: inline;
}


/* Loading state */
.htmx-request .htmx-indicator {
    display: inline-flex;
}

.htmx-indicator {
    display: none;
}

/* Spinner */
.spinner {
    width: 1em;
    height: 1em;
    border: 2px solid var(--grey-200);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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


/* ============================================
   Mobile Responsive Enhancements
   ============================================ */

/* Mobile-first responsive utilities */
@media (max-width: 639px) {
    /* Smaller padding on mobile */
    .step-card {
        padding: 1rem;
    }

    /* Ensure buttons wrap nicely on mobile */
    .btn-primary,
    .btn-secondary {
        padding: var(--space-2) var(--space-4);
        font-size: 0.8125rem;
    }

    /* Preview panel adjustments for mobile */
    .preview-panel {
        position: relative;
        top: 0;
    }

    .preview-content {
        max-height: 300px;
    }

    /* Matrix touch targets */
    .matrix-cell {
        min-height: 44px;
        padding: 0.5rem;
    }

    /* Autonomy legend wrapping */
    .autonomy-legend {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Card grids stack on mobile */
    .card-grid-mobile-stack {
        grid-template-columns: 1fr;
    }

    /* Form input sizing for touch */
    .input,
    textarea.input {
        min-height: 44px;
        font-size: 1rem; /* Prevent iOS zoom */
    }

    /* Prose adjustments for mobile reading */
    .prose {
        font-size: 0.9375rem;
        line-height: 1.7;
    }

    .prose h1 { font-size: 1.5rem; }
    .prose h2 { font-size: 1.25rem; }
    .prose h3 { font-size: 1.125rem; }
    .prose h4 { font-size: 1rem; }
}

/* Mobile Preview Toggle (for generator page) */
.mobile-preview-toggle {
    display: none;
}

@media (max-width: 1023px) {
    .mobile-preview-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-3);
        background: var(--grey-50);
        border: 1px solid var(--grey-200);
        border-radius: var(--radius-md);
        cursor: pointer;
        margin-bottom: var(--space-4);
        width: 100%;
    }

    .mobile-preview-toggle:hover {
        background: var(--grey-100);
    }

    .mobile-preview-content {
        display: none;
    }

    .mobile-preview-content.open {
        display: block;
    }
}

/* Ensure modal is properly sized on mobile */
@media (max-width: 639px) {
    #matrix-modal .bg-white {
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }

    /* Reduce modal padding on mobile */
    #matrix-modal-content {
        padding: 1rem;
    }

    /* Better button layout in modal footer on mobile */
    #matrix-modal .modal-footer {
        padding: 0.75rem;
    }
}

/* Touch-friendly checkboxes for permissions table */
@media (max-width: 639px) {
    .permissions-table input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        min-width: 44px;
        min-height: 44px;
    }

    .permissions-table th,
    .permissions-table td {
        padding: 0.375rem;
        font-size: 0.75rem;
    }

    .permissions-table .classification-label {
        font-size: 0.6875rem;
        padding: 0.25rem;
    }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    #navbar {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* Prevent horizontal scroll on body */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ensure images and embeds don't overflow */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Ensure code blocks don't break layout */
pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================
   Quick Reference Card Styles (Appendix A)
   Color-coded autonomy levels with Swiss minimalist design
   ============================================ */

/* Card container */
.qr-card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-8) 0;
    box-shadow: var(--shadow-sm);
}

.qr-card h1 {
    margin-top: 0;
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--grey-200);
    margin-bottom: var(--space-4);
}

/* Matrix container with horizontal scroll on mobile */
.qr-matrix-container {
    overflow-x: auto;
    margin: var(--space-6) 0;
    -webkit-overflow-scrolling: touch;
}

.qr-matrix-container table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.qr-matrix-container th,
.qr-matrix-container td {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    border: 1px solid var(--grey-200);
    font-size: 0.875rem;
    transition: background-color var(--transition-fast);
}

.qr-matrix-container th {
    background: var(--grey-100);
    font-weight: 600;
    color: var(--grey-800);
}

.qr-matrix-container th:first-child {
    border-top-left-radius: var(--radius-md);
}

.qr-matrix-container th:last-child {
    border-top-right-radius: var(--radius-md);
}

.qr-matrix-container tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-md);
}

.qr-matrix-container tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-md);
}

/* Operation column styling */
.qr-operation {
    background: var(--grey-50);
    font-weight: 500;
    text-align: left !important;
}

.qr-op-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--grey-800);
}

.qr-op-label i {
    color: var(--grey-500);
    font-size: 1rem;
}

/* Classification header styling */
.qr-classification .qr-class-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: 600;
}

.qr-class-label i {
    color: var(--grey-600);
}

/* Cell styling with icon */
.qr-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.qr-cell i {
    font-size: 0.875rem;
}

/* Autonomy level colors - muted, professional palette */
/* AUTO - Green (safe, autonomous) */
.qr-auto {
    background: rgba(16, 185, 129, 0.12);
}

.qr-auto .qr-cell i,
.qr-legend-item.qr-auto i {
    color: #059669;
}

/* LOG - Blue (informational, logged) */
.qr-log {
    background: rgba(59, 130, 246, 0.12);
}

.qr-log .qr-cell i,
.qr-legend-item.qr-log i {
    color: #2563eb;
}

/* NOTIFY - Yellow/Amber (attention needed) */
.qr-notify {
    background: rgba(245, 158, 11, 0.12);
}

.qr-notify .qr-cell i,
.qr-legend-item.qr-notify i {
    color: #d97706;
}

/* APPROVE - Orange (approval required) */
.qr-approve {
    background: rgba(249, 115, 22, 0.12);
}

.qr-approve .qr-cell i,
.qr-legend-item.qr-approve i {
    color: #ea580c;
}

/* ELEVATED - Red/Orange (high approval) */
.qr-elevated {
    background: rgba(239, 68, 68, 0.1);
}

.qr-elevated .qr-cell i,
.qr-legend-item.qr-elevated i {
    color: #dc2626;
}

/* PROHIBIT - Dark Red (forbidden) */
.qr-prohibit {
    background: rgba(127, 29, 29, 0.12);
}

.qr-prohibit .qr-cell i,
.qr-legend-item.qr-prohibit i {
    color: #991b1b;
}

/* Hover effects for matrix cells */
.qr-matrix-container td:not(.qr-operation):hover {
    filter: brightness(0.95);
}

/* Legend styling */
.qr-legend {
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-6) 0;
}

.qr-legend-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--grey-700);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qr-legend-title i {
    color: var(--grey-500);
}

.qr-legend-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.qr-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--grey-700);
}

.qr-legend-item strong {
    font-weight: 600;
    margin-right: var(--space-1);
}

/* Hierarchy visualization */
.qr-hierarchies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.qr-hierarchy {
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.qr-hierarchy-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--grey-700);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.qr-hierarchy-title i {
    color: var(--grey-500);
}

.qr-hierarchy-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.qr-hierarchy-flow i {
    color: var(--grey-400);
    font-size: 0.75rem;
}

.qr-hierarchy-item {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--grey-700);
    transition: all var(--transition-fast);
}

.qr-hierarchy-item.qr-low {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #059669;
}

.qr-hierarchy-item.qr-high {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

.qr-hierarchy-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--grey-500);
}

.qr-risk-low {
    color: #059669;
}

.qr-risk-high {
    color: #dc2626;
}

/* Mobile responsive adjustments */
@media (max-width: 639px) {
    .qr-card {
        padding: var(--space-4);
        margin: var(--space-4) 0;
        border-radius: var(--radius-md);
    }

    .qr-matrix-container th,
    .qr-matrix-container td {
        padding: var(--space-2);
        font-size: 0.75rem;
    }

    .qr-cell {
        flex-direction: column;
        gap: var(--space-1);
    }

    .qr-cell i {
        font-size: 1rem;
    }

    .qr-op-label {
        font-size: 0.75rem;
    }

    .qr-op-label i {
        font-size: 0.875rem;
    }

    .qr-legend-items {
        grid-template-columns: 1fr 1fr;
    }

    .qr-legend-item {
        padding: var(--space-2);
        font-size: 0.75rem;
    }

    .qr-hierarchies {
        grid-template-columns: 1fr;
    }

    .qr-hierarchy-flow {
        gap: var(--space-1);
    }

    .qr-hierarchy-item {
        padding: var(--space-1) var(--space-2);
        font-size: 0.75rem;
    }
}