/* gullyrpc.xyz page layout on top of the Gully Terminal kit (/assets/terminal/tokens.css + components.css).
   Only layout glue lives here: colours, type and components come from the kit tokens (--t-*). */
.rpc-hide-sm { display: inline-flex; }
@media (max-width: 640px) { .rpc-hide-sm { display: none; } }
@media (max-width: 420px) { .t-switch > summary span { display: none; } .t-topbar > .t-wrap { gap: 10px; } }
.t-topbar-r .t-btn--primary span { white-space: nowrap; }
@media (max-width: 360px) { .t-topbar-r .t-btn--primary span { display: none; } }

.rpc-mt { margin-top: var(--t-4); }
.rpc-mt-s { margin-top: var(--t-3); }
.rpc-note { color: var(--t-muted); font-size: var(--t-fs-sm); margin-top: var(--t-3) !important; }
.rpc-p { color: var(--t-muted); max-width: 760px; margin-top: var(--t-3) !important; }
.rpc-p b { color: var(--t-text); }
.rpc-readout { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: var(--t-2); }
.rpc-tabs { margin-bottom: var(--t-3); max-width: 100%; overflow-x: auto; }
.rpc-tabs .t-seg { flex-wrap: nowrap; }
.t-panel-head { flex-wrap: wrap; }
.t-hero .t-panel { min-width: 0; }
.rpc-hero-sm { padding: var(--t-7) 0 var(--t-6); }

/* code blocks with a copy button */
.rpc-code { position: relative; margin-top: var(--t-3); border: 1px solid var(--t-line); border-radius: var(--t-r); background: var(--t-bg); }
.rpc-code pre { margin: 0; padding: 14px 16px; padding-right: 84px; overflow-x: auto; font: 400 12.5px/1.6 var(--t-font-mono); color: var(--t-text); white-space: pre; tab-size: 2; max-height: 340px; }
.rpc-copy { position: absolute; top: 8px; right: 8px; background: var(--t-surface-2); }
.rpc-copy .t-ic { width: 13px; height: 13px; }

/* networks */
.rpc-flat { border: 0; border-radius: 0; margin: -14px; }
.t-table tr.is-gully td { background: var(--t-accent-soft); }
.t-table tr.is-gully td:first-child { box-shadow: inset 2px 0 0 var(--t-accent); }
.rpc-net { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.rpc-net small { color: var(--t-faint); font: 400 11px/1 var(--t-font-mono); }
.rpc-soon { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 26px !important; color: var(--t-muted); font: 400 12px/1.4 var(--t-font-mono); }
.rpc-soon:empty { display: none; }
.t-uptime-row.is-gully .n span:last-child { color: var(--t-accent); font-weight: 600; }

/* try it */
.rpc-try-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rpc-ep { white-space: normal; word-break: break-all; }
.rpc-try-res { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 12px; margin-top: var(--t-3); font: 400 12.5px/1.4 var(--t-font-mono); color: var(--t-muted); }
.rpc-try-res b.ok { color: var(--t-up); } .rpc-try-res b.bad { color: var(--t-down); }
.rpc-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rpc-plan-top h3 { font-size: var(--t-fs-lg); }
.rpc-faq .t-faq { max-width: 880px; }

/* docs */
.rpc-docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--t-6); padding-top: var(--t-6); padding-bottom: var(--t-9); }
@media (min-width: 1000px) { .rpc-docs { grid-template-columns: 200px minmax(0, 1fr); } }
.rpc-toc { display: flex; flex-wrap: wrap; gap: 4px 6px; align-content: start; }
.rpc-toc .t-label { width: 100%; margin-bottom: 6px; }
.rpc-toc a { color: var(--t-muted); text-decoration: none; font-size: 14px; padding: 4px 8px; border: 1px solid var(--t-line); border-radius: var(--t-r); }
.rpc-toc a:hover, .rpc-toc a.is-on { color: var(--t-text); border-color: var(--t-accent-line); }
@media (min-width: 1000px) {
  .rpc-toc { position: sticky; top: calc(var(--t-topbar-h) + 24px); flex-direction: column; flex-wrap: nowrap; gap: 0; border-left: 1px solid var(--t-line); }
  .rpc-toc .t-label { padding-left: 14px; }
  .rpc-toc a { border: 0; border-left: 2px solid transparent; margin-left: -1px; border-radius: 0; padding: 6px 12px; }
  .rpc-toc a.is-on { border-left-color: var(--t-accent); }
}
.rpc-docs-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--t-8); }
.rpc-doc { scroll-margin-top: calc(var(--t-topbar-h) + 16px); min-width: 0; }
.rpc-doc > .t-h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rpc-doc .t-table-wrap, .rpc-doc .t-steps { margin-top: var(--t-4); }
.rpc-doc .t-table code.t-code { white-space: normal; word-break: break-all; }
.rpc-list { margin: var(--t-3) 0 0; padding-left: 20px; color: var(--t-muted); display: grid; gap: 6px; max-width: 760px; }
.rpc-list li::marker { color: var(--t-accent); }
.rpc-callout { display: flex; gap: 10px; margin-top: var(--t-4) !important; padding: 12px 14px; border: 1px solid var(--t-accent-line); border-left-width: 2px; border-radius: var(--t-r); background: var(--t-accent-soft); font-size: 14px; }
.rpc-callout .t-ic { color: var(--t-accent); margin-top: 2px; }
.rpc-badge { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; border: 1px solid var(--t-line); border-radius: var(--t-r); min-width: 0; }
.rpc-badge img { height: auto; }
.t-hero .t-kpis { align-self: stretch; }

