/* Hallmark · page: Developers · macrostructure: Code-first split hero + playground + principles grid
 * theme: custom "Night + Mint" (night-weighted for developers) · nav: N11 · footer: Ft3 + mast
 * studied: kapso.com DNA (code-first hero, quickstart, "everything around the API") — not copied
 * enrichment: real code from the public OpenAPI file; no device or window chrome
 * pre-emit critique: P5 H4 E5 S5 R4 V5
 * motion: tab swap fade · scenario status colour (reduced motion: instant)
 */

/* ═════════════ Code blocks (shared on this page) ═════════════ */
.dcodebox {
  display: grid;
  border-radius: var(--radius-lg);
  border: var(--rule-width) solid var(--color-rule);
  background: var(--color-paper-2);
  overflow: hidden;
  min-width: 0;
}
.dcodebox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-xs);
  border-block-end: var(--rule-width) solid var(--color-rule);
}
.dcodebox__bar:has(.dtabs[hidden]):has(.dcopy[hidden]) { display: none; }
.dtabs { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.dtabs[hidden] { display: none; }
.dtab {
  min-height: 2rem;
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dtab:hover { color: var(--color-ink); }
.dtab[aria-selected="true"] { background: var(--color-paper-3); color: var(--color-ink); }
@media (pointer: coarse) { .dtab { min-height: 2.75rem; } }
.dcopy { min-height: 2rem; font-size: var(--text-xs); }

.dpanel { display: grid; min-width: 0; }
.dpanel[hidden] { display: none; }
[data-dtabs]:not(.is-live) .dpanel + .dpanel { border-block-start: var(--rule-width) solid var(--color-rule); }
.dpanel__cap { padding: var(--space-xs) var(--space-md) 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.dcode {
  margin: 0;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-ink);
  white-space: pre;
  tab-size: 2;
  scrollbar-color: var(--color-rule) transparent;
  scrollbar-width: thin;
}
.t-s { color: var(--color-accent-text); }
.t-c { color: var(--color-muted); }
.t-k { color: var(--color-warning); font-weight: var(--weight-strong); }
.t-h { color: var(--color-success); font-weight: var(--weight-strong); }

/* Inline code across the page */
:is(.dhero, .dquick, .dplay, .dcare, .dhooks, .dmove, .dpartner, .faq-section) :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.05em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
  overflow-wrap: anywhere;
}

/* ═════════════ Hero ═════════════ */
.dhero {
  padding-block: var(--space-xl) var(--space-3xl);
  background: var(--color-paper);
  color: var(--color-ink);
}
.dhero__grid { display: grid; gap: var(--space-xl); align-items: center; }
.dhero__grid > * { min-width: 0; }
.dhero__text { display: grid; gap: var(--space-md); justify-items: start; }
.dhero h1 { font-size: clamp(2.25rem, 2.6vw + 1rem, 3.25rem); max-width: 20ch; }
.dhero__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.dhero__dot { width: 0.45rem; height: 0.45rem; border-radius: 1.5px; background: var(--color-spark); transform: rotate(45deg); }
@media (min-width: 64rem) {
  .dhero { padding-block: var(--space-2xl) var(--space-4xl); }
  .dhero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
}

/* ═════════════ Quickstart ═════════════ */
.qsteps { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.qstep { display: grid; gap: var(--space-xs); align-content: start; padding-block-start: var(--space-md); border-block-start: 2px solid var(--color-ink); }
.qstep__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-text); }
.qstep h3 { font-size: var(--text-lg); }
.qstep p { font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); }
@media (min-width: 40rem) { .qsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .qsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); } }

/* ═════════════ Send playground ═════════════ */
.dplay { background: var(--color-paper); color: var(--color-ink); }
.dplay__grid { display: grid; gap: var(--space-lg); }
.dplay .section__head { margin-block-end: 0; }
.scen { display: grid; gap: var(--space-md); min-width: 0; }
.scen__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.scen__tabs[hidden] { display: none; }
.scen__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.5rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-rule);
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--color-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.scen__tab:hover { color: var(--color-ink); border-color: var(--color-control); }
.scen__tab[aria-selected="true"] { color: var(--color-ink); border-color: var(--color-ink); background: var(--color-paper-2); }
.scen__dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--color-success); }
.scen__tab:not([data-status^="2"]) .scen__dot { background: var(--color-warning); }
.scen__tab[data-status="403"] .scen__dot, .scen__tab[data-status="409"] .scen__dot, .scen__tab[data-status="422"] .scen__dot { background: var(--color-danger); }
@media (pointer: coarse) { .scen__tab { min-height: 2.75rem; } }

