/* ========= Root theme ========= */
:root{
  --accent: #7B61FF;         /* Year 9 purple */
  --accent-2: #A28BFF;
  --sidebar-w: 16rem;        /* 256px — keep in sync with sidebar HTML */
  --shadow-sm: 0 8px 24px rgba(0,0,0,.08);
}

/* ========= Base ========= */
html { scroll-behavior: smooth; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.material-icons { font-size: 24px; }

/* ========= Layout: Sidebar + Main ========= */
/* Mobile/tablet default: stack (sidebar hidden; see modal section below) */
.layout { display: block; }
.main  { margin-left: 0; }

/* Desktop (≥1024px): real two-column grid with sticky sidebar */
@media (min-width: 1024px) {
  .layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr; /* match the variable width */
  }
  #sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    width: var(--sidebar-w); /* keep column and panel locked together */
    box-shadow: none;
  }
  /* Slightly tighter desktop padding than Tailwind p-8 (32px) */
  .main {
    padding: 1.25rem !important; /* 20px. Try 1.5rem (24px) if you prefer. */
  }
}

/* ========= Sidebar link states ========= */
#sidebar nav a {
  color: #4b5563;            /* gray-600 */
  border-radius: .5rem;      /* rounded-lg */
}
#sidebar nav a:hover { color:#111827; } /* gray-900 */
#sidebar nav a.active {
  background: var(--accent);
  color: #fff !important;
}
#sidebar nav a.active .material-icons { color:#fff !important; }

/* ========= Cards / panels (common look) ========= */
.card {
  background:#fff;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.06);
  padding: 1.5rem;
}
.card-title { font-weight:600; color:#1f2937; } /* gray-800 */
.card-text  { color:#4b5563; }                  /* gray-600 */

/* Subtle diagonal stripes for non-YouTube cards */
.bg-stripes {
  background-color: #f3f4f6; /* gray-100 */
  background-image: repeating-linear-gradient(
    45deg,
    #e0e7ff,            /* indigo-100 */
    #e0e7ff 10px,
    #f3f4f6 10px,
    #f3f4f6 20px
  );
}

/* ========= Flip cards (AI page + unit flashcards) ========= */
.flip{ perspective:1000px; height:240px; }
@media (min-width:768px){ .flip{ height:260px; } }
.flip-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition: transform .5s ease;
}
.flip:hover .flip-inner,
.flip:focus-within .flip-inner,
.flip.flipped .flip-inner{ transform: rotateY(180deg); }
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius: .75rem; display:flex; flex-direction:column; justify-content:center;
}
.flip-back{ transform: rotateY(180deg); }
.flip button.flip-toggle{ position:absolute; inset:0; opacity:0; }

/* ========= Unit tiles (hub) ========= */
.unit-badge{
  font-weight:800; font-size:14px; color:#fff; background: var(--accent);
  padding:4px 10px; border-radius:999px; box-shadow:0 6px 16px rgba(123,97,255,.2);
}
.unit-title{
  font-weight:800; font-size: clamp(18px, 2.4vw, 20px); color:#1a1a1a;
}
.subtopic{
  background:#f6f3ff; color:#44397c; border:1px solid #e6dfff;
  border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700; white-space:nowrap;
}
.flip-front{ background:linear-gradient(135deg, #ffffff, #f7f4ff); }
.flip-front .bar{ position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ========= Mobile navigation (modal popup) ========= */
/* Hide the desktop sidebar below 1024px; use modal instead */
@media (max-width: 1023.98px) {
  #sidebar { display: none !important; }
}

/* Modal overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 40;
}
.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Modal popup menu for mobile ---------- */
.mobile-menu {
  position: fixed;
  left: 50%; 
  top: 50%;
  transform: translate(-50%,-48%) scale(.92); /* a bit smaller + lower at rest */
  width: min(24rem, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 1rem;
  box-shadow: 0 20px 48px rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .45s cubic-bezier(.22,1.28,.36,1); 
  z-index: 50;
  padding: .5rem 0;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%,-50%) scale(1); /* full size, centered */
}

/* Modal header/body/close */
.mobile-menu .mm-header {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  z-index: 1;
}
.mobile-menu .mm-brand { display:flex; align-items:center; gap:.5rem; }
.mobile-menu .mm-brand img { max-height: 28px; }
.mobile-menu .mm-body  { padding: .5rem .75rem 1rem .75rem; }
.mobile-menu .mm-close {
  display: inline-flex; align-items: center;
  gap: .25rem; padding: .4rem .6rem;
  border: 1px solid #e5e7eb; border-radius: .5rem;
  background:#fff; color:#374151;
}

/* Prevent background scroll while modal open */
body.nav-open { overflow: hidden; touch-action: none; }

/* Hide the floating hamburger/close on desktop */
@media (min-width: 1024px) {
  #nav-toggle, #nav-close { display: none !important; }
}

/* If any internal mobile close strip exists in sidebar HTML, keep it hidden; modal handles close */
#sidebar .mobile-close { display: none !important; }

/* ========= MathJax inline (prevent line breaks) ========= */
mjx-container[display="false"]{ display:inline !important; vertical-align:-0.1em; margin:0 .05em; }
mjx-container[display="true"]{ display:block !important; text-align:center; margin:.5rem 0; }