.upstream-billing-note,
.upstream-billing-notice {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.upstream-billing-notice {
  padding: 10px 12px;
  border: 1px solid rgba(180, 122, 20, .2);
  border-radius: 8px;
  background: rgba(180, 122, 20, .06);
  color: #91621a;
}
.upstream-billing-attempt {
  min-width: 0;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.upstream-billing-attempt > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  padding: 13px 14px;
  cursor: pointer;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.upstream-billing-attempt > summary > span { grid-column: 1; color: var(--muted); }
.upstream-billing-attempt > summary::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.upstream-billing-attempt[open] > summary::after { transform: rotate(45deg); }
.upstream-billing-attempt > summary::-webkit-details-marker { display: none; }
.upstream-billing-attempt > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.upstream-billing-attempt-content { min-width: 0; padding: 0 14px 14px; }
.upstream-billing-http + .upstream-billing-http { margin-top: 18px; }
.upstream-billing-http-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 10px;
  font-size: 12px;
}
.upstream-billing-http-heading > span,
.upstream-billing-fragment-heading > span { color: var(--muted); font-size: 11px; }
.upstream-billing-fragment-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.upstream-billing-fragment-heading > button { flex: 0 0 auto; font-size: 11px; }
.upstream-billing-fragment + .upstream-billing-fragment { margin-top: 12px; }
.upstream-billing-fragment pre {
  max-width: 100%;
  max-height: 320px;
  margin: 6px 0 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, .025);
  font: 11px/1.7 var(--font-mono, monospace);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  tab-size: 2;
}
@media (max-width: 640px) {
  .upstream-billing-attempt > summary { padding: 12px; }
  .upstream-billing-attempt-content { padding: 0 12px 12px; }
  .upstream-billing-fragment pre { padding: 10px; }
}
