/* Project overrides — single source of truth for site-wide style adjustments.
   Add semantic class names here rather than repeating Tailwind utility strings
   across multiple templates. Use CSS custom properties so classes respond to themes. */

/* ── Content card (white panel, border, shadow) ──────────── */

.card {
  border-radius: 0.5rem;
  background-color: var(--bg-card);
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: 1px solid var(--border);
}

/* ── Secondary tool-category nav bar ─────────────────────── */

.subnav {
  border-top: 1px solid var(--border);
  background-color: var(--bg-nav);
}

.subnav-inner {
  margin-left: auto;
  margin-right: auto;
  width: 92%;
  max-width: 1536px;
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.subnav-link {
  font-size: 0.875rem;      /* text-sm — matches nav-link */
  font-weight: 500;
  color: var(--text-1);     /* same as nav-link */
  padding: 0.25rem 0.75rem;
  line-height: 1;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  transition: color 0.1s;
}

.subnav-link:first-child      { padding-left: 0; }
.subnav-link:last-child       { border-right: none; }
.subnav-link:hover            { color: var(--accent); }
.subnav-link-active           { color: var(--accent) !important; font-weight: 600; }

/* ── Primary CTA button (product / monitoring pages) ─────── */

.cta-primary-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  background-color: var(--accent);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background-color 0.15s;
}
.cta-primary-btn:hover { background-color: var(--accent-dark, #4338ca); color: #fff; }

/* ── "Start Monitoring" CTA block on tool pages ───────────── */

.monitoring-cta {
  background: linear-gradient(135deg, #eef2ff 0%, #f0fdf4 100%);
  border: 1px solid #c7d2fe;
  border-radius: 0.75rem;
  padding: 2rem;
}

/* Full conversion module (tools with per-tool copy — see conversion-module.md) */
.monitoring-cta .cta-hook {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-dark, #4338ca);
  margin-bottom: 0.5rem;
}
.monitoring-cta .cta-headline {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem;
}
.cta-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
}
.cta-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #475569;
}
@media (max-width: 640px) {
  .cta-features { grid-template-columns: 1fr; }
}
.cta-action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.cta-trial {
  font-size: 0.8125rem;
  color: #64748b;
}
/* Related links — secondary to the CTA, separated by a hairline */
.cta-related {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #c7d2fe;
  font-size: 0.8125rem;
  color: #64748b;
}
.cta-related-label { font-weight: 600; color: #475569; margin-right: 0.5rem; }
.cta-related a { color: var(--accent, #4f46e5); text-decoration: none; }
.cta-related a:hover { text-decoration: underline; }
.cta-related .cta-dot { margin: 0 0.4rem; color: #94a3b8; }

/* ── Product page feature grid ───────────────────────────── */

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

.feature-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

/* ── Modal dialog ─────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 0.4);
}

.modal-box {
  width: 100%;
  max-width: 24rem;
  border-radius: 0.75rem;
  background-color: var(--bg-card);
  padding: 1.5rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.modal-box-lg { max-width: 32rem; }

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-1);
}

/* ── FAQ accordion (reusable across tools) ───────────────── */

.faq-section { margin-top: 3rem; }

.faq-heading {
  text-align: center;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 1.5rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background-color: var(--bg-card);
  padding: 1rem 1.25rem;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text-1);
}

.faq-question::-webkit-details-marker { display: none; }

.faq-chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

.faq-item[open] .faq-chevron { transform: rotate(0deg); }

.faq-answer {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--text-2);
}

.faq-answer p + p { margin-top: 0.75rem; }
.faq-answer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  background-color: var(--accent-subtle);
  color: var(--accent-subtle-text);
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
}
.faq-answer pre {
  margin-top: 0.5rem;
  background-color: #0f172a;
  color: #e2e8f0;
  border-radius: 0.375rem;
  padding: 0.75rem;
  font-size: 0.75rem;
  overflow-x: auto;
}
.faq-answer pre code { background: none; color: inherit; padding: 0; }
.faq-answer ul { margin-top: 0.5rem; list-style: disc; padding-left: 1.25rem; }
.faq-answer li + li { margin-top: 0.25rem; }
.faq-answer strong { color: var(--text-1); }

/* ── CORS verdict checklist ──────────────────────────────── */

.verdict-banner {
  border-radius: 0.5rem;
  border: 1px solid;
  padding: 0.875rem 1rem;
  text-align: center;
}
.verdict-banner.blocked { border-color: #fecaca; background-color: #fef2f2; }
.verdict-banner.allowed { border-color: #a7f3d0; background-color: #ecfdf5; }
.verdict-title { font-weight: 700; }
.verdict-banner.blocked .verdict-title { color: #b91c1c; }
.verdict-banner.allowed .verdict-title { color: #047857; }
.verdict-sub { margin-top: 0.125rem; font-size: 0.75rem; color: var(--text-2); }

.check-row { display: flex; align-items: flex-start; gap: 0.625rem; }
.check-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; }
.check-icon.pass { color: #10b981; }
.check-icon.fail { color: #ef4444; }
.check-icon.info { color: #64748b; }
.check-title { font-weight: 600; color: var(--text-1); }
.check-detail { font-size: 0.8125rem; color: var(--text-2); margin-top: 0.0625rem; }

/* ── Dynamic header rows (request builder) ───────────────── */

.kv-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.kv-remove {
  color: #94a3b8;
  padding: 0.25rem;
  line-height: 1;
  font-size: 1.125rem;
}
.kv-remove:hover { color: #ef4444; }

/* ── Collapsible config section header (Body / Headers) ──── */

.config-section {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text-1);
}
.config-section::-webkit-details-marker { display: none; }
.config-chevron {
  width: 1rem;
  height: 1rem;
  color: var(--text-2);
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}
details[open] > .config-section .config-chevron { transform: rotate(0deg); }

/* ── Select (native dropdown styled to match form-input) ─── */

.form-select {
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid #cbd5e1;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  background-color: var(--bg-card);
  color: var(--text-1);
}
.form-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* ── Catalog / index page ─────────────────────────────────── */

.catalog-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
  color: var(--text-1);
}

.catalog-description {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--text-2);
}

/* ── Generic page header ──────────────────────────────────── */

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  color: var(--text-1);
}
/*
.page-subtitle {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-2);
}
*/

.page-subtitle  { margin-top: 0.5rem; font-weight: 600; color: var(--text-2); }

/* ── Tool header (name + summary inside a tool page) ─────── */

.tool-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
  color: var(--text-1);
}

.tool-summary {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-2);
}

/* ── Alert / notification boxes ──────────────────────────── */

.alert {
  margin-top: 1rem;
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.alert-error {
  border-color: #fecaca;
  background-color: #fef2f2;
  color: #b91c1c;
}

.alert-warning {
  border-color: #fde68a;
  background-color: #fffbeb;
  color: #92400e;
}

.alert-success {
  border-color: #a7f3d0;
  background-color: #ecfdf5;
  color: #065f46;
}

.alert-info {
  border-color: #e2e8f0;
  background-color: #f8fafc;
  color: #475569;
}

/* ── Form elements ────────────────────────────────────────── */

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-1);
}

.form-input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  border-radius: 0.375rem;
  border: 1px solid #cbd5e1;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  background-color: var(--bg-card);
  color: var(--text-1);
}

.form-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* ── Restricted-tool badge ("login") ─────────────────────── */

.badge-login {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
  background-color: #e2e8f0;
  color: #475569;
  padding: 0.125rem 0.375rem;
}

/* ── Section label (small caps, muted) ───────────────────── */

.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
}

