/* ═══════════════════════════════════════════════════════════════════════
 * dp-docs.css — THE ONE STYLESHEET for the SDK docs (views/docs.ejs), Oct 2026.
 *
 * The brand is the homepage's and HQ's (public/css/dp-landing.css,
 * public/hq-assets/style.css): one solid violet, white ink, a deeper violet
 * for depth, Zalando Sans Expanded for display type, DM Sans for everything
 * else, white pill buttons, translucent white "veil" panels. Code sits on the
 * deep ink violet. Fonts come from /fonts/dp-fonts.css.
 *
 * This is a page people read for an hour, so ink is lighter than the
 * homepage's: --dd-ink-2 and --dd-ink-3 clear 4.5:1 on the violet, and text
 * inside a veil panel (which lifts the background) is full white.
 *
 * The page carries NO <style> blocks and NO style="" attributes. Anything new
 * goes here. Everything is scoped under body.dd.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  --dd-violet: #6a40f0;
  --dd-violet-hi: #7d58f7;
  --dd-violet-deep: #4f27d4;
  --dd-ink-deep: #1b0b4a;
  --dd-white: #ffffff;
  --dd-ink-2: rgba(255, 255, 255, 0.93);
  --dd-ink-3: rgba(255, 255, 255, 0.86);
  --dd-ink-4: rgba(255, 255, 255, 0.6);
  --dd-line: rgba(255, 255, 255, 0.18);
  --dd-line-2: rgba(255, 255, 255, 0.1);
  --dd-veil: rgba(255, 255, 255, 0.1);
  --dd-veil-2: rgba(255, 255, 255, 0.16);
  --dd-code: rgba(27, 11, 74, 0.72);
  --dd-code-inline: rgba(27, 11, 74, 0.34);
  --dd-shadow: rgba(22, 6, 72, 0.5);
  --dd-good: #6bf0b0;
  --dd-good-text: #e6fef2;
  --dd-gold: #ffd166;
  --dd-sky: #a9d4ff;
  --dd-bad: #ffb0bb;
  --dd-radius: 22px;
  --dd-radius-sm: 16px;
  --dd-gutter: 16px;
  --dd-bar: 72px;
  --dd-max: 1180px; /* the top bar's width (.dpt__in in /css/dp-top-bar.css); the gutter matches it too */
  --dd-display: 'Zalando Sans Expanded', 'DM Sans', system-ui, sans-serif;
  --dd-body: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --dd-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --dd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 720px) { :root { --dd-gutter: 32px; } }

