/*
 * Roasit Blog. The header, footer, buttons, type and spacing are the roasit.com
 * landing page's (Roasit-Web src/styles.css: .ap-nav, .ap-links, .ap-actions,
 * .ap-menu-btn, .ap-btn, .ap-foot*, .ap-final, .ap-card), with its breakpoints at
 * 900 and 480 px. Every colour is a token (tokens.css), so the blog takes the
 * dashboard's light and dark themes; the theme button in the header switches them as
 * the dashboard's rail does.
 */

/* ── Base ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--rb-bg);
  /* An anchor (the "On this page" list) lands below the pinned header. */
  scroll-padding-top: 84px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--rb-bg);
  color: var(--rb-ink);
  font-family: var(--rb-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden: hidden would make body a scroll container and unpin the header. */
  overflow-x: clip;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input {
  color: inherit;
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: 2px;
}

::selection {
  background: var(--rb-selection);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rb-icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

/* .ap .wrap */
.rb-wrap {
  width: 100%;
  max-width: var(--rb-wrap);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--rb-gutter);
  padding-left: var(--rb-gutter);
}

.rb-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--rb-radius-ctl);
  background: var(--rb-ink);
  color: var(--rb-on-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}

.rb-skip-link:focus {
  transform: none;
}

/* ── Brand (Logo.tsx: the mark and the drawn wordmark) ──────────────────── */

.rb-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  color: var(--rb-ink);
  text-decoration: none;
}

.rb-mark,
.rb-wordmark {
  display: block;
  flex: none;
}

/* The t and the dot of the i rise above the box; overflow lets them show. */
.rb-wordmark {
  overflow: visible;
}

.rb-wordmark__dot {
  fill: var(--rb-brand-dot);
}

/* ── Button (.ap-btn) ───────────────────────────────────────────────────── */

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--rb-radius-btn);
  background: var(--rb-ink);
  color: var(--rb-on-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.rb-btn:hover {
  background: var(--rb-ink-hover);
  color: var(--rb-on-ink);
}

.rb-btn:active {
  transform: scale(0.98);
}

/* ── Header (.ap-nav, PublicNav.tsx) ────────────────────────────────────── */

.rb-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--rb-line);
  background: var(--rb-nav-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.rb-nav.is-scrolled {
  background: var(--rb-nav-bg-scrolled);
  box-shadow: 0 1px 0 var(--rb-line), var(--rb-shadow-nav);
}

.admin-bar .rb-nav {
  top: 32px;
}

.rb-nav__bar {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--rb-nav-h);
}

/* 26 px of logo in a 40 px target. */
.rb-nav .rb-brand {
  padding: 7px 0;
}

.rb-links {
  display: flex;
  gap: 22px;
}

.rb-links a {
  color: var(--rb-ink-2);
  font-size: 14px;
  text-decoration: none;
}

.rb-links a:hover,
.rb-links a.is-current {
  color: var(--rb-ink);
}

/* Log in has a place in the menu, shown on a phone only (below). */
.rb-links .rb-login {
  display: none;
}

.rb-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.rb-actions .rb-login {
  padding: 10px 0;
  color: var(--rb-ink);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

/* It comes before the links in the markup, for the keyboard, and is drawn at the
   end of the bar (order), as on the landing. */
.rb-menu-btn {
  display: none;
  order: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-ctl);
  background: var(--rb-card);
  color: var(--rb-ink);
  font-size: 14px;
  cursor: pointer;
}

/* The theme: the dashboard's rail button (Roasit-Web App.tsx), its three states in
   its order (Light, Dark, System) and its icons, drawn as the menu button is. Each
   icon shows under the theme it names, so the right one is there from the first
   paint; site.js names the button. It switches nothing without scripts, so then it
   is not drawn. */
.rb-theme-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-ctl);
  background: var(--rb-card);
  color: var(--rb-ink);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.rb-theme-btn:hover {
  border-color: var(--rb-line-strong);
}

html:not([data-js]) .rb-theme-btn,
.rb-theme-btn__icon {
  display: none;
}

:root:not([data-theme]) .rb-theme-btn__icon--system,
:root[data-theme="light"] .rb-theme-btn__icon--light,
:root[data-theme="dark"] .rb-theme-btn__icon--dark {
  display: flex;
}

