/* Cloudfloat Developer Portal — dark app theme in the idiom of the big developer
   platforms: a near-black sidebar beside a charcoal canvas, hairline borders
   rather than filled cards, and one vivid colour — the brand cloud (#FF38AF) —
   kept for primary actions, charts and the few things that must be spotted.
   Sidebar-navigated app shell; centred card for login. */
:root {
  --brand: #ff38af;
  --brand-strong: #ff63c2;
  --brand-tint: rgba(255, 56, 175, 0.14);
  --brand-line: rgba(255, 56, 175, 0.45);
  --on-brand: #ffffff;

  /* ground = sidebar / login backdrop, canvas = the content area. Cards sit on
     the canvas as a slightly lifted surface with a hairline edge. */
  --ground: #131313;
  --canvas: #212121;
  --glow: rgba(255, 56, 175, 0.12);
  --surface: #262626;
  --surface-2: #2f2f2f;
  --inset: #1b1b1b;
  --hover: rgba(255, 255, 255, 0.06);
  --active: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.17);
  --dot: rgba(255, 255, 255, 0.17);
  --dot-soft: rgba(255, 255, 255, 0.09);

  --text: #ededed;
  --text-soft: #c2c2c2;
  --muted: #8f8f8f;
  --ok: #4ade80;

  --danger: #ff6b84;
  --danger-tint: rgba(255, 107, 132, 0.15);

  --ring: 0 0 0 3px rgba(255, 56, 175, 0.45);
  --radius: 12px;
  --radius-sm: 9px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button {
  font: inherit;
}

/* ----- Brand mark (login + sidebar) ----- */
.brand-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px -8px var(--glow);
}
.brand-logo__svg {
  width: 28px;
  height: 20px;
  display: block;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-text__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-text__sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* ----- Loading ----- */
.loading-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  animation: spin 0.7s linear infinite;
}
.muted {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================ Buttons / fields ============================ */
.btn {
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.04s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.btn--block {
  width: 100%;
}
.btn--primary {
  color: var(--on-brand);
  background: var(--brand);
}
.btn--primary:hover {
  background: var(--brand-strong);
}
.btn--primary:disabled {
  opacity: 0.65;
  cursor: progress;
  box-shadow: none;
}
/* The quiet primary: brand-tinted rather than brand-filled. For pages with
   several calls to action side by side (Test data), where filled pink on
   every row shouts. */
.btn--soft {
  color: var(--brand-strong);
  background: var(--brand-tint);
  border-color: var(--brand-line);
}
.btn--soft:hover {
  color: #ffd1ec;
  background: rgba(255, 56, 175, 0.22);
}
.btn--soft:disabled {
  opacity: 0.6;
  cursor: progress;
}
.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-soft);
}
.btn--ghost:hover {
  background: var(--hover);
  color: var(--text);
}
a.btn {
  text-decoration: none;
}
.btn--danger {
  color: var(--danger);
}
.btn--danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-tint);
}
.btn--compact {
  padding: 8px 13px;
  font-size: 13px;
}
.btn__spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  display: none;
  animation: spin 0.6s linear infinite;
}
.btn.is-loading .btn__label {
  opacity: 0.85;
}
.btn.is-loading .btn__spinner {
  display: inline-block;
}
.icon-plus {
  width: 15px;
  height: 15px;
}
/* Inherits the button's currentColor (unlike .nav__icon, which is forced muted). */
.btn__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.field {
  display: block;
  margin-bottom: 15px;
}
.field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-soft);
}
.field__hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.field__hint.is-warn {
  color: var(--danger);
}
.field input,
.field select {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--inset);
  color: var(--text);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.field input::placeholder {
  color: var(--muted);
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.error {
  margin: 0 0 13px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--danger-tint);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.45;
}

/* ============================ Login ============================ */
.login-wrap {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 96px 28px 72px;
  background:
    radial-gradient(820px 460px at 50% -120px, var(--glow), transparent 60%),
    var(--ground);
  overflow: hidden;
}
/* Backdrop dot grid, 14px pitch. Both layers — this grey grid and the pink one
   in #float-bg — share the mask below, which keeps an oval clear round the card
   and lets the pattern come in toward the edges. */
.login-wrap::before,
.float-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 55% at 50% 46%, transparent 18%, #000 80%);
  mask-image: radial-gradient(ellipse 62% 55% at 50% 46%, transparent 18%, #000 80%);
}
/* The clouds fade in closer to the card than the grey grid does, so they stay
   readable across most of the page; the card itself covers the middle. */
