body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #1e1e1e; /* Dark background */
    color: #d4d4d4; /* Light text */
    display: flex;
    min-height: 100vh;
}

/* Universal box-sizing for more predictable layouts */
*, *::before, *::after {
    box-sizing: border-box;
}

.container {
    display: flex;
    width: 100%;
}

.sidebar {
    width: 280px;
    /* box-sizing: border-box; is now handled by the universal selector above */
    background-color: #252526; /* Slightly lighter dark for sidebar */
    padding: 20px;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid #333333;
    position: fixed;
    top: 0;
    left: 0;
}

.sidebar h2 {
    color: #cccccc;
    margin-top: 0;
    border-bottom: 1px solid #444444;
    padding-bottom: 10px;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul li a {
    color: #9cdcfe; /* Light blue for links */
    text-decoration: none;
    display: block;
    padding: 8px 0;
    border-radius: 4px;
}

.sidebar ul li a:hover {
    background-color: #37373d;
    color: #ffffff;
}

.sidebar ul .phase-title {
    font-weight: bold;
    color: #d4d4d4;
    margin-top: 15px;
    font-size: 1.1em;
}

.sidebar ul .doc-link a {
    padding-left: 15px;
    font-size: 0.95em;
    color: #80c9ff;
}.main-content {
    flex-grow: 1;
    padding: 30px;
    margin-left: 0; /* Adjusted for overlay sidebar */
    overflow-y: auto;
}

/* Markdown-like styling */
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
    color: #ce9178; /* Orange-ish for headings */
    border-bottom: 1px solid #444444;
    padding-bottom: 0.3em;
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
}

.markdown-body h1 { font-size: 2em; }
.markdown-body h2 { font-size: 1.75em; }
.markdown-body h3 { font-size: 1.5em; }
.markdown-body h4 { font-size: 1.25em; }

.markdown-body p {
    margin-bottom: 16px;
}

.markdown-body ul, .markdown-body ol {
    padding-left: 30px;
    margin-bottom: 16px;
}

.markdown-body li {
    margin-bottom: 8px;
}.markdown-body a {
    color: #569cd6; /* Blue for links */
    text-decoration: none;
}

.markdown-body a:hover {
    text-decoration: underline;
}

.markdown-body code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    background-color: #2a2a2a; /* Darker background for inline code */
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 3px;
    color: #9cdcfe;
}

.markdown-body pre {
    background-color: #1e1e1e; /* Editor-like background for code blocks */
    border: 1px solid #3c3c3c;
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    border-radius: 6px;
    margin-bottom: 16px;
}

.markdown-body pre code {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: 100%;
    color: inherit; /* Inherit from pre for block code */
    border-radius: 0;
    border: none;
}.markdown-body blockquote {
    color: #c8c8c8;
    border-left: 0.25em solid #555555;
    padding: 0 1em;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 16px;
}

.markdown-body table {
    border-collapse: collapse;
    width: auto;
    margin-bottom: 16px;
}

.markdown-body th, .markdown-body td {
    border: 1px solid #444444;
    padding: 8px;
    text-align: left;
}

.markdown-body th {
    background-color: #252526;
}

/* Specific for the embedded markdown content */
#markdown-content {
    /* Styles will be applied by markdown-body class */
}/* Hamburger Menu Styles */
.hamburger-menu {
    display: block; /* Hidden by default, shown via media query or always visible */
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1001; /* Ensure it's above other content, including the sidebar */
    background: #333;
    border: none;
    padding: 8px; /* Reduced padding */
    cursor: pointer;
    border-radius: 5px;
}

