/* ==========================================================================
   Python Animation Learning — App Shell
   Sidebar (desktop) + mobile "All Topics" drawer + main lesson frame.
   Mirrors the Pandas Learn app-shell pattern, themed to the
   "Night Interpreter" ink / signal / ember / violet palette.
   ========================================================================== */

:root{
  --sidebar-w: 300px;
}

/* ---------------- Section wrapper (replaces old roadmap grid section) ---------------- */
.app-shell-section{
  position: relative;
  padding: 64px 0 0;
  background: var(--ink-800);
  overflow: hidden;
}
.app-shell-section::before{
  content: '';
  position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border-strong), transparent);
}

/* ---------------- App shell layout ---------------- */
.app-shell{
  display: flex;
  min-height: 78vh;
  max-width: var(--container, 1240px);
  margin: 0 auto;
  padding: 0 24px 90px;
  gap: 22px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

/* ---------------- Sidebar ---------------- */
.sidebar{
  width: var(--sidebar-w);
  flex-shrink: 0;
  height: calc(100vh - 124px);
  position: sticky; top: 124px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 22px 54px rgba(2,4,10,.5);
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 20px 0 0;
}

.sidebar-brand{
  display: flex; align-items: center; gap: 11px;
  padding: 4px 20px 18px; border-bottom: 1px solid var(--glass-border);
  margin-bottom: 14px;
}
.topic-brand-mark{
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--signal), var(--violet));
  color: var(--ink-950); font-family: var(--font-display); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-signal);
}
.topic-brand-text{ display: flex; flex-direction: column; line-height: 1.25; }
.topic-brand-title{ font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-hi); }
.topic-brand-sub{ font-size: 11.5px; color: var(--text-low); letter-spacing: .02em; }

.sidebar-search-wrap{ position: relative; margin: 0 16px 14px; }
.search-icon{ position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-low); pointer-events: none; }
#sidebar-search{
  width: 100%; padding: 9px 12px 9px 34px; border-radius: 10px;
  border: 1px solid var(--glass-border); background: var(--ink-900);
  font-size: 13.5px; color: var(--text-hi); font-family: var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}
#sidebar-search::placeholder{ color: var(--text-low); }
#sidebar-search:focus{ outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(43,231,192,.14); }

.sidebar-nav{ flex: 1; overflow-y: auto; padding: 2px 10px 24px; }
.sidebar-nav::-webkit-scrollbar{ width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border-radius: 6px; }

.nav-category{ margin-bottom: 4px; }
.nav-category-head{
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; background: none; border: none; border-radius: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-mid);
  transition: background .15s;
}
.nav-category-head:hover{ background: var(--ink-900); }
.nav-dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.nav-category-title{ flex: 1; text-align: left; }
.chev{ color: var(--text-low); transition: transform .2s; }
.nav-category-head.closed .chev{ transform: rotate(90deg); }

.nav-list{ display: flex; flex-direction: column; gap: 1px; padding: 2px 0 10px 4px; overflow: hidden; max-height: 900px; transition: max-height .25s ease, opacity .2s ease; opacity: 1; }
.nav-list.closed{ max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

.topic-nav-item{
  display: flex; align-items: center; gap: 9px; text-align: left; width: 100%;
  padding: 7.5px 10px 7.5px 14px; border: none; background: none; border-radius: 8px;
  font-size: 13.3px; color: var(--text-mid); position: relative;
  transition: background .12s, color .12s;
}
.topic-nav-item:hover{ background: var(--ink-900); color: var(--text-hi); }
.topic-nav-item-num{ font-family: var(--font-mono); font-size: 11px; color: var(--text-low); flex-shrink: 0; width: 22px; }
.topic-nav-item-title{ line-height: 1.3; }
.topic-nav-item.active{ background: rgba(43,231,192,0.12); color: var(--text-hi); font-weight: 600; }
.topic-nav-item.active::before{
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--signal);
}
.nav-empty{ padding: 16px 12px; font-size: 13px; color: var(--text-low); }

.sidebar-scrim{ display: none; }

/* ---------------- Main content (lesson frame) ---------------- */
.main-scroll{
  flex: 1; min-width: 0;
}

.frame-panel{
  overflow: hidden;
  height: calc(100vh - 124px);
  display: flex; flex-direction: column;
  position: sticky; top: 124px;
}

