/*
  SielpA mobile optimization layer
  --------------------------------
  Keep the desktop artwork-heavy layout intact. Put phone/tablet changes here so
  fixes stay consistent across Bronze, Silver, Gold, and the shared info pages.

  Mobile tuning notes for future edits:
  - Use 44px minimum touch targets for buttons, links, select boxes, and custom
    controls. This is the practical floor for thumbs on small phones.
  - Shrink navigation artwork on mobile by controlling the rendered button/icon
    dimensions here, not by editing SVG source files.
  - Prefer svh/dvh units for mobile workspaces. Classic vh changes when browser
    chrome or the keyboard appears and can hide content on iOS/Android.
  - Keep fixed-width classroom-era layouts behind desktop breakpoints only.
    Anything inside @media (max-width: 760px) must fit a 320px viewport.
  - If a future page needs a one-off mobile rule, add a class and document it
    here instead of adding another inline style.
*/

:root {
  --mobile-edge: max(10px, env(safe-area-inset-left));
  --mobile-edge-r: max(10px, env(safe-area-inset-right));
  --mobile-tap: 44px;
  --mobile-radius: 8px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

button,
a,
select,
input,
textarea {
  touch-action: manipulation;
}

.w3-modal {
  overscroll-behavior: contain;
}

.w3-modal-content {
  max-width: min(92vw, 720px);
}

@media (hover: none) {
  .level-card:hover,
  .module-card:hover,
  .nav-image-button:hover,
  .top-nav img:hover,
  .main-header .publisher-link:hover,
  .publisher-link:hover {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  /*
    Mobile nav rule:
    Back SVGs include text and are much wider than home icons. The exact width
    clamp below keeps Back readable on 390px+ phones and still leaves room for
    Home + SielpA Books on 320px screens.
  */
  .top-nav,
  .top-nav.module-nav-strip {
    width: 100% !important;
    max-width: none !important;
    padding: 8px var(--mobile-edge-r) 6px var(--mobile-edge) !important;
    gap: 6px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .nav-image-button,
  .top-nav > a:not(.publisher-link),
  .top-nav > button {
    min-width: var(--mobile-tap) !important;
    min-height: var(--mobile-tap) !important;
    border-radius: 12px !important;
    flex: 0 0 auto !important;
  }

  .nav-image-button img,
  .top-nav > a:not(.publisher-link) > img,
  .top-nav > button > img {
    width: auto !important;
    height: 40px !important;
    max-width: 108px !important;
  }

  .top-nav .publisher-link,
  .publisher-link,
  .main-header .publisher-link {
    min-height: 34px !important;
    max-width: 116px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .main-header .publisher-link {
    top: 6px !important;
    right: 8px !important;
  }

  .level-main,
  .module-main,
  main.app-main,
  .info-main {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  .level-hero {
    margin-bottom: 16px !important;
  }

  .level-card picture,
  .module-card picture {
    border-radius: 14px !important;
  }

  .level-card-art,
  .module-card-art {
    border-radius: 14px !important;
  }

  .module-header {
    margin-bottom: 16px !important;
  }

  .module-header picture,
  .module-header img {
    border-radius: 12px !important;
  }

  /*
    Compact mobile selector pages:
    Desktop keeps the full poster look. Phones cap card height so the level or
    activity selector feels like an app menu instead of a long image gallery.
  */
  .level-card picture {
    max-width: min(92vw, 330px) !important;
  }

  .module-card picture {
    max-width: min(86vw, 260px) !important;
  }

  .activity-page-header {
    margin-bottom: 12px !important;
  }

  .activity-page-header picture {
    width: 52px !important;
  }

  .activity-tier-badge {
    width: 52px !important;
  }

  .activity-page-kicker {
    font-size: 12px !important;
  }

  .activity-page-header h1 {
    font-size: clamp(23px, 8vw, 31px) !important;
  }

  .activity-page-header p,
  .setup-help,
  #theDirections,
  #theDirections p,
  #theDirections h4 {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .activity-toolbar {
    width: 100% !important;
    max-width: none !important;
    padding: 12px !important;
    gap: 9px !important;
    border-radius: var(--mobile-radius) !important;
  }

  .activity-toolbar > *,
  .activity-toolbar .w3-button,
  .activity-toolbar select,
  .activity-toolbar .w3-cell-row,
  .activity-toolbar .w3-cell {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  .activity-toolbar select,
  .flow-setup-modal select,
  #voices,
  .passage_select,
  #modeSelector,
  #moduleSelector,
  #unitSelector {
    min-height: var(--mobile-tap) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  select,
  input,
  textarea {
    font-size: max(16px, 1rem) !important;
  }

  .activity-toolbar .w3-cell-row {
    background: transparent !important;
  }

  .activity-toolbar .w3-cell {
    padding: 6px 0 !important;
  }

  .w3-button,
  button,
  .ansbutton,
  .hearBTN,
  .speakBTN,
  .stopBTN,
  .disabledListen,
  .home-link,
  .back-link {
    min-height: var(--mobile-tap) !important;
  }

  .flow-setup-modal .w3-modal-content,
  .w3-modal-content {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: var(--mobile-radius) !important;
    overflow: auto !important;
  }

  .w3-modal:not(.flow-setup-modal) {
    padding-top: max(20px, env(safe-area-inset-top)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  .w3-card-4 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: var(--mobile-radius) !important;
  }

  #item_value,
  #e_sentence,
  #h_s_example,
  #exampleWords,
  #mc_q_sentence,
  #speech_output,
  #feedbackPass,
  #feedbackPass2,
  #fluency_feedback,
  #fluency_feedback2,
  #advice_bun,
  #FeedbackText,
  #quizFinalScore {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .mc_answer_holder {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .ansbutton {
    min-height: 48px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    font-size: 16px !important;
  }

  .slider_holder {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 10px !important;
  }

  .switch_text1,
  .switch_text2 {
    position: static !important;
    margin: 0 !important;
    text-align: center;
  }

  #boxy-box {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--mobile-tap) !important;
  }

  .writing-workspace {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
  }

  #get_feedback {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #get_feedback .w3-threequarter,
  #get_feedback .w3-quarter {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #get_feedback .w3-quarter {
    gap: 8px !important;
  }

  #get_feedback .w3-quarter .w3-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  /*
    Keyboard-safe workspace height:
    svh handles the visible mobile viewport more predictably than vh. The clamp
    keeps the textarea usable on tiny phones and avoids huge empty workspaces on
    tall devices.
  */
  #text_input {
    height: clamp(220px, 42svh, 430px) !important;
    min-height: 220px !important;
    max-height: 58svh !important;
  }

  .results_class,
  #correct_words > div,
  #various_fb,
  #graphDisplay {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #graphDisplay {
    height: min(300px, 56vw) !important;
  }

  .app-note {
    grid-template-columns: 1fr !important;
  }

  .home-link,
  .back-link {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  .nav-image-button img,
  .top-nav > a:not(.publisher-link) > img,
  .top-nav > button > img {
    height: 36px !important;
    max-width: 94px !important;
  }

  .top-nav .publisher-link,
  .publisher-link,
  .main-header .publisher-link {
    max-width: 100px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 11px !important;
  }

  .module-card picture {
    max-width: min(84vw, 235px) !important;
  }
}

@media (max-width: 360px) {
  /*
    Ultra-small phone fallback:
    If a future nav item is added, keep the publisher link wrapping onto its own
    row rather than shrinking the back/home touch targets below usability.
  */
  .top-nav,
  .top-nav.module-nav-strip {
    flex-wrap: wrap !important;
  }

  .top-nav .publisher-link,
  .publisher-link {
    margin-left: 0 !important;
    flex: 1 0 calc(100% - 120px) !important;
    max-width: none !important;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  .activity-page-header picture,
  .activity-tier-badge {
    display: none !important;
  }

  .activity-page-header {
    margin-bottom: 8px !important;
  }

  .activity-page-header h1 {
    font-size: 24px !important;
  }

  #text_input {
    height: 180px !important;
    min-height: 180px !important;
  }

  .flow-setup-modal .w3-modal-content,
  .w3-modal-content {
    max-height: calc(100svh - 20px) !important;
  }
}