.float-bg {
  -webkit-mask-image: radial-gradient(ellipse 46% 42% at 50% 46%, transparent 10%, #000 70%);
  mask-image: radial-gradient(ellipse 46% 42% at 50% 46%, transparent 10%, #000 70%);
}
.login-wrap::before {
  content: "";
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 14px 14px;
}
.float-bg {
  width: 100%;
  height: 100%;
  opacity: 0.75;
}
/* Each cloud crosses the whole viewport, left to right, then starts again off
   the left edge. Negative delays spread them out so the page never opens empty;
   the different speeds give a little parallax. */
.float-drift {
  animation: float-drift 110s linear infinite;
}
.float-drift--a {
  animation-delay: -22s;
}
.float-drift--b {
  animation-duration: 150s;
  animation-delay: -112s;
}
.float-drift--c {
  animation-duration: 90s;
  animation-delay: -75s;
}
@keyframes float-drift {
  from {
    transform: translateX(-440px);
  }
  to {
    transform: translateX(100vw);
  }
}
.float-bob {
  animation: float-bob 7s ease-in-out infinite alternate;
}
.float-bob--slow {
  animation-duration: 10s;
  animation-delay: -4s;
}
.float-bob--fast {
  animation-duration: 5s;
  animation-delay: -2s;
}
@keyframes float-bob {
  from {
    transform: translateY(-3px);
  }
  to {
    transform: translateY(3px);
  }
}
/* Reduced motion: the clouds hold where their negative delay put them. */
@media (prefers-reduced-motion: reduce) {
  .float-drift,
  .float-bob {
    animation-play-state: paused;
  }
}
.login,
.login-hero,
.login-top {
  z-index: 1;
}
/* The hero stacks above the card; align-content keeps the pair centred. */
.login-wrap {
  align-content: center;
  row-gap: 28px;
}
.login-hero {
  position: relative;
  max-width: 560px;
  text-align: center;
}
.login-hero__title {
  margin: 0;
  color: var(--text);
  font-size: 30px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.login-hero__lede {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .login-hero__title {
    font-size: 24px;
  }
}
.login {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.login-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 16px;
  color: var(--muted);
  font-size: 12px;
}
.login-foot a {
  color: var(--muted);
  text-decoration: none;
}
.login-foot a:hover {
  color: var(--text);
}
.login-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 28px;
}
.login-top__links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.login-top__link {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
}
.login-top__link:hover {
  background: var(--hover);
  color: var(--text);
}
.login-top__link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.login__brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
@media (max-width: 760px) {
  .login-top {
    padding: 14px 16px;
  }
  .login-wrap {
    padding-top: 84px;
  }
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8);
}
.card__title {
  margin: 0;
  font-size: 22px;
  font-weight: 720;
  letter-spacing: -0.025em;
}
.card__lede {
  margin: 7px 0 22px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.5;
}
.card__foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Inline text action inside copy (Forgot password?, Back to sign in). */
.text-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-strong);
  font: inherit;
  cursor: pointer;
}
.text-link:hover {
  text-decoration: underline;
}
.text-link:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: var(--ring);
}
.text-link:disabled {
  color: var(--muted);
  cursor: default;
  text-decoration: none;
}
.card__foot .muted {
  font-size: inherit;
}
.field__label--row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.field__label--row .text-link {
  font-size: 12.5px;
  font-weight: 500;
}
/* "or" rule between the password form and the Cloudfloat provider button. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 12.5px;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.btn--provider {
  gap: 10px;
}
.btn--provider__logo {
  width: 22px;
  height: 16px;
  flex: none;
}

/* Continue with Cloudfloat — a provider sign-in popup over the login card. */
.auth-dialog {
  width: min(400px, calc(100vw - 32px));
  padding: 26px 24px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9);
}
.auth-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.auth-dialog__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.auth-dialog__title {
  margin: 0;
  font-size: 17px;
  font-weight: 680;
}
.auth-dialog__sub {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.45;
}
/* "By signing in, you agree to …" at the foot of the login card and in the Cloudfloat dialog. */
.card__legal,
.auth-dialog__legal {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.card__legal {
  margin: 12px 0 0;
  text-align: center;
}
.card__foot.card__legal {
  margin-top: 22px;
  font-size: 12px;
}
.auth-dialog__legal {
  margin: 0;
}
.card__legal a,
.auth-dialog__legal a,
.side__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card__legal a:hover,
.auth-dialog__legal a:hover,
.side__legal a:hover {
  color: var(--text-soft);
}
.auth-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* ============================ App shell ============================ */
.app {
  display: grid;
  grid-template-columns: 252px 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.18s ease;
}
.side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 10px 14px;
  background: var(--ground);
}
.side__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 16px;
}
.side__brand .brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: none;
}
.side__brand .brand-logo__svg {
  width: 22px;
  height: 16px;
}
.side__brand .brand-text__name {
  font-size: 14.5px;
}
/* Collapse / expand toggle — sits at the right of the brand row when expanded,
   centred under the logo when collapsed (the brand row goes column in rail mode). */