/* ── Footer (.ap-foot) ──────────────────────────────────────────────────── */

/* 13.5 px is the landing's base size: the line under the footer logo is as tall as there. */
.rb-foot {
  padding: 48px 0 28px;
  border-top: 1px solid var(--rb-line);
  background: var(--rb-card);
  font-size: 13.5px;
}

.rb-foot__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
}

.rb-foot__about p {
  max-width: 320px;
  margin: 12px 0 0;
  color: var(--rb-ink-2);
  font-size: 14px;
}

.rb-foot__title {
  margin: 0 0 12px;
  color: var(--rb-ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.rb-foot__col a,
.rb-foot__col span {
  display: block;
  padding: 4px 0;
  color: var(--rb-ink-2);
  font-size: 14px;
  text-decoration: none;
}

.rb-foot__col a:hover {
  color: var(--rb-ink);
}

.rb-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--rb-line);
  color: var(--rb-ink-2);
  font-size: 13px;
}

/* ── Shared type ────────────────────────────────────────────────────────── */

/* The small label over a heading, led by the wordmark's dot cell. */
.rb-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--rb-ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.rb-eyebrow::before {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--rb-brand-dot);
  content: "";
}

/* A 40 px target round the label, without moving it. */
.rb-eyebrow a {
  margin: -10px 0;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}

.rb-eyebrow a:hover {
  color: var(--rb-ink);
}

/* .ap-section h2 / the changelog's h1: 56 px, tight. */
.rb-h1 {
  margin: 0;
  color: var(--rb-ink);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.rb-h1--archive {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.08;
}

/* .ap-lead */
.rb-lead {
  max-width: 620px;
  margin: 0;
  color: var(--rb-ink-2);
  font-size: 18px;
  line-height: 1.45;
}

.rb-lead p {
  margin: 0 0 8px;
}

.rb-lead p:last-child {
  margin-bottom: 0;
}

.rb-lead a {
  color: var(--rb-accent);
}

.rb-count {
  margin: 0;
  color: var(--rb-ink-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* The changelog's section heading (.cl-sec h2). */
.rb-section-title {
  margin: 0 0 20px;
  color: var(--rb-ink);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ── Masthead, topics, search ───────────────────────────────────────────── */

.rb-main {
  min-height: 50vh;
}

.rb-masthead {
  border-bottom: 1px solid var(--rb-line);
}

.rb-masthead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
  padding-top: 72px;
  padding-bottom: 36px;
}

.rb-masthead__aside {
  display: grid;
  gap: 20px;
}

.rb-masthead--archive .rb-breadcrumb {
  padding-top: 28px;
}

.rb-masthead--archive .rb-masthead__inner {
  padding-top: 32px;
}

.rb-masthead--404 .rb-masthead__inner {
  padding-top: 72px;
  padding-bottom: 48px;
}

.rb-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 28px;
}

.rb-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rb-line);
  border-radius: 999px;
  background: var(--rb-card);
  color: var(--rb-ink-2);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.rb-chip:hover {
  border-color: var(--rb-line-strong);
  color: var(--rb-ink);
}

.rb-chip.is-active {
  border-color: var(--rb-ink);
  background: var(--rb-ink);
  color: var(--rb-on-ink);
}

.rb-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 440px;
}

.rb-search .rb-icon {
  position: absolute;
  left: 14px;
  color: var(--rb-ink-2);
  pointer-events: none;
}

.rb-search input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--rb-input-line);
  border-radius: var(--rb-radius-btn);
  background: var(--rb-card);
  color: var(--rb-ink);
  font-size: 16px;
  appearance: none;
  transition: border-color 0.15s ease;
}

.rb-search input::placeholder {
  color: var(--rb-ink-2);
  opacity: 1;
}

.rb-search input:hover {
  border-color: var(--rb-ink-2);
}

.rb-search input:focus {
  border-color: var(--rb-ink);
}

/* ── Listings ───────────────────────────────────────────────────────────── */

.rb-listing {
  padding-top: 40px;
  padding-bottom: 24px;
}

.rb-lead-posts {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}

.rb-lead-posts.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.rb-lead-posts__side {
  display: grid;
  gap: 20px;
  align-content: start;
}

