/* rn-site-developers.css: Developers (roachnet.org/developers/). A short imperative head beside a
   live map of what listens on 127.0.0.1, three proof cards that each end in the page that proves
   them, the make-and-share band, a word on GitHub, and the guides and reference as an index. */

.rn-dev-hero { padding-block: clamp(32px, 4vw, 80px) clamp(48px, 5vw, 96px) !important; }
.rn-dev-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.rn-dev-hero__copy { container-type: inline-size; }
.rn-dev-hero__title { font-size: min(clamp(2.8rem, 1.2rem + 6.4vw, 7rem), 100cqi / 5.4); line-height: 0.9; max-width: 9ch; margin-bottom: 24px; }
@media (min-width: 1024px) { .rn-dev-hero__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }

/* what listens on 127.0.0.1 */
.rn-ports { position: relative; padding: 0 0 16px; border: 1px solid var(--rw-line-strong); border-radius: var(--rw-r-lg); background: var(--rw-surface-0); box-shadow: inset 0 1px 0 var(--rw-highlight), var(--rw-elev-3); overflow: hidden; }
.rn-ports__head { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px; border-bottom: 1px solid var(--rw-line); font: 500 0.78rem/1 var(--rw-font-mono); color: var(--rw-text-muted); }
.rn-ports__list { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; padding: 6px 0; }
.rn-port { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2px 14px; padding: 14px 16px 14px 34px; border-bottom: 1px solid var(--rw-line); }
.rn-port::before { content: ""; position: absolute; left: 14px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--rw-line-strong); transition: background-color var(--rw-dur-3) var(--rw-ease-gentle), box-shadow var(--rw-dur-4) var(--rw-ease-assemble); }
.rn-port.is-on::before, html:not(.rw-js) .rn-port::before { background: var(--rw-signal); box-shadow: 0 0 10px color-mix(in srgb, var(--rw-signal) 60%, transparent); }
.rn-port:nth-child(2) { transition-delay: 120ms; }
.rn-port__addr { grid-row: 1 / span 2; align-self: start; padding: 0; background: none; font-size: 0.92rem; color: var(--rw-signal-text); }
.rn-port__name { font-weight: 700; color: var(--rw-text); }
.rn-port__what { font-size: 0.9rem; color: var(--rw-text-muted); }
.rn-ports__foot { padding: 12px 16px 0; font: 500 0.8rem/1.4 var(--rw-font-mono); color: var(--rw-text-muted); }
@media (max-width: 420px) { .rn-port { grid-template-columns: minmax(0, 1fr); } .rn-port__addr { grid-row: auto; } }

/* three proof cards */
.rn-dev-proof { padding-top: clamp(24px, 3vw, 48px) !important; }
.rn-dev-proof__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; list-style: none; }
.rn-proof { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2vw, 32px); border: 1px solid var(--rn-card-edge); border-radius: var(--rw-r-xl); background-color: var(--rn-card); background-image: linear-gradient(180deg, color-mix(in srgb, var(--rw-highlight) 90%, transparent), transparent 40%); box-shadow: var(--rw-elev-2); color: var(--rw-text-muted); }
.rn-proof h3 { font-family: var(--rw-font-display); font-weight: 820; font-stretch: 112%; letter-spacing: -0.02em; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.04; color: var(--rw-text); }
.rn-proof__code { position: relative; z-index: 1; margin: 4px 0 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--rw-line); border-radius: var(--rw-r-md); background: var(--rw-surface-0); font-size: 0.84rem; color: var(--rw-text); }
.rn-proof__link { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; min-height: 44px; color: var(--rw-accent); font-weight: 650; text-decoration: none; }
.rn-proof__link::after { content: ""; width: 22px; height: 1.5px; background: currentColor; transition: width var(--rw-dur-2) var(--rw-ease-assemble); }
.rn-proof__link:hover::after { width: 34px; }
.rn-proof__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rn-proof:focus-within { box-shadow: var(--rw-elev-2), 0 0 0 var(--rw-focus-width, 3px) var(--rw-focus); }
.rn-proof__link:focus-visible { outline: none; }
@media (min-width: 960px) { .rn-dev-proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* make and share */
.rn-share { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: clamp(28px, 4vw, 56px); border: 1px solid color-mix(in srgb, var(--rw-action-light) 45%, var(--rw-line-strong)); border-radius: var(--rw-r-xl); background-color: var(--rn-card); background-image: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--rw-action) 30%, transparent), transparent 55%); box-shadow: var(--rw-elev-2); }
.rn-share__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; max-width: 40rem; }
.rn-share__copy .rn-eyebrow { margin-bottom: 0; }
.rn-share__copy > p { color: var(--rw-text-muted); }
.rn-share code { color: var(--rw-text); }   /* the chip's tint under the pointer light took muted code under 4.5:1 (Witchlight), as on .rn-card */
.rn-share__aside { font-size: 0.95rem; color: var(--rw-text-muted) !important; }
.rn-share__file { align-self: center; padding: 20px; border: 1px solid var(--rw-line-strong); border-radius: var(--rw-r-lg); background: var(--rw-surface-0); font-family: var(--rw-font-mono); font-size: 0.86rem; box-shadow: var(--rw-elev-2); }
.rn-share__name { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--rw-line); color: var(--rw-text-soft); overflow-wrap: anywhere; }
.rn-share__files { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; list-style: none; }
.rn-share__files li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--rw-r-sm); color: var(--rw-text); }
.rn-share__files li:first-child { background: color-mix(in srgb, var(--rw-action) 22%, transparent); }
.rn-share__files li span:last-child { color: var(--rw-text-muted); }   /* muted, not soft: soft falls under 4.5:1 on the first row's tint in Daylight, Bone and Phosphor */
.rn-share__watch { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--rw-signal-text); }
@media (min-width: 960px) { .rn-share { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }

/* talk to us */
.rn-dev-talk__in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; max-width: 760px; text-align: center; }
.rn-dev-talk__mark { display: inline-flex; padding: 10px; border-radius: var(--rw-r-md); }
.rn-dev-talk .rn-lede { margin-inline: auto; }

/* guides and reference */
.rn-dev-res__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.rn-res__title { margin-bottom: 8px; font: 600 0.78rem/1.3 var(--rw-font-mono); letter-spacing: var(--rw-tracking-caps); text-transform: uppercase; color: var(--rw-signal-text); }
.rn-res__list { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; border-top: 1px solid var(--rw-line-strong); }
.rn-res__list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rw-line); }
.rn-res__list a { display: inline-flex; align-items: center; min-height: 32px; color: var(--rw-text); font-weight: 650; text-decoration: none; }
.rn-res__list a:hover { color: var(--rw-accent); text-decoration: underline; text-underline-offset: 0.22em; }
.rn-res__list p { font-size: 0.94rem; color: var(--rw-text-muted); }
@media (min-width: 900px) { .rn-dev-res__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }