/* ============================================================
   English Opera · Mobile drawer nav (shared)
   Hamburger button + left slide-in drawer. On mobile this
   replaces the inline sub-nav and the top-bar language switch
   (language lives inside the drawer). On desktop the PC layout
   is untouched.
   Colors use fallback chains so it adapts to both themes
   (vocab.css uses --cl-* ; coca.css uses bare --* names).
   ============================================================ */

/* ---- Hamburger button (hidden on desktop) ---- */
.nav-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 auto;padding:0;
  border:1px solid var(--cl-border, var(--border, rgba(245,197,66,.16)));
  background:var(--cl-muted-bg, rgba(255,255,255,.04));
  border-radius:10px;cursor:pointer;color:var(--cl-text, var(--text, #e8eaf0));
  transition:border-color .2s,color .2s;
}
.nav-toggle:hover{border-color:var(--cl-accent, var(--accent, #5ad1c4));color:var(--cl-accent, var(--accent, #5ad1c4))}
.nav-toggle span{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:top .2s,transform .2s}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle.is-active span{background:transparent}
.nav-toggle.is-active span::before{top:0;transform:rotate(45deg)}
.nav-toggle.is-active span::after{top:0;transform:rotate(-45deg)}

/* ---- Drawer shell ---- */
.mnav{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.mnav.is-open{visibility:visible;pointer-events:auto}
.mnav__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .28s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mnav.is-open .mnav__overlay{opacity:1}
.mnav__panel{
  position:absolute;top:0;left:0;height:100%;
  width:min(82vw,320px);
  display:flex;flex-direction:column;
  padding:22px 20px;
  background:var(--cl-bg-2, var(--bg-soft, #101019));
  border-right:1px solid var(--cl-border, var(--border, rgba(245,197,66,.16)));
  box-shadow:8px 0 40px rgba(0,0,0,.5);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mnav.is-open .mnav__panel{transform:translateX(0)}
.mnav__close{
  align-self:flex-end;width:38px;height:38px;border-radius:10px;
  background:var(--cl-muted-bg, rgba(255,255,255,.04));
  border:1px solid var(--cl-border, var(--border, rgba(245,197,66,.16)));
  color:var(--cl-text-dim, var(--dim, #9aa3b2));font-size:1.1rem;cursor:pointer;
}
.mnav__close:hover{color:var(--cl-text, var(--text, #e8eaf0))}
.mnav__brand{font-family:var(--font-cn, sans-serif);font-weight:700;font-size:1.05rem;color:var(--cl-text, var(--text, #e8eaf0));margin:6px 0 18px;display:flex;align-items:center;gap:8px}
.mnav__brand .mnav__mark{font-size:1.3rem}
.mnav__links{display:flex;flex-direction:column;gap:4px}
.mnav__links a{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-cn, sans-serif);font-size:1rem;
  color:var(--cl-text-dim, var(--dim, #9aa3b2));
  padding:13px 14px;border-radius:12px;
  border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.mnav__links a:hover{background:var(--cl-muted-bg, rgba(255,255,255,.04));color:var(--cl-text, var(--text, #e8eaf0))}
.mnav__links a.is-active{color:var(--cl-bg, var(--bg, #0a0a12));background:var(--cl-accent, var(--accent, #5ad1c4));font-weight:700}
.mnav__group{font-family:var(--font-cn, sans-serif);font-size:.74rem;font-weight:700;letter-spacing:1px;color:var(--cl-text-dim, var(--dim, #9aa3b2));text-transform:uppercase;margin:16px 4px 2px;opacity:.7}
.mnav__vip{font-weight:700;color:var(--cl-accent, var(--accent, #5ad1c4))}
.mnav__lang{margin-top:auto;padding-top:18px}
.mnav__lang .lang-switch{width:100%;justify-content:center;padding:6px}
.mnav__lang .lang-switch__btn{flex:1;padding:8px 13px}

/* ---- Mobile: reveal hamburger, hide inline navs & top-bar lang ---- */
@media(max-width:820px){
  .nav-toggle{display:inline-flex}
  .v-subnav,.coca-subnav,.v-back,.coca-back,#langSwitch{display:none !important}
  .v-topbar,.coca-topbar,.nav{justify-content:flex-start;gap:12px;flex-wrap:nowrap}
  .topbar{justify-content:flex-start;gap:10px;flex-wrap:wrap}
  .topbar__sub{display:none}
  .coca-topbar__sub{display:none}
}

/* ============================================================
   CEFR ↔ COCA comparison table — swipeable on mobile
   ============================================================ */
.lr-tablewrap{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  margin-top:6px;
}
.lr-tablewrap table{scroll-snap-align:start}
.lr-tablehint{
  display:none;
  font-family:var(--font-cn, sans-serif);
  font-size:.76rem;color:var(--cl-text-dim, var(--dim, #9aa3b2));
  margin-bottom:8px;opacity:.85;
}
@media(max-width:560px){
  .levelref{overflow:visible}
  .lr-tablehint{display:block}
  .lr-tablewrap table{min-width:600px}
  .levelref th,.levelref td{padding:12px 14px}
}