.side__toggle {
  flex: none;
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.side__toggle:hover {
  background: var(--hover);
  color: var(--text);
}
.side__toggle:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.side__toggle svg {
  width: 18px;
  height: 18px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 450;
  cursor: pointer;
  text-align: left;
}
.nav__item:hover {
  background: var(--hover);
  color: var(--text);
}
.nav__item:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.nav__item.is-active {
  background: var(--active);
  color: #fff;
  font-weight: 550;
}
.nav__icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}
.nav__item.is-active .nav__icon,
.nav__item:hover .nav__icon {
  color: var(--text);
}
.nav__label {
  flex: 1;
}
a.nav__item {
  text-decoration: none;
}
.nav__ext {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--muted);
}
.nav__soon {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
}
.nav__item:disabled {
  cursor: default;
}
.nav__item:disabled:hover {
  background: transparent;
  color: var(--text-soft);
}
.nav__item:disabled:hover .nav__icon {
  color: var(--muted);
}
.nav__divider {
  height: 1px;
  background: var(--line);
  margin: 8px 10px;
}
.side__spacer {
  flex: 1;
}
.side__account {
  position: relative;
}
.side__user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.side__user:hover,
.side__user[aria-expanded="true"],
.side__user.is-active {
  background: var(--surface-2);
}
.side__user:focus-visible {
  outline: 2px solid var(--line-strong);
  outline-offset: 1px;
}
.side__userinfo {
  display: block;
  min-width: 0;
  flex: 1;
}
.side__email,
.side__platform {
  display: block;
}
.side__chev {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--muted);
}
/* Opens upward from the account button: it sits at the foot of the sidebar. */
.user-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.user-menu[hidden] {
  display: none;
}
.user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.user-menu__item:hover,
.user-menu__item:focus-visible {
  outline: none;
  background: var(--surface);
  color: var(--text);
}
.user-menu__icon {
  flex: none;
  width: 16px;
  height: 16px;
}
.user-menu__divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}
.side__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}
.side__legal a {
  text-decoration: none;
}
.side__legal a:hover {
  text-decoration: underline;
}
.side__email {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side__platform {
  font-size: 11.5px;
  color: var(--muted);
}
.side__platform.is-muted {
  color: var(--muted);
}
.avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 13px;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

/* ----- Main / pages ----- */
.main {
  position: relative;
  min-width: 0;
  padding: 40px 48px 72px;
}
/* The login backdrop's dot grid, quieter and without the clouds: a band across
   the top of the content that fades out before the data starts. */
.main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 360px;
  pointer-events: none;
  background-image: radial-gradient(var(--dot-soft) 1px, transparent 1.3px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
}
.main__inner {
  position: relative;
  /* Fill the available width on larger screens, but hold a ceiling so text
     lines don't get unreadably long. */
  max-width: 1200px;
  margin: 0 auto;
}
.page-head {
  margin-bottom: 22px;
}
.page-head__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
/* Pages carry no heading — the sidebar names them — so the lede is the first
   line on the page: quiet, and sharing a row with the page's main action. */
.page-lede {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 68ch;
}
.page-head__row {
  align-items: center;
}
.note {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ============================ Create form ============================ */
.key-create {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.key-create__grid {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 14px;
}
.key-create__grid .field {
  margin-bottom: 0;
}
.key-create .error {
  margin: 13px 0 0;
}
.key-create__row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* Scope / product pickers in the create form. */
.key-grants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.key-grants__set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.check-list {
  display: grid;
  gap: 6px;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--inset);
  cursor: pointer;
}
.check:hover {
  border-color: var(--line-strong);
}
.check input {
  margin: 2px 0 0;
  accent-color: var(--brand);
}
.check__title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
}
.check__desc {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.check-list .muted {
  font-size: 13px;
}
/* What a key may do, under its stats. */
.key-card__grants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}
.chip.chip--quiet {
  color: var(--text-soft);
  background: var(--hover);
  border-color: var(--line);
}

/* ----- One-time reveal — the memorable moment ----- */
.reveal {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
}
.reveal::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand);
}
.reveal__title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
}
.reveal__msg {
  margin: 0 0 13px;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.reveal__value {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  word-break: break-all;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
}
.reveal__row {
  display: flex;
  gap: 8px;
  margin-top: 13px;
}

/* ============================ Key cards ============================ */
.keys {
  display: grid;
  gap: 12px;
}
.key-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.15s ease;
}
.key-card:hover {
  border-color: var(--line-strong);
}
.key-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.key-card__name {
  font-size: 15.5px;
  font-weight: 660;
  letter-spacing: -0.01em;
}
.key-card__id {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-soft);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 8px;
}
.key-card__controls {
  flex: none;
  display: flex;
  gap: 8px;
}
.key-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 18px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.stat__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat__value {
  font-size: 13px;
  color: var(--text);
  margin-top: 3px;
}
.stat__value.is-empty {
  color: var(--muted);
}

/* ============================ Empty states ============================ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 60px 28px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
}
.empty__icon {
  width: 30px;
  height: 30px;
  color: var(--brand);
}
.empty__title {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
}
.empty__text {
  font-size: 13.5px;
  max-width: 40ch;
  line-height: 1.5;
}

/* ============================ Settings ============================ */
.block {
  margin-bottom: 30px;
}
.block__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.block__head .block__title {
  margin: 0;
}
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  overflow: hidden;
}
.panel:empty {
  display: none;
}
.kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
}
.kv + .kv {
  border-top: 1px solid var(--line);
}
.kv__k {
  font-size: 13px;
  color: var(--text-soft);
}
.kv__v {
  font-size: 13.5px;
  font-weight: 550;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
}
.device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
}
.device + .device {
  border-top: 1px solid var(--line);
}
.device__name {
  font-weight: 600;
  font-size: 14px;
}
.device__meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.device__badge {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ----- Settings · Business row (a kv row that expands into an inline editor) ----- */
/* Settings → API access: one row per published scope. */
.access-row {
  align-items: flex-start;
}
.access-row__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.access-row__title {
  font-size: 13.5px;
  font-weight: 600;
}
.access-row__id {
  justify-self: start;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-soft);
}
.access-row__desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.access-badge {
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.access-badge.is-granted {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.1);
  color: var(--ok);
}
.kv__right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kv__right--edit {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.kv__v.is-muted {
  color: var(--muted);
  font-weight: 500;
}
.kv__select {
  flex: 0 1 300px;
  min-width: 0;
  font: inherit;
  font-size: 13.5px;
  padding: 7px 30px 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--inset);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.kv__select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
/* ---- Team page + org switcher ---- */
/* Members reuse the device row; the right side carries status, role and actions,
   and wraps under the email on a narrow screen rather than squeezing it. */
.team-row {
  flex-wrap: wrap;
}
.team-row__main {
  min-width: 0;
  flex: 1 1 260px;
}
.team-row__you {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  vertical-align: 1px;
}
.team-row__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.team-row__status.is-suspended {
  color: var(--danger);
  background: var(--danger-tint);
  border-color: var(--danger);
}
/* Same box as .kv__select, sized for a one-word role. */
.team-row__role,
.org-switch__select {
  font: inherit;
  font-size: 13px;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--inset);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(50% - 2px),
    calc(100% - 10px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.team-row__role:focus,
.org-switch__select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.team-roles {
  margin-top: 18px;
}
.team-roles__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 12px 0 0;
  font-size: 13px;
}
.team-roles__list dt {
  font-weight: 600;
}
.team-roles__list dd {
  margin: 0;
  color: var(--text-soft);
}
.org-switch {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 8px 10px;
}
.org-switch__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.org-switch__select {
  width: 100%;
}
.app.is-rail .org-switch {
  display: none;
}
.biz-err {
  flex-basis: 100%;
  margin-top: 4px;
  text-align: right;
  font-size: 12px;
  color: var(--danger);
}
/* Text twin of .kv__select for the URL rows — same box, no dropdown arrow, and
   wider because a return URL carrying a {quote_id} template is long. */
.kv__input {
  flex: 1 1 340px;
  min-width: 0;
  font: inherit;
  font-size: 13.5px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--inset);
  color: var(--text);
}
.kv__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
/* A saved URL is long and must stay readable; wrap rather than truncate, since
   spotting a wrong path is the whole point of showing it. */