.rb-section-block {
  margin-bottom: 64px;
}

.rb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.rb-empty {
  max-width: 640px;
  margin: 8px auto 64px;
  padding: 48px 32px;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-card);
  background: var(--rb-card);
  text-align: center;
}

.rb-empty h2 {
  margin: 0 0 10px;
  color: var(--rb-ink);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.rb-empty p {
  margin: 0 0 20px;
  color: var(--rb-ink-2);
  font-size: 16px;
}

.rb-empty p:last-child {
  margin-bottom: 0;
}

.rb-empty .rb-topics {
  justify-content: center;
  padding-bottom: 0;
}

/* ── Cards (.ap-card, with the cover inset like its visual) ─────────────── */

.rb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 10px 20px;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-card);
  background: var(--rb-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rb-card:hover {
  box-shadow: var(--rb-shadow-hover);
  transform: translateY(-3px);
}

/* The whole card is one link; its ring is the card's. */
.rb-card:has(.rb-card__title a:focus-visible) {
  outline: 2px solid var(--rb-accent);
  outline-offset: 2px;
}

.rb-card__media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--rb-line);
  border-radius: 12px;
}

.rb-cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--rb-warm);
}

.rb-cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rb-cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rb-cover-mark);
}

.rb-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 10px 0;
}

.rb-card__topic {
  margin: 0 0 8px;
  color: var(--rb-ink-2);
  font-size: 13px;
  font-weight: 500;
}

/* Four lines at most: a very long title would make its card twice as tall as its
   neighbours. The whole title stays in the link's text. */
.rb-card__title {
  display: -webkit-box;
  margin: 0 0 8px;
  overflow: hidden;
  color: var(--rb-ink);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  overflow-wrap: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.rb-card__title a {
  color: inherit;
  text-decoration: none;
}

.rb-card__title a::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}

.rb-card__title a:focus-visible {
  outline: none;
}

