/* Shared responsive layer for every student-facing screen.
   Desktop, tablet, mobile browser and Android WebView use the same markup. */
:root {
  --pmc-page-max: 1180px;
  --pmc-gap: clamp(12px, 2vw, 20px);
  --pmc-edge: clamp(12px, 3vw, 28px);
  --pmc-radius: 14px;
}

html { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { width: 100%; min-width: 0; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }

/* Normal student page shells */
.wrap, .page, body > .container {
  width: min(calc(100% - (2 * var(--pmc-edge))), var(--pmc-page-max));
  max-width: var(--pmc-page-max);
  margin-inline: auto;
}

/* Reusable auto-fitting grid. Existing named grids inherit the same rules. */
.pmc-grid, .grid, .grid-3, .grid-4, .summary-grid, .stats,
.stats-row, .mode-split, .filter-grid, .form-row {
  display: grid;
  gap: var(--pmc-gap);
  min-width: 0;
}
.pmc-grid, .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4, .summary-grid, .stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-split, .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Prevent long maths, IDs, tables and controls from widening the viewport. */
.card, .panel, .q-card, .exam-card, .note-card, .st-card,
.filter-card, .chart-card, .history-card, .info-row, .option-label,
.opt-label, .case-passage, .case-subq, .theory-text, .block-content {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.q-text, .opt-text, .theory-text, .block-content, mjx-container {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.qimg, .opt-image, .note-img { height: auto; object-fit: contain; }
table { max-width: 100%; }
.history-card, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Forms and actions */
.btns, .filter-actions, .nav-btns, .hdr-nav, .nav-right, .view-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.btn, button, input, select, textarea { min-height: 44px; }
.options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-3, .grid-4, .summary-grid, .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-card, .exam-top { align-items: flex-start; }
}

@media (max-width: 640px) {
  :root { --pmc-edge: 12px; --pmc-gap: 12px; }
  body { font-size: 15px; }
  .nav, .header, .hdr, .top { padding-inline: 12px; }
  .nav, .header, .hdr { gap: 10px; }
  .grid, .grid-3, .grid-4, .filter-grid, .form-row, .mode-split {
    grid-template-columns: 1fr;
  }
  .summary-grid, .stats, .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .options { grid-template-columns: 1fr !important; }
  .exam-card, .exam-top, .note-card, .info-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .exam-action, .score-ring { width: 100%; }
  .exam-action .btn, .btns > button, .btns > a,
  .filter-actions > button, .filter-actions > a { flex: 1 1 150px; }
  .scanner, video { min-height: 240px; }
  .q-card, .card, .panel, .st-card, .filter-card { border-radius: 12px; }
  .answer-key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 380px) {
  .summary-grid, .stats, .stats-row { grid-template-columns: 1fr; }
  .btns > *, .filter-actions > *, .nav-btns > * { width: 100%; flex-basis: 100%; }
}

/* Never alter A4/PDF geometry when the browser is printing. */
@media print {
  .wrap, .page, body > .container { width: auto; max-width: none; margin: 0; }
}