.kv__v--url {
  font-family: var(--mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
/* Warning line under a settings row. Two contexts: below a whole block (like the
   webhook one) or in between panel rows (the return URL). */
.kv-note {
  margin: 8px 2px 0;
}
/* In-panel: align with the rows' 18px inset instead of hugging the panel edge, and
   let the row above supply the gap via its own bottom padding. */
.panel > .kv-note {
  margin: 0;
  padding: 0 18px 14px;
}
/* Row dividers come from `.kv + .kv`, which an interleaved note breaks — the row
   AFTER it would silently lose its top border. Restore it for that case rather than
   moving the note out of the panel, since it belongs to the row above it. Matches on
   DOM adjacency, so it holds whether or not the note is currently `hidden`. */
.kv-note + .kv {
  border-top: 1px solid var(--line);
}
.kv-note.is-warn {
  color: var(--danger);
}
/* --- Webhook endpoint card (Webhooks page) ---------------------------------- */
.wh-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px;
  border-style: dashed;
  border-color: var(--line-strong);
}
.wh-empty__icon {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--brand);
}
.wh-empty__body {
  flex: 1;
  min-width: 0;
}
.wh-empty__title {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 3px;
}
.wh-empty__text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.wh-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.wh-card__url {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.wh-card__url .kv__v {
  text-align: left;
  font-size: 13.5px;
  color: var(--text);
}
.wh-card__actions {
  display: flex;
  gap: 8px;
  flex: none;
}
/* Live-endpoint indicator: a steady dot with a slow ring. */
.wh-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
}
.wh-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--ok);
  opacity: 0;
  animation: wh-ring 2.4s ease-out infinite;
}
@keyframes wh-ring {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.wh-secret {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.wh-events {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.wh-event {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--inset);
  color: var(--text-soft);
}
.wh-roll-confirm {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--brand-tint);
}
.wh-roll-confirm + .kv {
  border-top: 1px solid var(--line);
}
.wh-roll-confirm__msg {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}
.wh-roll-confirm__row,
.wh-editor__row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.wh-editor {
  padding: 18px 20px;
  background: var(--surface);
  border-color: var(--brand-line);
}
.wh-editor .field {
  margin-bottom: 8px;
}
.wh-editor .field input {
  font-family: var(--mono);
  font-size: 13.5px;
}
.wh-editor .pg-key-hint {
  margin-bottom: 14px;
}
.wh-editor .error {
  margin: 0 0 12px;
}
.reveal.is-arriving {
  animation: pg-rise 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (max-width: 640px) {
  .wh-empty,
  .wh-card__head {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wh-pulse::after {
    animation: none;
  }
}
.wh-spec {
  margin-top: 12px;
}
.wh-spec > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}
.wh-spec__code {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--inset);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  overflow-x: auto;
}

/* ============================ Usage ============================ */
.stats4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.statcard {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.statcard__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.statcard__value {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 720;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.usage-note {
  margin-bottom: 16px;
}
.usage-recent-title {
  margin: 0 0 12px;
}
.usage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
}
.usage-item + .usage-item {
  border-top: 1px solid var(--line);
}
.usage-item__main {
  min-width: 0;
}
.usage-item__ep {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.usage-item__method {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand);
}
.usage-item__route {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-item__when {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.usage-item__right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.usage-item__lat {
  min-width: 52px;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Status colours encode the response band (2xx/4xx/5xx) — semantic, not decoration. */
.status-badge {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 7px;
  border: 1px solid var(--line);
  color: var(--text-soft);
  background: var(--inset);
  font-variant-numeric: tabular-nums;
}
.status-badge.is-ok {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.12);
}
.status-badge.is-warn {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.12);
}
.status-badge.is-err {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-tint);
}

/* ============================ Playground ============================ */
.inline-code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--inset);
  border: 1px solid var(--line);
  color: var(--text-soft);
}

/* Shared API key card — full-width, prominent */
.pg-key-card {
  margin-bottom: 20px;
}
/* The card is a .panel of .kv rows, but the optional pasted-key editor and the
   footnote sit between rows, so the row divider is drawn on every child instead
   of relying on the .kv + .kv adjacency rule. */
.pg-key-card > * + * {
  border-top: 1px solid var(--line);
}
.pg-key-card .kv__v {
  text-align: left;
}
.pg-key-card .kv__v.is-live {
  color: var(--brand-strong);
}
.pg-key-custom {
  padding: 14px 18px 12px;
  background: var(--inset);
}
.pg-key-custom .field {
  margin-bottom: 6px;
}
.pg-key-custom .field input {
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.01em;
}
.pg-key-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.pg-key-card__foot {
  padding: 10px 18px 12px;
}
.pg-key-card a.btn {
  text-decoration: none;
}

/* Two-column layout: endpoint list + panel */
.pg-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}