.rb-card__summary {
  display: -webkit-box;
  margin: 0 0 14px;
  overflow: hidden;
  color: var(--rb-ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.rb-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0;
  color: var(--rb-ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.rb-card--feature .rb-card__body {
  padding: 20px 14px 4px;
}

.rb-card--feature .rb-card__title {
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.rb-card--feature .rb-card__summary {
  font-size: 16px;
}

.rb-card--compact .rb-card__title {
  font-size: 17px;
}

/* Wider covers on the two side cards, so the column is as tall as the lead card. */
.rb-card--compact .rb-cover {
  aspect-ratio: 16 / 9;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */

.rb-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 64px;
}

.rb-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-ctl);
  background: var(--rb-card);
  color: var(--rb-ink-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.rb-pagination a.page-numbers:hover {
  border-color: var(--rb-line-strong);
  color: var(--rb-ink);
}

.rb-pagination .page-numbers.current {
  border-color: var(--rb-ink);
  background: var(--rb-ink);
  color: var(--rb-on-ink);
}

.rb-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* ── Closing call to action (.ap-final, in a card) ──────────────────────── */

.rb-cta {
  margin: 0 0 64px;
  padding: 64px 24px 72px;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-card);
  background: var(--rb-card);
  text-align: center;
}

.rb-cta__title {
  max-width: 900px;
  margin: 0 auto 10px;
  color: var(--rb-ink);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1.05;
  text-wrap: balance;
}

.rb-cta__text {
  margin: 0 0 24px;
  color: var(--rb-ink-2);
  font-size: 18px;
  line-height: 1.5;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */

.rb-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  margin: 0;
  padding: 0;
  color: var(--rb-ink-2);
  font-size: 13.5px;
  list-style: none;
}

.rb-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

.rb-breadcrumb li + li::before {
  color: var(--rb-line-strong);
  content: "/";
}

/* Each crumb is a 40 px target: 6 px of padding on each side (the gaps above
   are 2 px, so the slashes keep 8 px of air) and 10 px above and below that
   do not move the trail. The first crumb's padding hangs left of the column. */
.rb-breadcrumb a {
  display: inline-block;
  margin: -10px 0;
  padding: 10px 6px;
  color: var(--rb-ink-2);
  text-decoration: none;
}

.rb-breadcrumb li:first-child a {
  margin-left: -6px;
}

.rb-breadcrumb a:hover {
  color: var(--rb-ink);
}

.rb-breadcrumb [aria-current] {
  margin-left: 6px;
  overflow: hidden;
  max-width: 48ch;
  color: var(--rb-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Article ────────────────────────────────────────────────────────────── */

.rb-article {
  padding-top: 28px;
}

.rb-article-head {
  max-width: 860px;
  margin: 44px auto 36px;
  text-align: center;
}

.rb-article-head .rb-eyebrow {
  justify-content: center;
}

.rb-article-title {
  margin: 0;
  color: var(--rb-ink);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* A title past 90 characters steps down, so it does not run to seven lines. */
.rb-article-title.is-long {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12;
}

.rb-article-dek {
  max-width: 680px;
  margin: 20px auto 0;
  color: var(--rb-ink-2);
  font-size: 19px;
  line-height: 1.5;
  text-wrap: pretty;
}

.rb-article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  margin: 22px 0 0;
  color: var(--rb-ink-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.rb-article-meta a {
  display: inline-block;
  margin: -10px 0;
  padding: 10px 0;
  color: var(--rb-ink);
  text-decoration: none;
}

.rb-article-meta a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* As wide as the text column and the "On this page" list beside it. */
.rb-article-cover {
  max-width: calc(var(--rb-measure) + var(--rb-toc-gap) + var(--rb-toc-w));
  margin: 0 auto 56px;
  overflow: hidden;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-card);
}

.rb-article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--rb-measure));
  justify-content: center;
  gap: var(--rb-toc-gap);
  margin-bottom: 64px;
}

.rb-article-layout.has-toc {
  grid-template-columns: minmax(0, var(--rb-measure)) var(--rb-toc-w);
}

.rb-toc {
  position: sticky;
  top: calc(var(--rb-nav-h) + 32px);
  align-self: start;
  max-height: calc(100vh - var(--rb-nav-h) - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rb-toc__title {
  margin: 0 0 12px;
  color: var(--rb-ink);
  font-size: 13px;
  font-weight: 500;
}

.rb-toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rb-line);
  list-style: none;
}

.rb-toc a {
  display: block;
  margin-left: -1px;
  padding: 5px 0 5px 15px;
  border-left: 2px solid transparent;
  color: var(--rb-ink-2);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.rb-toc a:hover {
  color: var(--rb-ink);
}

.rb-toc a.is-active {
  border-left-color: var(--rb-ink);
  color: var(--rb-ink);
}

.rb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.rb-tags li {
  padding: 5px 12px;
  border: 1px solid var(--rb-line);
  border-radius: 999px;
  background: var(--rb-card);
  color: var(--rb-ink-2);
  font-size: 13px;
}

.rb-byline-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-block);
  background: var(--rb-card);
}

.rb-byline-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--rb-line);
  border-radius: 12px;
  background: var(--rb-bg);
  color: var(--rb-ink);
}