.scen__out {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  border: var(--rule-width) solid var(--color-rule);
  background: var(--color-paper-2);
  min-width: 0;
}
.scen__endpoint { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.scen__panel { display: grid; gap: var(--space-sm); }
.scen__panel[hidden] { display: none; }
[data-scen]:not(.is-live) .scen__panel + .scen__panel { padding-block-start: var(--space-md); border-block-start: var(--rule-width) solid var(--color-rule); }
[data-scen].is-live .scen__panel:not([hidden]) { animation: scen-in var(--dur-base) var(--ease-out); }
@keyframes scen-in { from { opacity: 0; } }
.scen__req { display: grid; gap: var(--space-3xs); font-size: var(--text-md); line-height: 1.45; }
.scen__k { font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.scen__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-paper-3);
  font-family: var(--font-mono);
  font-size: var(--text-md);
}
.scen__status:not([data-status^="2"]) .t-h { color: var(--color-warning); }
.scen__status[data-status="403"] .t-h, .scen__status[data-status="409"] .t-h, .scen__status[data-status="422"] .t-h { color: var(--color-danger); }
.scen__code { padding: 0.1rem var(--space-xs); border-radius: var(--radius-sm); border: var(--rule-width) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
.scen__why { color: var(--color-muted); line-height: 1.6; max-width: 60ch; }
.scen__why code { color: var(--color-ink); }
@media (min-width: 64rem) {
  .dplay__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
  .scen__out { padding: var(--space-xl); }
}

/* ═════════════ Care grid ═════════════ */
.cares { display: grid; gap: 0 var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.care { display: grid; gap: var(--space-2xs); align-content: start; padding-block: var(--space-md); border-block-start: var(--rule-width) solid var(--color-rule); }
.care__mark { width: 0.55rem; height: 0.55rem; border-radius: 1.5px; background: var(--color-spark); transform: rotate(45deg); margin-block-end: var(--space-3xs); }
.care h3 { font-size: var(--text-md); letter-spacing: -0.015em; }
.care p { font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); }
@media (min-width: 40rem) { .cares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cares { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-xl); } }

/* ═════════════ Split rows (webhooks, Meta move, partners) ═════════════ */
.dhooks, .dmove { border-block-start: var(--rule-width) solid var(--color-rule); }
.dsplit { display: grid; gap: var(--space-xl); align-items: start; }
.dsplit > * { min-width: 0; }
.dsplit__text { display: grid; gap: var(--space-md); align-content: start; }
.dsplit__text h2 { max-width: 18ch; }
.dsplit__note { font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); }
@media (min-width: 64rem) {
  .dsplit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
  .dsplit--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

.devents { display: grid; }
.devents li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm); padding-block: var(--space-xs); border-block-start: var(--rule-width) solid var(--color-rule); font-size: var(--text-sm); }
.devents li span { color: var(--color-muted); }

.ddiff {
  display: grid;
  border-radius: var(--radius-lg);
  border: var(--rule-width) solid var(--color-rule);
  background: var(--color-paper-2);
  overflow: hidden;
}
.ddiff__row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.ddiff__row code { padding: 0; background: none; overflow-wrap: anywhere; }
.ddiff__row--del { color: var(--color-muted); }
.ddiff__row--del code { text-decoration: line-through; text-decoration-color: var(--color-danger); }
.ddiff__row--del span { color: var(--color-danger); }
.ddiff__row--add { background: var(--color-accent-soft); }
.ddiff__row--add span { color: var(--color-accent-text); font-weight: var(--weight-strong); }
.ddiff__row + .ddiff__row { border-block-start: var(--rule-width) solid var(--color-rule); }

/* ═════════════ API map ═════════════ */
.dmap { background: var(--color-paper-2); }
.amap { display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
.amap__item { display: grid; gap: var(--space-3xs); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper); border: var(--rule-width) solid var(--color-rule); }
.amap__name { display: flex; justify-content: space-between; gap: var(--space-sm); font-weight: var(--weight-strong); }
.amap__n { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-body); color: var(--color-accent-text); }
.amap__desc { font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 40rem) { .amap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .amap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ═════════════ Partners ═════════════ */
.dpartner { background: var(--color-paper); color: var(--color-ink); }
.pflow { display: grid; }
.pflow li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  padding-block: var(--space-md);
  border-block-start: var(--rule-width) solid var(--color-rule);
}
.pflow__n {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-spark);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent-text);
}
.pflow p { line-height: 1.6; color: var(--color-muted); }
.pflow strong { color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) {
  [data-scen].is-live .scen__panel:not([hidden]) { animation: none; }
}