/* E4E — responsive.css */
@media (max-width:1020px){
  .sidebar{display:none}
  .sidebar.mobile-open{display:block;position:fixed;inset-inline-start:12px;top:76px;bottom:12px;z-index:100;width:min(320px,86vw)}
  .hamburger{display:inline-grid}
  .nav{display:none}
  .nav.mobile-open{display:flex;position:absolute;top:64px;inset-inline:0;background:var(--card);flex-direction:column;padding:10px;border-bottom:1px solid var(--line);z-index:70}
}
@media (max-width:640px){
  .hero{padding:20px}
  .hero h1{font-size:1.25rem}
  .panel{padding:15px}
  .mistake-pair{grid-template-columns:1fr}
  .match-grid{grid-template-columns:1fr}
  .searchbox input{width:150px}
  .bar-row{grid-template-columns:110px 1fr 46px}
  .lesson-nav .btn{flex:1;justify-content:center}
  .btn{min-height:48px}
  .opt{min-height:56px}
  .flash-card{height:300px}
  .topbar-in{gap:8px}
  .logo span.t{display:none}
}
@media (min-width:641px) and (max-width:1020px){
  .lesson-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
/* Crowded topbar: progressively hide less-critical items (search/sidebar stay) */
#sideBtn{display:none}
@media (max-width:1020px){#sideBtn{display:inline-grid}}
@media (max-width:1180px){
  .logo span.t{display:none}
  .topbar-in{gap:8px}
  .nav a{padding:8px 9px;font-size:.86rem}
  .searchbox input{width:170px}
}
@media (max-width:980px){
  #streakChip{display:none}
  .searchbox input{width:140px}
}