/* The merchant guide for the drop-in widget (/partners/sdk/). Page-local only:
   code slabs, the demo checkout and the reference table exist nowhere else on
   the site. Everything structural comes from site.css. */

.sdk-hero-title { max-width: 17ch; }
.sdk-hero .lede { max-width: 56ch; margin-top: var(--tud-space-5); }
.sdk-hero-fine { max-width: 64ch; margin-top: var(--tud-space-4); }
.sdk-lede { margin-top: var(--tud-space-4); }

/* The prose sections keep the site's container, so every section on the page
   starts on the same left edge, and cap their own blocks instead of narrowing
   the column. A centred narrow column here would give the page three different
   left margins on the way down. */
.sdk-reading > * { max-width: 880px; }

/* ---------- code ---------- */

/* The site has no monospace face. Code is the one place that needs one, so it
   borrows the platform's and stays a plainly different register from the brand
   faces around it. */
.snippet,
.code-inline {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* The block the merchant is here to copy: ink slab, accent rule down the edge
   that owns it, nothing else competing. It inverts with the theme because it
   rides the inverse pair, so the contrast holds in light and dark. */
.snippet {
  margin-top: clamp(var(--tud-space-8), 4vw, var(--tud-space-10));
  overflow: hidden;
  border-left: 4px solid var(--tud-color-accent-base);
  border-radius: var(--tud-radius-lg);
  color: var(--tud-color-text-inverse);
  background: var(--tud-color-bg-inverse);
}

.snippet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tud-space-4);
  padding: var(--tud-space-4) var(--tud-space-4) var(--tud-space-3) var(--tud-space-5);
}

.snippet-label {
  font-family: var(--tud-font-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0.66;
}

.snippet-copy {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 var(--tud-space-5);
  border: var(--tud-border-default) solid currentColor;
  border-radius: var(--tud-radius-pill);
  color: inherit;
  background: none;
  font-family: var(--tud-font-primary);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition:
    color var(--tud-duration-fast) var(--tud-ease-standard),
    border-color var(--tud-duration-fast) var(--tud-ease-standard),
    background-color var(--tud-duration-fast) var(--tud-ease-standard);
}

.snippet-copy:hover {
  border-color: var(--tud-color-accent-base);
  color: var(--tud-color-ramp-neutral-950);
  background: var(--tud-color-accent-base);
}

.snippet-copy:focus-visible { outline-offset: 2px; }

.snippet-code {
  margin: 0;
  padding: 0 var(--tud-space-5) var(--tud-space-5);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.85;
  tab-size: 2;
}

.snippet-status:not(:empty) {
  margin: 0;
  padding: 0 var(--tud-space-5) var(--tud-space-4);
  color: inherit;
  opacity: 0.72;
}

/* The listener example: same slab, no header row. */
.snippet--plain {
  margin-top: var(--tud-space-5);
  padding: var(--tud-space-5);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.85;
}

.code-inline {
  padding: 2px 6px;
  border: var(--tud-border-hairline) solid var(--tud-color-accent-tint-border);
  border-radius: var(--tud-radius-xs);
  color: var(--site-accent-text);
  background: var(--tud-color-accent-tint);
  font-size: 0.88em;
  white-space: nowrap;
}

/* ---------- the live demo ---------- */

.demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(var(--tud-space-6), 4vw, var(--tud-space-12));
}

.demo-checkout { padding: clamp(var(--tud-space-6), 3vw, var(--tud-space-8)); }

.demo-checkout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tud-space-4);
  padding-bottom: var(--tud-space-4);
  border-bottom: var(--tud-border-default) solid var(--tud-color-border-default);
}

.demo-shop { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; }

.demo-tag {
  flex: 0 0 auto;
  padding: 4px var(--tud-space-3);
  border: var(--tud-border-hairline) solid var(--tud-color-border-strong);
  border-radius: var(--tud-radius-pill);
  color: var(--tud-color-text-muted);
  font-family: var(--tud-font-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-lines { display: grid; gap: var(--tud-space-2); margin: var(--tud-space-5) 0 0; }
.demo-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tud-space-4); }
.demo-line dt { color: var(--tud-color-text-secondary); font-size: 15px; }
.demo-line dd { margin: 0; color: var(--tud-color-text-secondary); font-size: 15px; }

