/* lodinize.com - the site bar on top of the web copy of the help.
   The help pages keep their own _style.css (light + dark); this only adds the site header,
   which stays dark in both schemes so it reads as the site, not the help. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #0d1117; border-bottom: 1px solid #2a3344;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.site-header .bar {
  max-width: 1120px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
}
.site-header .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #e8ecf3; }
.site-header .logo { display: block; width: 28px; height: 28px; }
.site-header .wordmark { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.site-header .wordmark .lod { color: #4fd1c5; }
.site-header .badge {
  font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase;
  color: #4fd1c5; border: 1px solid #2a3344; background: #161b22; padding: 3px 9px; border-radius: 999px;
}
.site-header .site-nav { display: flex; gap: 4px 20px; margin-left: auto; flex-wrap: wrap; }
.site-header .site-nav a { color: #9aa6b8; text-decoration: none; font-size: 14.5px; font-weight: 550; padding: 3px 0; border-bottom: 2px solid transparent; }
.site-header .site-nav a:hover { color: #e8ecf3; }
.site-header .site-nav a[aria-current="page"] { color: #e8ecf3; border-bottom-color: #4fd1c5; }
.site-header .btn {
  display: inline-block; padding: 7px 14px; border-radius: 9px; font-size: 14px; font-weight: 680;
  color: #06231f; text-decoration: none; background: linear-gradient(100deg, #4fd1c5, #2dd4bf);
}
.site-header .btn:hover { filter: brightness(1.07); }
.web-copy { margin-top: 0; }
img { max-width: 100%; height: auto; }
/* let grid items shrink below the screenshots' natural width on phones */
.pair > *, .cards > * { min-width: 0; }
/* _style.css caps these at a fixed width, which is wider than a phone */
figure.narrow img { max-width: min(440px, 100%); }
figure.medium img { max-width: min(680px, 100%); }
table { max-width: 100%; }
@media (max-width: 640px) {
  .site-header .bar { padding: 8px 16px; }
  .site-header .badge { display: none; }
  .site-header .site-nav { order: 3; width: 100%; margin-left: 0; }
  .site-header .btn { margin-left: auto; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  header.top { padding-left: 16px; padding-right: 16px; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  table { display: block; overflow-x: auto; }
}