/**
 * Responsive Design
 * 
 * Mobile and responsive adjustments to improve usability on smaller screens.
 * Dependencies: variables.css, layout.css, base.css, and component CSS files
 */

/* === Mobile Breakpoint === */
@media (max-width: 991px) {
  
  /* === General Layout & Structure === */
  body {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .main-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--grid-row-gap);
    margin-bottom: var(--spacing-lg);
  }

  /* === Site Header & Navigation === */
  .site-header {
    padding: var(--spacing-lg) var(--spacing-sm);
  }

  .site-header h1 {
    font-size: 1.5rem;
  }

  .site-header p {
    font-size: var(--font-size-md);
    line-height: 1.5;
  }

  .site-nav {
    font-size: var(--font-size-lg);
  }

  .nav-exercises__options {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* === Shared Components === */
  /* Buttons - Touch target improvements */
  .ui-btn {
    min-height: 44px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-xxs);
  }

  /* Tables - Used in instructions, exercises, and rules pages */
  .table-card {
    padding: var(--spacing-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-like td {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  .table-like th {
    padding: 0 var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-lg);
  }

  /* === Main Proof Editor Page === */
  /* Problem Setup Form */
  .problem-setup {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs) var(--spacing-sm);
  }

  .problem-setup label {
    margin-top: var(--spacing-xxs);
    font-size: var(--font-size-md);
  }

  .text-input,
  select.logic {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  select.logic {
    width: 60%;
  }

  .first-order-container label {
    margin-top: 0;
    font-size: var(--font-size-sm);
  }

  /* Proof Pane & Results */
  .proof-pane,
  .results-pane {
    padding: var(--spacing-lg);
  }

  .problem-summary {
    font-size: var(--font-size-md);
  }

  .results {
    font-size: var(--font-size-md);
  }

  /* Proof Editor - Scaling */
  .proof {
    transform: scale(var(--proof-mobile-scale));
    transform-origin: top left;
    width: calc(100% / var(--proof-mobile-scale));
    max-width: calc(100% / var(--proof-mobile-scale));
  }

  /* Toolbar */
  .toolbar {
    gap: var(--spacing-xs);
  }

  /* Editor Actions */
  .editor-actions {
    margin-top: var(--spacing-md);
  }

  /* === Exercises Page === */
  .exercises-table col:first-child {
    width: 40px;
  }

  .exercises-table th {
    font-size: var(--font-size-md);
  }

  .exercises-table td {
    font-size: var(--font-size-md);
  }

  .exercise-link {
    font-size: inherit;
  }

  .actions-help-table col:nth-child(1) {
    width: 20%;
  }

  .actions-help-table col:nth-child(2) {
    width: 80%;
  }

  /* === Rules Page === */
  :root {
    --rule-scale: 1.05;
  }

  .rules-section__title {
    font-size: var(--font-size-xl);
  }

  .rule__title {
    font-size: var(--font-size-lg);
  }

  .rule {
    padding: 0 var(--spacing-md);
  }

  .rule__parts {
    grid-template-columns: 1fr;
  }
}

/* === Tablet Breakpoint === */
@media (min-width: 992px) and (max-width: 1199px) {
  body {
    padding-left: 5%;
    padding-right: 5%;
  }

  .site-header {
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
  }
}