.rb-byline-card__name {
  margin: 2px 0 6px;
  color: var(--rb-ink);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.rb-byline-card__name a {
  display: inline-block;
  margin: -10px 0;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}

.rb-byline-card__name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rb-byline-card__bio {
  margin: 0;
  color: var(--rb-ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.rb-after {
  padding-top: 8px;
}

/* ── Article body (the agent's HTML) ────────────────────────────────────── */

.rb-prose {
  max-width: var(--rb-measure);
  color: var(--rb-ink-body);
  font-size: 18px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.rb-prose > :first-child {
  margin-top: 0;
}

.rb-prose > :last-child {
  margin-bottom: 0;
}

.rb-prose p,
.rb-prose ul,
.rb-prose ol,
.rb-prose dl {
  margin: 0 0 1.25em;
}

.rb-prose h2,
.rb-prose h3,
.rb-prose h4 {
  color: var(--rb-ink);
  font-weight: 500;
  text-wrap: balance;
}

.rb-prose h2 {
  margin: 2em 0 0.6em;
  font-size: 30px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.rb-prose h3 {
  margin: 1.7em 0 0.5em;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.rb-prose h4 {
  margin: 1.6em 0 0.4em;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.rb-prose h2 + h3 {
  margin-top: 1em;
}

.rb-prose a {
  color: var(--rb-accent);
  text-decoration: underline;
  text-decoration-color: var(--rb-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}

.rb-prose a:hover {
  text-decoration-color: currentcolor;
}

.rb-prose strong,
.rb-prose b {
  color: var(--rb-ink);
  font-weight: 600;
}

/* Lists: the landing's bullet (.ap-list li::before), a 6 px dot in ink. */
.rb-prose ul {
  padding-left: 0;
  list-style: none;
}

.rb-prose ol {
  padding-left: 1.5em;
}

.rb-prose li {
  margin: 0 0 0.5em;
}

.rb-prose ul > li {
  position: relative;
  padding-left: 1.4em;
}

.rb-prose ul > li::before {
  position: absolute;
  top: calc(0.85em - 3px);
  left: 0.35em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rb-ink);
  content: "";
}

.rb-prose ul ul > li::before {
  border: 1.5px solid var(--rb-ink-2);
  background: transparent;
}

.rb-prose ol > li {
  padding-left: 0.3em;
}

.rb-prose ol > li::marker {
  color: var(--rb-ink-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.rb-prose li > ul,
.rb-prose li > ol {
  margin: 0.5em 0 0;
}

.rb-prose blockquote {
  margin: 1.8em 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--rb-accent);
  color: var(--rb-ink);
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.55;
}

.rb-prose blockquote p {
  margin: 0 0 0.6em;
}

.rb-prose blockquote > :last-child {
  margin-bottom: 0;
}

.rb-prose blockquote cite,
.rb-prose blockquote footer {
  display: block;
  margin-top: 10px;
  color: var(--rb-ink-2);
  font-size: 15px;
  font-style: normal;
  letter-spacing: 0;
}

.rb-prose hr {
  margin: 3em 0;
  border: 0;
  border-top: 1px solid var(--rb-line);
}

.rb-prose img {
  border-radius: 12px;
}

.rb-prose figure {
  margin: 2em 0;
}

.rb-prose figure img,
.rb-prose > p > img {
  display: block;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid var(--rb-line);
}

.rb-prose video {
  display: block;
  width: 100%;
  border-radius: 12px;
  background: var(--rb-dark);
}

.rb-prose iframe {
  max-width: 100%;
}

.rb-prose figcaption,
.rb-prose .wp-caption-text {
  margin-top: 10px;
  color: var(--rb-ink-2);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.rb-prose .aligncenter {
  margin-right: auto;
  margin-left: auto;
}

.rb-prose .alignleft {
  float: left;
  margin: 0.3em 1.5em 1em 0;
}

.rb-prose .alignright {
  float: right;
  margin: 0.3em 0 1em 1.5em;
}

.rb-prose code {
  padding: 0.12em 0.38em;
  border-radius: 6px;
  background: var(--rb-stone);
  color: var(--rb-ink);
  font-family: var(--rb-mono);
  font-size: 0.86em;
}

/* SDK samples: the landing's code window (.ap-code), its bar and three dots drawn
   as backgrounds, which stay put while a long line scrolls sideways. */
.rb-prose pre {
  margin: 1.8em 0;
  padding: 56px 22px 20px;
  overflow-x: auto;
  border-radius: var(--rb-radius-block);
  background:
    radial-gradient(circle, var(--rb-code-dot) 4.5px, transparent 5px) 14px 14px / 10px 10px no-repeat,
    radial-gradient(circle, var(--rb-code-dot) 4.5px, transparent 5px) 30px 14px / 10px 10px no-repeat,
    radial-gradient(circle, var(--rb-code-dot) 4.5px, transparent 5px) 46px 14px / 10px 10px no-repeat,
    linear-gradient(var(--rb-code-bar), var(--rb-code-bar)) 0 0 / 100% 38px no-repeat,
    var(--rb-code-bg);
  box-shadow: var(--rb-code-ring);
  color: var(--rb-code-ink);
  font-family: var(--rb-mono);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: normal;
  tab-size: 4;
  white-space: pre;
  word-break: normal;
}

.rb-prose pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* Tables: the_content wraps each one in .rb-table-scroll (inc/content.php), which
   scrolls sideways on a narrow screen instead of widening the page. */
.rb-table-scroll {
  margin: 1.8em 0;
  overflow-x: auto;
  border: 1px solid var(--rb-line);
  border-radius: 12px;
  background: var(--rb-card);
  /* The caption below measures itself against the box, not the wider table. */
  container-type: inline-size;
}

.rb-prose table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--rb-ink-body);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* As wide as the visible box and pinned to its left edge, so a table wider than
   the screen keeps its caption in view while it scrolls. */
.rb-prose caption {
  position: sticky;
  left: 0;
  max-width: 100cqi;
  padding: 14px 16px 2px;
  color: var(--rb-ink-2);
  font-size: 14px;
  text-align: left;
}

.rb-prose th,
.rb-prose td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--rb-line);
  text-align: left;
  vertical-align: top;
}

.rb-prose th {
  color: var(--rb-ink);
  font-weight: 500;
}

.rb-prose thead th {
  border-bottom-color: var(--rb-line-strong);
  background: var(--rb-bg);
  white-space: nowrap;
}

.rb-prose tbody tr:nth-child(even) > * {
  background: var(--rb-zebra);
}

.rb-prose tbody tr:last-child > * {
  border-bottom: 0;
}

/* Numbers line up on the right where the agent marks the cell: class "num" (or
   numeric, number, is-num, has-text-align-right), align="right" or data-align="right". */
.rb-prose :is(th, td):is(.num, .numeric, .number, .is-num, .has-text-align-right, [align="right"], [data-align="right"]) {
  text-align: right;
  white-space: nowrap;
}

.rb-prose--page {
  margin: 0 auto 96px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Seven links between the logo and Log in, Start free and the theme button:
   with the landing's gaps the bar needs 976 px, so from the menu's 900 px up to
   1000 px it takes a little less air and needs 891. Without it "How it works"
   breaks onto two lines from 901 to 975 px. */
@media (min-width: 901px) and (max-width: 1000px) {
  .rb-nav__bar {
    gap: 16px;
  }

  .rb-links {
    gap: 14px;
  }

  .rb-actions {
    gap: 12px;
  }
}

@media (max-width: 1100px) {
  .rb-article-layout.has-toc {
    grid-template-columns: minmax(0, var(--rb-measure));
  }

  .rb-toc {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  .rb-lead-posts {
    grid-template-columns: minmax(0, 1fr);
  }

  .rb-lead-posts__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) {
  /* The first post alone: its cover beside its text, not a 700 px tall card. */
  .rb-lead-posts.is-single .rb-card--feature {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    padding: 10px;
  }

  .rb-lead-posts.is-single .rb-card--feature .rb-card__body {
    padding: 20px 28px;
  }
}

@media (max-width: 900px) {
  /* 18 px, the gap it had inside the actions, now that it sits beside them. */
  .rb-nav__bar {
    gap: 18px;
  }

  .rb-links {
    display: none;
  }

  .rb-menu-btn {
    display: inline-flex;
  }

  /* The menu hangs from the pinned header, no taller than the screen under it,
     and scrolls on its own. */
  .rb-links.is-open {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 61px);
    max-height: calc(100svh - 61px);
    padding: 6px 24px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--rb-line);
    background: var(--rb-bg);
    box-shadow: var(--rb-shadow-menu);
  }

  .rb-links.is-open a {
    padding: 11px 0;
    border-top: 1px solid var(--rb-line);
    font-size: 15px;
  }

  .rb-links.is-open a:first-child {
    border-top: 0;
  }

  .rb-masthead__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding-top: 56px;
  }

  .rb-masthead--archive .rb-masthead__inner {
    padding-top: 28px;
  }

  .rb-masthead--404 .rb-masthead__inner {
    padding-top: 48px;
    padding-bottom: 36px;
  }

  .rb-cta__title {
    font-size: 36px;
    letter-spacing: -1px;
  }

  .rb-foot__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Touch: every footer link a 40 px target. The logo's extra height hangs
     outside its line, so it stays where the landing draws it. */
  .rb-foot .rb-brand {
    margin: -9px 0;
    padding: 9px 0;
  }

  .rb-foot__col a {
    padding: 9.5px 0;
  }

  .rb-chip {
    min-height: 40px;
  }
}

@media (max-width: 767.98px) {
  .rb-lead-posts__side,
  .rb-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rb-lead-posts,
  .rb-section-block {
    margin-bottom: 48px;
  }

  .rb-listing {
    padding-top: 28px;
  }

  .rb-section-title {
    font-size: 24px;
  }

  .rb-cta {
    margin-bottom: 48px;
    padding: 44px 20px 48px;
  }

  .rb-cta__text {
    font-size: 17px;
  }

  .rb-article {
    padding-top: 20px;
  }

  .rb-article-head {
    margin: 28px 0 28px;
    text-align: left;
  }

  .rb-article-head .rb-eyebrow,
  .rb-article-meta {
    justify-content: flex-start;
  }

  .rb-article-dek {
    margin-left: 0;
    font-size: 18px;
  }

  .rb-article-cover {
    margin-bottom: 32px;
    border-radius: 14px;
  }

  .rb-article-layout {
    margin-bottom: 48px;
  }

  .rb-prose {
    font-size: 17px;
  }

  .rb-prose h2 {
    font-size: 26px;
  }

  .rb-prose h3 {
    font-size: 20px;
  }

  .rb-prose blockquote {
    padding-left: 18px;
    font-size: 18px;
  }

  .rb-prose pre {
    padding-right: 18px;
    padding-left: 18px;
    font-size: 13px;
  }

  .rb-prose table {
    font-size: 14px;
  }

  .rb-prose th,
  .rb-prose td {
    padding: 10px 12px;
  }

  .rb-prose :is(.alignleft, .alignright) {
    float: none;
    margin: 1.5em 0;
  }

  .rb-byline-card {
    padding: 18px;
  }

  .rb-empty {
    padding: 36px 22px;
  }
}

@media (max-width: 782px) {
  .admin-bar .rb-nav {
    top: 46px;
  }
}

@media (max-width: 600px) {
  /* The admin bar scrolls away here. */
  .admin-bar .rb-nav {
    top: 0;
  }

  /* One row of topics that scrolls sideways, edge to edge, instead of five rows
     above the first post. The fade at the right edge says there is more; the
     4 px above keep a focus ring whole. */
  .rb-masthead .rb-topics {
    flex-wrap: nowrap;
    margin: -4px calc(var(--rb-gutter) * -1) 0;
    padding: 4px var(--rb-gutter) 28px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--rb-gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--rb-gutter)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--rb-gutter)), transparent);
  }

  .rb-masthead .rb-topics::-webkit-scrollbar {
    display: none;
  }

  .rb-masthead .rb-chip {
    flex: none;
  }

  /* The page's own title is its heading just below: on a phone the trail stops
     at the parent, and the last crumb is read out only. */
  .rb-breadcrumb li:last-child:not(:first-child) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* On a phone Log in moves into the menu, and the bar and the open menu line up
   with the header's 14 px. */
@media (max-width: 480px) {
  .rb-nav__bar {
    gap: 10px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .rb-actions {
    gap: 10px;
  }

  .rb-nav .rb-btn {
    min-height: 40px;
    padding: 8px 12px;
  }

  .rb-menu-btn {
    padding: 8px;
  }

  .rb-actions .rb-login {
    display: none;
  }

  .rb-links.is-open .rb-login {
    display: block;
  }

  .rb-links.is-open {
    padding-right: 14px;
    padding-left: 14px;
  }

  .rb-card--feature .rb-card__body {
    padding: 16px 10px 0;
  }
}

/* The theme button takes 50 px of a phone's bar: logo, Start free, theme and
   menu needed 361 px where a 360 px screen leaves 332. Here the logo is the
   footer's 22 px, Start free sheds 4 px of padding and the gaps are 6 px, so
   the row needs 327 px (Open dashboard, signed in, as much). The targets stay
   40 px. */
@media (max-width: 400px) {
  .rb-nav__bar,
  .rb-actions {
    gap: 6px;
  }

  .rb-nav .rb-brand {
    padding: 9px 0;
  }

  .rb-nav .rb-mark {
    width: 22px;
    height: 22px;
  }

  .rb-nav .rb-wordmark {
    width: 75.3px;
    height: 22px;
  }

  .rb-nav .rb-btn {
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .rb-card:hover {
    transform: none;
  }
}