/* responsive.css (tablet only) */
@media (min-width:721px) and (max-width:1024px) {
  main {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    margin-top: 0;
  }
  #leftPanel,
  #editorPanel {
    max-width: none;
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  #editorPanel { border-top: 2px solid var(--pp-black); }

  header { flex-wrap: wrap; gap: 0.5rem; }
  .tabs { width: 100%; justify-content: center; }
}

/* (Optional) If you want the extra-small tweaks on phones, move them to mobile.css instead of keeping them here. */