/* RocketShipIt documentation
   ------------------------------------------------------------------------- */

:root {
  --brand: #265995;
  --brand-dark: #1c4270;
  --brand-light: #eaf1f9;
  --accent: #e57635;
  --text: #1f2933;
  --text-muted: #5c6b7a;
  --border: #dfe4ea;
  --bg: #ffffff;
  --bg-subtle: #f7f9fb;
  --code-bg: #f5f7fa;
  --header-height: 3.75rem;
  --sidebar-width: 17rem;
  --toc-width: 14rem;
  --content-max: 48rem;
  /* --content-max plus the horizontal padding on .content. */
  --content-column: 53rem;
}

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

html {
  /* Anchored headings must clear the sticky header. */
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--brand);
  color: #fff;
}

.skip-link:focus {
  left: 1rem;
  top: 0.5rem;
}

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--brand);
  color: #fff;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-height);
  /* Full width so the brand lines up with the flush-left sidebar below it. */
  padding: 0 1.25rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
}

.site-header__brand:hover {
  text-decoration: none;
}

.site-header__brand img {
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

/* Direct children only: on mobile docs.js moves the sidebar into this nav, and
   its lists must keep their own layout. */
.site-nav > ul {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav > ul a {
  color: #fff;
  font-weight: 500;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background: #fff;
}

/* Algolia DocSearch renders its own button; align it with the header. */
.site-search .DocSearch-Button {
  margin: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.site-search .DocSearch-Button:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

/* DocSearch's own stylesheet loads after ours and colors the icon with
   .DocSearch-Button .DocSearch-Search-Icon, so match that specificity. */
.site-search .DocSearch-Button-Placeholder,
.site-search .DocSearch-Button .DocSearch-Search-Icon,
.site-search .DocSearch-Button:hover .DocSearch-Search-Icon {
  color: #fff;
}

/* Layout ------------------------------------------------------------------ */

/* Full bleed: the sidebar sits against the left edge of the window, and the
   article and its table of contents share the rest, centred by the two 1fr
   gutter columns so they don't drift apart on a wide screen. */
.layout {
  display: grid;
  grid-template-columns:
    var(--sidebar-width)
    minmax(0, 1fr)
    minmax(0, var(--content-column))
    var(--toc-width)
    minmax(0, 1fr);
  align-items: start;
}

/* Short pages get no table of contents, but they keep the column reserved: the
   article then sits in the same place on every page instead of sliding
   sideways as you move between them. */

.sidebar {
  grid-column: 1;
  position: sticky;
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height));
  padding: 1.75rem 1rem 3rem 1.25rem;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}

/* Thin, page-coloured scrollbars for the two sticky columns.
   scrollbar-width/-color cover Firefox and Safari; Chrome takes the
   ::-webkit-scrollbar rules. */
.sidebar,
.toc {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar:hover,
.toc:hover {
  scrollbar-color: var(--text-muted) transparent;
}

.sidebar::-webkit-scrollbar,
.toc::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-track,
.toc::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb,
.toc::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 4px;
  /* Padding the thumb in from the edge keeps it clear of the link text. */
  background: var(--border);
  background-clip: content-box;
}

.sidebar:hover::-webkit-scrollbar-thumb,
.toc:hover::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  background-clip: content-box;
}

.sidebar__group + .sidebar__group {
  margin-top: 1.5rem;
}

.sidebar__heading {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar__link {
  display: block;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  color: var(--text);
  font-size: 0.925rem;
}

.sidebar__link:hover {
  background: var(--bg-subtle);
  text-decoration: none;
}

.sidebar__link.is-active {
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 600;
}

.content {
  grid-column: 3;
  min-width: 0;
  padding: 2rem 2.5rem 4rem;
}

.doc {
  max-width: var(--content-max);
  /* Long identifiers, bare URLs and inline code would otherwise make the page
     wider than a phone screen. The document then scrolls sideways and the
     sticky header, which is only as wide as the viewport, stops short of the
     right edge when you pan or zoom out. Code blocks are unaffected: they are
     white-space: pre and scroll inside their own box. */
  overflow-wrap: break-word;
}

.toc {
  grid-column: 4;
  position: sticky;
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height));
  padding: 2rem 1.25rem 3rem 0;
  overflow-y: auto;
}

