* {
  box-sizing: border-box;
}

body {
  font-family: "Latin Modern Roman", "Computer Modern", "STIX Two Text", "Times New Roman", serif;
  line-height: 1.6;
  letter-spacing: 0.5px;
  padding-inline: 1rem;
}

article {
  max-width: 800px;
  margin-inline: auto;
  padding: clamp(1rem, 4vw, 4rem);
}

.nodisplay {
  display: none;
}

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;  /* Space between items */
}

.grid-item {
  display: flex;            /* Activate Flexbox on each grid item */
  /* flex: 1 1 calc(33% - 20px); */ /* 3 items per row, minus gap */
  flex-direction: column;
  min-width: 250px;
  box-sizing: border-box;
}

/* 1. Layout & Constraints */
.layout-wrapper {
  display: flex;
  gap: 0; /* Removed gap for a cleaner sidebar look */
  height: calc(100vh - 100px); /* Adjust '100px' to match your header height */
  overflow: hidden; /* Prevents the main page from scrolling */
  align-items: stretch;
  border: 1px solid var(--pico-muted-border-color); /* Optional: contains the app */
}

.editor-section {
  flex-grow: 1;
  height: 100%;
  overflow-y: auto; /* Only the editor area scrolls */
  padding: var(--pico-spacing);
  margin: 0;
  display: flex;
  flex-direction: column;
}

#editor {
  flex-grow: 1;
  width: 100%;
  margin-bottom: var(--pico-spacing);
}
.sidebar {
  width: 260px;
  min-width: 260px;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  border-right: 1px solid var(--pico-muted-border-color);
  padding: var(--pico-spacing);
}

main {
  flex-grow: 1;
}

/* 2. Tree Logic (Infinite Nesting) */
/* 2. Sidebar Styling */
.tree-container {
  width: 280px;
  min-width: 280px;
  height: 100%;
  overflow-y: auto; /* Only the sidebar scrolls */
  background-color: var(--pico-card-background-color); /* Pico's default card bg */
  border-right: 1px solid var(--pico-muted-border-color);
  padding: var(--pico-spacing);
}

.tree-container ul {
  list-style: none;
  margin: 0;
  padding: 0; /* Reset root padding */
}

/* This targets every nested level */
.tree-container ul ul {
  margin-left: 0.75rem; /* Space between parent and child level */
  padding-left: 0.5rem; /* Space between the line and the text */
  border-left: 1px solid var(--pico-muted-border-color);
}

/* 3. Element Styling */
.tree-container details {
  border: none;
  margin-bottom: 0;
  padding: 0;
}

.tree-container summary, 
.tree-container li {
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--pico-border-radius);
  transition: background-color 0.2s ease;
}

/* Remove default Pico markers */
.tree-container summary::marker,
.tree-container summary::-webkit-details-marker {
  display: none;
}

/* Hover effect */
.tree-container summary:hover, 
.tree-container li:hover {
  background-color: var(--pico-secondary-hover-background);
}


@media (max-width: 992px) {
  .layout-wrapper { 
    flex-direction: column; 
    height: auto; 
    overflow: visible; 
  }
  .tree-container {
    width: 100%;
    height: 300px; /* Fixed height for mobile so it doesn't push editor off screen */
  }
   .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--pico-muted-border-color);
} }
}