/* Lattice-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 sky accent comes from site.yml. */
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.branch { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .branch { grid-template-columns: 1fr 1fr; } }
.branch h3 { display: flex; align-items: center; gap: 0.6rem; }

.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 th { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-alt); }
.table-wrap tr:last-child td { border-bottom: 0; }

.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; }

/* Real tool output, shown as text so it can be read, selected, and announced. */
.transcript { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.55;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); max-height: 28rem; }
.transcript:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.transcript-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin: 0 0 0.5rem; }
.transcript-head h3 { margin: 0; }
.transcript-head code { font-size: 0.9rem; }
.transcript-note { margin: 0.5rem 0 0; font-size: 0.92rem; color: var(--text-muted); }

/* Blast-radius legend: a swatch plus the words, never color alone. */
.hop-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.hop-legend li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.hop-legend i { width: 0.9rem; height: 0.9rem; border-radius: 50%; display: inline-block; border: 1px solid var(--line); }

/* Links inside running text stay underlined: the vendored base styles remove the underline, and sky blue
   alone is under 3:1 against the body text, so color is not enough to tell a link from its sentence. */
p a:not(.btn), li a:not(.btn), td a, .fine a { text-decoration: underline; text-underline-offset: 3px; }

/* Row headers in the tool and tag tables hold code, so they keep their case. */
.table-wrap tbody th { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--text); background: var(--surface); width: 30%; }

/* The inline-code highlight must not paint every line of a response block. */
.transcript code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.transcript-block { margin: 0 0 2.25rem; }
.transcript-block:last-child { margin-bottom: 0; }