/* agentedapp.com: shared rules. Page layouts come from the design artboards as inline styles. */
@font-face {
  font-family: 'Nunito';
  src: url(/assets/fonts/nunito-latin-wght-normal.woff2) format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; font-family: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif; color: #252B2D; background: #F3F3F1; }
img, video { max-width: 100%; }
:focus-visible { outline: 3px solid #17596A; outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 40; padding: 8px 14px; border-radius: 8px; background: #17596A; color: #FFFFFF; font-weight: 800; text-decoration: none; }
.skip:focus { left: 12px; color: #FFFFFF; }

/* Home page: the header Download button appears once the main download buttons scroll away.
   Without JavaScript it simply stays visible. */
.js .header-cta { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.js .header-cta.is-visible { opacity: 1; visibility: visible; transform: none; }

/* Phones: the menu moves to its own row and scrolls sideways instead of wrapping. */
@media (max-width: 760px) {
  .header-inner { gap: 10px 16px !important; }
  .nav { order: 3; width: 100%; margin-left: 0 !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 18px !important; padding-bottom: 4px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: 16px !important; }
}
@media (max-width: 480px) {
  .gh-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Screenshot enlargement */
.shot { cursor: zoom-in; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1440px, 96vw); max-height: 96vh; }
.lightbox::backdrop { background: rgba(31, 36, 39, 0.86); }
.lightbox figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lightbox img { display: block; max-height: calc(96vh - 72px); width: auto; max-width: 100%; margin: 0 auto; border-radius: 10px; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #F3F3F1; font-weight: 700; }
.lightbox button { font: inherit; font-weight: 800; background: #F3F3F1; color: #252B2D; border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; }

/* FAQ: the plus/minus icon keeps its size next to long questions. */
summary svg { flex: none; }

/* Why Markdown: on phones the decorative logo tile is dropped so the code sample keeps its width. */
@media (max-width: 600px) {
  .md-tiles { grid-template-columns: 1fr !important; }
  .md-tiles > div:nth-child(2) { display: none; }
}