/* ── Strong label text ────────────────────────────────────── */

.text-strong {
  font-weight: 600;
  color: var(--text-1);
}

/* ── Table primitives ─────────────────────────────────────── */

.tr-sep {
  border-bottom: 1px solid #f1f5f9;
}

.td-label {
  padding: 0.375rem 1rem 0.375rem 0;
  color: var(--text-2);
}

.th {
  padding: 0.5rem 1rem 0.5rem 0;
  font-weight: 500;
}

.th-left {
  text-align: left;
  padding: 0.5rem 1rem;
}

/* ── Single-field form layout (input + submit side-by-side ≥sm) ── */

.form-row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* ── Monospace form input ─────────────────────────────────── */

.form-input-mono {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  border-radius: 0.375rem;
  border: 1px solid #cbd5e1;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background-color: var(--bg-card);
  color: var(--text-1);
}

.form-input-mono:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* ── Hoverable card link (solution pages, tool grids) ────── */

.card-link {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  padding: 1rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.card-link:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* ── Pricing checkmark tick ───────────────────────────────── */

.checkmark {
  color: #10b981;
  font-weight: 700;
  margin-top: 0.125rem;
}

/* ── Page / section headings ──────────────────────────────── */

.page-heading {
/*  font-size: 1.875rem; */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.25rem;
  color: var(--text-1);
}

.section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  color: var(--text-1);
}