/* Endpoint list — column of selectable rows */
.pg-endpoints {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pg-ep {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.13s ease,
    border-color 0.13s ease,
    color 0.13s ease;
}
.pg-ep:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--text);
}
.pg-ep.is-active {
  background: var(--brand-tint);
  border-color: var(--brand-line);
  color: #fff;
}
.pg-ep:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.pg-ep__top {
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Method pill */
.pg-ep__method {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  flex-shrink: 0;
}
.pg-ep__method--post {
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
}
.pg-ep__method--get {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
}
.pg-ep.is-active .pg-ep__method--post {
  color: #fff;
  background: rgba(255, 56, 175, 0.35);
  border-color: rgba(255, 255, 255, 0.3);
}
.pg-ep.is-active .pg-ep__method--get {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.5);
}
.pg-ep__path {
  min-width: 0;
  /* Templated paths (/quotes/{quote_id}/invoice) are longer than the column;
     the list breaks them only after a slash (pathWithBreaks). */
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  /* override inline-code for slightly larger display in the list */
  padding: 0;
  border: none;
  background: none;
}
.pg-ep.is-active .pg-ep__path {
  color: #fff;
}
/* Section heads in the endpoint list (Quotes, Payments, …). */
.pg-ep-group {
  margin: 10px 2px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pg-ep-group:first-child {
  margin-top: 0;
}
/* The scope a route needs. Neutral when granted, amber when the account lacks it. */
.pg-ep__scope {
  align-self: flex-start;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
}
.pg-ep__scope.is-missing {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
}
.pg-panel__head .pg-ep__scope {
  align-self: center;
}
.pg-scope-note {
  margin: -6px 0 16px;
  color: #fbbf24;
}
.pg-file {
  padding: 8px 10px;
  color: var(--text-soft);
  font-size: 13px;
}
.pg-file::file-selector-button {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.pg-ep__summary {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.3;
}
.pg-ep.is-active .pg-ep__summary {
  color: rgba(255, 255, 255, 0.65);
}

/* Right column — request panel + response stacked at a shared width. */
.pg-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pg-panel {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}
.pg-panel__head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
/* reuse the pill style in the panel header too */
.pg-panel__head .pg-ep__method {
  font-size: 11px;
  padding: 3px 8px;
}
.pg-panel__head .pg-ep__path {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--inset);
  border: 1px solid var(--line);
  padding: 1px 7px;
  border-radius: 6px;
}
.pg-panel__summary {
  font-size: 13px;
  color: var(--muted);
}
/* Inline "go read the reference" link, used in the Playground lede and in the
   request panel head (where it is pushed to the far right). */
.doc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.doc-link:hover {
  text-decoration: underline;
}
.doc-link:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: var(--ring);
}
.doc-link__icon {
  width: 13px;
  height: 13px;
  flex: none;
}
.pg-panel__doc {
  margin-left: auto;
}
/* Fields laid out in a tidy two-up grid so short values (ABN, premium, names,
   phone) don't sprawl the full panel width. The product picker and the
   no-params note span the full row. */
