/* =========================================================
public_html/genebean/Styles/modes/learn-layout.css
   Job: layout & structure only
   Applies ONLY to learn.php
========================================================= */

/* =========================================================
   LEARN MODE — LAYOUT & STRUCTURE ONLY
========================================================= */

/* =========================================================
   LEARN MODE — EXECUTION ENTRY NEUTRALIZATION
========================================================= */

#workspace-canvas[data-mode="learn"] {
  padding-top: 0;
}

header.execution-entry {
  margin: 0;
  padding: 0;
}

#workspace-canvas {
  margin: 0;
  padding: 0;
}

/* -----------------------------------------
   Canvas layout (ANCHOR)
----------------------------------------- */

.learn-canvas {
  position: relative;
  display: grid;

  /* Header row + content row */
  grid-template-rows: auto 1fr;

  /* Sidebar | Content | Section Nav */
  grid-template-columns: 260px 1fr 220px;

  min-height: 100svh;
  overflow: hidden;
}

/* -----------------------------------------
   Learn Header (layout only)
----------------------------------------- */

.learn-header {
  grid-column: 1 / -1;
  grid-row: 1;

  position: relative;
  top: var(--nav-height);
  z-index: 20;

  padding: 20px 32px;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.learn-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.learn-header p {
  margin: 0;
  font-size: 14px;
}

/* -----------------------------------------
   Sidebar
----------------------------------------- */

.learn-sidebar {
  grid-column: 1;
  grid-row: 2;

  position: relative;
  padding: 18px 14px;
  border-right: 1px solid transparent;
  margin-top: var(--nav-height);
}

/* -----------------------------------------
   Learn list
----------------------------------------- */

.learn-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.learn-pill {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

/* -----------------------------------------
   Workspace
----------------------------------------- */

.learn-workspace {
  margin-top: var(--nav-height);
  grid-column: 2;
  grid-row: 2;
  overflow: auto;
}

/* =========================================================
   (OPTIONAL) COLLAPSE SUPPORT — FUTURE
   Keep structure but DO NOT wire yet
========================================================= */

.learn-collapse-toggle {
  position: absolute;
  top: 50%;
  left: calc(260px - 16px);
  transform: translateY(-50%);
  width: 24px;
}

/* =========================================================
   RESPONSIVE — MOBILE (STRUCTURE)
========================================================= */

@media (max-width: 900px) {

  .learn-canvas {
    grid-template-columns: 220px 1fr;
    height: calc(100svh - var(--nav-height));
  }

  .learn-header {
    padding: 16px;
  }

  .learn-sidebar {
    padding: 12px 10px;
  }

  .learn-pill {
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  .learn-workspace {
    padding: 16px;
    overflow: auto;
    overscroll-behavior: auto;
  }
}

/* =========================================================
   TRANSITIONS (SAFE, NON-BEHAVIORAL)
========================================================= */

.learn-canvas {
  transition: grid-template-columns 320ms cubic-bezier(.22,.61,.36,1);
}

.learn-pill {
  transform: translateZ(0);
}
.learn-canvas {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100svh;
  overflow: hidden;
}

/* Sidebar */
.learn-sidebar {
  position: relative;
  margin-top: var(--nav-height);
  padding: 18px 14px;
}

/* Workspace */
.learn-workspace {
  margin-top: var(--nav-height);
  height: calc(100svh - var(--nav-height));
  overflow: auto;
}

/* Collapse mechanics */
.learn-collapse-toggle {
  position: absolute;
  top: 50%;
  left: calc(260px - 16px);
  transform: translateY(-50%);
  width: 24px;
  height: 48px;
  cursor: pointer;
  z-index: 40;
}

/* Collapsed state */
.learn-canvas.is-collapsed {
  grid-template-columns: 32px 1fr;
}

.learn-canvas.is-collapsed .learn-list {
  display: none;
}

.learn-canvas.is-collapsed .learn-collapse-toggle {
  left: 0;
}

.learn-canvas.is-collapsed .chevron {
  transform: rotate(180deg);
}
/* =========================================================
   LEARN — COLLAPSED STATE (CHEVRON ROTATION)
========================================================= */

.learn-canvas.is-collapsed .chevron {
  transform: rotate(180deg);
}
.learn-collapse-toggle:hover .chevron {
  transform: rotate(90deg);
}



/* -----------------------------------------
   Learn Section Navigation (RIGHT)
----------------------------------------- */

.learn-section-nav {
    grid-column: 3;
    grid-row: 2;
    margin-top: var(--nav-height);
    position: relative;
    /* top: var(--nav-height); */
    /* height: calc(100svh - var(--nav-height)); */
    overflow-y: auto;
    border-left: 1px solid transparent;
    /* overscroll-behavior: contain; */
}

.learn-section-nav-inner {
  padding: 18px 14px;
}

.learn-section-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 900px) {

  .learn-canvas {
    grid-template-columns: 220px 1fr;
  }

  .learn-section-nav {
    display: none;
  }
}
/*
This keeps things clean and avoids cognitive overload on small screens.
*/
@media (max-width: 1100px) {
  .learn-canvas {
    grid-template-columns: 260px 1fr;
  }

  .learn-section-nav {
    display: none;
  }
}