/* ── base ──────────────────────────────────────────────────────────── */
html.dd-root { background: var(--dd-violet); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.dd-root { scroll-behavior: auto; } }
body.dd {
  margin: 0; min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 70%),
    var(--dd-violet);
  background-attachment: fixed;
  color: var(--dd-white);
  font-family: var(--dd-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.dd.dd-menu-open { overflow: hidden; }
.dd *, .dd *::before, .dd *::after { box-sizing: border-box; }
.dd :focus-visible { outline: 3px solid var(--dd-white); outline-offset: 3px; border-radius: 6px; }
.dd [id] { scroll-margin-top: calc(var(--dd-bar) + 28px); }
.dd-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.dd-skip:focus {
  position: fixed; z-index: 2000; top: 10px; left: 10px; width: auto; height: auto; clip: auto;
  padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--dd-violet-deep);
  font-weight: 800; text-decoration: none;
}
.dd-i { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dd-i--fill { fill: currentColor; stroke: none; }

/* ── top bar ───────────────────────────────────────────────────────── */
/* The top bar is the site's (partials/dp-top-bar). On a phone the contents open from this pill. */
.dd-round {
  position: fixed; right: var(--dd-gutter); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 70;
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: #4f27d4; font: 800 15px/1 var(--dd-body, 'DM Sans', system-ui, sans-serif); box-shadow: 0 10px 28px rgba(22, 6, 72, 0.4);
}
.dd-round .dd-i { stroke-width: 2.2; }
.dd-round .dd-round__close { display: none; }
.dd-menu-open .dd-round .dd-round__open { display: none; }
.dd-menu-open .dd-round .dd-round__close { display: block; }
@media (min-width: 981px) { .dd-round { display: none; } }

/* ── layout: contents + page ───────────────────────────────────────── */
.dd .layout {
  width: 100%; max-width: var(--dd-max); margin: 0 auto; padding: 0 var(--dd-gutter);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 981px) {
  .dd .layout { grid-template-columns: 272px minmax(0, 1fr); gap: 56px; }
}

/* The contents: a sticky column on a wide screen, a sheet under the bar on a phone. */
.dd .sidebar {
  position: fixed; inset: calc(var(--dd-bar) + env(safe-area-inset-top)) 0 0 0; z-index: 50;
  padding: 20px var(--dd-gutter) 48px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--dd-violet-deep);
  transform: translateX(-100%); visibility: hidden;
  transition: transform 260ms var(--dd-ease), visibility 0s linear 260ms;
}
.dd .sidebar.open { transform: none; visibility: visible; transition: transform 260ms var(--dd-ease); }
@media (min-width: 981px) {
  .dd .sidebar {
    position: sticky; inset: auto; top: calc(var(--dd-bar) + 24px); z-index: auto; align-self: start;
    transform: none; visibility: visible; transition: none; background: none;
    max-height: calc(100vh - var(--dd-bar) - 24px); padding: 28px 8px 40px 0;
    margin-left: -6px; /* the active row's edge sits under the bar's menu button, which hangs out 6px the same way */
    scrollbar-width: thin; scrollbar-color: var(--dd-line) transparent;
  }
  .dd .sidebar::-webkit-scrollbar { width: 6px; }
  .dd .sidebar::-webkit-scrollbar-thumb { background: var(--dd-line); border-radius: 3px; }
}
.dd .sidebar h4 {
  margin: 28px 0 8px; padding: 0 12px;
  font: 800 13px/1.3 var(--dd-display); letter-spacing: 0.01em; color: var(--dd-white);
}
.dd .sidebar h4:first-child { margin-top: 0; }
.dd .sidebar ul { list-style: none; margin: 0; padding: 0; }
.dd .sidebar li { margin: 0; }
.dd .sidebar li a {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-height: 36px; padding: 6px 12px; border-radius: 12px;
  color: var(--dd-ink-2); font-size: 15px; line-height: 1.3; font-weight: 500; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.dd .sidebar li a:hover { background: var(--dd-veil); color: var(--dd-white); }
.dd .sidebar li a.active { background: var(--dd-white); color: var(--dd-violet-deep); font-weight: 700; }
@media (max-width: 980px) { .dd .sidebar li a { min-height: 44px; font-size: 16px; } }

/* ── the page ──────────────────────────────────────────────────────── */
.dd .doc-main { min-width: 0; max-width: 880px; padding: 44px 0 96px; }
.dd .doc-eyebrow { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--dd-ink-2); }
.dd h1 {
  margin: 0; font-family: var(--dd-display); font-weight: 800;
  font-size: clamp(38px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance;
}
.dd .doc-main h2, .dd .doc-main h3 { overflow-wrap: anywhere; } /* a heading can hold a long path */
/* "downloadable" is about 8.9em wide, so under 380px the headline sizes to the screen or it widens the page. */
@media (max-width: 380px) { .dd h1 { font-size: calc((100vw - 32px) / 9); } }
.dd .doc-main .lede { margin: 22px 0 0; max-width: 36em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--dd-ink-2); }
.dd .doc-main h2 {
  margin: 72px 0 18px; padding-top: 44px; border-top: 1px solid var(--dd-line);
  font-family: var(--dd-display); font-weight: 800;
  font-size: clamp(27px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -0.01em;
}
.dd .doc-main h3 {
  margin: 40px 0 12px; font-family: var(--dd-display); font-weight: 800;
  font-size: clamp(19px, 2vw, 22px); line-height: 1.2;
}
.dd .doc-main h4 { margin: 28px 0 8px; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--dd-white); }
.dd .doc-main p { margin: 0 0 16px; color: var(--dd-ink-2); }
.dd .doc-main p strong, .dd .doc-main li strong { color: var(--dd-white); font-weight: 700; }
.dd .doc-main ul, .dd .doc-main ol { margin: 0 0 16px; padding-left: 24px; color: var(--dd-ink-2); }
.dd .doc-main li { margin-bottom: 8px; }
.dd .doc-main li::marker { color: var(--dd-ink-3); font-weight: 700; }
.dd .doc-main a {
  color: var(--dd-white); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(255, 255, 255, 0.5);
}
.dd .doc-main a:hover { text-decoration-color: var(--dd-white); }
.dd .doc-main .mt-sm { margin-top: 10px; }

