/* 
   Swiss Style Design System 
   - Strict Grid
   - Strong Typography
   - Minimalist Color Palette
*/

:root {
    /* Colors */
    --bg-color: #ffffff;
    --text-primary: #000000;
    --text-secondary: #555555;
    --accent-color: #000000;
    /* Monochrome accent */
    --border-color: #e0e0e0;
    --hover-bg: #f5f5f5;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: 'Lora', Georgia, 'Times New Roman', Times, serif;
    --font-title: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Spacing */
    --space-unit: 8px;
    --space-xs: calc(var(--space-unit) * 1);
    /* 8px */
    --space-sm: calc(var(--space-unit) * 2);
    /* 16px */
    --space-md: calc(var(--space-unit) * 4);
    /* 32px */
    --space-lg: calc(var(--space-unit) * 8);
    /* 64px */
    --space-xl: calc(var(--space-unit) * 12);
    /* 96px */

    /* Layout */
    --sidebar-width: 350px;
    --max-content-width: 680px;

    /* Active State */
    --active-bg: #000000;
    --active-text: #ffffff;


}

/* Selection */
::selection {
    background-color: var(--text-primary);
    color: var(--bg-color);
}


/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    overflow: hidden;
    /* Prevent body scroll, handle in containers */
    display: flex;
    flex-direction: column;
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.7;
}

/* Layout Structure */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* Sidebar (List View) */
.sidebar {
    width: var(--sidebar-width);
    /* Removed border-right for cleaner look, or keep it very subtle? 
       Let's keep the right border for separation but make it lighter if needed. 
       Actually, standard Swiss style often uses whitespace or very fine lines. 
       I'll keep the structural border but remove the inner item borders. */
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    z-index: 100;
    /* Ensure it's above content */

    /* Fixed positioning for overlay/fade effect */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    transition: opacity 0.55s ease;
    opacity: 1;
}

/* Faded state for sidebar */
.sidebar.faded {
    opacity: 0;
    /* We keep pointer-events: auto so hover still works to reveal it */
}

.sidebar.faded:hover {
    opacity: 1;
}

.sidebar-header {
    padding: var(--space-md);
    /* Removed border-bottom */
    margin-bottom: var(--space-sm);
}

.site-title {
    font-size: 1.2rem;
    /* Slightly smaller for minimalism */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-md);
    /* Add padding to container instead of items for better alignment */
}

/* Article List */
.article-list {
    list-style: none;
    padding-left: var(--space-md);
}

.article-item {
    /* Removed border-bottom */
    margin-bottom: var(--space-xs);
}

.article-link {
    display: block;
    padding: var(--space-xs) 0;
    /* Reduced vertical padding, no horizontal padding needed due to container */
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.article-link:hover {
    color: var(--text-primary);
    /* Removed background hover effect */
}

.article-link.active {
    color: var(--text-primary);
    font-weight: 600;
    /* Removed background color */
}

/* Main Content Area */
.main-content {
    /* Removed flex: 1 since sidebar is fixed */
    width: 100%;
    height: 100vh;
    /* Full height */
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-wrapper {
    width: 100%;
    max-width: var(--max-content-width);
    padding: var(--space-lg) var(--space-md);
    margin: 0 auto;
    /* Center horizontally */
}

/* Note Content */
.note-content {
    font-family: var(--font-serif);
    color: var(--text-primary);
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.note-content h1 {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: var(--space-md);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.note-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    /* Fixed: Was hardcoded #333 */
}

.note-content p:last-child {
    margin-bottom: 0;
}

/* Hidden Data */
.hidden-notes {
    display: none;
}

/* Home Icon */
.home-icon {
    /* Removed fixed positioning */
    color: var(--text-secondary);
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-icon:hover {
    color: var(--text-primary);
    opacity: 1;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sidebar.hidden {
        transform: translateX(-100%);
    }

    .main-content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: var(--bg-color);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 20;
    }

    .main-content.visible {
        transform: translateX(0);
    }

    .content-wrapper {
        padding: var(--space-md);
    }

    .note-content h1 {
        font-size: 2rem;
    }

    .btn-back-mobile {
        display: block;
        /* Logic handled in JS to toggle visibility */
    }
}

/* Print Styles */
@media print {

    .sidebar,
    .nav-controls {
        display: none !important;
    }

    .main-content {
        position: static;
        width: 100%;
        height: auto;
        overflow: visible;
        transform: none;
    }

    .content-wrapper {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .note-content h1 {
        font-size: 24pt;
        color: #000;
    }

    .note-content p {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    body {
        height: auto;
        overflow: visible;
        background: #fff;
    }
}