/* Shared mobile fixes for every page (linked after each page's own CSS).
   Header: wrap instead of overflowing, keep the nav links reachable,
   truncate long account emails, 16px inputs (no iOS zoom), bigger tap targets. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }

@media (max-width: 720px) {
  /* marketing pages (index, papers, paper, mock-tests, legal, search) */
  nav.topbar .wrap, .topbar .wrap { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  nav.topbar .nav-links { display: flex !important; order: 20; width: 100%; justify-content: center; gap: 26px; padding: 6px 0 2px; border-top: 1px solid var(--border); font-size: 14px; }
  nav.topbar .nav-links a { padding: 8px 4px; }
  nav.topbar .nav-cta { padding: 8px 14px; font-size: 13px; }
  nav.topbar .brand, .topbar .brand { margin-right: auto; }
  .exam-topbar .exam-brand { margin-right: auto; }
  nav.topbar #account-widget { margin-right: 0 !important; font-size: 13px !important; }
  nav.topbar .back-link, .topbar .back-link { padding: 8px 4px; }

  /* app pages (exam list, exam details, dashboard, result, review) */
  .exam-topbar { padding: 10px 14px; }
  .exam-topbar .exam-wrap { flex-wrap: wrap; gap: 8px 10px; }
  .exam-topbar .exam-wrap > div:last-child { flex-wrap: wrap; justify-content: flex-end; gap: 8px 10px !important; min-width: 0; }
  .exam-topbar .global-search-wrap { order: 30; width: 100% !important; flex: 1 1 100%; }
  .exam-topbar .btn-sm { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; min-height: 34px; }

  /* long emails / names never push the header wider than the screen */
  #account-widget { max-width: 190px; min-width: 0; }
  #account-widget a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 96px; display: inline-block; vertical-align: bottom; }

  /* tiny labels: nudge up for readability */
  .badge, .qsubject { font-size: 12px !important; }
  .paper-meta, .track-meta { font-size: 13px !important; }

  /* inputs: 16px stops iOS Safari zooming the page on focus */
  input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 420px) {
  nav.topbar .wrap, .topbar .wrap { padding: 8px 12px; }
  .brand, .exam-brand { font-size: 16px !important; gap: 8px; }
  nav.topbar .nav-cta { display: none; }
}

/* Search/text inputs: readable text in dark theme (all viewports) */
input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=range]):not([type=file]),
textarea, select {
  background-color: var(--ex-input-bg, var(--surface, var(--bg, #fff)));
  color: var(--text, var(--ex-text, #14171F));
  caret-color: var(--text, var(--ex-text, currentColor));
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted, var(--ex-text-muted, #8A8677));
  opacity: 1;
}