/* =====================================================================
   ReadQuest AI — responsive.css
   Breakpoints (desktop → tablet → phone) and reduced motion
   Ported unchanged from the original app.css (v2) unless marked NEW.
   ===================================================================== */
/* =====================================================================
   Responsive
   ===================================================================== */
@media (min-width: 1021px) {
  .mainnav a > span[aria-hidden] { display: none; }
  .mainnav ul { flex-wrap: nowrap; }
}
@media (max-width: 1320px) {
  .mainnav a { padding: 8px 8px; font-size: .88rem; gap: 3px; }
  .brand__text { font-size: 1.25rem; }
}
@media (max-width: 1180px) {
  .me-chip__name { display: none; }
  .me-chip { padding: 4px; }
}
@media (max-width: 1020px) {
  .nav-toggle { display: grid; place-items: center; }
  .mainnav { position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); padding: 10px; display: none; }
  .mainnav.is-open { display: block; }
  .nav-logout-li { display: list-item; }
  .logout-btn { display: none; }
  .mainnav ul { flex-direction: column; }
  .mainnav a { font-size: 1.05rem; padding: 14px 16px; }
  .topbar__inner { position: relative; }
  .topbar__right { order: 2; }
  .nav-toggle { order: 3; margin-left: 0; }
  .brand { margin-right: auto; }
  .dash-grid, .level-shell { grid-template-columns: 1fr; }
  .level-side { position: static; display: flex; align-items: center; gap: 14px; }
  .level-side .leo-img { width: 90px; margin: 0; }
  .level-side .leo-bubble { flex: 1; margin: 0; }
  .level-side .leo-bubble::after { display: none; }
  .level-side .side-extra { display: none; }
  .landing { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .landing .lead { margin-left: auto; margin-right: auto; }
  .landing .row, .feature-row { justify-content: center; }
  .landing__art { max-width: 340px; order: -1; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .topbar { padding: 8px 8px 0; }
  .topbar__inner { gap: 6px; padding: 6px 8px; }
  .brand__leo { width: 36px; height: 36px; }
  .brand__text { font-size: 1.15rem; }
  .brand__text small { display: none; }
  .notif__btn, .nav-toggle { width: 44px; height: 44px; }
  .me-chip__avatar { width: 36px; height: 36px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-card { padding: 22px; }
  .hero-card__leo { width: 110px; right: 6px; opacity: .95; }
  .hero-card__content { max-width: calc(100% - 96px); }
  .map { display: none; }
  .level-list { display: block; }
  .choices { grid-template-columns: 1fr; }
  .choices--pics { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .choice--pic { min-height: 120px; padding: 8px; }
  .choice--pic .cap { font-size: .8rem; }
  .tile { min-width: 96px; font-size: 1.3rem; }
  .tile--letter { min-width: 56px; width: 56px; height: 64px; font-size: 1.8rem; }
  .slot { width: 56px; height: 64px; font-size: 1.8rem; }
  .trade-builder { grid-template-columns: 1fr; }
  .swap-big { width: 60px; height: 60px; font-size: 1.6rem; }
  .podium__avatar { width: 64px; height: 64px; font-size: 2rem; }
  .podium__spot--1 .podium__avatar { width: 76px; height: 76px; font-size: 2.4rem; }
  .podium__block { font-size: 1.8rem; }
  .finale__btns { grid-template-columns: 1fr; }
  .confirmed__swap { grid-template-columns: 1fr; }
  .cal { padding: 12px; }
  .cal__grid { gap: 4px; }
  .cal__day { border-radius: 10px; padding: 3px; font-size: .85rem; }
  .cal__day .ev { font-size: 1rem; }
  .cal__day .ev small { display: none; }
  .stage { min-height: 380px; }
  .toast-region { top: auto; bottom: 16px; }
  .page-head { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


@media (max-width: 760px) {
  .listing { grid-template-columns: 1fr; }
  .evidence-grid { grid-template-columns: 1fr; }
  .band-switch { width: 100%; }
  .wizard-steps li { padding-right: 10px; font-size: .85rem; }
  .actions-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--syl { min-width: 72px; font-size: 1.35rem; }
  .slot--syl { min-width: 72px; font-size: 1.35rem; }
  .slot--word { min-width: 64px; height: 52px; font-size: 1.05rem; }
  .tile--word { font-size: 1.1rem; padding: 8px 12px; }
}