@media (max-width: 839px) {
  /* Git browser mobile */
  #git-nav .run { gap: var(--gap-peer); }
  .git-repo-name,
  #git-repo-name { font-size: var(--text-subhead); }
  .git-clone-url { font-size: var(--text-fine); word-break: break-all; }
  .git-tree .icon { display: none; }
  .git-tree td, .git-tree th { padding: var(--gap-bound) var(--gap-peer); }
  #git-file-header .run { justify-content: flex-start; gap: var(--gap-bound); }
  #git-browse .col-Code { font-size: var(--text-fine); }
  .git-commit-meta { flex-direction: column; gap: var(--gap-bound); }
  .git-release-version { flex-wrap: wrap; gap: var(--gap-peer); }
  #git-commit [id^="diff-header-"] { font-size: var(--text-fine); }
  .git-blame-author { display: none; }
  .git-blame-date { display: none; }

  .container {
    padding: var(--gap-section);
  }

  .padded-page {
    padding: var(--gap-section);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .tab {
    padding: var(--gap-group) var(--gap-section);
    font-size: var(--text-note);
  }

  .tab-content {
    padding: var(--gap-section);
  }

  .data-table th,
  .data-table td {
    padding: var(--gap-peer) var(--gap-group);
    font-size: var(--text-note);
  }

  .modal {
    max-width: 95%;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .content-section {
    padding: var(--gap-section);
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons button {
    width: 100%;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  /* The disclosure. `~` reaches siblings and only forward, which is the whole
     reason the header had to become one element: the checkbox, the search box
     and the nav are inside `<header class="chrome-band">` and nothing else. */
  .chrome-disclose {
    display: block;
  }

  .chrome-search {
    display: none;
    flex: none;
    margin: 0;
    width: 100%;
  }

  .chrome-disclose-state:checked ~ .chrome-search {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--gap-section) var(--gap-pane);
    background: var(--surface-page);
    border-bottom: 1px solid var(--border);
    z-index: var(--z-header);
  }

  .chrome-band .chrome-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border);
    padding: var(--gap-section) var(--gap-pane);
    z-index: var(--z-nav);
  }

  .chrome-band {
    position: relative;
  }

  .chrome-disclose-state:checked ~ .chrome-nav {
    display: block;
  }

  .chrome-band .chrome-nav ul {
    flex-direction: column;
    gap: var(--gap-section);
  }

  /* Animate the bars to an X when open */
  .chrome-disclose-state:checked ~ .chrome-disclose span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .chrome-disclose-state:checked ~ .chrome-disclose span:nth-child(2) {
    opacity: 0;
  }

  .chrome-disclose-state:checked ~ .chrome-disclose span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

/* Doc pages, mobile */
@media (max-width: 599px) {
  .doc-title { font-size: var(--text-title); }
  .doc-body { font-size: var(--text-body); }
  .docs-index-title { font-size: var(--text-title); }
}

/* ===========================================
   RESPONSIVE, 480px (phone)
   =========================================== */

@media (max-width: 599px) {
  .container {
    padding: var(--gap-section);
  }

  .padded-page {
    padding: var(--gap-section);
  }

  h1 {
    font-size: var(--text-title);
  }

  .centered-page h1 {
    font-size: var(--text-hero);
  }

  #login-container,
  .login-container,
  .form-container {
    max-width: 100%;
    padding: var(--gap-section);
  }

  .big-button {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tab {
    padding: var(--gap-peer) var(--gap-section);
    font-size: var(--text-note);
  }

  .tab-content {
    padding: var(--gap-section);
  }

  .content-section {
    padding: var(--gap-section);
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-section);
  }

  /* Landing page (merged from 500px) */
  .landing-fork,
  .tier-selector {
    grid-template-columns: 1fr;
  }

  .pricing-input {
    font-size: var(--text-title);
  }

  .pricing-currency {
    font-size: var(--text-title);
  }

  .calc-verdict {
    font-size: var(--text-body);
  }

  .calc-dials {
    grid-template-columns: 1fr;
  }

  .secondary-links {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-section);
  }

  .toast-container {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .toast {
    max-width: 100%;
  }
}