/* Responsive layout */
@media (max-width: 1100px) {
  :root {
    --sidebar-width: calc(var(--space-unit) * 50);
  }

  .top-nav[data-nav-context="study"] .top-nav__actions {
    padding: 0 calc(var(--space-unit) * 5.5);
  }

  .curriculum-view {
    padding: calc(var(--space-unit) * 6.5) calc(var(--space-unit) * 5.5) calc(var(--space-unit) * 8.5);
  }

  .curriculum-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .curriculum-description {
    max-width: none;
  }

  .lc-view {
    padding: var(--space-6) var(--space-6) var(--space-12);
  }

  .lc-view--lesson {
    --lesson-action-bar-clearance: calc(var(--space-unit) * 24);
    padding-bottom: var(--lesson-action-bar-clearance);
  }
}

@media (max-width: 760px) {
  :root {
    --study-mobile-nav-height: calc(var(--space-unit) * 16);
  }

  .top-nav {
    z-index: 40;
  }

  .top-nav__inner {
    flex-wrap: wrap;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-3) var(--space-4);
  }

  .top-nav__links {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .top-nav__actions {
    margin-left: auto;
  }

  .top-nav__tagline {
    display: none;
  }

  .top-nav__user {
    max-width: 96px;
  }

  /* Keep the stats widget legible at narrow widths: drop the XP bar, keep
     the flame streak and level badge. */
  .stats-widget {
    margin-right: var(--space-1);
  }

  .stats-widget__main {
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
  }

  .stats-widget__bar {
    display: none;
  }

  .stats-widget__popover {
    position: fixed;
    top: calc(var(--study-mobile-nav-height) + var(--space-2));
    right: var(--space-4);
    left: var(--space-4);
    z-index: 45;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: var(--space-3);
  }

  .stats-widget__popover-row {
    gap: var(--space-3);
  }

  .stats-widget__popover-row strong {
    min-width: 0;
    text-align: right;
    white-space: normal;
  }

  .xp-toast-host {
    right: var(--space-3);
    left: var(--space-3);
    align-items: center;
  }

  .top-nav[data-nav-context="study"] .top-nav__inner {
    display: flex;
    gap: var(--space-3);
    min-height: var(--study-mobile-nav-height);
    padding: var(--space-3) var(--space-4);
  }

  .top-nav[data-nav-context="study"] .top-nav__brand {
    width: auto;
    padding: 0;
    background: transparent;
    border-right: 0;
  }

  .top-nav[data-nav-context="study"] .top-nav__actions {
    flex: 1;
    width: auto;
    margin-left: auto;
    padding: 0;
  }

  .top-nav[data-nav-context="study"] .top-nav__actions > [data-nav-auth-placeholder],
  .top-nav[data-nav-context="study"] .top-nav__actions > [data-nav-billing],
  .top-nav[data-nav-context="study"] .top-nav__actions > [data-nav-user],
  .top-nav[data-nav-context="study"] .top-nav__actions > [data-nav-sign-out] {
    display: none;
  }

  .top-nav[data-nav-context="study"] .top-nav__menu-button:not([hidden]) {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .app-shell {
    flex-direction: column;
  }

  .sidebar {
    position: fixed;
    top: var(--study-mobile-nav-height);
    bottom: 0;
    left: 0;
    z-index: 35;
    width: min(86vw, calc(var(--space-unit) * 86));
    min-width: 0;
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 0;
    border-right: var(--border-width-soft) solid var(--color-border-soft);
    box-shadow: 20px 0 44px rgba(30, 10, 60, 0.18);
    transform: translateX(-105%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.is-study-menu-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-body {
    padding: var(--space-4);
  }

  .sidebar-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width-soft) solid var(--color-border-soft);
  }

  .sidebar-mobile-header__label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-primary-400);
  }

  .sidebar-mobile-header__user {
    max-width: calc(var(--space-unit) * 52);
    overflow: hidden;
    color: var(--color-text-strong);
    font-size: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-close {
    flex: 0 0 auto;
    width: calc(var(--space-unit) * 10);
    height: calc(var(--space-unit) * 10);
    border: var(--border-width-soft) solid var(--color-border-card);
    border-radius: var(--radius-pill);
    background: var(--color-surface-card);
    color: var(--color-text-muted);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
  }

  .sidebar-mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-4) 0;
  }

  .sidebar-mobile-actions .top-nav__button {
    width: 100%;
    min-height: calc(var(--space-unit) * 10);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: var(--study-mobile-nav-height) 0 0;
    z-index: 30;
    display: block;
    background: rgba(30, 10, 60, 0.28);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

  body.is-study-menu-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .app-shell.is-path-active .sidebar {
    max-height: none;
  }

  .app-shell.is-path-active .sidebar-label,
  .app-shell.is-path-active .sidebar-new-button {
    display: block;
  }

  .app-shell.is-section-active .sidebar,
  .app-shell.is-lesson-active .sidebar {
    display: flex;
  }

  .sidebar-list {
    flex-direction: column;
    overflow-x: visible;
    padding-bottom: var(--space-4);
  }

  .sidebar-item {
    min-width: 0;
  }

  .main-panel {
    min-height: 0;
  }

  .home-view {
    padding: var(--space-6) var(--space-4);
  }

  .curriculum-view {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  .curriculum-title,
  .hero-title {
    font-size: 23px;
  }

  .lc-next-up {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .lc-next-up .lc-benji,
  .lc-next-up .lc-benji--lg {
    width: calc(var(--space-unit) * 12);
    height: calc(var(--space-unit) * 12);
  }

  .lc-next-up__cta {
    justify-self: stretch;
    width: 100%;
  }

  .onboarding-modal {
    grid-template-columns: auto minmax(0, 1fr);
    right: var(--space-3);
    width: auto !important;
    max-height: min(42vh, calc(var(--space-unit) * 54));
    overflow-y: auto;
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    box-shadow: 0 18px 48px rgba(30, 10, 60, 0.24);
  }

  .onboarding-modal::after {
    display: none;
  }

  .onboarding-modal--mobile-top {
    top: var(--space-3) !important;
  }

  .onboarding-modal--mobile-bottom {
    top: auto !important;
    bottom: var(--space-3);
  }

  .onboarding-modal__text {
    font-size: 14px;
  }

  .onboarding-modal__hint {
    font-size: 12px;
  }

  .onboarding-modal__skip {
    justify-self: stretch;
    text-align: center;
  }

  .lc-section-row__main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lc-section-row__chevron {
    display: none;
  }

  .lc-section-row__tools {
    padding-left: 0;
  }

  .lc-view {
    padding: var(--space-4) var(--space-4) var(--space-12);
  }

  .lc-view__topbar {
    gap: var(--space-2);
  }

  .lc-back-button {
    flex: 0 0 auto;
    min-height: calc(var(--space-unit) * 8);
    padding: calc(var(--space-unit) * 1.5) var(--space-3);
    font-size: 11px;
    white-space: nowrap;
  }

  .lc-section-header {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .lc-section-header__ring {
    justify-self: start;
  }

  .lc-lesson-row {
    grid-template-columns: calc(var(--space-unit) * 8) minmax(0, 1fr);
    padding: var(--space-3);
  }

  .lc-lesson-row__side {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .lc-lesson-header {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .lc-lesson-header__ring {
    justify-self: start;
  }

  .lc-thinking-panel {
    min-height: calc(var(--space-unit) * 44);
    padding: var(--space-8) var(--space-4) var(--space-6);
  }

  .lc-thinking-panel--compact {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .lc-thinking-panel--compact .lc-thinking-panel__bar {
    grid-column: auto;
  }

  .lc-thinking-panel__title {
    font-size: 17px;
  }

  .lc-thinking-steps {
    font-size: 13px;
  }

  .lc-thinking-inline {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .lc-thinking-inline__dot {
    display: none;
  }

  .lc-thinking-inline__bar {
    grid-column: auto;
  }

  .lc-card {
    padding: var(--space-4);
  }

  .lc-card--quiz {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .lc-card--quiz .lc-quick-check__prompt {
    font-size: 14px;
    line-height: 1.42;
  }

  .lc-order-list {
    gap: calc(var(--space-unit) * 1.5);
    padding-right: 0;
    scrollbar-gutter: auto;
  }

  .lc-order-row {
    grid-template-columns: calc(var(--space-unit) * 10) minmax(0, 1fr);
    gap: var(--space-2);
    min-height: calc(var(--space-unit) * 11);
    padding: calc(var(--space-unit) * 1.5) var(--space-2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5);
  }

  .lc-order-row__handle {
    width: calc(var(--space-unit) * 10);
    height: calc(var(--space-unit) * 10);
    gap: 2px;
    border-radius: var(--radius-sm);
  }

  .lc-order-row__grip {
    width: 12px;
    height: 16px;
    background-position: 1px 1px, 7px 1px;
    background-size: 6px 6px;
  }

  .lc-order-row__index {
    width: calc(var(--space-unit) * 5.5);
    height: calc(var(--space-unit) * 5.5);
    font-size: 11px;
  }

  .lc-order-row__label {
    grid-column: 2;
    font-size: 13px;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  .app-shell .lc-action-bar {
    left: 0;
  }

  /* Too narrow for a single strip — stack teasers above a full-width nav. */
  .lc-action-bar--lesson {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .lc-action-bar--lesson .lc-action-bar__secondaries {
    justify-content: center;
  }

  .lc-action-bar--lesson .lc-action-bar__primary-slot {
    justify-content: center;
  }

  .lc-action-bar__primary {
    min-width: 0;
    width: 100%;
  }

  .lc-action-bar--lesson .lc-action-bar__primary {
    width: 60%;
  }

  .lc-view--lesson {
    --lesson-action-bar-clearance: calc(var(--space-unit) * 44);
    padding-bottom: var(--lesson-action-bar-clearance);
  }

  .lc-coming-soon-host {
    padding: var(--space-3);
  }

  .lc-coming-soon-sheet {
    margin-bottom: calc(var(--space-unit) * 52);
  }
}