/* MailVault — documentation pages (/webhooks/).
 *
 * Loaded after style.css, and only by documentation pages, so the marketing
 * page never downloads these rules. Every colour comes from the tokens defined
 * in style.css, which is what keeps light and dark themes working here without
 * a single theme-specific rule.
 *
 * This is a separate file rather than an addition to style.css on purpose:
 * Cloudflare holds style.css at the edge for hours, so new rules appended there
 * would reach visitors long after the HTML that needs them. A new URL is never
 * stale.
 */

.topnav a[aria-current="page"] {
  color: var(--on-strong);
  text-decoration: underline;
  text-decoration-color: rgb(244 242 238 / .45);
  text-underline-offset: 6px;
}

/* ── hero ── */
.doc-hero { padding: 64px 0 8px; }
.doc-hero h1 { max-width: 19ch; }

/* The exchange: what goes over the wire, beside what your code reads. */
.exchange { display: grid; gap: 18px; margin: 38px 0 0; }
@media (min-width: 900px) { .exchange { grid-template-columns: 1.05fr 1fr; } }
.exchange figure { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.exchange .term, .exchange .codeblock { margin: 0; flex: 1; }
.exchange figcaption { font-size: 13px; color: var(--mute); margin-top: 10px; max-width: 52ch; }
.exchange figcaption a { color: var(--accent); }
.term .dim { color: rgb(244 242 238 / .5); }

/* ── light code block ── */
.codeblock {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.codeblock-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--mute);
}
.codeblock pre {
  margin: 0; padding: 16px 18px 18px;
  font-family: var(--font-mono); font-size: 12.8px; line-height: 1.7;
  color: var(--ink-2);
  overflow-x: auto; tab-size: 4;
}

/* ── layout: contents rail + article ── */
.doc-layout {
  display: grid; gap: 28px;
  margin-top: 56px; padding: 44px 0 80px;
  border-top: 1px solid var(--line);
}
@media (min-width: 980px) {
  .doc-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 56px; }
}

.toc { font-size: 13.5px; }
.toc p { margin: 0 0 10px; color: var(--mute); font-size: 12.5px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.toc-sub a { color: var(--mute); }
@media (min-width: 980px) {
  .toc { position: sticky; top: 24px; align-self: start; }
  .toc ol { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
  .toc-sub { padding-left: 12px; }
}

/* ── prose ── */
.prose { min-width: 0; }
.prose [id] { scroll-margin-top: 24px; }

/* style.css gives every <section> marketing-page padding and a top rule;
   documentation sections set their own rhythm instead. */
.prose > section { padding: 0; }
.prose > section + section { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }

.prose h2 { max-width: none; }
.prose h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; margin: 44px 0 10px; }
.prose > section > h2 + p { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.prose p { margin: 0 0 14px; max-width: 68ch; }
.prose a { color: var(--accent); text-underline-offset: 2px; }
.prose code {
  font-family: var(--font-mono); font-size: .86em;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px;
}
.prose pre code { background: none; border: 0; border-radius: 0; padding: 0; font-size: inherit; }
.prose .term, .prose .codeblock { margin: 14px 0 18px; max-width: 78ch; }

/* ── the flow ── */
.flow { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.flow li { border-top: 2px solid var(--accent); padding: 14px 4px 0 0; }
.flow h3 { margin: 0 0 6px; font-size: 14.5px; }
.flow p { margin: 0; font-size: 13.5px; color: var(--mute); line-height: 1.55; }

/* ── quick-start steps: numbered because order matters ── */
.steps { list-style: none; counter-reset: step; margin: 28px 0 0; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 46px; }
.steps > li + li { margin-top: 40px; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--font-mono); font-size: 13px;
  display: grid; place-items: center;
}
.steps h3 { margin: 2px 0 8px; }

/* ── reference tables ── */
.ref-table-wrap {
  overflow-x: auto; margin: 14px 0 18px; max-width: 78ch;
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.ref-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.ref-table th {
  text-align: left; font-weight: 500; font-size: 13px; color: var(--mute);
  background: var(--paper-2); padding: 10px 14px;
}
.ref-table td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); line-height: 1.55; }
.ref-table td:first-child { white-space: nowrap; }

/* ── note ── */
.note {
  background: var(--accent-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px 18px; margin: 18px 0; max-width: 72ch;
}
.note p { margin: 0; }

/* ── language tabs: plain radio inputs, so they work without JavaScript ── */
.tabs { margin: 18px 0; max-width: 78ch; }
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs > label {
  display: inline-block; margin-right: 4px; padding: 6px 14px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--mute);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 6px 6px 0 0; background: var(--paper);
  cursor: pointer;
}
.tabs > input:checked + label { color: var(--ink); background: var(--paper-2); }
.tabs > input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-panel { display: none; }
.tab-panel .codeblock { margin: 0; border-top-left-radius: 0; }
#verify-go:checked ~ #panel-verify-go,
#verify-node:checked ~ #panel-verify-node { display: block; }

/* ── checklist ── */
.checklist { list-style: none; margin: 14px 0 0; padding: 0; }
.checklist li { position: relative; padding-left: 28px; margin: 0 0 9px; max-width: 70ch; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .38em;
  width: 13px; height: 13px;
  border: 1.5px solid var(--accent); border-radius: 3px;
}