.pg-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-bottom: 16px;
}
.pg-fields .field {
  margin-bottom: 0;
}
.pg-field--full {
  grid-column: 1 / -1;
}
.pg-no-params {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.pg-panel .error {
  margin: 0 0 14px;
}

/* Response viewer — sits in .pg-main directly under the request panel. */
.pg-result {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.pg-result__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.pg-result__title {
  margin: 0;
}
.pg-body {
  margin: 0;
  padding: 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  /* Long JSON bodies scroll inside the viewer instead of stretching the page. */
  overflow: auto;
  max-height: 460px;
  white-space: pre;
}

/* ===================== Collapsed sidebar (rail) ===================== */
/* Modelled on the big developer platforms: the rail keeps only the toggle (at
   the top, where the brand row was), one 40px icon button per page, and the
   avatar. Labels move into hover / focus tooltips. Scoped to the desktop
   layout — below 760px the sidebar is a horizontal bar and the toggle is
   hidden. */
@media (min-width: 761px) {
  .app.is-rail {
    grid-template-columns: 64px 1fr;
  }
  .app.is-rail .side {
    align-items: center;
    padding: 14px 12px;
  }
  .app.is-rail .side__brand {
    justify-content: center;
    padding: 0 0 12px;
  }
  .app.is-rail .side__brand .brand-logo,
  .app.is-rail .brand-text {
    display: none;
  }
  .app.is-rail .side__toggle {
    margin: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .app.is-rail .nav {
    align-items: center;
  }
  .app.is-rail .nav__item {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
  }
  .app.is-rail .nav__label,
  .app.is-rail .nav__soon,
  .app.is-rail .nav__ext {
    display: none;
  }
  .app.is-rail .nav__divider {
    width: 24px;
    margin: 8px auto;
  }
  .app.is-rail .side__user {
    justify-content: center;
  }
  .app.is-rail .side__user {
    width: 40px;
    height: 40px;
    padding: 0;
  }
  .app.is-rail .side__userinfo,
  .app.is-rail .side__chev {
    display: none;
  }
  /* No room above the avatar in the rail: open beside it instead. */
  .app.is-rail .user-menu {
    left: calc(100% + 10px);
    right: auto;
    bottom: 0;
    width: 190px;
  }
  .app.is-rail .side__user[aria-expanded="true"]::after {
    display: none;
  }
  .app.is-rail .side__legal {
    display: none;
  }

  /* Tooltip: the label a collapsed item no longer shows. data-tip is set from
     each item's own label in portal.js, so the two can't drift. */
  .app.is-rail [data-tip] {
    position: relative;
  }
  .app.is-rail [data-tip]:hover::after,
  .app.is-rail [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 30;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  }
}

/* ============================ Responsive ============================ */
@media (max-width: 760px) {
  .side__toggle {
    display: none;
  }
  .app {
    grid-template-columns: 1fr;
  }
  .side {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--line);
    gap: 8px;
    padding: 12px 14px;
  }
  .side__brand {
    padding: 0;
    margin-right: auto;
  }
  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .nav__soon,
  .nav__divider,
  .side__spacer {
    display: none;
  }
  .side__account {
    order: 5;
    flex: 1 1 200px;
  }
  /* The bar is at the top of the page here: drop the menu down. */
  .user-menu {
    top: calc(100% + 6px);
    bottom: auto;
  }
  .side__legal {
    order: 6;
    width: 100%;
    justify-content: flex-start;
    margin-top: 0;
  }
  .main {
    padding: 24px 18px 56px;
  }
  .key-grants {
    grid-template-columns: 1fr;
  }
  .key-create__grid {
    grid-template-columns: 1fr;
  }
  .key-card__stats {
    grid-template-columns: 1fr 1fr;
  }
  .stats4 {
    grid-template-columns: 1fr 1fr;
  }
  .pg-layout {
    grid-template-columns: 1fr;
  }
  .pg-endpoints {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .pg-ep {
    flex: 1 1 140px;
  }
  .pg-fields {
    grid-template-columns: 1fr;
  }
}

/* --- Playground: loading stage ---------------------------------------------
   One of three children shows at a time. The skeleton mirrors the real layout
   (auth card, endpoint column, panel) so the swap doesn't move anything. */
.pg-stage[data-state="loading"] > .pg-ready,
.pg-stage[data-state="loading"] > .pg-failed,
.pg-stage[data-state="ready"] > .pg-skeleton,
.pg-stage[data-state="ready"] > .pg-failed,
.pg-stage[data-state="failed"] > .pg-skeleton,
.pg-stage[data-state="failed"] > .pg-ready {
  display: none;
}
.pg-stage[data-state="ready"] > .pg-ready {
  animation: pg-fade-in 0.28s ease both;
}
.pg-stage[data-state="ready"] .pg-ep {
  animation: pg-rise 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
.pg-stage[data-state="ready"] .pg-panel {
  animation: pg-rise 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s both;
}
@keyframes pg-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes pg-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.skel {
  display: block;
  border-radius: 7px;
  background: linear-gradient(
      100deg,
      transparent 20%,
      rgba(255, 255, 255, 0.07) 50%,
      transparent 80%
    )
    var(--surface-2);
  background-size: 200% 100%;
  animation: skel-sweep 1.3s ease-in-out infinite;
}
@keyframes skel-sweep {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}
.skel--card {
  height: 92px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background-color: var(--surface);
  border: 1px solid var(--line);
}
.skel--ep {
  height: 62px;
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  border: 1px solid var(--line);
}
.pg-skeleton .pg-endpoints {
  gap: 6px;
}
.skel-row {
  display: flex;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.skel--pill {
  width: 46px;
  height: 20px;
}
.skel--path {
  width: 38%;
  height: 20px;
}
.skel--label {
  width: 34%;
  height: 11px;
  margin-bottom: 10px;
}
.skel--input {
  height: 42px;
  border-radius: var(--radius-sm);
}
.skel--btn {
  width: 132px;
  height: 40px;
  border-radius: var(--radius-sm);
}
.skel--line {
  height: 11px;
  margin: 4px 0 12px;
}
/* Staggered so the sweep reads as one wave across the page, not a blink. */
.pg-skeleton .skel:nth-child(2n) {
  animation-delay: 0.12s;
}
.pg-skeleton .skel:nth-child(3n) {
  animation-delay: 0.24s;
}
.pg-skeleton__label {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}
.pg-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  border-style: dashed;
  border-color: var(--line-strong);
}
.pg-failed .btn {
  margin-top: 8px;
}

/* --- Playground: in-flight request ------------------------------------------ */
.pg-result.is-pending .pg-body {
  white-space: normal;
}
.status-badge.is-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-weight: 600;
  color: var(--brand-strong);
  border-color: var(--brand-line);
  background: var(--brand-tint);
}
.status-badge.is-pending::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pg-blink 0.9s ease-in-out infinite;
}
@keyframes pg-blink {
  50% {
    opacity: 0.25;
  }
}
.pg-result__time {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pg-result {
  animation: pg-rise 0.26s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.pg-result.is-fresh .pg-body {
  animation: pg-fade-in 0.3s ease both;
}
.pg-result.is-fresh .status-badge {
  animation: pg-pop 0.32s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
@keyframes pg-pop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .btn__spinner,
  .skel,
  .status-badge.is-pending::before {
    animation: none;
  }
  .pg-stage[data-state="ready"] > .pg-ready,
  .pg-stage[data-state="ready"] .pg-ep,
  .pg-stage[data-state="ready"] .pg-panel,
  .pg-result,
  .pg-result.is-fresh .pg-body,
  .pg-result.is-fresh .status-badge,
  .reveal.is-arriving {
    animation: none;
  }
}

/* --- saved businesses (Settings) ------------------------------------------ */
.sb-form {
  margin-bottom: 14px;
  padding: 16px 18px 14px;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.sb-form__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 650;
}
.sb-form__grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr 1fr;
  gap: 12px;
}
.sb-form__grid .field {
  margin-bottom: 8px;
}
.sb-form__grid--contact {
  grid-template-columns: 1fr 1fr 1.6fr 1fr;
}
.sb-form__sub {
  margin: 8px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
}
.field__opt {
  margin-left: 6px;
  font-weight: 400;
  color: var(--muted);
}
#sb-abn {
  font-family: var(--mono);
}
#sb-abn:read-only {
  color: var(--text-soft);
}
.sb-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.sb-search {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--inset);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}
.sb-search:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.sb-count {
  flex: none;
  font-size: 12.5px;
  color: var(--muted);
}
.sb-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 18px;
}
.sb-row + .sb-row {
  border-top: 1px solid var(--line);
}
.sb-row__abn {
  flex: none;
  min-width: 15ch;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.sb-row__text {
  flex: 1;
  min-width: 0;
}
.sb-row__main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-row__contact {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}
.sb-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 550;
}
.sb-row__name.is-muted {
  color: var(--muted);
  font-weight: 450;
}
.sb-tag {
  flex: none;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-strong);
  font-size: 11.5px;
  font-weight: 600;
}
.sb-row__controls {
  flex: none;
  display: flex;
  gap: 6px;
}
.sb-none {
  padding: 14px 18px;
}
.sb-more {
  margin-top: 10px;
}
@media (max-width: 760px) {
  .sb-form__grid,
  .sb-form__grid--contact {
    grid-template-columns: 1fr;
  }
  .sb-row {
    flex-wrap: wrap;
  }
  .sb-row__abn {
    min-width: 0;
  }
}