.toc__heading {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toc ul {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
  list-style: none;
}

.toc__item a {
  display: block;
  padding: 0.25rem 0 0.25rem 0.75rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.toc__item--h3 a {
  padding-left: 1.5rem;
}

.toc__item a:hover,
.toc__item a.is-active {
  border-left-color: var(--accent);
  color: var(--brand);
  text-decoration: none;
}

/* Article ----------------------------------------------------------------- */

.doc h1 {
  margin: 0 0 1.5rem;
  font-size: 2.1rem;
  line-height: 1.2;
}

.doc h2 {
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.5rem;
  line-height: 1.3;
}

.doc h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.2rem;
}

.doc h4 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.05rem;
}

/* Every markdown heading carries the "#" that links to itself. It stays out of
   the way until the heading is hovered, or until the link takes keyboard focus
   -- which is the only way to reach it without a pointer. */

.hash-link {
  padding-left: 0.4rem;
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.hash-link:hover,
.hash-link:focus {
  color: var(--brand);
  text-decoration: none;
}

.doc :hover > .hash-link,
.hash-link:focus {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hash-link {
    transition: none;
  }
}

/* No hover on a touch screen, so show it -- faintly -- all the time. */
@media (hover: none) {
  .hash-link {
    opacity: 0.45;
  }
}

.doc p,
.doc ul,
.doc ol {
  margin: 0 0 1.1rem;
}

.doc li + li {
  margin-top: 0.35rem;
}

.doc img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.doc blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1.1rem;
  border-left: 4px solid var(--accent);
  background: var(--bg-subtle);
  color: var(--text-muted);
}

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

.doc hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.doc code {
  padding: 0.15em 0.4em;
  border-radius: 3px;
  background: var(--code-bg);
  color: var(--text);
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.875em;
}

.doc pre {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--code-bg);
  overflow-x: auto;
}

.doc pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* Wide reference tables are common here; let them scroll rather than
   overflowing the page. */
