/* Mobile-only high-density layout */

@media (max-width: 640px) {
  /* 0) Base typography shrink (site-wide) */
  html, body { font-size: 15px; line-height: 1.3; }
  h1 { font-size: 1.25rem !important; margin-bottom: 0.25rem !important; }
  h2 { font-size: 1rem !important; }
  .text-3xl { font-size: 1.5rem !important; }
  .small, .text-sm { font-size: 0.85rem !important; }

  /* 1) Header: unfix + stack + tighten */
  header {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    min-height: auto !important;
    padding: 4px 0 !important;
    overflow: visible !important;
  }
  header .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    padding: 6px 12px !important;
  }
  /* logo */
  header #logo { font-size: 1rem !important; line-height: 1.1; }

  /* nav stacked vertically */
  header nav {
    display: block !important;
    margin-top: 2px !important;
  }
  header nav a {
    display: block !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    padding: 2px 0 !important;
    word-break: break-word;
  }

  /* auth/user row as its own line, allow wrap if needed */
  header .container > div:last-child {
    align-self: stretch;
    display: flex;
    gap: 0.5rem;
    margin-top: 4px !important;
    flex-wrap: wrap;
  }
  header .container > div:last-child a { font-size: 0.85rem !important; }

  /* 3) Buttons smaller */
  .btn { padding: 0.35rem 0.6rem !important; font-size: 0.8rem !important; border-radius: 6px !important; }

  /* 4) Remove large top margin since header is no longer fixed */
  main.container { margin-top: 0.75rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

  /* 6) Question list compaction */
  #questions-section .card { padding: 0.75rem !important; }
  #questions-section .text-lg { font-size: 1rem !important; }
  #questions-section h2 a {
    display: inline;
    overflow: visible;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
  }

  /* 7) Verdict badge hide (keep ✓ and score) */
  .badge-verdict-correct,
  .badge-verdict-partial,
  .badge-verdict-incorrect { display: none !important; }

  /* 7) Tag rows: compact + horizontal scroll helper */
  .tags-scroll-mobile {
    display: flex !important;
    gap: 0.25rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .tags-scroll-mobile .tag {
    font-size: 0.72rem !important;
    padding: 0.18rem 0.38rem !important;
    border-radius: 6px !important;
  }

  /* Apply scroll/compact behavior to known containers without class */
  #questions-section .flex.flex-wrap {
    gap: 0.25rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    /* enforce single-line row height on mobile */
    max-height: 2.02rem; /* ~30.3px at 15px root */
    overflow-y: hidden !important;
    align-items: center;
  }

  /* Prevent multi-line tags; keep each pill to one line */
  #questions-section .tag,
  .tags-scroll-mobile .tag {
    white-space: nowrap !important;
    line-height: 1.2;
  }

  /* 8) Filters panel trimming */
  /* Popular tags tighter + hide counts */
  #popular-tags-container { gap: 0.25rem !important; max-height: 5.75rem; overflow-y: auto; }
  #popular-tags-container span.text-xs { display: none !important; }

  /* Align filter-area tag size with question tags */
  aside .tag, aside .tag.tag-small, aside .tag-popular.tag, aside button.tag { font-size: 0.72rem !important; padding: 0.18rem 0.38rem !important; border-radius: 6px !important; }
  #popular-tags-container .tag { font-size: 0.72rem !important; padding: 0.18rem 0.38rem !important; border-radius: 6px !important; }

  /* Hide "Search by tags" card entirely */
  aside .card:nth-of-type(2) { display: none !important; }

  /* Reduce large layout gaps */
  .grid.gap-6 { gap: 0.45rem !important; }

  /* Reusable condensed meta row */
  .meta-inline-mobile {
    display: flex !important;
    gap: 0.25rem !important;
    align-items: center;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.85rem !important;
    line-height: 1.2;
  }
  .meta-inline-mobile > * { white-space: nowrap; }

  /* Optional denser card for long lists */
  .dense-card-mobile { padding: 0.5rem !important; }

  /* Communities inner margins tighter */
  .card h2.mb-1,
  .card p.mb-1 { margin-bottom: 0rem !important; }

  /* Tighter spacing between question cards on mobile */
  #questions-list > * + * { margin-top: 0.45rem !important; }
  /* Also override Tailwind space-y-3 pattern */
  #questions-list > :not([hidden]) ~ :not([hidden]) { margin-top: 0.45rem !important; }
  /* Neutralize Tailwind space-y-3 block-start margin and set bottom spacing */
  #questions-list.space-y-3 > :not(:last-child) {
    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
    margin-block-start: 0 !important;
    margin-block-end: 0.45rem !important;
  }

  /* Generic .space-y-3 tightening on mobile (applies to Communities list) */
  .space-y-3 > * + * { margin-top: 0.45rem !important; }
  .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.45rem !important; }
  .space-y-3 > :not(:last-child) {
    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
    margin-block-start: 0 !important;
    margin-block-end: 0.45rem !important;
  }

  /* Stronger override to neutralize Tailwind logical margins on mobile */
  body .space-y-3 > * + * {
    margin-top: 0.45rem !important;
    margin-bottom: 0 !important;
    margin-block-start: 0.45rem !important;
    margin-block-end: 0 !important;
  }
  body .space-y-3 > :not(:last-child) {
    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
    margin-block-start: 0 !important;
    margin-block-end: 0.45rem !important;
  }

  /* Mobile: shrink community color balls */
  a.community-link .community-color-ball {
    width: 10px !important;
    height: 10px !important;
  }
  /* Balls inside tag chips */
  .tag .community-color-ball {
    width: 8px !important;
    height: 8px !important;
    margin-right: 0.25rem !important;
    margin-top: 0 !important;
  }

  /* Source content preview on mobile */
  .source-content-preview {
    padding: 0.5rem !important;
    font-size: 0.85rem !important;
  }

  /* Hide source text toggle buttons on mobile */
  .source-text-toggle-buttons {
    display: none !important;
  }

  /* Source show page: mobile wants Source text above everything */
  .source-text-aside-desktop { display: none !important; }
  .source-text-aside-mobile { display: block !important; }

  /* Mobile source text: collapsed by default */
  .source-text-aside-mobile .source-text-content {
    max-height: 186px;
    overflow: hidden;
  }
  .source-text-aside-mobile.is-expanded .source-text-content {
    max-height: none;
    overflow: visible;
  }

  /* Mobile source text toggle button sizing */
  .source-text-aside-mobile .source-text-toggle-btn {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  .source-text-aside-mobile .source-text-icon {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Desktop: show the right-hand source text, hide the mobile duplicate */
@media (min-width: 768px) {
  .source-text-aside-desktop { display: block !important; }
  .source-text-aside-mobile { display: none !important; }
}

/* Submission count tag: "Answered xN" on desktop, "A xN" on mobile (same breakpoint as source text) */
.tag-submission-count .submission-count-desktop { display: none; }
.tag-submission-count .submission-count-mobile { display: inline; }
@media (min-width: 768px) {
  .tag-submission-count .submission-count-desktop { display: inline; }
  .tag-submission-count .submission-count-mobile { display: none !important; }
}

/* Join community button: "Join Community" on desktop, "Join" on mobile */
.btn-join-community .btn-join-desktop { display: none; }
.btn-join-community .btn-join-mobile { display: inline; }
@media (min-width: 768px) {
  .btn-join-community .btn-join-desktop { display: inline; }
  .btn-join-community .btn-join-mobile { display: none !important; }
}