/* --- Playground ABN typeahead ------------------------------------------- */
.pg-abn {
  position: relative;
}
.pg-abn__menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.pg-abn__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.pg-abn__option:hover,
.pg-abn__option:focus-visible {
  background: var(--brand-tint);
  outline: none;
}
.pg-abn__option code {
  flex: none;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.pg-abn__option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-soft);
}
.pg-abn__more {
  padding: 6px 10px 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.pg-abn__save {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-strong);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.pg-abn__save:hover {
  text-decoration: underline;
}
.pg-abn__save:disabled {
  color: var(--muted);
  cursor: default;
  text-decoration: none;
}

/* ============================ Home ============================ */
.home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.home-title {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.home-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.home-sub strong {
  color: var(--text-soft);
  font-weight: 550;
}
.home-section {
  margin-bottom: 36px;
  min-width: 0;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  min-height: 34px;
}
.section-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Text-only control for section heads (Dismiss, View all). */
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
}
.link-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.link-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.link-btn svg {
  width: 14px;
  height: 14px;
}

/* ----- Announcement band ----- */
.band {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(255, 56, 175, 0.16), rgba(255, 56, 175, 0.03) 70%),
    var(--canvas);
  font-size: 14px;
}
.band__tag {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.band__text {
  min-width: 0;
  color: var(--text);
}
.band__link {
  flex: none;
  color: var(--brand-strong);
  font-weight: 600;
  text-decoration: none;
}
.band__link:hover {
  text-decoration: underline;
}
.band__close {
  flex: none;
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.band__close:hover {
  background: var(--hover);
  color: var(--text);
}
.band__close svg {
  width: 15px;
  height: 15px;
}

/* ----- Get started ----- */
.start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.start__steps {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  font-size: 14.5px;
  font-weight: 500;
}
.step a {
  color: inherit;
  text-decoration: none;
}
.step a:hover {
  text-decoration: underline;
}
.step__mark {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 650;
}
.step.is-done .step__mark {
  background: #16a34a;
  color: #fff;
}
.step.is-done .step__label {
  color: var(--text-soft);
}
.step__mark svg {
  width: 16px;
  height: 16px;
}
.start__art {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  min-height: 190px;
  background:
    radial-gradient(420px 220px at 85% 0%, rgba(255, 56, 175, 0.55), transparent 70%),
    radial-gradient(360px 240px at 30% 110%, rgba(124, 92, 255, 0.45), transparent 70%),
    radial-gradient(300px 200px at 100% 100%, rgba(255, 170, 90, 0.35), transparent 70%),
    #1a1a1a;
}
.start__cloud {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 64px;
  height: 46px;
  opacity: 0.9;
}
.start__links {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.start__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(6px);
  color: var(--text);
  text-decoration: none;
}
.start__link:hover {
  border-color: rgba(255, 255, 255, 0.28);
}
.start__link-title {
  font-size: 14px;
  font-weight: 600;
}
.start__link-sub {
  font-size: 12.5px;
  color: var(--muted);
}

/* ----- Range selector ----- */
.seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--inset);
}
.seg__btn {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.seg__btn:hover {
  color: var(--text);
}
.seg__btn.is-active {
  background: var(--surface-2);
  color: #fff;
}
.seg__btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ----- Metric grid: hairline cells, like one table ----- */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  /* Inner hairlines: every cell draws its right + bottom edge, and the grid's
     own border (overflow hidden) trims the outer ones. */
  box-shadow:
    1px 0 0 var(--line),
    0 1px 0 var(--line);
  transition: background 0.13s ease;
}
.metric:hover {
  background: rgba(255, 255, 255, 0.025);
}
.metric:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand-line);
}
.metric__label {
  font-size: 13.5px;
  color: var(--muted);
}
.metric:hover .metric__label {
  color: var(--text-soft);
}
.metric__chev {
  display: inline-block;
  margin-left: 2px;
}
.metric__value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.metric__meta {
  margin-top: auto;
  font-size: 12.5px;
  color: var(--muted);
}
.spark {
  position: relative;
  display: block;
  margin-top: auto;
  height: 44px;
}
.spark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.spark__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.spark__tip b {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ----- Recent + updates ----- */
.home-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px;
}
.panel--note {
  padding: 16px 18px;
}
.updates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.update {
  display: flex;
  gap: 14px;
}
.update__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-strong);
}
.update__icon svg {
  width: 18px;
  height: 18px;
}
.update__when {
  font-size: 12.5px;
  color: var(--muted);
}
.update__title {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
}
.update__text {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 1080px) {
  .home-cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .start {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .home-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .home-title {
    font-size: 28px;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .start__links {
    grid-template-columns: 1fr;
  }
  .band {
    flex-wrap: wrap;
  }
}

/* ============================ Webhooks ============================ */
.whl-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.whl-toolbar .seg {
  flex: none;
}
.whl-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 2px 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.whl-summary b {
  color: var(--text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.whl-summary__item.is-err b {
  color: var(--danger);
}
.whl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.whl-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.whl-group.has-failed {
  border-color: rgba(255, 107, 132, 0.35);
}
.whl-group.is-open {
  background: rgba(255, 255, 255, 0.015);
}
.whl-group__head,
.whl-delivery__head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.whl-group__head:hover,
.whl-delivery__head:hover {
  background: var(--hover);
}
.whl-group__head:focus-visible,
.whl-delivery__head:focus-visible {
  outline: none;
  box-shadow: inset var(--ring);
}
.whl-group__id {
  flex: 0 1 280px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.whl-group__kind {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.whl-group__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
}
.whl-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 11px;
  color: var(--text-soft);
}
.whl-life {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.whl-life__arrow {
  color: var(--muted);
  font-size: 12px;
}
.whl-pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--line);
}
.whl-pill.is-ok {
  color: var(--ok);
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.1);
}
.whl-pill.is-err {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-tint);
}
.whl-group__meta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 12.5px;
  color: var(--text-soft);
}
.whl-group__meta .is-err {
  color: var(--danger);
}
.whl-group__when,
.whl-delivery__when {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.whl-chev {
  flex: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.is-open > button > .whl-chev {
  transform: rotate(90deg);
}
.whl-group__body {
  border-top: 1px solid var(--line);
}
.whl-group__tools {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px 0;
}
.whl-delivery + .whl-delivery {
  border-top: 1px solid var(--line);
}
.whl-delivery__head {
  padding: 10px 16px 10px 22px;
  font-size: 13px;
}
.whl-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.whl-dot.is-ok {
  background: var(--ok);
}
.whl-dot.is-err {
  background: var(--danger);
}
.whl-delivery__type {
  flex: none;
  width: 13ch;
  font-weight: 600;
}
.whl-delivery__code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.whl-delivery__trigger {
  flex: none;
  font-size: 12px;
  color: var(--text-soft);
}
.whl-detail {
  padding: 4px 22px 18px;
}
.whl-facts {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.whl-kv {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  font-size: 12.5px;
}
.whl-kv + .whl-kv {
  border-top: 1px solid var(--line);
}
.whl-kv__k {
  flex: none;
  width: 190px;
  color: var(--muted);
}
.whl-kv__v {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}
code.whl-kv__v {
  font-family: var(--mono);
  font-size: 12px;
}
.whl-kv__v.is-muted {
  color: var(--muted);
}
.whl-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 8px;
}
.whl-block-head .block__title {
  margin: 0;
}
.whl-body {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--inset);
  max-height: 320px;
}
.whl-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ============================ Test data ============================ */
.td-intro {
  margin: 0 0 14px;
  max-width: 72ch;
  line-height: 1.55;
}
.td-pattern {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.td-pattern__part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--inset);
}
.td-pattern__part code {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.td-pattern__part span {
  font-size: 11px;
  color: var(--muted);
}
.td-pattern__part.is-marker code {
  color: var(--brand-strong);
}
.td-pattern__part.is-digit {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.td-outcome {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 18px;
}
.td-outcome + .td-outcome {
  border-top: 1px solid var(--line);
}
.td-outcome.is-active {
  background: var(--hover);
}
.td-outcome__digit {
  flex: none;
  width: 8ch;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-soft);
}
.td-outcome__text {
  flex: 1;
  min-width: 0;
}
.td-outcome__name {
  font-size: 13.5px;
  font-weight: 600;
}
.td-outcome__effect {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.td-outcome__saved {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-soft);
}
.td-outcome__saved.is-muted {
  color: var(--muted);
}
.td-outcome__controls {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 55%;
}
.td-outcome__confirm {
  flex-basis: 100%;
  text-align: right;
  font-size: 12px;
  color: #fbbf24;
}
.td-result__name {
  font-size: 13px;
  color: var(--text-soft);
}
.td-result.is-new {
  border-style: dashed;
}
.td-saved {
  margin-top: 18px;
}
.td-saved .section-head {
  margin-bottom: 8px;
}
.td-saved__row.is-active {
  background: var(--hover);
}
.td-chip--good {
  color: var(--ok);
  background: rgba(74, 222, 128, 0.12);
}
.td-chip--bad {
  color: var(--danger);
  background: var(--danger-tint);
}
.pg-test__confirm {
  flex-basis: 100%;
  color: #fbbf24;
}
.td-result {
  margin-top: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.td-result__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.td-result__label {
  font-size: 12.5px;
  color: var(--muted);
}
.td-result__abn {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.04em;
  user-select: all;
}
.td-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.td-result__msg {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-soft);
}
.td-rules {
  margin: 10px 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
.td-rules li + li {
  margin-top: 6px;
}
.td-rules b {
  color: var(--text);
}
.td-suppliers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.td-supplier {
  padding: 16px 18px;
}
.td-supplier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.td-supplier__name {
  font-size: 15px;
  font-weight: 650;
}
.td-supplier__abn {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text-soft);
  user-select: all;
}
.td-supplier__summary {
  margin: 10px 0 0;
  font-size: 13.5px;
}

/* Playground shortcuts under the ABN fields. */
.pg-test {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
/* The ABN menu's sections (buyer field: "Saved — reuse", then "New test ABN"). */
.pg-abn__group {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-abn__option + .pg-abn__group,
.pg-abn__more + .pg-abn__group {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pg-abn__option strong {
  flex: none;
  font-weight: 600;
}
.pg-abn__chip {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.pg-abn__confirm {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #fbbf24;
}
.pg-test__btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-strong);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.pg-test__btn:hover {
  text-decoration: underline;
}
.pg-test__hint {
  color: var(--ok);
}
.pg-test__hint.is-tip {
  color: var(--muted);
}

@media (max-width: 760px) {
  .whl-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .whl-group__head {
    flex-wrap: wrap;
  }
  .whl-group__id {
    flex-basis: 100%;
  }
  .whl-delivery__code,
  .whl-delivery__trigger {
    display: none;
  }
  .whl-kv {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .whl-kv__k {
    width: auto;
  }
  .td-outcome {
    flex-wrap: wrap;
  }
}

/* Quick save: the short form behind "save to my list" (Playground ABN fields,
   Test data's result card). */
.qs {
  padding: 14px 16px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.td-result .qs {
  margin-top: 12px;
}
.qs__title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
}
.qs__title code {
  font-family: var(--mono);
  font-size: 12.5px;
}
.qs__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px 12px;
}
.qs__grid--contact {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.qs .field {
  margin-bottom: 0;
}
.qs .field input {
  padding: 8px 11px;
  font-size: 13.5px;
}
.qs__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.qs__note {
  font-size: 12px;
  color: var(--muted);
}
.qs__error {
  margin: 8px 0 0;
}
@media (max-width: 760px) {
  .qs__grid,
  .qs__grid--contact {
    grid-template-columns: 1fr;
  }
}