/* Inline code + keys */
.dd code {
  font-family: var(--dd-mono); font-size: 0.84em; color: var(--dd-white);
  background: var(--dd-code-inline); padding: 2px 6px; border-radius: 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.dd kbd {
  font-family: var(--dd-mono); font-size: 0.8em; color: var(--dd-white);
  background: var(--dd-code-inline); border: 1px solid var(--dd-line); border-bottom-width: 2px;
  padding: 2px 7px; border-radius: 6px;
}
/* Code blocks */
.dd pre {
  position: relative; margin: 16px 0 24px; padding: 36px 20px 18px; overflow-x: auto;
  background: var(--dd-code); border-radius: var(--dd-radius-sm);
  font-family: var(--dd-mono); font-size: 14px; line-height: 1.65; color: var(--dd-white);
  scrollbar-width: thin; scrollbar-color: var(--dd-line) transparent;
}
.dd pre code { background: none; padding: 0; font-size: inherit; }
.dd pre.mt-code { margin: 12px 0 0; }
.dd .code-label {
  position: absolute; top: 10px; right: 14px;
  font: 600 12px/1.4 var(--dd-body); color: var(--dd-ink-4);
}

/* Syntax colours (/js/dp-docs-highlight.js): the page's status colours, lifted for the deep code panel. */
.dd .tok-keyword { color: #ffb3dc; font-weight: 600; }
.dd .tok-string { color: #9df5c8; }
.dd .tok-number, .dd .tok-literal { color: #ffd98a; }
.dd .tok-fn, .dd .tok-key { color: #a9d4ff; }
.dd .tok-type, .dd .tok-builtin { color: #d3c4ff; }
.dd .tok-comment { color: rgba(255, 255, 255, 0.66); }

/* "New in the next SDK release": plain words, no pill. The text comes from
   NEW_BADGE / NEW_BADGE_SHORT (NEXT_SDK_VERSION, top of the page body). */
.dd .new-badge { font: 700 14px/1.4 var(--dd-body); color: var(--dd-good-text); white-space: nowrap; }
.dd .doc-main h2 .new-badge, .dd .doc-main h3 .new-badge { display: block; margin-top: 8px; white-space: normal; }
.dd .new-badge.sm { margin-right: 4px; }
.dd .new-badge.sm::after { content: ':'; }
.dd .sidebar .new-badge { font-size: 12px; font-weight: 600; }
.dd .sidebar li a.active .new-badge { color: var(--dd-violet-deep); }
.dd .callout .body > .new-badge { display: block; margin: 0 0 8px; }

/* Callouts: the veil, with the icon carrying the kind. */
.dd .callout {
  display: flex; gap: 14px; margin: 20px 0 26px; padding: 18px 20px;
  background: var(--dd-veil); border-radius: var(--dd-radius-sm);
}
.dd .callout .ic { flex: none; padding-top: 3px; font-size: 20px; color: var(--dd-sky); }
.dd .callout .body { min-width: 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.55; }
.dd .callout .body p, .dd .callout .body li, .dd .callout .body ul, .dd .callout .body ol { color: var(--dd-white); }
.dd .callout .body > :last-child { margin-bottom: 0; }
.dd .callout.warn { background: rgba(255, 209, 102, 0.13); }
.dd .callout.warn .ic { color: var(--dd-gold); }
.dd .callout.danger { background: rgba(255, 150, 170, 0.16); }
.dd .callout.danger .ic { color: var(--dd-bad); }
.dd .callout.tip { background: rgba(107, 240, 176, 0.11); }
.dd .callout.tip .ic { color: var(--dd-good); }

/* Reference tables */
.dd .tbl-wrap {
  margin: 20px 0 28px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--dd-veil); border-radius: var(--dd-radius-sm);
  scrollbar-width: thin; scrollbar-color: var(--dd-line) transparent;
}
.dd table.dp { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.dd table.dp th {
  padding: 13px 16px; text-align: left; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--dd-white);
  border-bottom: 1px solid var(--dd-line);
}
.dd table.dp td { padding: 12px 16px; vertical-align: top; color: var(--dd-white); border-bottom: 1px solid var(--dd-line-2); }
.dd table.dp tr:last-child td { border-bottom: 0; }
.dd table.dp td:first-child { font-weight: 600; white-space: nowrap; }
.dd table.dp code { font-size: 0.86em; }
@media (max-width: 980px) {
  .dd table.dp td:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 120px; }
  .dd .doc-main p code, .dd .doc-main li code { overflow-wrap: anywhere; }
}

/* Hero cards */
.dd .hero-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 32px 0 40px; }
@media (min-width: 720px) { .dd .hero-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dd .hero-card { padding: 22px; background: var(--dd-veil); border-radius: var(--dd-radius); }
.dd .hero-card .ic {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 50%; background: var(--dd-veil-2); font-size: 20px; color: #fff;
}
.dd .doc-main .hero-card h4 { margin: 0 0 6px; font: 800 16px/1.25 var(--dd-display); }
.dd .doc-main .hero-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--dd-white); overflow-wrap: anywhere; }

/* The GitHub repo box: the full URL, visible, clickable and copyable */
.dd .repo-box { margin: 0 0 24px; padding: 22px; background: var(--dd-veil); border-radius: var(--dd-radius); }
.dd .repo-box .repo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 800 18px/1.2 var(--dd-display); }
.dd .repo-box .repo-head .dd-i { font-size: 24px; }
.dd .repo-row {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 10px 10px 16px;
  background: var(--dd-code); border-radius: 14px;
}
.dd .repo-row .repo-val {
  flex: 1; min-width: 0; font-family: var(--dd-mono); font-size: 14px; color: var(--dd-white);
  overflow-wrap: anywhere; user-select: all;
}
.dd .repo-copy {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--dd-white); color: var(--dd-violet-deep); font: 700 13px/1 var(--dd-body);
  transition: transform 0.15s ease;
}
.dd .repo-copy:hover { transform: translateY(-1px); }
.dd .repo-copy.done { background: var(--dd-good); color: var(--dd-ink-deep); }
.dd .doc-main .repo-note { margin: 14px 0 0; font-size: 15px; color: var(--dd-white); }

