/* pwa.css — QExtract web app on phones and tablets (v2.3 PWA).
 *
 * Loaded only by the web app, after app.css, so it can tune the layout for
 * touch screens without touching the extension's (locked) interface. */

/* Installed as an app, the page reaches under a notch and the home bar. */
.app {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* Only the extension can import the page open in another tab, or use
 * Chrome's built-in model; a browser tab has neither. */
#btnImportPage { display: none !important; }
.ai-toggle:has(> #chkAIAssist:disabled) { display: none !important; }

/* Touch: no 300ms double-tap delay on controls. */
button, .btn, .tab, .link-btn, summary, .toggle-option { touch-action: manipulation; }

@media (max-width: 600px) {
  .app { padding-top: max(16px, env(safe-area-inset-top)); gap: 14px; }
  .view-section > :first-child { margin-top: 6px; }
  .upload-zone { padding: 28px 16px; }

  /* The header (brand and display buttons, then the tabs) and the trial
   * banner take their narrow layout from app.css, shared with the extension. */
  .header { padding-bottom: 14px; }

  /* Review: the actions in two columns, the main one full width, so the
   * questions start near the first screen instead of after nine buttons. */
  .review-header h2 { font-size: 1.25rem; }
  .review-subtitle { font-size: 0.85rem; }
  .review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .review-actions > * { width: 100%; min-width: 0; margin: 0 !important; }
  .review-actions .btn,
  .review-actions .toggle-option,
  .export-menu > summary { height: auto; min-height: 44px; padding: 8px 10px; font-size: 0.85rem; white-space: normal; line-height: 1.2; justify-content: center; }
  .review-actions .toggle-option,
  #btnGenerate { grid-column: 1 / -1; }
  /* Pairs: Study | Quality report, Explain | Report a problem, Export | Discard;
   * then the answer-key choice and the main action, full width. */
  .export-menu { order: 1; }
  #btnBackToSetup { order: 2; }
  .review-actions .toggle-option { order: 3; }
  #btnGenerate { order: 4; }
  .export-menu { display: block; }
  .export-menu > summary { width: 100%; }
  /* The export list opens across the screen, not off its edge. */
  .export-menu-panel { left: 0; right: 0; min-width: 0; max-height: 60vh; }
  .export-menu-panel .btn { min-height: 44px; }

  /* Question cards: a little tighter, and the controls easy to hit. */
  .q-card { padding: 14px; }
  .q-move-btn, .q-delete-btn, .q-source-btn, .q-tts-btn { min-height: 40px; min-width: 40px; }
}

/* Tablets in portrait: three columns of actions. */
@media (min-width: 601px) and (max-width: 850px) {
  .review-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .review-actions > * { width: 100%; min-width: 0; margin: 0 !important; }
  .review-actions .btn, .export-menu > summary { min-height: 44px; justify-content: center; }
  #btnGenerate, .review-actions .toggle-option { grid-column: 1 / -1; }
  .export-menu > summary { width: 100%; }
}