/* The Developers page (/developers/): the site's calm type (legal.css), with code. */
.dev.legal { max-width: 860px; }
.dev-lede { margin: 14px 0 8px; font-size: 21px; line-height: 1.45; color: #424245; }
.dev-toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 18px 0 8px; font-size: 15px; }
.dev-toc a { white-space: nowrap; }
.dev h3 { margin: 22px 0 6px; font-size: 18px; }
.dev code { font: 0.88em/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.dev pre { margin: 10px 0; padding: 14px 16px; border-radius: 12px; background: #1d1d1f; color: #f5f5f7; overflow-x: auto; }
.dev pre code { font-size: 13px; color: inherit; }
.dev-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } /* (code boxes scroll inside, not stretch the card) */
@media (min-width: 760px) { .dev-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dev-card { padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); }
.dev-card h3 { margin-top: 0; }
.dev-note { font-size: 14px; color: #6e6e73; overflow-wrap: anywhere; }
.dev-step, .dev-code { min-width: 0; }
.dev-steps { padding-left: 22px; }
.dev-step + .dev-step { margin-top: 18px; }
.dev-code { margin: 10px 0; }
.dev-tabs { display: none; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(118, 118, 128, .12); width: max-content; }
.dev-tabbed .dev-tabs { display: inline-flex; }
.dev-tabs button { border: 0; border-radius: 7px; padding: 5px 12px; background: none; font: inherit; font-size: 13px; color: #1d1d1f; cursor: pointer; }
.dev-tabs button[aria-selected="true"] { background: #fff; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12); }
.dev-tabbed .dev-panes pre:not(.is-active) { display: none; }
.dev-panes pre::before { content: attr(data-lang); display: block; margin-bottom: 6px; font: 600 11px/1 -apple-system, system-ui, sans-serif; text-transform: uppercase; color: #8e8e93; }
.dev-tabbed .dev-panes pre::before { content: none; }
.dev-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 10px 0; }
.dev-table th, .dev-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: .5px solid rgba(0, 0, 0, .12); }
.dev-table th { font-size: 13px; color: #6e6e73; }
@media (prefers-color-scheme: dark) {
  .dev-lede, .dev-note, .dev-table th { color: #a1a1a6; }
  .dev-card { background: rgba(28, 28, 30, .86); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12); }
  .dev-tabs button { color: #f5f5f7; }
  .dev-tabs button[aria-selected="true"] { background: #636366; }
  .dev-table th, .dev-table td { border-bottom-color: rgba(255, 255, 255, .14); }
  .dev pre { background: #000; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14); }
}
.guide-crumb { margin: 0 0 4px; font-size: 15px; }
a.guide-card { display: block; color: inherit; text-decoration: none; }
a.guide-card h2 { margin: 0 0 6px; font-size: 21px; color: #0066cc; }
a.guide-card:hover h2 { text-decoration: underline; }
@media (prefers-color-scheme: dark) { a.guide-card h2 { color: #2997ff; } }