/* accessibility: the kit's --t-faint (#5D6672) is 3.4:1 on the RPC ground; lift it to 5.5:1 (WCAG AA for small text) */
[data-product="rpc"] { --t-faint: #7E8794; }

/* tabs: home and status keep the page to about 1.5 screens; every panel is in the HTML (crawlers and no-JS readers
   see all of it); rpc-live.js hides the inactive ones and follows the URL hash (#networks, #pricing, ...) */
.rpc-tabsec { padding-top: var(--t-6); }
.rpc-tablist { display: flex; gap: 0; border-bottom: 1px solid var(--t-line); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--t-5); }
.rpc-tablist::-webkit-scrollbar { display: none; }
.rpc-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; color: var(--t-muted); text-decoration: none; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--t-r) var(--t-r) 0 0; }
.rpc-tab .t-ic { width: 16px; height: 16px; }
.rpc-tab:hover { color: var(--t-text); background: var(--t-surface); }
.rpc-tab[aria-selected="true"] { color: var(--t-text); border-bottom-color: var(--t-accent); }
.rpc-tab[aria-selected="true"] .t-ic { color: var(--t-accent); }
.rpc-tabpanel { scroll-margin-top: calc(var(--t-topbar-h) + 16px); min-width: 0; }
.rpc-tabpanel[hidden] { display: none; }
.rpc-tabpanel > .t-section-head:first-child, .rpc-tabpanel > :first-child { margin-top: 0; }
.rpc-404 { min-height: 50vh; }

/* touch targets: at least 40 px on small screens */
@media (max-width: 640px) {
  .t-btn--sm, .t-btn--xs, .rpc-copy { min-height: 40px; min-width: 40px; }
  .t-seg button { height: 40px; padding: 0 12px; }
  .rpc-toc a { min-height: 40px; display: inline-flex; align-items: center; }
  .t-faq summary { min-height: 44px; }
}
/* chain logos (assets/chains, gully-ops design/chains pack) */
.chn-ic { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; }
.t-tag .chn-ic { margin-right: 5px; }
.chn-tn { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 999px; border: 1px solid rgba(245, 165, 36, 0.45); color: #f5a524; font: 700 10px/1 var(--t-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* nav icons (owner rule 2026-10-30, "icons on the whole stack"): every nav link carries a 20px Lucide icon, stroke
   1.75, muted by default and the Gully RPC accent when active or hovered; the label always stays.
   Covers the top bar, mobile menu, product switcher, footer, docs TOC and the page tabs. scripts/test-site-nav.mjs */
.t-nav a .t-ic, .t-menu-panel a .t-ic, .t-switch-menu a .t-ic, .t-footer ul a .t-ic, .t-footer-bottom a .t-ic, .rpc-toc a .t-ic, .rpc-tab .t-ic { width: 20px; height: 20px; stroke-width: 1.75; color: var(--t-muted); transition: color var(--t-dur); }
.t-nav a[aria-current] .t-ic, .t-nav a:hover .t-ic, .t-menu-panel a[aria-current] .t-ic, .t-menu-panel a:hover .t-ic,
.t-footer ul a:hover .t-ic, .t-footer-bottom a:hover .t-ic, .rpc-toc a:hover .t-ic, .rpc-toc a.is-on .t-ic,
.rpc-tab:hover .t-ic, .rpc-tab[aria-selected="true"] .t-ic { color: var(--t-accent); }
.t-switch-menu a { grid-template-columns: 20px 1fr; }
.t-switch-menu a .t-ic { color: var(--c, var(--t-muted)); }
.t-footer ul a, .rpc-toc a, .t-footer-bottom a { display: inline-flex; align-items: center; gap: 8px; }
.t-footer-bottom a.t-link { vertical-align: middle; }
/* kit fix: .t-topbar's backdrop-filter makes it the containing block of the position:fixed mobile menu and the
   (<=640 px) product switcher, which clipped both to the 56 px bar. Drop the blur while either is open.
   Upstream: gully-ops design/terminal/components.css. */
.t-topbar:has(details[open]) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--t-bg); }