.frame-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.frame-title-wrap{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.frame-icon{
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(140deg, rgba(43,231,192,0.2), rgba(159,123,255,0.14));
  display: flex; align-items: center; justify-content: center; color: var(--signal);
}
.frame-icon svg{ width: 18px; height: 18px; }
.frame-title{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-eyebrow{ font-family: var(--font-mono); font-size: 11px; color: var(--text-low); letter-spacing: .08em; }
.frame-actions{ display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.frame-btn{
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; color: var(--text-mid); transition: background .25s ease, color .25s ease;
}
.frame-btn:hover{ background: var(--glass-bg-strong); color: var(--text-hi); }
.frame-btn svg{ width: 17px; height: 17px; }

.frame-body{
  position: relative; flex: 1; min-height: 0;
  overflow: hidden; overscroll-behavior: contain;
}
.frame-iframe{
  width: 100%; height: 100%; border: 0; opacity: 0;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  transition: opacity .4s ease;
}
.frame-iframe.loaded{ opacity: 1; }

.frame-loader{
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  color: var(--text-mid); font-size: 13px; font-family: var(--font-mono);
  transition: opacity .3s ease;
}
.frame-loader.hide{ opacity: 0; pointer-events: none; }

/* ---------------- Fullscreen ---------------- */
.frame-panel.fullscreen{
  position: fixed; inset: 0; z-index: 200; height: 100vh; border-radius: 0; top: 0;
}

/* ==========================================================================
   MOBILE APP (card menu + full-screen lesson)
   Hidden on desktop; swapped in below 880px instead of the sidebar+frame.
   ========================================================================== */
.mobile-app{ display: none; }

.mobile-menu-screen{ display: none; }
.mobile-lesson-screen{
  display: none; flex-direction: column;
  position: fixed; inset: 0; z-index: 1200; /* above the site's fixed mobile topbar/bottom-nav (z-index:1100) */
  background: var(--ink-950);
}

.mobile-menu-header{ margin-bottom: 16px; }
.mobile-menu-title{ font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text-hi); }
.mobile-menu-sub{ font-size: 13px; color: var(--text-mid); margin-top: 4px; }

.mobile-menu-search-wrap{ position: relative; margin-bottom: 20px; }
.mobile-menu-search-wrap svg{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-low); pointer-events: none; }
#mobile-menu-search{
  width: 100%; padding: 11px 14px 11px 36px; border-radius: 12px;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  color: var(--text-hi); font-family: var(--font-body); font-size: 14px;
}
#mobile-menu-search::placeholder{ color: var(--text-low); }
#mobile-menu-search:focus{ outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(43,231,192,.14); }

.mobile-category{ margin-bottom: 24px; }
.mobile-category-title{
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-mid);
}
.mobile-category-title .dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.mobile-card-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-topic-card{
  display: flex; flex-direction: column; gap: 12px; text-align: left;
  padding: 14px; border-radius: var(--radius-md);
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  transition: background .12s, border-color .12s, transform .12s;
}
.mobile-topic-card:active{ background: var(--glass-bg-strong); transform: scale(.98); }
.mobile-card-icon{
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, rgba(43,231,192,.2), rgba(159,123,255,.14)); color: var(--signal);
}
.mobile-card-icon svg{ width: 17px; height: 17px; }
.mobile-card-title{ font-size: 13.5px; font-weight: 600; color: var(--text-hi); line-height: 1.32; }
.mobile-card-num{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); }
.mobile-menu-empty{ padding: 30px 4px; text-align: center; font-size: 13.5px; color: var(--text-low); }

/* ---------------- Lesson topbar (redesigned: glass, icon badge, drawer trigger) ---------------- */
.mobile-lesson-topbar{
  position: relative;
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 13px 14px; padding-top: calc(13px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--glass-border-strong);
  background: linear-gradient(180deg, rgba(18,26,40,0.92), rgba(14,20,31,0.88));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 22px -12px rgba(2,4,10,.6);
}
.mobile-lesson-topbar::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border-strong) 30%, var(--glass-border-strong) 70%, transparent);
}
.mobile-back-btn,
.mobile-lesson-drawer-btn{
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--text-hi);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.mobile-back-btn:active,
.mobile-lesson-drawer-btn:active{ background: var(--glass-border); transform: scale(.94); }
.mobile-lesson-drawer-btn{ color: var(--signal); border-color: rgba(43,231,192,.28); }
.mobile-lesson-drawer-btn svg{ fill: currentColor; }

