/* ───────── Base (mobile fallback) ───────── */
.layout-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: auto;
  display: flex; /* allow flex‐chain on mobile */
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

#layout-layer {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

#page-container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

/* ─── Desktop override: fixed-height “canvas” ─── */
@media (min-width: 600px) {
  .layout-container {
    display: block; /* stop being a flex‐container on desktop */
    height: 80vh; /* fixed 80% of viewport height */
    overflow: auto; /* in case absolute panels overflow */
    flex: none; /* do not flex on desktop */
    min-height: 0;
  }
  #layout-layer {
    width: 100%;
    height: 100%; /* fill that 80vh */
    position: relative; /* so panels can absolute‐position inside */
    display: flex; /* allow grid fallback if JS fails */
    flex-direction: column;
    flex: none;
    min-height: 0;
  }
  #book-grid {
    display: grid; /* fallback if JS doesn’t run */
    grid-template-columns: 1fr;
    gap: 1rem;
    height: 100%; /* fill the 80vh if grid fallback */
    box-sizing: border-box;
    overflow: visible; /* absolute panels do not need grid scroll */
    flex: none;
    min-height: 0;
  }
}

/* ─── Mobile fix: make everything fill to bottom ─── */
@media (max-width: 599px) {
  /* (All containers already have flex:1 and min-height:0) */

  /* The grid must fill #layout-layer entirely, stacking panels single‐column */
  #book-grid {
    display: grid;
    grid-template-columns: 1fr; /* single column on phones */
    gap: 1rem;
    flex: 1 1 0; /* fill all of #layout-layer */
    height: 100%; /* ensure it uses the full flex‐height */
    box-sizing: border-box;
    overflow-y: auto; /* scroll if panels overflow */
    min-height: 0;
  }
}
/* ─── Starry background & page container ─── */
#starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}
.flex‐item-selector {
  min-height: 0; /* override the default min-height:auto */
  flex: 1 1 0; /* allow the flex item to grow/shrink as needed */
}