/* hub-exam-mobile.css — phone layer for Reading_Practice_Hub.html / Listening_Practice_Hub.html exam screens.
   Driven by js/hub-exam-mobile.js. Hidden defaults here; everything else is inside the 860px query, so
   desktop is unchanged. (practice.html has its own equivalent block at the end of css/practice.css.) */
.rm-tabs, .rm-qbtn-bar, .rm-sheet { display: none; }

@media (max-width: 860px) {
  /* One full-height column: top bar / (tabs) / scrolling content / compact bottom bar. */
  #screen-reading.active, #screen-listen.active { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  #screen-reading .exam-topbar, #screen-listen .exam-topbar { flex-shrink: 0; }

  /* Reading: Passage | Questions tabs instead of one long stacked scroll. */
  #screen-reading .reading-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #screen-reading .resize-handle { display: none; }
  #screen-reading .reading-pane,
  #screen-reading .q-pane { width: 100% !important; max-width: none; min-width: 0; flex: 1 1 auto; min-height: 0; max-height: none; position: static; overflow-y: auto; border: 0; -webkit-overflow-scrolling: touch; }
  #screen-reading .reading-pane { padding: 16px 16px 36px; }
  #screen-reading .reading-wrap[data-rm-view="passage"] .q-pane,
  #screen-reading .reading-wrap[data-rm-view="questions"] .reading-pane { display: none; }

  /* Listening: single scrolling column under the top bar. */
  #screen-listen .listen-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 24px; -webkit-overflow-scrolling: touch; }

  .rm-tabs { display: flex; gap: 6px; padding: 8px 12px; background: var(--bg2, #fff); border-bottom: 1px solid var(--border, #ddd); flex-shrink: 0; }
  .rm-tab { flex: 1; min-height: 44px; border: 1px solid var(--border2, #ccc); background: transparent; color: var(--text2, #555); border-radius: 10px; font: 700 14px var(--font-body, inherit); cursor: pointer; }
  .rm-tab[aria-selected="true"] { background: var(--acc, #8A2432); border-color: var(--acc, #8A2432); color: #fff; }

  /* Bottom bar: up to 40 question pills collapse into one summary button + submit. */
  #screen-reading .exam-bottombar, #screen-listen .exam-bottombar { position: static !important; height: auto; min-height: 56px; align-items: center; padding: 0 8px; gap: 8px; flex-shrink: 0; }
  #screen-reading .exam-bottombar .r-bottom-part, #screen-listen .exam-bottombar .r-bottom-part { display: none; }
  .rm-qbtn-bar { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--border2, #ccc); background: transparent; color: var(--text, #111); border-radius: 10px; font: 700 13px var(--font-body, inherit); text-align: left; cursor: pointer; }
  .rm-q-main { white-space: nowrap; }
  .rm-q-sub { flex: 1; min-width: 0; font-weight: 600; color: var(--text2, #666); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rm-q-caret { font-size: 10px; color: var(--text2, #666); }
  #screen-reading .r-bottom-nav-btns, #screen-listen .r-bottom-nav-btns { padding: 0; flex-shrink: 0; }
  #screen-reading .r-submit-btn, #screen-listen .r-submit-btn { width: 52px; height: 44px; border-radius: 10px; }

  /* Question-grid sheet */
  .rm-sheet { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.5); align-items: flex-end; }
  .rm-sheet.open { display: flex; }
  .rm-sheet-card { width: 100%; max-height: 80vh; overflow-y: auto; background: var(--bg2, #fff); color: var(--text, #111); border-radius: 20px 20px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); }
  .rm-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border2, #bbb); margin: 4px auto 10px; }
  .rm-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 16px; }
  .rm-sheet-x { background: none; border: 0; font-size: 28px; line-height: 1; color: var(--text2, #666); min-width: 44px; min-height: 44px; cursor: pointer; }
  .rm-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 10px; }
  .rm-sheet-grid .rm-qbtn { min-height: 48px; border-radius: 12px; border: 1.5px solid var(--border2, #bbb); background: transparent; color: var(--text, #111); font: 700 15px var(--font-body, inherit); cursor: pointer; }
  .rm-sheet-grid .rm-qbtn.answered { background: color-mix(in srgb, #418ec8 16%, transparent); border-color: #418ec8; }
  .rm-sheet-grid .rm-qbtn.correct { background: color-mix(in srgb, var(--green, #2ea043) 18%, transparent); border-color: var(--green, #2ea043); }
  .rm-sheet-grid .rm-qbtn.wrong-bubble { background: color-mix(in srgb, var(--red2, #dc2626) 14%, transparent); border-color: var(--red2, #dc2626); color: var(--red2, #dc2626); }
  .rm-sheet-legend { display: flex; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--text2, #666); }
  .rm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--border2, #bbb); margin-right: 6px; vertical-align: -1px; }
  .rm-dot-ans { background: #418ec8; border-color: #418ec8; }

  /* Listening hub's floating highlight popup: pin it above the bottom bar with big buttons. */
  #selPopup { position: fixed !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: var(--rm-float-bottom, 70px); width: auto; z-index: 8500; }
  #selPopup .sel-hl-btn { flex: 1; min-height: 48px; font-size: 14px; }

  /* Keep the player reachable while answering (Hide player still collapses it). */
  #screen-listen .audio-player { position: sticky; top: 0; z-index: 20; background: var(--bg, #fff); margin-bottom: 10px; padding-bottom: 10px; box-shadow: 0 6px 8px -8px rgba(0,0,0,.25); }

  /* Touch targets for the answer controls themselves. */
  #screen-reading :is(.r-tfng-opt, .r-mcq-opt, label), #screen-listen :is(.r-mcq-opt, label) { min-height: 36px; }
}

@media (max-width: 600px) {
  #screen-reading .inspera-user, #screen-listen .inspera-user { display: none; }
  #screen-reading .inspera-logo, #screen-listen .inspera-logo { margin-right: 6px; }
}