/* ---------- PAGE SHELL LAYOUT ---------- */
/* ---------- PAGE SHELL LAYOUT ---------- */
/* ---------- PAGE SHELL LAYOUT ---------- */

/*
  Two-column layout: [sidebar-main] [main-content]
  On desktop: sidebars push the center content by animating their width.
  On mobile:  sidebars overlay the content (position: fixed).
*/

/* The shell fills the viewport below the header */
#main-shell {
  display: flex;
  min-height: 100vh;
}

/* Center column: scrollable, fills remaining space */
#main-content {
  flex: 1;
  min-width: 0; /* prevents flex blowout */
  display: flex;
  flex-direction: column;
}

#main-test-area {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

/* ---- SIDEBAR SLOTS (push behavior) ---- */
/* A part of reader.css */

/* ---- MOBILE SIDEBAR SLOTS (overlay behavior) ---- */
@media (max-width: 768px) {

  #main-shell {
    position: static;
    display: block;
    overflow: visible;
  }

  #main-content {
    overflow-y: visible;
  }
}

/* desky topy rules */
@media (min-width: 769px) {
  #main-shell #sidebar-main {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;
  }

  #main-shell #main-content {
    transition: margin-left 0.3s ease;
  }

  #main-shell:has( #sidebar-main.active ) #main-content {
    margin-left: 256px;
  }
}