/* Webhooks documentation — component styles.
   Reuses the reference page's CSS custom properties (:root in index.html). */

/* ---------- Delivery lifecycle stepper ---------- */
.wh-flow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 22px 0 8px; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--bg);
}
.wh-step { padding: 15px 16px; position: relative; min-width: 0; }
.wh-step + .wh-step { border-left: 1px solid var(--line-2); }
.wh-step .si {
  width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-ink); margin-bottom: 9px; font-family: "IBM Plex Mono", monospace;
  font-size: 12px; font-weight: 600;
}
.wh-step h5 { margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.wh-step p { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.45; max-width: none; }
.wh-step .arr { position: absolute; right: -7px; top: 22px; z-index: 2; color: var(--ink-4); background: var(--bg); }
.wh-step:last-child .arr { display: none; }
.wh-step.ok .si { background: var(--post-bg); color: var(--post); }

/* ---------- Callout ---------- */
.wh-callout {
  display: flex; gap: 13px; align-items: flex-start; margin: 22px 0 6px;
  padding: 14px 16px; border: 1px solid var(--brand-100); background: var(--brand-50);
  border-radius: var(--r);
}
.wh-callout .ci {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--brand-ink);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--brand-100);
}
.wh-callout .ci svg { width: 16px; height: 16px; }
.wh-callout h4 { margin: 1px 0 3px; font-size: 13.5px; font-weight: 600; color: var(--brand-deep); }
.wh-callout p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; max-width: none; }
.wh-callout a { font-weight: 600; cursor: pointer; white-space: nowrap; }

/* ---------- Event catalog ---------- */
.wh-events { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 6px; }
.wh-evgroup { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); }
.wh-evgroup-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.wh-evgroup-head h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.wh-evgroup-head .tag {
  margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 500;
  color: var(--ink-3); background: var(--bg-3); border: 1px solid var(--line); padding: 1.5px 7px; border-radius: 20px;
}
.wh-evgroup.soon { opacity: .7; }
.wh-evgroup.soon .wh-evgroup-head .tag { color: var(--put); background: var(--put-bg); border-color: transparent; }
.wh-evlist { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.wh-evrow {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; transition: background .12s;
}
.wh-evrow:hover { background: var(--bg-2); }
.wh-evgroup.soon .wh-evrow:hover { background: transparent; }
.wh-evrow .ev-change { font-size: 11.5px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.wh-evgroup.soon .ev-change::before { content: "—"; color: var(--ink-4); }

/* Event-name badge (mono pill) */
.ev-badge {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 500; color: var(--brand-deep);
  background: var(--brand-50); border: 1px solid var(--brand-100); padding: 2.5px 8px; border-radius: 6px;
  white-space: nowrap; line-height: 1.3;
}
.ev-badge.muted { color: var(--ink-3); background: var(--bg-3); border-color: var(--line); }
.ev-badge .verb-dot { color: var(--brand); }

/* ---------- Wire mapping table ---------- */
.wh-map { width: 100%; border-collapse: collapse; margin-top: 6px; }
.wh-map th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.wh-map td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-2); vertical-align: middle; }
.wh-map .mono { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--ink); }
.wh-map .arrow { color: var(--ink-4); }

/* ---------- Field note ---------- */
.wh-fieldnote {
  display: flex; gap: 11px; align-items: flex-start; margin: 18px 0 4px; padding: 12px 14px;
  border: 1px solid var(--put-bg); background: #fdfaf2; border-left: 3px solid var(--put); border-radius: var(--r-sm);
}
.wh-fieldnote svg { width: 15px; height: 15px; color: var(--put); flex-shrink: 0; margin-top: 2px; }
.wh-fieldnote p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; max-width: none; }
.wh-fieldnote code { font-size: 12px; }

/* ---------- Signing secret panel ---------- */
.wh-secret { border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; margin: 22px 0 6px; background: var(--bg); }
.wh-secret-top { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.wh-secret-top .lbl { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.wh-secret-top .key-ico { color: var(--brand-ink); display: flex; }
.wh-secret-top .key-ico svg { width: 15px; height: 15px; }
.wh-secret-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wh-secret-val {
  font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; flex: 1; min-width: 200px;
  letter-spacing: .02em; user-select: all;
}
.wh-secret-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: .14s; white-space: nowrap;
}
.wh-secret-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.wh-secret-btn svg { width: 13px; height: 13px; }
.wh-secret-btn.copied { color: var(--post); border-color: var(--post); }
.wh-secret-btn.danger:hover { border-color: var(--delete); color: var(--delete); }
.wh-secret-hint { font-size: 12px; color: var(--ink-3); margin: 11px 0 0; line-height: 1.5; }

/* ---------- Status / state chips showcase ---------- */
.wh-chips { margin: 20px 0 8px; }
.wh-chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.wh-chips-cap { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; line-height: 1.4;
}
.chip .cdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.s2 { color: var(--post); background: var(--post-bg); }
.chip.s4 { color: var(--put); background: var(--put-bg); }
.chip.s5 { color: var(--delete); background: var(--delete-bg); }
.chip.s0 { color: var(--ink-3); background: var(--bg-3); }

/* Endpoint state pills */
.state {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  padding: 3px 10px 3px 8px; border-radius: 20px; line-height: 1.5; border: 1px solid transparent;
}
.state .sdot { width: 7px; height: 7px; border-radius: 50%; }
.state.active { color: var(--post); background: var(--post-bg); }
.state.active .sdot { background: var(--post); }
.state.disabled { color: var(--ink-3); background: var(--bg-3); border-color: var(--line); }
.state.disabled .sdot { background: var(--ink-4); }
.state.failing { color: var(--delete); background: var(--delete-bg); }
.state.failing .sdot { background: var(--delete); animation: whpulse 1.6s ease-in-out infinite; }
@keyframes whpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,74,68,.55); }
  50% { box-shadow: 0 0 0 4px rgba(204,74,68,0); }
}
@media (prefers-reduced-motion: reduce) { .state.failing .sdot { animation: none; } }

