/* /developer-api — hero no padrão do Manual da Marca + seções r2 (src/styles/brand.css).
   Motions (page.js): o pedido passa por quatro etapas, pilha de exemplos que se reorganiza, repetição e limite de volume,
   troca de chave, referência técnica. Ilustrativo: nada de código real. Estados ocultos só com .sx.is-armed. */
.dv-hv{max-width:560px}

/* ---------- 1 · quatro etapas ---------- */
.dvg{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px}
.dvg-req,.dvg-res{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--paper)}
.dvg-req .mv-tt small{font-weight:500;color:var(--sx-blue-t)}
.dvg-res{grid-template-columns:auto minmax(0,1fr);background:var(--sx-ok-b)}
.dvg-row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:22px 0 !important}
.dvg-line{position:absolute;left:12.5%;right:12.5%;top:21px;height:2px;background:var(--sx-line2)}
.dvg-line b{position:absolute;inset:0;background:var(--sx-blue);transform-origin:left;transform:scaleX(var(--p,1));transition:transform .55s var(--sx-ease)}
.sx.is-armed .dvg-line b{transform:scaleX(var(--p,0))}
.dvg-g{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-width:0;transition:opacity .3s}
.dvg-ic{position:relative;z-index:1;width:44px;height:44px;margin-bottom:8px;border-radius:50%;display:grid;place-items:center;background:var(--sx-blue);border:1.5px solid var(--sx-blue);color:#fff;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.dvg-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.dvg-g b{font-family:var(--f-brand);font-weight:500;font-size:14px}
.dvg-g span{font-size:12px;color:var(--sx-ink3);line-height:1.35}
.sx.is-armed .dvg-g:not(.on):not(.ok) .dvg-ic{background:#fff;border-color:var(--sx-line2);color:var(--sx-ink3)}
.sx.is-armed .dvg-g:not(.on):not(.ok){opacity:.55}
.dvg-g.on .dvg-ic{background:var(--sx-blue-b);border-color:var(--sx-blue);color:var(--sx-blue-t);box-shadow:0 0 0 4px rgba(0,122,255,.12)}

/* ---------- 2 · pilha de exemplos ---------- */
.dvd{position:relative;height:296px}
.dvd-c{position:absolute;left:0;right:0;top:28px;background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:14px 18px 6px;transform:translateY(calc(var(--k) * -14px)) scale(calc(1 - var(--k) * .04));transform-origin:top center;transition:transform .55s var(--sx-ease),opacity .35s var(--sx-ease);box-shadow:0 20px 40px -32px rgba(10,20,60,.35)}
.dvd-c[data-c="0"]{z-index:3}.dvd-c[data-c="1"]{z-index:2}.dvd-c[data-c="2"]{z-index:1}
.dvd-c.is-out{opacity:0;transform:translateY(24px)}
.dvd-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px !important}
.dvd-h b{font-family:var(--f-brand);font-weight:500;font-size:15px}
.dvd-h span{font-size:12.5px;color:var(--sx-ink3)}
.dvd-c li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--sx-line)}
.dvd-c .mv-tt small{font-size:12px}

