/* Shared mobile/tablet layout: sidebar becomes a swipeable chip bar under the header. */
@media (max-width: 1024px) {
  html, body { overflow-x: clip; overflow-y: visible; height: auto; }

  body > div > header {
    left: 0 !important;
    right: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Hide the non-essential GitHub repo link; keep bug-report link */
  body > div > header a[href*="github.com/idiocratease-Iggy"]:not([href*="issues"]) {
    display: none !important;
  }

  body > aside {
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.5) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
  }

  body > aside > div:first-child {
    padding: 6px 14px !important;
    margin: 0 !important;
    height: 44px;
  }

  body > aside > nav {
    display: flex !important;
    flex: none !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 12px 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body > aside > nav > a {
    flex: 0 0 auto !important;
    margin: 0 !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
  }

  body > aside > nav > a .material-symbols-outlined {
    margin-right: 6px !important;
    font-size: 20px !important;
  }

  body > aside .publications-box,
  body > aside .publications-box > div {
    display: contents !important;
  }

  body > aside .publications-box > p {
    display: none !important;
  }

  body > aside .publications-box a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
  }

  /* Project box and user card */
  body > aside > div:not(:first-child) {
    display: none !important;
  }

  body > div {
    padding-left: 0 !important;
  }

  body > div > main {
    padding-top: 10.25rem !important;
  }

  main h1, main h2, main h3 {
    overflow-wrap: anywhere;
  }

  main img, main video, main svg, main canvas, main iframe {
    max-width: 100%;
  }

  main table {
    display: block;
    overflow-x: auto;
  }

  main .flex.justify-between {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

/* Hardware page: diagram first, then the hardware photo; secondary panels hidden */
@media (max-width: 1024px) {
  .hw-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  main > div:has(.hw-grid) {
    padding: 0.75rem !important;
  }

  .hw-left,
  .hw-telemetry,
  div:has(> .hw-title) + .flex,
  #workflow-container > .absolute.top-md.right-md,
  #workflow-container > .absolute.inset-0 {
    display: none !important;
  }

  .hw-diagram {
    order: 1;
    width: 100% !important;
    padding: 3.25rem 0.5rem 0.5rem !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #workflow-image {
    max-height: none !important;
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  .hw-right {
    order: 2;
    width: 100% !important;
  }

  .hw-right .hw-photo {
    padding: 0.75rem !important;
  }

  .hw-right .hw-photo > div,
  .hw-right .hw-photo img {
    height: auto !important;
    object-fit: contain !important;
  }
}

@media (max-width: 640px) {
  body > div > header {
    height: 58px !important;
  }

  body > aside {
    top: 58px !important;
  }

  body > div > main {
    padding-top: 9.75rem !important;
  }

  main > div,
  main > section {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  main button,
  main a.btn {
    max-width: 100%;
  }
}