.demo-line--total {
  margin-top: var(--tud-space-2);
  padding-top: var(--tud-space-3);
  border-top: var(--tud-border-default) dashed var(--tud-color-border-strong);
}
.demo-line--total dt, .demo-line--total dd { color: var(--tud-color-text-primary); font-size: 17px; font-weight: 800; }

.demo-field { margin-top: var(--tud-space-6); }
.demo-field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tud-space-2); }
.demo-applied { min-height: 19px; margin-top: var(--tud-space-2); }
.demo-checkout [data-tud-widget] { display: block; margin-top: var(--tud-space-5); }

.demo-side { display: grid; align-content: start; gap: var(--tud-space-3); }
.demo-side-title { font-size: 21px; line-height: 1.2; }
.demo-side-body { max-width: 44ch; color: var(--tud-color-text-secondary); font-size: 15px; line-height: 1.6; }

/* The event, as the page receives it. Same ink slab as the snippet, so the
   thing you copy and the thing you get back read as one material. */
.demo-console {
  min-height: 140px;
  margin-top: var(--tud-space-2);
  padding: var(--tud-space-4) var(--tud-space-5);
  overflow-x: auto;
  border-radius: var(--tud-radius-lg);
  color: var(--tud-color-text-inverse);
  background: var(--tud-color-bg-inverse);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.8;
}

.demo-console-idle { opacity: 0.7; }
.demo-console-line { white-space: pre; }

/* The slab rides the inverse pair, so in dark mode it is the light surface on
   the page and the accent has to flip the other way to stay readable on it. */
.demo-console { --console-accent: var(--tud-color-accent-text-on-dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo-console { --console-accent: var(--tud-color-accent-text-on-light); }
}
[data-theme="dark"] .demo-console { --console-accent: var(--tud-color-accent-text-on-light); }
.demo-console-line--accent { color: var(--console-accent); font-weight: 700; }

/* ---------- reference ---------- */

.ref-table-wrap {
  margin-top: clamp(var(--tud-space-6), 3vw, var(--tud-space-8));
  overflow-x: auto;
  border: var(--tud-border-default) solid var(--tud-color-border-default);
  border-radius: var(--tud-radius-lg);
  background: var(--tud-color-bg-surface);
}

.ref-table { width: 100%; min-width: 540px; border-collapse: collapse; text-align: left; }

.ref-table th, .ref-table td {
  padding: var(--tud-space-4) var(--tud-space-5);
  border-bottom: var(--tud-border-hairline) solid var(--tud-color-border-default);
  vertical-align: top;
}

.ref-table thead th {
  color: var(--tud-color-text-muted);
  background: var(--tud-color-bg-sunken);
  font-family: var(--tud-font-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ref-table tbody th { width: 216px; font-weight: 700; }
.ref-table tbody td { color: var(--tud-color-text-secondary); font-size: 15px; line-height: 1.65; }
.ref-table tbody tr:last-child th, .ref-table tbody tr:last-child td { border-bottom: 0; }

.ref-example-title { margin-top: clamp(var(--tud-space-10), 5vw, var(--tud-space-12)); font-size: 21px; line-height: 1.2; }
.snippet--plain + .fine { margin-top: var(--tud-space-3); }

/* ---------- security ---------- */

.security-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tud-space-4);
  margin: clamp(var(--tud-space-6), 3vw, var(--tud-space-8)) 0 0;
  padding: 0;
  list-style: none;
}

.security-list li {
  padding: var(--tud-space-6);
  border: var(--tud-border-default) solid var(--tud-color-border-default);
  border-radius: var(--tud-radius-lg);
  background: var(--tud-color-bg-surface);
  color: var(--tud-color-text-secondary);
  font-size: 15px;
  line-height: 1.65;
}

.security-list strong {
  display: block;
  margin-bottom: var(--tud-space-2);
  color: var(--tud-color-text-primary);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

/* ---------- responsive ---------- */

@media (max-width: 920px) {
  .demo-layout, .security-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .snippet-head { flex-wrap: wrap; padding-inline: var(--tud-space-4); }
  .snippet-code, .snippet-status:not(:empty) { padding-inline: var(--tud-space-4); }
  .snippet-code, .snippet--plain { font-size: 12.5px; }
  .snippet-copy { width: 100%; justify-content: center; }
  .demo-field-row { grid-template-columns: 1fr; }
  .ref-table th, .ref-table td { padding: var(--tud-space-3) var(--tud-space-4); }
  .security-list li { padding: var(--tud-space-5); }
}