/* "made by" badge */
.byb {
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; line-height: 1.5;
}
.byb.client { color: var(--get); background: var(--get-bg); }
.byb.merchant { color: var(--brand-ink); background: var(--brand-50); }

/* ---------- Deliveries table ---------- */
.wh-deliveries { margin: 18px 0 6px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wh-del-head, .wh-del-row {
  display: grid; grid-template-columns: 96px minmax(0, 1.6fr) 86px 1fr 78px 26px;
  align-items: center; gap: 12px; padding: 11px 14px;
}
.wh-del-head {
  background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4);
}
.wh-del-row { border-top: 1px solid var(--line-2); cursor: pointer; transition: background .12s; font-size: 13px; }
.wh-del-row:first-of-type { border-top: none; }
.wh-del-row:hover { background: var(--bg-2); }
.wh-del-row.open { background: var(--bg-2); }
.wh-del-time { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-2); }
.wh-del-time .d { color: var(--ink-4); font-size: 11px; display: block; }
.wh-del-event { min-width: 0; }
.wh-del-dur { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-3); }
.wh-del-caret { color: var(--ink-4); display: flex; justify-content: center; transition: transform .25s; }
.wh-del-row.open .wh-del-caret { transform: rotate(90deg); color: var(--brand-ink); }

.wh-del-detail { border-top: 1px solid var(--line-2); overflow: hidden; max-height: 0; transition: max-height .3s ease; background: var(--bg-2); }
.wh-del-detail.open { max-height: 760px; }
.wh-del-detail-inner { padding: 4px 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wh-del-pane { min-width: 0; }
.wh-del-pane-head {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 7px; font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.wh-del-pane-head .copy-mini {
  margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-3);
  cursor: pointer; padding: 3px 8px; font-family: inherit; font-size: 11px; display: inline-flex; align-items: center; gap: 5px;
  text-transform: none; letter-spacing: 0; font-weight: 500; transition: .14s;
}
.wh-del-pane-head .copy-mini:hover { border-color: var(--brand); color: var(--brand-ink); }
.wh-del-pane-head .copy-mini.copied { color: var(--post); border-color: var(--post); }
.wh-del-pane-head .copy-mini svg { width: 12px; height: 12px; }
.wh-del-code {
  margin: 0; background: var(--code-bg); border-radius: var(--r-sm); padding: 12px 13px; overflow: auto;
  max-height: 340px; font-family: "IBM Plex Mono", monospace; font-size: 11.7px; line-height: 1.6; color: var(--code-text);
}
.wh-del-code::-webkit-scrollbar { width: 8px; height: 8px; }
.wh-del-code::-webkit-scrollbar-thumb { background: #26384a; border-radius: 8px; }
.wh-del-resp-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: "IBM Plex Mono", monospace; font-size: 12px; }

/* ---------- Retry schedule ---------- */
.wh-retry { width: 100%; border-collapse: collapse; margin: 20px 0 6px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wh-retry th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4);
  padding: 10px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.wh-retry td { padding: 10px 14px; border-top: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-2); }
.wh-retry tr:first-child td { border-top: none; }
.wh-retry .att { font-family: "IBM Plex Mono", monospace; font-weight: 600; color: var(--ink); width: 70px; }
.wh-retry .delay { font-family: "IBM Plex Mono", monospace; color: var(--brand-deep); }
.wh-retry tr:last-child td { color: var(--ink-3); }

/* ---------- Payload tabs (in code card) ---------- */
.pl-tabs { display: flex; gap: 1px; align-self: flex-end; flex-wrap: wrap; }
.pl-tab {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; color: var(--code-muted);
  padding: 7px 10px; cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent;
  transition: color .14s; white-space: nowrap;
}
.pl-tab:hover { color: #cdd9e6; }
.pl-tab.active { color: #fff; border-bottom-color: var(--accent); }

/* card note under a code card */
.cc-note {
  font-size: 11.5px; color: var(--ink-3); margin: 8px 2px 0; line-height: 1.5;
  font-family: "IBM Plex Mono", monospace;
}

/* ---------- Responsive (tablet) ---------- */
@media (max-width: 1180px) {
  .wh-del-detail-inner { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .wh-events { grid-template-columns: 1fr; }
  .wh-flow { grid-template-columns: 1fr 1fr; }
  .wh-step .arr { display: none; }
  .wh-del-head { display: none; }
  .wh-del-row {
    grid-template-columns: 1fr auto; grid-auto-rows: auto; gap: 6px 12px; row-gap: 4px;
    padding: 12px 14px;
  }
  .wh-del-row > .wh-del-time { grid-column: 1; }
  .wh-del-row > .wh-del-caret { grid-row: 1; grid-column: 2; align-self: start; }
  .wh-del-row > .wh-del-event { grid-column: 1 / -1; }
  .wh-del-row > * { min-width: 0; }
}