/* ============================================================
   responsive.css  —  Mobile breakpoint overrides.
   Stacks the sidebar above the main content on small screens.
   ============================================================ */
.docs-code-stack.has-two-blocks {
  grid-template-columns: 1fr;
}

@media (max-width: 1000px) {
  .docs-table-scroll {
    overflow: visible;
  }

  .docs-compat-table {
    border: none;
  }

  .docs-compat-table thead {
    display: none;
  }

  .docs-compat-table,
  .docs-compat-table tbody,
  .docs-compat-table tr,
  .docs-compat-table td {
    display: block;
    width: 100%;
  }

  .docs-compat-table tr {
    margin-bottom: var(--vui-space-md);
    border: 1px solid var(--vui-border);
    border-radius: var(--vui-radius-md);
    overflow: hidden;
    background: var(--vui-bg-elevated);
  }

  .docs-compat-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .docs-compat-table td {
    display: grid;
    grid-template-columns: minmax(88px, 108px) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 12px;
    white-space: normal;
  }

  .docs-compat-table td::before {
    content: "";
    font-size: var(--vui-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vui-fg-subtle);
  }
  .docs-compat-table td:nth-child(1) {
    display: flex;
    align-items: baseline;
  }

  .docs-compat-table td:nth-child(1)::before {
    content: "Feature";
  }

  .docs-compat-table td:nth-child(2)::before {
    content: "Chrome";
  }

  .docs-compat-table td:nth-child(3)::before {
    content: "Edge";
  }

  .docs-compat-table td:nth-child(4)::before {
    content: "Firefox";
  }

  .docs-compat-table td:nth-child(5)::before {
    content: "Safari";
  }

  .docs-compat-table td:nth-child(6)::before {
    content: "Notes";
  }

  .docs-compat-table td:nth-child(7)::before {
    content: "Source";
  }

  .docs-compat-row.is-healthy td {
    background: transparent;
  }
}

/* --- Hamburger toggle (hidden on desktop) --- */

.docs-sidebar-toggle {
  display: none;
}

.docs-sidebar-overlay {
  display: none;
}

@media (max-width: 900px) {
  /* Stack columns vertically */
  .docs-layout {
    grid-template-columns: 1fr;
    width: 95%;
    margin: 2em auto 0 auto;
  }

  /* Hamburger button */
  .docs-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--vui-space-sm, 8px);
    left:5%;
    z-index: 1001;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--vui-border-subtle, #e5e5e5);
    border-radius: var(--vui-radius-md, 6px);
    background: var(--vui-bg-elevated, #ffffff);
    color: var(--vui-fg, #1a1a1a);
    cursor: pointer;
    box-shadow: var(--vui-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
  }

  .docs-sidebar-toggle[hidden] {
    display: none;
  }

  /* Overlay */
  .docs-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.3);
  }

  .docs-sidebar-overlay.is-open {
    display: block;
  }

  /* Sidebar drawer */
  .docs-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 75%;
    max-width: 300px;
    height: 100vh;
    border-right: 1px solid var(--vui-border-subtle);
    border-bottom: none;
    background: var(--vui-bg, #fafafa);
    transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
    overflow-y: auto;
  }

  .docs-sidebar.is-open {
    transform: translateX(0);
  }

  /* Tighten main content padding */
  .docs-main {
    min-width: 0;
    padding: var(--vui-space-lg);
    max-width: 100%;
  }

  .docs-preview {
    padding: 16px;
  }

  /* Reduce code panel padding */
  .docs-code-shell {
    padding: 0;
  }

  .docs-panel-label,
  .docs-code-block-header {
    padding-left: 12px;
    padding-right: 12px;
  }

  .docs-code-block-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .docs-code-window,
  .docs-code-stack,
  .docs-code-block,
  [data-panel="code"] {
    min-width: 0;
  }

  .docs-code-toggle-row {
    padding-left: 12px;
    padding-right: 12px;
  }

  .docs-code-block pre {
    padding: 14px 12px 18px;
    font-size: 0.75rem;
  }

  .docs-code-stack.has-two-blocks .docs-code-block + .docs-code-block {
    border-left: none;
    border-top: 1px solid var(--vui-border-subtle);
  }

  .docs-code-actions,
  .docs-code-toggle-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .docs-code-actions {
    width: 100%;
  }

  .docs-copy-btn,
  .docs-toggle-btn {
    justify-content: center;
    width: 100%;
  }

  .docs-code-toggle-row {
    align-items: center;
  }

  [data-panel="preview"] > :not(.docs-panel-label) {
    padding: 32px 20px;
  }
}

@media (max-width:576px) {
  .docs-preview {
    margin: 0;
  }
  .docs-compat-table td:nth-child(1) {
  flex-direction: column;
  }
}