.hamburger-menu__bar {
    display: block;
    width: 20px;  /* Reduced width */
    height: 2px; /* Reduced height */
    margin: 4px auto; /* Reduced margin */
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

/* Styling for hamburger when menu is open (optional, for an 'X' icon) */
.hamburger-menu.active .hamburger-menu__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active .hamburger-menu__bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-menu__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Sidebar Styles */
.sidebar {
    position: fixed; /* Fixed position to slide in from the side */
    top: 0;
    left: 0;
    height: 100vh; /* Full viewport height */
    width: 250px; /* Or your desired width */
    /* background-color: #f8f9fa; /* Example background color */ */
    padding-top: 60px; /* Space for the hamburger menu or other top content */
    transform: translateX(-100%); /* Initially hidden off-screen */
    transition: transform 0.3s ease-in-out;
    z-index: 1000; /* Below hamburger, above other content */
    overflow-y: auto; /* Allow scrolling within sidebar if content is long */
}

.sidebar.active {
    transform: translateX(0); /* Slide in */
}

/* Adjust main content when sidebar is open - if sidebar doesn't overlay */
/* This example assumes the sidebar overlays and doesn't push content on mobile.
   If you want content pushing, you'd add a margin to '.main-content' or '.container'
   when the sidebar is active, typically for wider screens. */

/* Mobile-first: Hamburger is shown, sidebar is hidden */
/* You might want to hide the hamburger and always show the sidebar on larger screens */
@media (min-width: 769px) { /* Example breakpoint */
    /* .hamburger-menu {
        display: none; /* Hide hamburger on larger screens */
    /* } */
    /* .sidebar {
        transform: translateX(0); /* Keep sidebar visible */
        /* position: static; /* Or relative, depending on your layout */
        /* height: auto; */
        /* width: 250px; /* Or your default sidebar width */
    /* } */
    /* .container.sidebar-active .main-content {
        margin-left: 250px; /* Push content if sidebar is not overlaying */
    /* } */
}/* Hamburger Menu Styles */
.hamburger-menu {
    display: block;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1001; /* Ensure it's above other content, including the sidebar */
    background: #333;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.hamburger-menu__bar {
    display: block;
    width: 20px;  /* Reduced width */
    height: 2px; /* Reduced height */
    margin: 4px auto; /* Reduced margin */
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

/* 'X' transform styles for .hamburger-menu.active removed as it now fades out. *//* Sidebar Styles */
.sidebar {
    position: fixed; /* Fixed position to slide in from the side */
    top: 0;
    left: 0;
    height: 100vh; /* Full viewport height */
    width: 250px; /* Or your desired width */
    /* background-color: #f8f9fa; /* Example background color */ */
    padding-top: 20px; /* Adjust as needed, e.g., to clear the fixed hamburger */
    transform: translateX(-100%); /* Initially hidden off-screen */
    transition: transform 0.3s ease-in-out;
    z-index: 1000; /* Below hamburger, above other content */
    overflow-y: auto; /* Allow scrolling within sidebar if content is long */
    border-right: 1px solid #ddd; /* Optional: adds a border */
}

.sidebar.active {
    transform: translateX(0); /* Slide in */
}

.sidebar__header-internal {
    padding: 0 15px; /* Padding for the "Navigation" title area */
    margin-bottom: 10px;
}

.sidebar__header-internal h2 {
    margin-top: 0; /* Adjust as preferred */
    margin-bottom: 10px; /* Space below title */
    font-size: 1.5em; /* Example size */
}

.sidebar__links-internal {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar__links-internal li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.sidebar__links-internal li a:hover {
    background-color: #e9ecef;
}

/* Optional: Adjust main content when sidebar is open (if it shouldn't overlay) */
/* By default, this setup has the sidebar overlaying content, common for mobile. */
/*
@media (min-width: 769px) {
    .main-content.sidebar-active {
        margin-left: 250px; /* Pushes main content to the right if sidebar is not an overlay */
/* }
}*//* Sidebar Styles */
.sidebar {
    position: fixed; /* Fixed position to slide in from the side */
    top: 0;
    left: 0;
    height: 100vh; /* Full viewport height */
    width: 250px; /* Or your desired width */
    /* background-color: #f8f9fa; /* Example background color */ */
    padding-top: 20px; /* Adjust as needed, e.g., to clear the fixed hamburger */
    transform: translateX(-100%); /* Initially hidden off-screen */
    transition: transform 0.3s ease-in-out;
    z-index: 1000; /* Below hamburger, above other content */
    overflow-y: auto; /* Allow scrolling within sidebar if content is long */
    border-right: 1px solid #ddd; /* Optional: adds a border */
}

.sidebar.active {
    transform: translateX(0); /* Slide in */
}

.sidebar__header-internal {
    padding: 0 15px; /* Padding for the "Navigation" title area */
    margin-bottom: 10px;
}

.sidebar__header-internal h2 {
    margin-top: 0; /* Adjust as preferred */
    margin-bottom: 10px; /* Space below title */
    font-size: 1.5em; /* Example size */
}/* (Continued from previous Sidebar Styles) */

.sidebar__links-internal {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar__links-internal li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.sidebar__links-internal li a:hover {
    background-color: #e9ecef;
}

/* Optional: Adjust main content when sidebar is open (if it shouldn't overlay) */
/* By default, this setup has the sidebar overlaying content, common for mobile. */
/*
@media (min-width: 769px) {
    .main-content.sidebar-active {
        margin-left: 250px; /* Pushes main content to the right if sidebar is not an overlay */
/* }
}*//* Styles for Sidebar Header Flex Layout and Close Button */
.sidebar__header-internal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 0 15px; /* This padding was set before, ensure it's appropriate or adjust */
    /* margin-bottom: 10px; /* This was set before, adjust if flex affects spacing */
}

.sidebar__header-internal h2 {
    margin: 10px 0; /* Adjusted margin for flex layout */
    /* font-size: 1.5em; /* Existing font size, ensure it's not overridden if not specified here */
}

.sidebar-close-btn {
    background: none;
    border: none;
    font-size: 1.8em; /* Make × (times symbol) large enough */
    color: inherit; /* Inherit color from parent, good for dark/light mode consistency */
    cursor: pointer;
    padding: 5px 10px; /* Adjust click area and spacing */
    line-height: 1;
}

.sidebar-close-btn:hover {
    opacity: 0.7;
}/* Styles for main hamburger icon fade effect */
.hamburger-menu {
    /* Existing styles for position, look, z-index etc. should be preserved. */
    /* Ensure opacity, visibility and pointer-events are set for the transition. */
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Clickable when visible */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s; /* Visibility changes immediately */
}

.hamburger-menu.fade-out {
    opacity: 0;
    visibility: hidden; /* Hidden and non-interactive after fade */
    pointer-events: none;
    /* Delay hiding visibility until after opacity transition completes */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}