/* ==========================================================================
   Beam eWallet — design tokens

   Colors are pulled from beamlivesa.co.za's own stylesheet (the accent blue,
   the SafeRides green, and the same neutral gray scale they use), so this
   product reads as part of the Beam family rather than a different app that
   happens to share a name. Typography matches their site too: Open Sans.
   ========================================================================== */

:root {
  --beam-blue: #1e87f0;
  --beam-blue-dark: #1565c0;
  --beam-blue-light: #eaf4fe;
  --beam-green: #00a651;
  --beam-green-dark: #05893f;
  --beam-yellow: #ffcc00;
  --beam-red: #f04438;

  --gray-900: #1d2939;
  --gray-800: #26324a;
  --gray-700: #344054;
  --gray-500: #667085;
  --gray-300: #d0d5dd;
  --gray-200: #eaecf0;
  --gray-100: #f2f4f7;
  --gray-50: #f9fafb;
  --white: #ffffff;

  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--gray-50);
}

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

a:hover {
  color: var(--beam-blue-dark);
  text-decoration: underline;
}

/* ==========================================================================
   Brand mark — "beam" wordmark + the four-color stripe from their logo,
   built in CSS rather than shipping their raster logo, so it scales cleanly
   and can carry the "eWallet" sub-brand next to it.
   ========================================================================== */

.beam-mark {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}

.beam-mark:hover {
  text-decoration: none;
}

.beam-mark__stripe {
  display: flex;
  height: 5px;
  width: 68px;
  border-radius: 3px;
  overflow: hidden;
}

.beam-mark__stripe span {
  flex: 1;
}

.beam-mark__stripe span:nth-child(1) { background: var(--beam-blue); }
.beam-mark__stripe span:nth-child(2) { background: var(--beam-green); }
.beam-mark__stripe span:nth-child(3) { background: var(--beam-yellow); }
.beam-mark__stripe span:nth-child(4) { background: var(--beam-red); }

.beam-mark__word {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  line-height: 1;
}

.beam-mark__word strong {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

.beam-mark__word span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-500);
}

.beam-mark--small .beam-mark__stripe { width: 44px; height: 4px; }
.beam-mark--small .beam-mark__word strong { font-size: 1.25rem; }
.beam-mark--small .beam-mark__word span { font-size: 0.75rem; }

.beam-mark--light .beam-mark__word strong { color: var(--white); }
.beam-mark--light .beam-mark__word span { color: rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   App shell — top nav used by every page except the auth split-screen ones.
   ========================================================================== */

.app-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}

.app-header__bar {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.app-nav a {
  color: var(--gray-700);
  font-weight: 600;
  font-size: 0.95rem;
}

.app-nav a:hover {
  color: var(--beam-blue);
  text-decoration: none;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Hamburger toggle: hidden on desktop, replaces the inline nav on narrow screens.
   site.js flips .nav-open on .app-header (and aria-expanded on the button). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 40px;
  padding: 0 9px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--gray-700);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* The bar wraps: mark + toggle stay on the first row; the nav and account actions
     become full-width rows below it, shown only while the menu is open. */
  .app-header__bar {
    flex-wrap: wrap;
  }

  .app-nav,
  .app-header__actions {
    display: none;
  }

  .nav-open .app-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
  }

  .nav-open .app-nav a {
    padding: 0.7rem 0.25rem;
  }

  .nav-open .app-header__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0 0.75rem;
    border-top: 1px solid var(--gray-200);
  }

  .nav-open .app-header__actions a {
    padding: 0.25rem;
  }

  .nav-open .app-header__actions form {
    display: contents;
  }
}

.app-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.app-footer {
  border-top: 1px solid var(--gray-200);
  color: var(--gray-500);
  font-size: 0.85rem;
}