.table-scroll {
  margin: 0 0 1.25rem;
  overflow-x: auto;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.doc th,
.doc td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.doc thead th {
  background: var(--bg-subtle);
  font-weight: 600;
}

/* Pager ------------------------------------------------------------------- */

.doc-pager {
  display: flex;
  gap: 1rem;
  max-width: var(--content-max);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.doc-pager__link {
  flex: 1;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.doc-pager__link:hover {
  border-color: var(--brand);
  text-decoration: none;
}

.doc-pager__link--next {
  margin-left: auto;
  text-align: right;
}

.doc-pager__link span {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Landing page ------------------------------------------------------------ */

.hero {
  padding: 4rem 1.5rem 3rem;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  text-align: center;
}

.hero__logo {
  margin-bottom: 1rem;
}

.hero__title {
  margin: 0;
  font-size: 2.75rem;
  line-height: 1.1;
}

.hero__tagline {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  opacity: 0.9;
}

.hero__lead {
  max-width: 40rem;
  margin: 1.25rem auto 0;
  opacity: 0.85;
}

.hero__actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.button {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
}

.button:hover {
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.button--primary {
  border-color: var(--accent);
  background: var(--accent);
}

.button--primary:hover {
  background: #d0651f;
}

.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.highlight {
  display: block;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
}

.highlight:hover {
  border-color: var(--brand);
  text-decoration: none;
}

.highlight h2 {
  margin: 0 0 0.4rem;
  color: var(--brand);
  font-size: 1.1rem;
}

.highlight p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.925rem;
}

/* API examples ------------------------------------------------------------
   The generated pages under /2-0/examples/ (cmd/rs-examples-to-html) load this
   stylesheet too, so both halves of the host share one design. They have no
   sidebar: a single centred column, a little wider than a doc page because the
   code samples want the room. */

.examples {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.examples h1 {
  margin: 0 0 1rem;
  font-size: 2.1rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.examples__lead {
  margin: 0 0 2rem;
  color: var(--text-muted);
}

.examples__heading {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.breadcrumb {
  margin-bottom: 1.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.carrier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.carrier-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.95rem;
}

.carrier-card:hover {
  border-color: var(--brand);
  background: var(--bg-subtle);
  text-decoration: none;
}

.carrier-card__count {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.carrier-card:hover .carrier-card__count {
  background: var(--brand-light);
  color: var(--brand-dark);
}

.example-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.example-card {
  display: block;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}

.example-card:hover {
  border-color: var(--brand);
  background: var(--bg-subtle);
  text-decoration: none;
}

.example-card__title {
  display: block;
  font-weight: 600;
}

.example-card__desc {
  display: block;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.example-meta {
  margin: 0 0 1.75rem;
  padding: 0.85rem 1.1rem;
  border-left: 4px solid var(--accent);
  border-radius: 0 4px 4px 0;
  background: var(--bg-subtle);
  font-size: 0.95rem;
}

.example-meta div {
  display: flex;
  gap: 0.5rem;
}

.example-meta div + div {
  margin-top: 0.25rem;
}

.example-meta dt {
  min-width: 4.5rem;
  color: var(--text-muted);
  font-weight: 600;
}

.example-meta dd {
  margin: 0;
}

.example-meta code {
  padding: 0.15em 0.4em;
  border-radius: 3px;
  background: var(--code-bg);
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.875em;
}

/* Code samples ------------------------------------------------------------ */

.code-tabs {
  margin: 0 0 2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.code-tabs__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.5rem;
  background: var(--brand);
}

.code-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tab-btn,
.copy-btn {
  padding: 0.35rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.tab-btn:hover,
.copy-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.tab-btn.is-active {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.22);
  font-weight: 600;
}

.copy-btn {
  flex: none;
  border-color: rgba(255, 255, 255, 0.35);
}

/* One panel per language, all in the markup: with JavaScript off the JSON
   request still shows. */
.code-panel {
  display: none;
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--code-bg);
  overflow-x: auto;
}

.code-panel.is-active {
  display: block;
}

/* highlight.js's theme loads after this file and paints .hljs white; the two
   selectors below are more specific, so the panel keeps its own background. */
.code-panel code {
  padding: 0;
  background: none;
  color: inherit;
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.55;
}

.back-link {
  font-weight: 500;
}

.related {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.related h2 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  margin-top: auto;
  padding: 2.5rem 1.5rem 2rem;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2rem;
  max-width: 68rem;
  margin: 0 auto;
}

.site-footer h2 {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 0.35rem;
}

.site-footer__legal {
  max-width: 68rem;
  margin: 2rem auto 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .content {
    grid-column: 2;
  }

  .toc {
    display: none;
  }
}

@media (max-width: 800px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar,
  .content {
    grid-column: 1;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    /* The drawer holds the doc nav too, so it can outgrow the screen. dvh
       tracks the iOS toolbars; vh is the fallback. */
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--brand-dark);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav > ul {
    flex-direction: column;
    gap: 0.6rem;
  }

  /* Sidebar left in the flow: the no-JS fallback, and what the landing page
     never has. docs.js moves it into the drawer above. */
  .sidebar {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  /* ...and how it looks once docs.js has moved it in. */
  .site-nav .sidebar {
    padding: 1rem 0 0;
    border-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    overflow: visible;
  }

  .site-nav .sidebar__heading {
    color: rgba(255, 255, 255, 0.7);
  }

  .site-nav .sidebar__link {
    color: #fff;
  }

  .site-nav .sidebar__link:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .site-nav .sidebar__link.is-active {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  .content {
    padding: 1.5rem 1.25rem 3rem;
  }

  .hero__title {
    font-size: 2.1rem;
  }

  .doc-pager {
    flex-direction: column;
  }

  .doc-pager__link--next {
    text-align: left;
  }
}