/* AP Latin — phone/tablet layout only (class alv-mobile set in ) */ .alv-mobile body.alv-tool { overflow-x: hidden; } .alv-mobile .alv-page:has(.alv-session.active) { height: 100dvh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; } .alv-mobile .alv-page.ai-container { max-width: 100%; width: 100%; padding: 0 10px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* Compact site chrome — study modes need the screen */ .alv-mobile .alv-page:has(.alv-session.active) .ai-header { padding: 10px 12px; margin-bottom: 6px; border-radius: 0; gap: 0; } .alv-mobile .alv-page:has(.alv-session.active) .ai-site-brand, .alv-mobile .alv-page:has(.alv-session.active) .ai-nav { display: none; } .alv-mobile .alv-page:has(.alv-session.active) .alv-page-title { font-size: 17px; font-weight: 600; } /* Home hub */ .alv-mobile .alv-hero h2 { font-size: 26px; } .alv-mobile .alv-hero p { font-size: 17px; } .alv-mobile .alv-stat-value { font-size: 26px; } .alv-mobile .alv-stat-label { font-size: 11px; } .alv-mobile .alv-filters select { font-size: 17px; min-height: 48px; padding: 12px; } .alv-mobile .alv-mode-card { padding: 18px; } .alv-mobile .alv-mode-title { font-size: 18px; } .alv-mobile .alv-mode-desc { font-size: 15px; } /* Active study session fills viewport */ .alv-mobile .alv-session.active { display: flex; flex-direction: column; min-height: calc(100dvh - 52px); min-height: calc(100svh - 52px); } .alv-mobile .alv-session-top { margin-bottom: 8px; flex-shrink: 0; } .alv-mobile .alv-back { font-size: 17px; padding: 8px 4px; } .alv-mobile .alv-progress { font-size: 16px; } .alv-mobile .alv-progress-bar { height: 8px; margin-bottom: 10px; flex-shrink: 0; } .alv-mobile .alv-direction-toggle { margin-bottom: 10px; flex-shrink: 0; } .alv-mobile .alv-direction-toggle button { font-size: 16px; padding: 12px 8px; min-height: 46px; } /* MC + timed study area grows */ .alv-mobile #mc-study, .alv-mobile #sprint-study { flex: 1; display: flex; flex-direction: column; min-height: 0; } .alv-mobile .alv-question { padding: 16px 14px; margin-bottom: 10px; flex-shrink: 0; } .alv-mobile .alv-question-label { font-size: 13px; margin-bottom: 8px; } .alv-mobile .alv-question-text { font-size: 40px; } .alv-mobile .alv-question-text.def { font-size: 18px; line-height: 1.45; } .alv-mobile .alv-question-forms { font-size: 16px; margin-top: 8px; } .alv-mobile .alv-pos-badge { font-size: 13px; padding: 6px 12px; } /* Answer choices fill remaining screen */ .alv-mobile .alv-options { flex: 1; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 0; } .alv-mobile .alv-option { font-size: 18px; line-height: 1.4; padding: 14px 14px; min-height: 0; margin: 0; display: flex; align-items: center; } .alv-mobile .alv-option-main { width: 100%; } .alv-mobile .alv-option-reveal { font-size: 15px; } .alv-mobile .alv-option-reveal .alv-latin { font-size: 16px; } .alv-mobile .alv-feedback { font-size: 17px; flex-shrink: 0; margin-top: 10px; } .alv-mobile .alv-mc-next, .alv-mobile .alv-timed-go { font-size: 18px; min-height: 54px; flex-shrink: 0; } /* Flashcards */ .alv-mobile #flash-study { flex: 1; display: flex; flex-direction: column; } .alv-mobile .alv-card-scene { flex: 1; min-height: 200px; margin-bottom: 12px; } .alv-mobile .alv-card, .alv-mobile .alv-card-face { min-height: 100%; } .alv-mobile .alv-card-lemma { font-size: 48px; } .alv-mobile .alv-card-forms { font-size: 17px; } .alv-mobile .alv-card-def { font-size: 20px; } .alv-mobile .alv-actions { flex-shrink: 0; gap: 10px; } .alv-mobile .alv-btn { font-size: 17px; min-height: 52px; } /* Landscape: 2×2 grid, tighter chrome, no page scroll */ .alv-mobile.alv-landscape .alv-session.active { min-height: calc(100dvh - 44px); min-height: calc(100svh - 44px); } .alv-mobile.alv-landscape .alv-page:has(.alv-session.active) .ai-header { padding: 6px 12px; margin-bottom: 4px; } .alv-mobile.alv-landscape .alv-page:has(.alv-session.active) .alv-page-title { font-size: 15px; } .alv-mobile.alv-landscape .alv-session-top { margin-bottom: 4px; } .alv-mobile.alv-landscape .alv-progress-bar { margin-bottom: 6px; } .alv-mobile.alv-landscape .alv-direction-toggle { margin-bottom: 6px; } .alv-mobile.alv-landscape .alv-direction-toggle button { font-size: 14px; padding: 8px 6px; min-height: 40px; } .alv-mobile.alv-landscape .alv-question { padding: 10px 12px; margin-bottom: 6px; } .alv-mobile.alv-landscape .alv-question-text { font-size: 32px; } .alv-mobile.alv-landscape .alv-question-text.def { font-size: 16px; } .alv-mobile.alv-landscape .alv-question-forms { font-size: 14px; } .alv-mobile.alv-landscape .alv-options { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; } .alv-mobile.alv-landscape .alv-option { font-size: 16px; padding: 10px 12px; } .alv-mobile.alv-landscape .alv-card-lemma { font-size: 36px; }