/* ── Accent-colored inline link ───────────────────────────── */

.link {
  color: var(--accent);
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

/* ── Top-border table row separator ──────────────────────── */

.tr-sep-t {
  border-top: 1px solid #f1f5f9;
}

/* ── Compact key/value table label cell ──────────────────── */

.td-label-sm {
  padding: 0.25rem 1rem 0.25rem 0;
  color: var(--text-2);
}

/* ── Full-width table column header (with bottom border) ─── */

.th-col {
  text-align: left;
  color: var(--text-2);
  border-bottom: 1px solid #e2e8f0;
}

/* ── Small muted metadata line ───────────────────────────── */

.text-meta {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-top: 0.125rem;
}

/* ── Tiny form label (xs variant) ────────────────────────── */

.form-label-xs {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 0.25rem;
}

/* ── Monospace output block ───────────────────────────────── */

.output-mono {
  margin-top: 0.5rem;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
}

/* ── Flowing prose text ───────────────────────────────────── */

.prose {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.625;
}

/* ── Card variants ────────────────────────────────────────── */

.card-sm {
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  padding: 1rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  font-size: 0.875rem;
}

.card-table {
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  overflow: hidden;
}

.card-col {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  padding: 1.25rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.card-p5 {
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  padding: 1.25rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.card-hero {
  border-radius: 1rem;
  background-color: var(--bg-card);
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.card-feature {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  padding: 1rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.card-feature:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* ── Output / code blocks ─────────────────────────────────── */

.output-box {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  border-radius: 0.375rem;
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text-1);
}

.code-block {
  white-space: pre-wrap;
  border-radius: 0.375rem;
  background-color: #0f172a;
  padding: 0.75rem;
  font-size: 0.75rem;
  color: #e2e8f0;
}

.code-block-scroll {
  max-height: 24rem;
  overflow: auto;
  border-radius: 0.375rem;
  background-color: #0f172a;
  padding: 0.75rem;
  font-size: 0.75rem;
  color: #e2e8f0;
}

/* ── Additional table cells ───────────────────────────────── */

.td-right {
  padding: 0.25rem 0.75rem 0.25rem 0;
  text-align: right;
}

.td-head {
  padding: 0.5rem 0;
  font-weight: 500;
}

.th-sm {
  padding: 0.5rem 1rem;
  font-weight: 500;
}

.th-muted {
  text-align: left;
  color: var(--text-2);
}

.td-mono {
  padding: 0.25rem 0.75rem 0.25rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  overflow-wrap: break-word;
}

.th-row {
  font-size: 0.75rem;
  color: var(--text-2);
  background-color: #f8fafc;
  border-bottom: 1px solid var(--border);
}

.td-label-top {
  padding: 0.25rem 0.75rem;
  text-align: left;
  vertical-align: top;
  color: var(--text-2);
  font-weight: 400;
}

.td-break {
  padding: 0.375rem 0;
  overflow-wrap: break-word;
}

.key-col {
  font-weight: 600;
  color: var(--text-2);
  width: 7rem;
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn-primary-block {
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  background-color: var(--accent);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-text);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  text-align: center;
}

.btn-primary-block:hover { background-color: var(--accent-hover); }
.btn-primary-block:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary-sm {
  border-radius: 0.25rem;
  background-color: var(--accent);
  color: var(--accent-text);
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.btn-primary-sm:hover { background-color: var(--accent-hover); }
.btn-primary-sm:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary-sm:disabled:hover { background-color: var(--accent); }

.human-check-row { display: flex; align-items: center; gap: 0.5rem; }
.human-check-hint { font-size: 0.75rem; color: var(--text-2); }
.human-check-hint.is-ready { color: #1a8f5a; }

.btn-primary-xs {
  border-radius: 0.25rem;
  background-color: var(--accent);
  color: var(--accent-text);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

.btn-primary-xs:hover { background-color: var(--accent-hover); }

.btn-secondary {
  border-radius: 0.25rem;
  border: 1px solid #cbd5e1;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  background-color: transparent;
}

.btn-secondary:hover { background-color: #f8fafc; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  border: 1px solid #cbd5e1;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-1);
}

.btn-ghost:hover { background-color: #f8fafc; }

/* ── Auth type segmented control ─────────────────────────── */

.auth-tab {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0.3125rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  margin-left: -1px;
  transition: color 0.1s, background-color 0.1s;
  user-select: none;
}

.auth-tab:first-child { border-radius: 0.375rem 0 0 0.375rem; margin-left: 0; }
.auth-tab:last-child  { border-radius: 0 0.375rem 0.375rem 0; }
.auth-tab:hover       { color: var(--text-1); }

.auth-tab-active {
  color: var(--accent) !important;
  background-color: var(--accent-subtle) !important;
  border-color: var(--accent) !important;
  z-index: 1;
  position: relative;
}

/* ── Body type switcher ──────────────────────────────────── */

.body-cat-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0.3125rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  margin-left: -1px;
  transition: color 0.1s, background-color 0.1s;
}

.body-cat-btn:first-child { border-radius: 0.375rem 0 0 0.375rem; margin-left: 0; }
.body-cat-btn:last-child  { border-radius: 0 0.375rem 0.375rem 0; }
.body-cat-btn:hover       { color: var(--text-1); }

.body-sub-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0.1875rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  transition: color 0.1s, background-color 0.1s;
}

.body-sub-btn:hover { color: var(--text-1); background-color: var(--accent-subtle); }

/* .body-cat-btn and .body-sub-btn both reuse .auth-tab-active for the selected state */

/* ── GraphQL editor wrapper ──────────────────────────────── */

.gql-editor {
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: var(--bg-card);
  min-height: 200px;
}

.gql-editor .cm-editor   { max-height: 400px; overflow-y: auto; }
.gql-editor .cm-scroller { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875rem; }
.gql-editor .cm-focused  { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── GraphQL schema dropdown ─────────────────────────────── */

.schema-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 30;
  width: 15rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}

/* ── iOS-style toggle switch ────────────────────────────── */

.schema-toggle {
  position: relative;
  display: inline-block;
  width: 2.375rem;
  height: 1.375rem;
  flex-shrink: 0;
}

.schema-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.schema-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-color: var(--border);
  transition: background-color 0.2s;
  cursor: pointer;
}

.schema-toggle input:checked + .schema-slider { background-color: var(--accent); }

.schema-slider::before {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  left: 0.1875rem;
  top: 0.1875rem;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform 0.2s;
}

.schema-toggle input:checked + .schema-slider::before {
  transform: translateX(1rem);
}

/* ── Spin animation for schema fetch icon ───────────────── */

@keyframes spin { to { transform: rotate(360deg); } }

.btn-outline-block {
  display: block;
  margin-top: 1.5rem;
  border-radius: 0.375rem;
  border: 1px solid #cbd5e1;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-1);
  transition: background-color 0.15s;
}

.btn-outline-block:hover { background-color: #f8fafc; }

/* ── Additional form inputs ───────────────────────────────── */

.form-input-icon {
  position: relative;
  display: block;
  width: 100%;
}

.form-input-icon input {
  width: 100%;
  padding-right: 2.5rem;
}

/* When form-input-icon is applied directly to an input (legacy login pattern) */
input.form-input-icon {
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.375rem 2.5rem 0.375rem 0.75rem;
  font-size: 0.875rem;
  background-color: var(--bg-card);
  color: var(--text-1);
  margin-top: 0.25rem;
}

input.form-input-icon:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.form-input-sm {
  display: block;
  width: 100%;
  border-radius: 0.25rem;
  border: 1px solid #cbd5e1;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  background-color: var(--bg-card);
  color: var(--text-1);
}

.form-input-sm:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.form-input-xs {
  border-radius: 0.25rem;
  border: 1px solid #cbd5e1;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background-color: var(--bg-card);
  color: var(--text-1);
}

/* ── Text shortcuts ───────────────────────────────────────── */

.mono-xs {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
}

.mono-dark {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text-1);
}

.text-xs-muted {
  font-size: 0.75rem;
  color: var(--text-2);
}

.text-xs-dim {
  font-size: 0.75rem;
  color: #94a3b8;
}

.caption {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-2);
}

.label-xs {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
}

/* ── Flex layout rows ─────────────────────────────────────── */

.row-start   { display: flex; align-items: flex-start;  gap: 0.5rem; }
.row-center  { display: flex; align-items: center;       gap: 0.5rem; }
.row-center-3{ display: flex; align-items: center;       gap: 0.75rem; }
.row-baseline{ display: flex; align-items: baseline;     gap: 0.5rem; }
.row-end-3   { display: flex; align-items: flex-end;     gap: 0.75rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.inline-row  { display: inline-flex; align-items: center; gap: 0.5rem; }
.inline-row-1{ display: inline-flex; align-items: center; gap: 0.25rem; }

.row-center-fixed {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.page-header-start {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

/* ── Multi-pair form row (input + control pairs) ──────────── */

.form-row-pair {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-row-pair { grid-template-columns: 1fr auto 1fr auto; align-items: end; }
}

/* ── Badges / tags / indicators ───────────────────────────── */

.chip {
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  background-color: #f8fafc;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-2);
}

.badge-info {
  display: inline-flex;
  align-items: center;
  border-radius: 0.25rem;
  background-color: #e0f2fe;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: #075985;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.status-chip.ok      { background: #e4f5ec; color: #1a8f5a; }
.status-chip.partial { background: #fbeeda; color: #c07a00; }
.status-chip.bad     { background: #f9e3e2; color: #c8352f; }
.status-chip.run     { background: #e3eefb; color: #2a7de1; }
.status-chip.muted   { background: #eef1f6; color: #94a3b8; }
.status-chip.sched   { background: #eef1f6; color: #5a6472; }

.verify-banner {
  background: #fbeeda;
  color: #7a4e00;
  font-size: 0.8125rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0d9b0;
}
.verify-banner-btn {
  white-space: nowrap;
  border-radius: 0.375rem;
  border: 1px solid #e6c17a;
  background: #fff;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #7a4e00;
}
.verify-banner-btn:hover { background: #fdf6ea; }
.verify-banner-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: pulse-dot-anim 1s infinite ease-in-out;
}
@keyframes pulse-dot-anim {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.checkmark-dim {
  color: #cbd5e1;
  font-weight: 700;
  margin-top: 0.125rem;
}

.status-fail {
  color: #b91c1c;
  font-weight: 600;
}

.panel-header-info {
  border-radius: 0.375rem 0.375rem 0 0;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 0.5rem 1rem;
}

.panel-body {
  border-radius: 0 0 0.375rem 0.375rem;
  border: 1px solid var(--border);
  border-top: none;
  overflow-x: auto;
}

.icon-accent {
  border-radius: 0.375rem;
  background-color: var(--accent-subtle);
  padding: 0.375rem;
  color: var(--accent);
  transition: background-color 0.15s;
}

.group:hover .icon-accent { filter: brightness(0.92); }

/* ── Grid layouts ─────────────────────────────────────────── */

.grid-cards {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 640px)  { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.grid-2col { display: grid; margin-top: 0.75rem; gap: 0.75rem; }
@media (min-width: 640px) { .grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Dividers ─────────────────────────────────────────────── */

.hr-grow { height: 1px; flex: 1; background-color: var(--border); }
.divide-subtle > * + * { border-top: 1px solid #f1f5f9; }

/* ── Table value cells ────────────────────────────────────── */

.td-val     { padding: 0.375rem 1rem 0.375rem 0; }
.td-compact { padding: 0.25rem  0.75rem 0.25rem 0; }

/* ── Password-toggle icon button ─────────────────────────── */

.input-icon-btn {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-right: 0.75rem;
  color: #94a3b8;
}

.input-icon-btn:hover { color: #475569; }

.icon-eye, .icon-eye-off { width: 1rem; height: 1rem; }

/* ── Warning / notice list ───────────────────────────────── */

.warn-list {
  margin-top: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #fde68a;
  background-color: #fffbeb;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: #78350f;
  list-style-type: disc;
  margin-left: 1.25rem;
}

.warn-list > * + * { margin-top: 0.25rem; }

/* ── Centered card ────────────────────────────────────────── */

.card-center {
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  padding: 1.25rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  text-align: center;
}

/* ── Darker accent link ───────────────────────────────────── */

.link-dark { color: var(--accent); text-decoration: none; }
.link-dark:hover { text-decoration: underline; }

/* ── 3-control form row ───────────────────────────────────── */

.form-row-3 { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-row-3 { grid-template-columns: 1fr auto auto; align-items: end; } }

/* ── Small prose with bottom margin ──────────────────────── */

.prose-spaced {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 1rem;
}

/* ── More table cells ────────────────────────────────────── */

.td-right-sm { padding: 0.25rem 0; text-align: right; }
.th-xs       { text-align: left; padding: 0.25rem 0.5rem; }
.td-wrap     { padding: 0.25rem 0; overflow-wrap: anywhere; }
.td-muted    { padding: 0.75rem 1rem; color: var(--text-2); }
.td-dim      { padding: 1rem; color: #94a3b8; }
.td-body     { padding: 0.5rem 1rem; color: var(--text-2); }

/* ── Hoverable info card (no shadow) ─────────────────────── */

.card-hover {
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  padding: 1rem;
  transition: border-color 0.15s;
}

.card-hover:hover { border-color: var(--accent); }

/* ── "Related in this cluster" link panel ─────────────────── */

.cluster-related {
  background: #dce5f0;
  border-radius: 0.75rem;
  padding: 1.5rem 2rem;
}
.cluster-related h2 {
  text-align: center;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.5rem;
}
.cluster-related > p {
  text-align: center;
  margin-bottom: 0.75rem;
}
/* each link item gets a white background cell */
.cluster-related .card-hover {
  border: none;
  border-radius: 0.375rem;
  padding: 0;
  background: #fff;
  box-shadow: none;
}
.cluster-related .card-hover:hover { background: #f0f4ff; }
.cluster-related ul { gap: 0.5rem; margin-top: 0.75rem; }
/* make the links look like plain bold indigo text */
.cluster-related a.block {
  display: block;
  padding: 0.75rem 1rem;
  color: #3730a3;
  background: transparent;
}
.cluster-related a.block:hover { text-decoration: underline; }
.cluster-related .tool-card-title { color: inherit; font-size: 0.9375rem; }
/* hide the caption descriptions — just show the link name */
.cluster-related .caption { display: none; }

/* ── HTTP Request Builder metrics table ───────────────────── */

.metrics-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.8125rem; margin-top: 0.75rem;
}
.metrics-table th {
  text-align: left; color: var(--text-2); font-weight: 500;
  padding: 0.3rem 0.75rem 0.3rem 0; width: 8rem; vertical-align: top; white-space: nowrap;
}
.metrics-table td {
  color: var(--text-1); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 0.3rem 0; word-break: break-all;
}
.metrics-table tr { border-bottom: 1px solid var(--border); }
.metrics-table tr:last-child { border-bottom: none; }
.metrics-section td {
  background: var(--bg-subtle, #f8fafc);
  color: var(--text-2); font-family: inherit;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.4rem 0.25rem; border-bottom: 1px solid var(--border);
}

/* ── Icon size — medium (20 px) ───────────────────────────── */

.icon-md { width: 1.25rem; height: 1.25rem; }

/* ── Bold text variants ───────────────────────────────────── */

.text-muted-bold { font-weight: 600; color: var(--text-2); }
.text-semi       { font-weight: 600; color: var(--text-1); }

/* ── Page-width constraint ────────────────────────────────── */

.page-wrap {
  margin-left: auto;
  margin-right: auto;
  width: 92%;
  max-width: 1280px;
}

/* ── Flowing prose text (offset variant) ──────────────────── */

.prose-block {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.625;
}

/* ── Checkbox (theme-aware accent color) ──────────────────── */

.checkbox {
  border-radius: 0.25rem;
  border-color: #cbd5e1;
  color: var(--accent);
  accent-color: var(--accent);
}

/* ── Table header cell (wider padding) ────────────────────── */

.th-pad {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 500;
}

/* ── Result status labels ─────────────────────────────────── */

.status-pass {
  color: #047857;
  font-weight: 600;
}

/* ── Small hint text below a form field ───────────────────── */

.text-hint {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-2);
}

.field-hint {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-2);
}

/* ── Multi-control form row (input + 3 selects/buttons) ───── */

.form-row-multi {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-row-multi {
    grid-template-columns: 1fr auto auto auto;
    align-items: end;
  }
}

/* ── Tool result metadata row ─────────────────────────────── */

.result-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  color: var(--text-2);
}

/* ── Pricing plan feature list ────────────────────────────── */

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-2);
  flex: 1;
}

/* ── Pricing price unit ("/ month") ──────────────────────── */

.price-unit {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-left: 0.25rem;
}

/* ── Pricing plan description ─────────────────────────────── */

.plan-desc {
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.625;
  margin-bottom: 1rem;
}

/* ── Support conversation thread (public + admin) ─────────── */

.support-message {
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  margin-bottom: 0.75rem;
  max-width: 42rem;
}

.support-message-visitor {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
}

.support-message-admin {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  margin-left: auto;
}

.support-message-meta {
  font-size: 0.75rem;
  color: var(--text-2);
  margin-bottom: 0.375rem;
}

.support-message-body {
  white-space: pre-wrap;
  font-size: 0.9375rem;
  color: var(--text-1);
}

.support-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.support-attachment-thumb {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
}

.support-badge-account {
  display: inline-block;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: #dcfce7;
  color: #166534;
}

.support-badge-anonymous {
  display: inline-block;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
}

.support-badge-needs-reply {
  display: inline-block;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
}

/* ── Modern chat thread (customer-facing /support/mine/<id>) ─────── */

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 32rem;
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 85%;
}

.chat-row-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-row-theirs {
  align-self: flex-start;
}

.chat-avatar {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
}

.chat-avatar-mine { background: var(--accent); }
.chat-avatar-theirs { background: #64748b; }

.chat-bubble-wrap { display: flex; flex-direction: column; min-width: 0; }
.chat-row-mine .chat-bubble-wrap { align-items: flex-end; }

.chat-bubble {
  border-radius: 1.125rem;
  padding: 0.625rem 0.9375rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble-mine {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}

.chat-bubble-theirs {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-bottom-left-radius: 0.25rem;
}

.chat-meta {
  font-size: 0.6875rem;
  color: var(--text-2);
  margin-top: 0.25rem;
}

.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.chat-attachment-thumb {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ── Chat composer ─────────────────────────────────────────────── */

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 0.375rem 0.375rem 0.375rem 1rem;
  background: var(--bg-card);
  margin-top: 1rem;
}

.chat-composer textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  font-size: 0.9375rem;
  max-height: 8rem;
  background: transparent;
  color: var(--text-1);
  padding: 0.5rem 0;
  font-family: inherit;
}

.chat-icon-btn {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background-color 0.15s;
}

.chat-icon-btn:hover { background: #f1f5f9; }

.chat-send-btn {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.chat-send-btn:hover { background: var(--accent-dark, #4338ca); }
.chat-send-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

.chat-attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.chat-attach-preview-item {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
}

.chat-attach-preview-item img { width: 100%; height: 100%; object-fit: cover; }

.chat-attach-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.625rem;
  line-height: 1rem;
  text-align: center;
  cursor: pointer;
}

/* ── Chat conversation list (customer-facing /support) ────────────── */

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.chat-list-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  transition: background-color 0.15s;
}

.chat-list-row:hover { background-color: #f8fafc; }

.chat-list-avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
}

.chat-list-body { min-width: 0; flex: 1; }

.chat-list-preview {
  font-size: 0.9375rem;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-list-preview-unread { font-weight: 600; }

.chat-list-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

.chat-list-time {
  font-size: 0.75rem;
  color: var(--text-2);
}