/* Chirp-specific blocks only. Layout, color tokens, header, footer, and the shared blocks come from the
   fleet showcase kit (css/kit.css, css/rk-tokens.css); the teal accent comes from site.yml. */
.grid-3 { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-3 .card h3 { margin-bottom: 0.4rem; }
.grid-3 .card p { margin: 0; color: var(--text-muted); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.table-wrap th, .table-wrap td { padding: 0.8rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table-wrap thead th { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-alt); }
.table-wrap tbody th { font-weight: 600; white-space: nowrap; }
.table-wrap tr:last-child td, .table-wrap tr:last-child th { border-bottom: 0; }

pre.code { margin: 0; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.88rem; line-height: 1.55; }
pre.code code { background: none; padding: 0; border-radius: 0; }

.plain-list, .steps-list { margin: 0 0 1rem; padding-left: 1.25rem; display: grid; gap: 0.6rem; }
.plain-list li, .steps-list li { color: var(--text); }
.plain-list strong { color: var(--text); }

.tour-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.tour-nav a { display: inline-flex; align-items: center; padding: 0 0.9rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--surface); font-weight: 600; font-size: 0.92rem; min-height: 44px; }
.tour-item { margin-bottom: 4rem; scroll-margin-top: 90px; }
.tour-item h2 { font-size: 1.6rem; }

/* Long identifiers in the specs (hookSpecificOutput.additionalContext) must wrap on a 375 px screen. */
.spec-table td, .spec-table li, .coming-list li, .link-card p, .card p { overflow-wrap: anywhere; }