/* FIX-8-MOBILE: focused mobile containment for shared learner chrome. */

@media (max-width: 767px) {
  /* Keep the progressively enhanced chapter disclosure legible even when a
     module's accent variables or chapter-local styles are unusually strong. */
  .iot-mobile-chapters-toggle > span,
  .iot-mobile-chapters-fallback {
    color: var(--iot-midnight, #172033) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .iot-mobile-chapters-toggle > svg {
    color: var(--iot-midnight, #172033) !important;
    display: block !important;
    flex: 0 0 20px;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* A reward should confirm an answer, not cover the answer controls. Keep
     the mobile toast in the header corner and cap its footprint. */
  .gamification-notification.xp-notification {
    inset: calc(4.25rem + env(safe-area-inset-top)) 0.75rem auto auto;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    width: min(13.5rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    padding: 0.65rem 0.8rem;
    pointer-events: none;
  }

  .gamification-notification.xp-notification .xp-amount {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1.25;
  }

  .gamification-notification.xp-notification .xp-reason {
    display: -webkit-box;
    flex: 1 1 7rem;
    min-width: 0;
    margin-left: 0;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Markdown tables and OJS tables opt into the same deliberate scroll box.
     The shadow on the inline edge is a quiet affordance, not decoration. */
  .iot-lab-table-scroll {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset -10px 0 10px -12px rgba(23, 32, 51, 0.55);
  }

  .iot-lab-table-scroll > table {
    min-width: max-content;
    margin-bottom: 0;
  }

  .iot-lab-capacity-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Let the full destination label wrap instead of turning it into an
     ellipsis at the primary Start Here continuation. */
  body.how-it-works .page-navigation .nav-page-text {
    display: block;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

/* Footer headings sit on #212529/#272b30 charcoal across the public estate.
   This foreground remains comfortably above WCAG AA's 4.5:1 threshold. */
.site-footer .footer-column h4 {
  color: #f1f5f9 !important;
}

/* The small relaunch control replaces the dismissed onboarding panel, so it
   follows the same footer-clearance custom property instead of covering a
   legal link at the end of the page. */
.iot-onboard-trigger {
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + var(--iot-onboard-footer-clearance, 0px));
}

@media (max-width: 520px) {
  .iot-onboard-trigger {
    bottom: calc(0.75rem + env(safe-area-inset-bottom) + var(--iot-onboard-footer-clearance, 0px));
  }
}