.app-footer__bar {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* ==========================================================================
   Buttons & form controls
   ========================================================================== */

.btn {
  /* This stylesheet has no global border-box rule, so anything sized width:100% must
     opt in itself or its padding+border land OUTSIDE that width — .btn-block buttons
     were ~42px wider than their container, which desktop's wide panels absorbed but
     which gave every phone-width screen a horizontal scrollbar (found live on UAT's
     homepage). Same reason .field input declares border-box further down. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--beam-blue);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--beam-blue-dark);
  color: var(--white);
}

.btn-block {
  width: 100%;
}

.btn-ghost {
  background: transparent;
  color: var(--gray-700);
  border-color: var(--gray-300);
}

.btn-ghost:hover {
  background: var(--gray-50);
  color: var(--gray-900);
  text-decoration: none;
}

.btn-small {
  font-size: 0.8rem;
  padding: 0.4rem 0.85rem;
}

/* A pager arrow with nowhere to go: rendered as a span rather than a link, so it needs
   the flat look a real disabled button would get from the attribute. */
.btn.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.field {
  margin-bottom: 1.15rem;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-700);
  margin-bottom: 0.4rem;
}

.field .field-hint {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 0.35rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus {
  outline: none;
  border-color: var(--beam-blue);
  box-shadow: 0 0 0 3px var(--beam-blue-light);
}

.field .input-validation-error {
  border-color: var(--beam-red);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--gray-700);
  margin-bottom: 1.25rem;
}

.field-check input {
  margin-top: 0.2rem;
}

.text-danger,
.validation-summary-errors {
  color: var(--beam-red);
  font-size: 0.85rem;
}

.validation-summary-errors ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.alert {
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.alert-danger {
  background: #fef3f2;
  color: #b42318;
  border: 1px solid #fee4e2;
}

.alert-success {
  background: #e7f8ee;
  color: var(--beam-green-dark);
  border: 1px solid #c8f0d9;
}

.alert-info {
  background: var(--beam-blue-light);
  color: var(--beam-blue-dark);
  border: 1px solid #d3e9fc;
}

.page-narrow {
  max-width: 480px;
  margin: 0 auto;
}

/* ==========================================================================
   Auth split-screen (Login / Register)
   ========================================================================== */

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.auth-shell__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  color: var(--white);
  background: linear-gradient(155deg, #0f6fd6 0%, #1e87f0 45%, #00a651 100%);
  overflow: hidden;
}

.auth-shell__panel::before,
.auth-shell__panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.auth-shell__panel::before {
  width: 420px;
  height: 420px;
  right: -140px;
  top: -160px;
}

.auth-shell__panel::after {
  width: 280px;
  height: 280px;
  left: -100px;
  bottom: -80px;
  background: rgba(255, 255, 255, 0.06);
}

.auth-shell__panel-content {
  position: relative;
  z-index: 1;
}

.auth-shell__tagline {
  margin-top: 2.5rem;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 26ch;
}

.auth-shell__features {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.auth-shell__features li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.auth-shell__features li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.auth-shell__footnote {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

.auth-shell__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: var(--white);
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-card__mark {
  display: none;
  margin-bottom: 2rem;
}

.auth-card h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0 0 0.4rem;
}

.auth-card__subtitle {
  color: var(--gray-500);
  font-size: 0.95rem;
  margin: 0 0 2rem;
}

.auth-card__switch {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--gray-700);
}

.auth-card__switch a {
  font-weight: 700;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: var(--gray-500);
  font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-shell__panel {
    display: none;
  }

  .auth-card__mark {
    display: inline-flex;
  }
}

/* ==========================================================================
   Landing page
   ========================================================================== */

.hero {
  text-align: center;
  padding: 3rem 0 2rem;
}

.hero h1 {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 0.75rem;
}

.hero p {
  color: var(--gray-500);
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 0 auto 2rem;
}

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

/* The homepage shares the auth split-screen shell; these are its right-card extras.
   (.hero above stays: Account/AccessDenied still uses it.) */

/* The "this is an early POC" warning on the homepage card: amber so it reads as a
   caution rather than blending into the marketing copy around it. */
.poc-notice {
  background: #fff8e1;
  border: 1px solid #f5e3a3;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #7a5600;
  margin: 0 0 1.5rem;
}

.poc-notice strong {
  color: #5f4300;
}

.landing-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.landing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.landing-list h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.15rem;
}

.landing-list p {
  font-size: 0.875rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   Wallet dashboard
   ========================================================================== */

.wallet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 800px) {
  .wallet-grid {
    grid-template-columns: 1fr;
  }
}

.balance-card {
  background: linear-gradient(135deg, #0f6fd6 0%, #1e87f0 55%, #00a651 130%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.balance-card__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.balance-card__amount {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.balance-card__hint {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.balance-card__meta {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

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

.panel h2 {
  font-size: 1.05rem;
  color: var(--gray-900);
  margin: 0 0 0.4rem;
}

.panel__hint {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin: 0 0 1.25rem;
}

.ledger-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ledger-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--gray-100);
}

.ledger-row:last-child {
  border-bottom: none;
}

.ledger-row__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: none;
}

