/* -------------------- Page Color Toggle Button Styles 
  /* Page color toggle button / blocked because it is now in island container
  #page-color-button-container {
    position: fixed !important;
    z-index: 2147483647 !important;
    top: 20px !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
  } 
  -------------------- */

  /* Page color toggle button consistent height */
  #page-color-toggle-btn {
    width: 32px;
    height: 32px;
  }

  /* Toggle button on light background */
  body.light #page-color-toggle-btn {
    background-color: #ffffff;
    border: 2px solid #000000;
  }
  /* Toggle button on dark background */
  body.dark #page-color-toggle-btn {
    background-color: #0B0B0B;
    border: 2px solid #ffffff;
  }


  /* -------------------- Popup Animation -------------------- */
    .popup-animate {
      opacity: 0;
      transform: translateY(-8px) scale(0.98);
      transform-origin: top left;
      animation: popupReveal 0.25s ease forwards;
    }

    @keyframes popupReveal {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

  /* -------------------- Base Layout and Body Styles -------------------- */

  /* Reset default UA margins/padding that create edge gaps */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure primary containers also have no internal gap */
  #canvas-wrapper,
  .paper-page-container {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
  }

  /* Prevent horizontal scroll caused by 100vw + scrollbar */
  body { overflow-x: hidden; }

  
  /* -------------------- Responsive Grid Adjustments -------------------- */
    @media (max-width: 700px) {
      #graph-container-grid {
        grid-template-columns: 1fr;
      }
      #graph-container-grid > div {
        grid-column: span 1 !important;
      }
    }

    @media (max-width: 600px) {
      #graph-container-grid {
        grid-template-columns: 1fr;
      }
      #graph-container-grid > div {
        grid-column: span 1 !important;
        height: 300px;
      }
    }

 /* -------------------- Base Theme (Light/Dark) Color Settings -------------------- */
 /* Page Background Patterns */

/* -------------------- Global CSS Variables -------------------- */
  /* Define CSS variable for page color toggle button width */

  :root {
    --page-color-btn-width: 36px;
  }

  







/* -------------------- Paper Page Container Styles -------------------- */
/* paper-page-container styling */
/* Base style for each page container */
.paper-page-container {
  width: 100vw;     /* fill window width */
  max-width: 100%;  /* never exceed body */
}


/* -------------------- Pattern Layer Setup for Pages -------------------- */
/* Background Patterns for .paper-page-container */
.paper-page-container.dot-page-background::before,
.paper-page-container.line-page-background::before,
.paper-page-container.grid-page-background::before,
.paper-page-container.stripes-page-background::before,
.paper-page-container.vertical-line-page-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---- Vertical Lines Pattern ---- */
.paper-page-container.vertical-line-page-background.light::before {
  background-image: linear-gradient(to right, #00000026 1px, transparent 1px);
  background-size: 24px 100%;
}
.paper-page-container.vertical-line-page-background.dark::before {
  background-image: linear-gradient(to right, #ffffff20 1px, transparent 1px);
  background-size: 24px 100%;
}
/* ---- Stripes Pattern ---- */
/* Remove stripes background: no pattern, fully transparent */
.paper-page-container.stripes-page-background.light::before,
.paper-page-container.stripes-page-background.dark::before {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* ---- Dots Pattern ---- */
.paper-page-container.dot-page-background.light::before {
  background-image: radial-gradient(#00000026 1px, transparent 0);
  background-size: 10px 10px;
}
.paper-page-container.dot-page-background.dark::before {
  background-image: radial-gradient(#ffffff20 1px, transparent 0);
  background-size: 10px 10px;
}
.paper-page-container.dot-page-background.spaced-dots.light::before {
  background-image: radial-gradient(#00000026 1.2px, transparent 0);
  background-size: 30px 30px;
}
.paper-page-container.dot-page-background.spaced-dots.dark::before {
  background-image: radial-gradient(#ffffff20 1.2px, transparent 0);
  background-size: 30px 30px;
}

/* ---- Line Pattern ---- */
.paper-page-container.line-page-background.light::before {
  background-image: linear-gradient(to bottom, #00000026 1px, transparent 1px);
  background-size: 100% 24px;
}
.paper-page-container.line-page-background.dark::before {
  background-image: linear-gradient(to bottom, #ffffff20 1px, transparent 1px);
  background-size: 100% 24px;
}

/* ---- Larger Grid Pattern ---- */
.paper-page-container.grid-page-background.light::before {
  background-image:
    linear-gradient(to right, #00000026 1px, transparent 1px),
    linear-gradient(to bottom, #00000026 1px, transparent 1px);
  background-size: calc(100vw / 20) calc(100vw / 20);
}
.paper-page-container.grid-page-background.dark::before {
  background-image:
    linear-gradient(to right, #ffffff20 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff20 1px, transparent 1px);
 background-size: calc(100vw / 20) calc(100vw / 20);
}

/* ---- Smaller Grid Pattern ---- */
.paper-page-container.grid-page-background.smaller-grid.light::before {
  background-image:
    linear-gradient(to right, #00000026 1px, transparent 1px),
    linear-gradient(to bottom, #00000026 1px, transparent 1px);
  background-size: calc(100vw / 40) calc(100vw / 40);
}
.paper-page-container.grid-page-background.smaller-grid.dark::before {
  background-image:
    linear-gradient(to right, #ffffff20 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff20 1px, transparent 1px);
 background-size: calc(100vw / 40) calc(100vw / 40);
}

/* -------------------- Mobile Grid Pattern Adjustments -------------------- */
@media (max-width: 700px) {
  .paper-page-container.grid-page-background.smaller-grid.light::before,
  .paper-page-container.grid-page-background.smaller-grid.dark::before {
    background-size: calc(100vw / 40) calc(100vw / 40);
  }
}