/* =========================
   MOBILE.CSS
   Overrides only (<= 768px)
   MUST load last
   ========================= */

@media (max-width: 768px) {

  /* ---------- CONTAINER ---------- */
  .container {
    max-width: 100%;
    margin: 20px 10px;
    padding: 20px;
    border-radius: 12px;
  }

  h1 {
    font-size: 20px;
  }

  /* ---------- LOGO ---------- */
  .site-logo {
    height: clamp(28px, 8vw, 50px);
  }

  /* ---------- TOOLBAR ---------- */
  .toolbar {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .toolbar .left a {
    font-size: 13px;
    margin-right: 10px;
  }

  .auth-controls {
    justify-content: flex-end;
    flex-wrap: nowrap;
    width: auto;
  }

  /* ---------- TOP CONTROLS ---------- */
  .top-controls {
    flex-direction: row;
    padding: 12px;
    gap: 10px;
  }

  .answer-block label {
    font-size: 13px;
    font-weight: 600;
  }

  .answer-toggle {
    transform: scale(1.1);
    cursor: pointer;
  }

  /* ---------- TOPIC LAYOUT ---------- */
  .topic-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .topic-left {
    flex-wrap: wrap;
  }

  .topic-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ---------- FIELDS ---------- */
  .field {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  .field label {
    margin-bottom: 0;
    font-size: 10px;
  }

  .field input[type="number"] {
    width: 45px;
    height: 20px;
    font-size: 11px;
  }

  /* ---------- ICONS ---------- */
  .icon-btn {
    width: 22px;
    height: 22px;
  }

  #logoutBtn {
    font-size: 12px;
    padding: 5px 8px;
  }

  .category-btn {
    font-size: 14px;
    padding: 10px;
  }

  input[type="number"] {
    font-size: 16px;
  }

  button.submit-btn {
    font-size: 15px;
  }
}