.ledger-row__icon--credit {
  background: #e7f8ee;
  color: var(--beam-green-dark);
}

.ledger-row__icon--debit {
  background: var(--gray-100);
  color: var(--gray-700);
}

.ledger-row__details {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.ledger-row__type {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray-900);
}

.ledger-row__description {
  font-size: 0.8rem;
  color: var(--gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-row__date {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.ledger-row__amount {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.ledger-row__amount--credit {
  color: var(--beam-green-dark);
}

.ledger-row__amount--debit {
  color: var(--gray-900);
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge--completed {
  background: #e7f8ee;
  color: var(--beam-green-dark);
}

.badge--pending {
  background: #fff8e1;
  color: #a15c00;
}

.badge--reversed {
  background: #fef3f2;
  color: #b42318;
}

.badge--cancelled,
.badge--expired {
  background: var(--gray-100);
  color: var(--gray-700);
}

.badge--failed,
.badge--declined {
  background: #fef3f2;
  color: #b42318;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--gray-100);
}

.pager__count {
  font-size: 0.8rem;
  color: var(--gray-500);
}

.pager__controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pager__position {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}

/* ==========================================================================
   Wallet dashboard — dev tools
   ========================================================================== */

.dev-panel {
  margin-top: 1.5rem;
}

.dev-panel__recompute {
  margin-bottom: 1.5rem;
}

.dev-panel__subhead {
  font-size: 0.9rem;
  color: var(--gray-900);
  margin: 1.5rem 0 0.75rem;
}

.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.dev-form label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gray-700);
  margin-bottom: 0.4rem;
}

.dev-form__row {
  display: flex;
  gap: 0.5rem;
}

.dev-form__row input[type="number"] {
  min-width: 0;
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-900);
}

.hold-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.hold-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.85rem;
}

.hold-row:last-child {
  border-bottom: none;
}

.hold-row__amount {
  font-weight: 700;
  color: var(--gray-900);
}

.hold-row__note,
.hold-row__date {
  color: var(--gray-500);
}

.hold-row__action {
  margin-left: auto;
}

.hold-row__action + .hold-row__action {
  margin-left: 0.5rem;
}

.hold-row__action .btn {
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
}

/* ==========================================================================
   Data tables (partner portal; anywhere the main shell needs a plain table)
   ========================================================================== */

.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.data-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}

.data-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--gray-50);
}

/* ==========================================================================
   Partner API documentation pages (Areas/Partner/Views/Docs)
   ========================================================================== */

.docs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.docs-nav a {
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-100);
  text-decoration: none;
}

.docs-nav a:hover {
  background: var(--gray-200);
  text-decoration: none;
}

.docs-nav a.active {
  background: var(--beam-blue);
  color: var(--white);
}

.docs-code {
  background: #1a2332;
  color: #dce4f0;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  font-family: "Consolas", "Menlo", ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.docs-code code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

.panel code,
.data-table code {
  font-family: "Consolas", "Menlo", ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 0.08em 0.35em;
}

/* The inline-code pill above must never reach code inside a dark sample block: it ties
   with .docs-code code on specificity and sits later in the file, so without this
   higher-specificity reset every line of a .docs-code block renders as a light pill
   with light text (caught live on the docs pages). */
.panel pre code,
pre.docs-code code {
  font-size: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
}

.method-chip {
  display: inline-block;
  font-family: "Consolas", "Menlo", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  border-radius: 6px;
  padding: 0.15rem 0.55rem;
  margin-right: 0.45rem;
  vertical-align: middle;
}

.method-chip--get {
  background: var(--beam-blue-dark);
}

.method-chip--post {
  background: var(--beam-green);
}

.docs-endpoint-route {
  font-family: "Consolas", "Menlo", ui-monospace, monospace;
  font-size: 0.92rem;
  font-weight: 600;
}

.docs-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  padding: 0;
  margin: 0 0 0.5rem;
  list-style: none;
  font-size: 0.85rem;
}