/* ================================
   Global gutter (all screens)
   ================================ */
.md-main__inner,
.md-content,
.md-content__inner {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Wide screens get a bit more breathing room */
@media (min-width: 1280px) {
  .md-main__inner,
  .md-content,
  .md-content__inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ================================
   Compact header / footer rules
   ================================ */
/* Phones portrait: keep header tiny (so menu is available), kill footer */
@media (max-width: 480px) and (orientation: portrait) {
  .md-header {
    display: flex !important;
    height: 2rem !important;
    font-size: 0.75rem !important;
    padding: 0 0.5rem !important;
  }
  .md-header__title {
    font-size: 0.75rem !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .md-footer { display: none !important; }

  .md-main__inner { margin: 0 !important; padding: 0.25rem !important; }

  html { font-size: 14px !important; line-height: 1.4 !important; }
  .md-typeset { font-size: 0.9rem !important; line-height: 1.45 !important; }
  .md-typeset h1 { font-size: 1.3rem !important; }
  .md-typeset h2 { font-size: 1.2rem !important; }
  .md-typeset h3 { font-size: 1.1rem !important; }
}

/* Tablets + phone landscape (≤1024px): small header, no footer, tight gutters */
@media (max-width: 1024px) {
  .md-header {
    height: 2rem !important;
    font-size: 0.75rem !important;
    padding: 0 0.5rem !important;
  }
  .md-header__title {
    font-size: 0.75rem !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .md-footer { display: none !important; }

  .md-main__inner,
  .md-content,
  .md-content__inner {
    margin: 0 !important;
    padding: 0.25rem !important;
    max-width: 100% !important;
  }

  html { font-size: 13px !important; line-height: 1.35 !important; }
}

/* ================================
   Mobile drawer (works in portrait & landscape ≤1024px)
   ================================ */
@media (max-width: 1024px) {
  /* hide TOC sidebar; keep content single-column */
  .md-sidebar--secondary { display: none !important; }
  .md-main__inner { grid-template-columns: 1fr !important; }
  .md-content { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }

  /* primary sidebar parked off-canvas (not display:none) so it can slide in */
  .md-sidebar.md-sidebar--primary {
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh;
    width: min(80vw, 20rem);
    max-width: 90vw;
    background: inherit;
    box-shadow: 0 0 24px rgba(0,0,0,.25);
    transform: translateX(-110%);
    visibility: hidden;
    z-index: 1002;
    transition: transform .2s ease, visibility .2s ease;
  }
  /* its scroller must exist so menu items render */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    display: block !important;
    width: 100% !important;
    height: 100%;
    overflow: auto;
  }

  /* OPEN: checkbox-driven builds */
  #__drawer:checked ~ .md-container .md-sidebar.md-sidebar--primary {
    display: block !important;
    transform: translateX(0);
    visibility: visible;
  }
  /* OPEN: attribute-driven builds */
  .md-sidebar.md-sidebar--primary[data-md-state="active"] {
    display: block !important;
    transform: translateX(0) !important;
    visibility: visible !important;
  }
}

/* ================================
   Code blocks & line-number gutter
   ================================ */
.md-typeset pre {
  font-size: 0.65rem !important;
  line-height: 1.35 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem;
  overflow-x: auto;
  background: transparent !important;
}
.md-typeset code {
  font-size: 0.65rem !important;
  padding: 0 0;
  border-radius: 0.2rem;
  background: transparent !important;
}

/* line numbers */
.highlight table td.linenos {
  padding-right: 0 !important;
  padding-left: 0 !important;
  background: transparent !important;
  vertical-align: top !important;
  width: auto !important;
}
.highlight table td.linenos pre {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 2em !important;
  font-size: 0.65rem !important;
  line-height: 1.3 !important;
  color: #999 !important;
  background: transparent !important;
  text-align: right !important;
}
.highlight table td.code { padding-left: 0 !important; }

/* extra-compact code on phones */
@media (max-width: 480px) {
  .md-typeset pre { font-size: 0.65rem !important; padding: 0 !important; margin: 0 !important; }
  .highlight table td.linenos { width: 1.8em !important; }
}