/* Reusable UI components: badges, callouts, cards, code-copy, etc. */

/* HTTP method badges */
.method-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xs);
  padding: 0.25em 0.65em;
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.method-badge.get { color: var(--method-get); background: var(--method-get-bg); }
.method-badge.post { color: var(--method-post); background: var(--method-post-bg); }
.method-badge.delete { color: var(--method-delete); background: var(--method-delete-bg); }
.method-badge.patch { color: var(--method-patch); background: var(--method-patch-bg); }

.endpoint-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  margin: 1.2rem 0 1.6rem;
}
.endpoint-header code.path {
  font-size: var(--fs-lg);
  background: none;
  color: var(--text-primary);
  padding: 0;
}

/* Callouts */
.callout {
  border-left: 4px solid var(--border-strong);
  background: var(--bg-callout);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
  display: flex;
  gap: 0.7rem;
}
.callout svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 0.15em; }
.callout .callout-body p:last-child { margin-bottom: 0; }
.callout .callout-title { font-weight: 700; margin-bottom: 0.2em; display: block; }

.callout.info { border-left-color: var(--info-color); background: var(--info-bg); }
.callout.info svg, .callout.info .callout-title { color: var(--info-color); }

.callout.warning { border-left-color: var(--warning-color); background: var(--warning-bg); }
.callout.warning svg, .callout.warning .callout-title { color: var(--warning-color); }

.callout.danger { border-left-color: var(--danger-color); background: var(--danger-bg); }
.callout.danger svg, .callout.danger .callout-title { color: var(--danger-color); }

.callout.success { border-left-color: var(--success-color); background: var(--success-bg); }
.callout.success svg, .callout.success .callout-title { color: var(--success-color); }

.callout.tip { border-left-color: var(--tip-color); background: var(--tip-bg); }
.callout.tip svg, .callout.tip .callout-title { color: var(--tip-color); }

/* Code block copy button */
.code-block-wrap { position: relative; margin: 1.2rem 0; }
.code-block-wrap pre { margin: 0; }
.copy-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--bg-sidebar);
  color: #e2e8f0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-family: var(--font-sans);
  opacity: 0.85;
}
.copy-btn:hover { opacity: 1; }
.copy-btn.copied { background: var(--success-color); color: #fff; border-color: var(--success-color); }

.code-lang-label {
  position: absolute;
  top: 0.6rem;
  left: 0.9rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Language tabs */
.code-tabs { margin: 1.2rem 0; }
.code-tabs__nav {
  display: flex;
  gap: 0.2rem;
  border-bottom: 1px solid var(--border-color);
}
.code-tabs__btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.code-tabs__btn.active { color: var(--accent-600); border-bottom-color: var(--accent-600); font-weight: 600; }
.code-tabs__panel { display: none; }
.code-tabs__panel.active { display: block; }
.code-tabs__panel .code-block-wrap { margin-top: 0; }

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
}
.card h3 { margin-top: 0; font-size: var(--fs-base); }
.card p { font-size: var(--fs-sm); margin-bottom: 0; }
.card a.card-link { color: var(--text-primary); }
.card a.card-link:hover { text-decoration: none; }
.card a.card-link:hover h3 { color: var(--accent-600); }

/* TL;DR / Next steps / What you'll learn boxes */
.box {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
  background: var(--bg-card);
}
.box-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--accent-600);
  margin-bottom: 0.5rem;
}
.box ul { margin-bottom: 0; }

/* Disclosure (schema viewer) */
details.schema-section {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: 0.8rem 0;
  background: var(--bg-card);
}
details.schema-section summary {
  cursor: pointer;
  padding: 0.8rem 1.1rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
details.schema-section summary::-webkit-details-marker { display: none; }
details.schema-section summary::before {
  content: '\25B8';
  display: inline-block;
  color: var(--accent-600);
  transition: transform 0.15s ease;
}
details.schema-section[open] summary::before { transform: rotate(90deg); }
details.schema-section .schema-body { padding: 0 1.1rem 1.1rem; }
details.schema-section table { margin-top: 0; }

/* Badges for required/optional */
.req-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
}
.req-badge.required { color: var(--danger-color); background: var(--danger-bg); }
.req-badge.optional { color: var(--text-muted); background: var(--bg-table-head); }

/* Error code table status pill */
.status-pill {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xs);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  background: var(--bg-table-head);
}

/* Step list (numbered process) */
.steps { padding-left: 0; list-style: none; counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1.1rem;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent-600);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent-600); }

/* Tag pill for changelog versions */
.version-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--accent-600);
  color: #fff;
  padding: 0.15em 0.6em;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}