/* The folder tree */
.dd .ftree {
  margin: 16px 0 24px; padding: 12px 10px; background: var(--dd-code); border-radius: var(--dd-radius-sm);
  font-family: var(--dd-mono); font-size: 13.5px;
}
.dd .ft-row { position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 10px; border-radius: 10px; color: var(--dd-ink-3); }
.dd .ft-row .ic { flex: none; width: 15px; height: 15px; fill: var(--dd-ink-4); }
.dd .ft-row .name { color: var(--dd-white); }
.dd .ft-row .note { margin-left: 10px; font-size: 12px; color: var(--dd-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd .ft-row.d1 { padding-left: 30px; }
.dd .ft-row.d2 { padding-left: 50px; }
.dd .ft-row.d3 { padding-left: 70px; }
.dd .ft-row.d4 { padding-left: 90px; }
.dd .ft-key { margin: 2px 0; background: var(--dd-veil-2); cursor: help; }
.dd .ft-key .ic { fill: var(--dd-white); }
.dd .ft-key .name { font-weight: 700; }
.dd .ft-key:hover, .dd .ft-key:focus { background: rgba(255, 255, 255, 0.24); outline: none; }
.dd .ft-badge { flex: none; margin-left: auto; font: 700 13px/1.4 var(--dd-body); color: var(--dd-white); }
.dd .ft-tip {
  position: absolute; right: 8px; bottom: calc(100% + 8px); z-index: 10; width: 320px; max-width: 70vw; padding: 12px 14px;
  background: var(--dd-ink-deep); color: var(--dd-ink-2); border-radius: 14px;
  font: 400 14px/1.5 var(--dd-body); white-space: normal;
  box-shadow: 0 14px 40px var(--dd-shadow);
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.dd .ft-tip strong { color: #fff; }
.dd .ft-key:hover .ft-tip, .dd .ft-key:focus .ft-tip { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 720px) {
  .dd .ft-row .note { display: none; }
  .dd .ft-row.d3 { padding-left: 52px; }
  .dd .ft-row.d4 { padding-left: 68px; }
  .dd .ftree { overflow-x: auto; }
  /* The tree scrolls inside its box here, which would clip a floating tip: tap a row and the tip opens under it. */
  .dd .ft-key { flex-wrap: wrap; }
  .dd .ft-tip {
    position: static; display: none; flex-basis: 100%; width: 100%; max-width: none; margin-top: 6px;
    opacity: 1; visibility: visible; transform: none; box-shadow: none;
  }
  .dd .ft-key:hover .ft-tip, .dd .ft-key:focus .ft-tip { display: block; }
}

/* The rect edge figure (#rect-edges): walls white, openings green, unknown gold, as in the SDK's Scene gizmo. */
.dd .edge-fig { margin: 18px 0 26px; padding: 16px 18px 12px; overflow-x: auto; background: var(--dd-code); border-radius: var(--dd-radius-sm); }
.dd .edge-fig svg { display: block; width: 100%; min-width: 560px; height: auto; }
.dd .edge-fig text { font-family: var(--dd-mono); font-size: 12px; fill: var(--dd-ink-3); }
.dd .edge-fig .lbl { fill: var(--dd-ink-4); font-size: 11px; }
.dd .edge-fig .w { fill: var(--dd-ink-4); fill-opacity: 0.45; stroke: var(--dd-ink-4); }
.dd .edge-fig .w-t { fill: var(--dd-white); }
.dd .edge-fig .win { fill: none; stroke: #cdbdff; stroke-dasharray: 3 3; }
.dd .edge-fig .o { fill: var(--dd-good); fill-opacity: 0.16; stroke: var(--dd-good); }
.dd .edge-fig .o-t { fill: var(--dd-good); }
.dd .edge-fig .u { fill: var(--dd-gold); fill-opacity: 0.08; stroke: var(--dd-gold); stroke-dasharray: 4 3; }
.dd .edge-fig .u-t { fill: var(--dd-gold); }
.dd .edge-fig .axis { stroke: var(--dd-ink-4); }
.dd .edge-fig figcaption { margin-top: 10px; font-size: 13px; color: var(--dd-ink-3); }

/* Next steps */
.dd .next-steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 72px; padding-top: 44px; border-top: 1px solid var(--dd-line); }
@media (min-width: 720px) { .dd .next-steps { grid-template-columns: 1fr 1fr; } }
.dd .doc-main a.next-card {
  display: block; padding: 22px; background: var(--dd-veil); border-radius: var(--dd-radius);
  color: var(--dd-white); text-decoration: none; transition: background 0.15s ease, transform 0.15s ease;
}
.dd .doc-main a.next-card:hover { background: var(--dd-veil-2); transform: translateY(-2px); }
.dd .next-card .ic { margin-bottom: 12px; font-size: 24px; }
.dd .doc-main .next-card h4 { margin: 0 0 6px; font: 800 17px/1.25 var(--dd-display); }
.dd .doc-main .next-card p { margin: 0; font-size: 15px; font-weight: 400; color: var(--dd-white); }

/* Footer */
.dd .footer-bar { padding: 28px var(--dd-gutter) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--dd-line-2); text-align: center; font-size: 14px; color: var(--dd-ink-3); }
.dd .footer-bar a { color: var(--dd-white); text-underline-offset: 3px; }