/* Lombard API docs theme.
 *
 * Colours come from Scalar's built-in default dark theme (set in docs.go via
 * theme: "default", darkMode: true). This file adds only an ombré page
 * background, in the style of the xStocks API reference.
 *
 * NOTE: making --scalar-background-1 transparent depends on the loaded Scalar
 * version — confirm in-browser and adjust if the gradient doesn't show.
 */

html,
body {
  margin: 0;
}

/* Self-serve wallet-JWT helper (markup in docs.go, logic in wallet.js).
 * Styled with Scalar's design tokens (--scalar-*) so it matches the rendered
 * docs theme; fallbacks keep it sensible if the tokens aren't in scope. */
#lombard-wallet {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  font-family: var(--scalar-font, ui-sans-serif, system-ui, -apple-system, sans-serif);
  font-size: var(--scalar-font-size-3, 13px);
  line-height: 1.45;
}
/* Primary actions (launch / connect / copy): Scalar's accent button. */
#lombard-wallet button {
  cursor: pointer;
  border: 0;
  border-radius: var(--scalar-radius, 8px);
  padding: 8px 12px;
  font-weight: var(--scalar-bold, 600);
  font-family: inherit;
  font-size: inherit;
  background: var(--scalar-button-1, var(--scalar-color-accent, #00e676));
  color: var(--scalar-button-1-color, #ffffff);
}
#lombard-wallet button:hover {
  background: var(--scalar-button-1-hover, var(--scalar-color-accent, #00e676));
}
#lw-panel {
  margin-top: 8px;
  width: 280px;
  padding: 14px;
  border-radius: var(--scalar-radius-lg, 12px);
  background: var(--scalar-background-2, #14181d);
  border: 1px solid var(--scalar-border-color, rgba(255, 255, 255, 0.12));
  color: var(--scalar-color-1, #f4f6f8);
  box-shadow: var(--scalar-shadow-2, 0 10px 30px rgba(0, 0, 0, 0.45));
}
#lw-panel .lw-title {
  margin: 0 0 10px;
  font-weight: var(--scalar-bold, 700);
  color: var(--scalar-color-1, #f4f6f8);
}
#lw-panel .lw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--scalar-color-2, #b7c0c9);
}
#lw-panel select {
  background: var(--scalar-background-3, #0a0c0d);
  color: var(--scalar-color-1, #f4f6f8);
  border: 1px solid var(--scalar-border-color, rgba(255, 255, 255, 0.16));
  border-radius: var(--scalar-radius, 6px);
  padding: 4px 6px;
  font-family: inherit;
}
#lw-connect {
  width: 100%;
}
#lw-status {
  margin: 10px 0 0;
  min-height: 1.2em;
  color: var(--scalar-color-2, #b7c0c9);
}
#lw-token {
  width: 100%;
  margin-top: 10px;
  resize: vertical;
  font-family: var(--scalar-font-code, ui-monospace, monospace);
  font-size: 11px;
  background: var(--scalar-background-3, #0a0c0d);
  color: var(--scalar-color-1, #f4f6f8);
  border: 1px solid var(--scalar-border-color, rgba(255, 255, 255, 0.16));
  border-radius: var(--scalar-radius, 6px);
  padding: 6px;
  box-sizing: border-box;
}
#lw-copy {
  margin-top: 8px;
  width: 100%;
}