.mobile-lesson-title-wrap{
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
}
.mobile-lesson-icon{
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, rgba(43,231,192,0.22), rgba(159,123,255,0.16));
  color: var(--signal); box-shadow: 0 0 0 1px var(--glass-border) inset;
}
.mobile-lesson-icon svg{ width: 17px; height: 17px; }
.mobile-lesson-title{
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- All-topics drawer (slide in from the right) ---------------- */
.topics-drawer{
  position: fixed; inset: 0; z-index: 1300;
  visibility: hidden; pointer-events: none;
}
.topics-drawer.open{ visibility: visible; pointer-events: auto; }

.topics-drawer-scrim{
  position: absolute; inset: 0;
  background: rgba(4,6,12,0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .28s ease;
}
.topics-drawer.open .topics-drawer-scrim{ opacity: 1; }

.topics-drawer-panel{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border-left: 1px solid var(--glass-border-strong);
  box-shadow: -24px 0 60px -20px rgba(2,4,10,.65);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,.9,.32,1);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.topics-drawer.open .topics-drawer-panel{ transform: translateX(0); }

.topics-drawer-header{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
}
.topics-drawer-brand{ display: flex; align-items: center; gap: 11px; min-width: 0; }
.topics-drawer-title{ display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-hi); }
.topics-drawer-sub{ display: block; font-size: 11px; color: var(--text-low); letter-spacing: .02em; margin-top: 2px; }
.topics-drawer-close{
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--text-mid);
  transition: background .15s ease, color .15s ease;
}
.topics-drawer-close:active{ background: var(--glass-border); color: var(--text-hi); }

.topics-drawer-search-wrap{ position: relative; margin: 14px 16px; flex-shrink: 0; }
.topics-drawer-search-wrap .search-icon{ position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-low); pointer-events: none; }
#topics-drawer-search{
  width: 100%; padding: 10px 12px 10px 34px; border-radius: 10px;
  border: 1px solid var(--glass-border); background: var(--ink-900);
  font-size: 13.5px; color: var(--text-hi); font-family: var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}
#topics-drawer-search::placeholder{ color: var(--text-low); }
#topics-drawer-search:focus{ outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(43,231,192,.14); }

.topics-drawer-list{ flex: 1; overflow-y: auto; padding: 2px 12px 20px; }
.topics-drawer-list::-webkit-scrollbar{ width: 5px; }
.topics-drawer-list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border-radius: 6px; }

.drawer-category{ margin-bottom: 6px; }
.drawer-category-title{
  display: flex; align-items: center; gap: 8px; padding: 12px 8px 7px;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-mid);
}
.drawer-category-title .dot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.drawer-topic-item{
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 8px; border: none; background: none; border-radius: 10px;
  position: relative; transition: background .12s ease;
}
.drawer-topic-item:active{ background: var(--glass-bg-strong); }
.drawer-topic-item.active{ background: rgba(43,231,192,0.12); }
.drawer-topic-item.active::before{
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--signal);
}
.drawer-item-icon{
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, rgba(43,231,192,.16), rgba(159,123,255,.12)); color: var(--signal);
}
.drawer-item-icon svg{ width: 15px; height: 15px; }
.drawer-item-text{ min-width: 0; }
.drawer-item-title{
  font-size: 13.3px; font-weight: 500; color: var(--text-hi); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-topic-item.active .drawer-item-title{ font-weight: 600; }
.drawer-item-num{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); margin-top: 1px; }
.drawer-empty{ padding: 24px 12px; text-align: center; font-size: 13px; color: var(--text-low); }

.mobile-lesson-body{ position: relative; flex: 1; min-height: 0; }
.mobile-lesson-iframe{
  width: 100%; height: 100%; border: 0; opacity: 0;
  -webkit-overflow-scrolling: touch; transition: opacity .35s ease;
}
.mobile-lesson-iframe.loaded{ opacity: 1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 880px){
  /* The old drawer-based toggle bar and the desktop sidebar+frame are
     fully replaced by the mobile app below — hide them outright rather
     than boxing them into the viewport. */
  .app-shell{ display: none; }
  .app-shell-section{ padding-top: 0; }

  .mobile-app{ display: block; }

  /* Clearance for the site's fixed floating topbar (~82px tall) at the
     top and the fixed floating bottom-nav pill (~76px tall from the
     bottom edge) so the topic cards never sit underneath either one.
     Safe-area insets are added on top for notched devices. */
  .mobile-menu-screen{
    display: block;
    padding: calc(90px + env(safe-area-inset-top, 0px)) 16px calc(110px + env(safe-area-inset-bottom, 0px));
    min-height: 100vh;
    min-height: 100dvh;
  }
  .mobile-app.show-lesson .mobile-menu-screen{ display: none; }
  .mobile-app.show-lesson .mobile-lesson-screen{ display: flex; }

  /* While a lesson is open full-screen, the site's global fixed mobile
     topbar and bottom-nav must not float above it — otherwise they cover
     the lesson's own back button/title bar (unreachable to taps) and the
     bottom edge of the lesson content. .mobile-lesson-screen already has
     a higher z-index and an opaque background as a visual fallback; this
     rule additionally removes them from layout/hit-testing entirely. */
  body.pa-lesson-open .mobile-topbar,
  body.pa-lesson-open .mobile-bottom-nav{
    display: none !important;
  }
}

@media (max-width: 420px){
  .mobile-card-grid{ grid-template-columns: 1fr; }
}