/* Phone layout. The pages are styled inline, so these rules use !important
   to override them below 640px. */
@media (max-width: 640px) {
  /* 16px side gutters, tighter vertical rhythm */
  [style*="max-width: 1200px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 64px 24px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="padding: 56px 24px"] { padding-top: 32px !important; padding-bottom: 40px !important; gap: 32px !important; }
  h1 { font-size: 34px !important; }
  h2 { font-size: 24px !important; }

  /* Header: keep the logo, drop the section links on the sub-bar */
  nav[aria-label="On this page"] { display: none !important; }

  /* Full-width buttons */
  .m-stack { flex-direction: column !important; align-items: stretch !important; }
  .m-stack > a { justify-content: center !important; }
  .m-full { width: 100% !important; }

  /* Home: project table becomes a card */
  .m-table-head { display: none !important; }
  .m-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 16px !important; padding: 16px !important; }
  .m-row > :first-child, .m-row > :last-child { grid-column: 1 / -1; }
  .m-row > :last-child > a { flex: 1 1 auto; justify-content: center; height: 44px !important; }
  .m-row > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    color: #71717A;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-basis: 100%;
  }

  /* netcheck: highlight strip as a 2x2 grid */
  .m-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .m-highlights > div { padding: 16px 12px 16px 0 !important; border-left: 0 !important; }
  .m-highlights > div:nth-child(n+3) { border-top: 1px solid #1F1F23; }

  /* Download rows: taller tap targets */
  [data-dl] { height: 44px !important; }

  /* Terminal install lines: label above the command */
  .m-cmd { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }

  /* Doctor example: narrower label column */
  [style*="grid-template-columns: 84px 16px"] { font-size: 12px; column-gap: 6px !important; }
  [style*="grid-template-columns: 84px 16px minmax(0, 1fr) 80px"] { grid-template-columns: 64px 12px minmax(0, 1fr) auto !important; }
  [style*="grid-template-columns: 84px 16px minmax(0, 1fr);"] { grid-template-columns: 64px 12px minmax(0, 1fr) !important; }

  /* Command lists: narrower first column */
  [style*="grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 11px 20px"] {
    grid-template-columns: 76px minmax(0, 1fr) !important; gap: 12px !important; padding: 11px 16px !important;
  }
}