/* ---------- 3 · repetição e limite ---------- */
.dvl{display:flex;flex-direction:column;gap:12px}
.dvl-card{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:16px 18px}
.dvl-k{font-size:13px;font-weight:500;color:var(--sx-ink2)}
.dvl-reqs{margin-top:6px !important}
.dvl-reqs li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--sx-line)}
.dvl-reqs li:first-child{border-top:0}
.dvl-reqs time{font-size:12px;color:var(--sx-ink3);font-variant-numeric:tabular-nums}
.dvl-n{display:flex;align-items:baseline;gap:10px;margin-top:6px !important;padding-top:10px;border-top:1px solid var(--sx-line)}
.dvl-n b{font-family:var(--f-brand);font-weight:400;font-size:34px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .3s}
.dvl-n span{font-size:13.5px;color:var(--sx-ink2)}
.dvl-n.is-hi b{color:var(--sx-blue)}
.dvl-vh{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dvl-meter{position:relative;height:10px;border-radius:999px;background:var(--sx-wash);margin:16px 0 0}
.dvl-meter i{position:absolute;inset:0;border-radius:999px;background:var(--sx-blue);transform-origin:left;transform:scaleX(var(--v,.4));transition:transform 1s var(--sx-ease),background .3s}
.sx.is-armed .dvl-meter i{transform:scaleX(var(--v,.3))}
.dvl-meter.hot i{background:var(--sx-warn)}
.dvl-meter::after{content:"";position:absolute;left:85%;top:-5px;bottom:-5px;width:2px;border-radius:2px;background:var(--ink)}
.dvl-lim{position:absolute;left:85%;top:16px;transform:translateX(-50%);font-size:12px;color:var(--sx-ink3)}
.dvl-msg{margin-top:28px !important;font-size:12.5px;color:var(--sx-ink3)}

/* ---------- 4 · chaves ---------- */
.dvk{background:#fff;border-radius:18px;padding:18px 20px}
.dvk-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.dvk-t{font-family:var(--f-brand);font-weight:500;font-size:16px}
.dvk-s{font-size:12.5px;color:var(--sx-ink3)}
.dvk-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--sx-line);transition:background .3s}
.dvk-list li.is-hi{background:var(--sx-blue-b);margin:0 -10px;padding-inline:10px;border-radius:12px}
.dvk-list li.is-new .sx-ic{background:var(--sx-ok-b);color:var(--sx-ok-t)}
.dvk-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.dvk-m{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--sx-wash);padding:2px 7px;border-radius:6px}
.dvk-u{font-size:12px;color:var(--sx-ink3)}
.dvk-old{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:8px;padding:12px 14px;border-radius:14px;background:var(--sx-al-b)}

/* ---------- 5 · referência técnica ---------- */
.dvr{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px}
.dvr-h{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-bottom:10px}
.dvr-ic{width:42px;height:42px;border-radius:12px;background:var(--sx-blue);color:#fff;display:grid;place-items:center}
.dvr-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.dvr-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--sx-line)}
.dvr-list b{font-family:var(--f-brand);font-weight:500;font-size:14px}
.dvr-t{width:22px;height:22px;border-radius:50%;background:var(--sx-ok);color:#fff;display:grid;place-items:center;transition:opacity .25s,transform .25s var(--sx-ease)}
.dvr-t svg{width:12px;height:12px}
.sx.is-armed .dvr-list li:not(.ok) .dvr-t{opacity:0;transform:scale(.8)}
.dvr-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px !important;padding-top:14px;border-top:1px solid var(--sx-line)}
.dvr-f > span:not(.sx-badge){font-size:12.5px;color:var(--sx-ink3)}

@media (max-width:720px){
  .dvg,.dvk,.dvr{padding:16px}
  .dvg-row{gap:6px}
  .dvg-g b{font-size:13px}
  .dvg-req{grid-template-columns:auto minmax(0,1fr)}
  .sx .dvg-req .sx-badge{display:none}
  .dvg-res .mv-tt b,.dvg-res .mv-tt span{white-space:normal}
  .dvd{height:330px}
  .dvd-c{padding:14px 14px 6px}
  .dvd-c li{grid-template-columns:minmax(0,1fr)}
  .sx .dvd-c li .sx-badge{display:none}
  .dvd-c .mv-tt b{white-space:normal}
  .dvl-reqs li{grid-template-columns:auto minmax(0,1fr)}
  .sx .dvl-reqs time,.sx .dvl-reqs .sx-badge{display:none}
  .dvk-h{flex-direction:column;align-items:stretch}
  .dvk-h .sx-btn{height:38px}
  .dvk-list li{grid-template-columns:auto minmax(0,1fr)}
  .dvk-r{grid-column:2;align-items:flex-start;flex-direction:row;gap:8px;align-items:center}
  .dvk-old{grid-template-columns:auto minmax(0,1fr)}
  .sx .dvk-old .sx-badge{display:none}
  .dvr-list b{font-size:13.5px}
}