/* --- Styles for Layout, Popups, and Draggable Divider --- */

/* Main flex container */
.container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

/* Default state for the left column */
.left-column {
  flex: 1 1 100%; /* By default, takes up all the space */
  padding: 15px;
  background-color: whitesmoke;
  box-sizing: border-box;
  min-width: 300px; /* Prevent from becoming too small */
}

/* Hide divider and right column by default */
#divider, .right-column {
  display: none;
}

/* Style for the draggable handle */
#divider {
  flex: 0 0 10px; /* Does not grow or shrink, fixed width */
  cursor: col-resize;
  background-color: #ccc;
  border-left: 1px solid #aeaeae;
  border-right: 1px solid #aeaeae;
}

.right-column {
  padding: 15px;
  border-left: none; /* Divider provides the border now */
  background-color: whitesmoke;
  overflow-wrap: break-word;
  box-sizing: border-box;
  min-width: 300px; /* Prevent from becoming too small */
}

/*
  When a popup inside the right column is targeted, the :has() selector
  on the parent container allows us to change the layout of ALL children.
*/
.container:has(.right-column .popup:target) .left-column {
  flex-basis: 59%; /* Initial size for left column in split view */
}

.container:has(.right-column .popup:target) #divider {
  display: block; /* Show the divider in split view */
}

.container:has(.right-column .popup:target) .right-column {
  display: block; /* Show the right column in split view */
  flex-basis: 40%; /* Initial size for right column */
}

/* Original popup functionality */
.popup {
  display: none;
  border: 2px solid #333;
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
  scroll-margin-top: 50px;
}

.popup:target {
  display: block;
}

.popup .close {
  float: right;
  font-size: 20px;
  text-decoration: none;
  color: #333;
}