/* ---- design wave 2 (DESIGN-STANDARD.md, 2026-11-02) ---- */
/* kit bug: `.t-body a { color: inherit }` beats `.t-btn--primary` on links, so primary link buttons were 2.4:1 */
.t-body a.t-btn--primary, .t-body .t-btn--primary span { color: var(--t-on-accent); }
.t-table tr.is-gully .rpc-net small { color: var(--t-muted); }

/* logo at the kit's allowed sizes only: wordmark 215x62 (1/4 of the file), footer the same; phones: icon 48x48 native */
[data-product="rpc"] { --t-topbar-h: 76px; }
.t-brand picture { display: block; line-height: 0; }
.t-brand img { width: 215px; height: 62px; max-width: none; }
.t-footer-about img { width: 215px; height: 62px; max-width: none; }
@media (max-width: 720px) {
  [data-product="rpc"] { --t-topbar-h: 60px; }
  .t-brand img { width: 48px; height: 48px; }
}
/* motion on the official files: transform only, never redrawn */
.t-brand img { transition: transform var(--t-dur) var(--t-ease); }
.t-brand:hover img { transform: translateY(-1px) scale(1.015); }

/* served chains under the hero CTA: official chain logos, one quiet entrance */
.rpc-chains { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: var(--t-4) 0 0; padding: 0; min-height: 30px; }
.rpc-chains li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--t-line); border-radius: var(--t-r); color: var(--t-text); font-size: var(--t-fs-xs); background: var(--t-surface); animation: rpc-chip .42s var(--t-ease) both; animation-delay: calc(var(--i, 0) * 50ms); transition: transform var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease); }
.rpc-chains li:hover { transform: translateY(-1px); border-color: var(--t-accent-line); }
.rpc-chains .chn-ic { width: 16px; height: 16px; }
@keyframes rpc-chip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rpc-chains li { animation: none; transition: none; } .t-brand img { transition: none; } .t-brand:hover img { transform: none; } }

/* compact footer */
.t-footer { padding: var(--t-6) 0 var(--t-4); }
.t-footer-grid { gap: var(--t-5); }
.t-footer ul { gap: 4px; }
.t-footer ul a { min-height: 28px; }
@media (min-width: 1000px) { .t-footer ul:has(> li:nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } .t-footer-grid { grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.5fr); } }
.t-footer-about p { margin-top: 8px !important; }
@media (max-width: 699px) {
  .t-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-4) var(--t-3); }
  .t-footer-about { grid-column: 1 / -1; }
  .t-footer ul { gap: 0; }
  .t-footer ul a { min-height: 44px; }
}

/* 44 px targets on phones */
@media (max-width: 640px) {
  .t-btn, .t-btn--sm, .t-btn--xs, .rpc-copy { min-height: 44px; min-width: 44px; }
  .t-seg button { height: 44px; }
  .t-menu > summary { width: 44px; height: 44px; }
  .t-switch > summary { height: 44px; min-width: 44px; justify-content: center; }
  .t-brand { min-height: 48px; align-items: center; }
  .rpc-toc a { min-height: 44px; }
  .t-menu-panel a, .t-switch-menu a { min-height: 44px; }
  .rpc-code pre { padding-right: 16px; padding-top: 56px; }
  .t-kv code { word-break: break-all; }
}
@media (max-width: 640px) {
  .t-ticker-lb, .t-ticker-it { min-height: 44px; display: inline-flex; align-items: center; }
  .t-badge { min-height: 44px; display: inline-flex; align-items: center; }
  .t-footer-bottom a.t-link { min-height: 44px; }
  /* the hero eyebrow link and the inline links in the step lists: 44 px hit areas (padding only, rows keep their height) */
  a.t-eyebrow { min-height: 44px; }
  .t-steps a.t-link { padding-block: 13px; margin-block: -13px; }
}
/* Skip link: hidden above the page until focused, then a full 44 px target. */
.t-skip { display: inline-flex; align-items: center; min-height: 44px; }