/* ============================================================
   50 — Developer experience (dark)
   Scope: .dev*  ·  .tok-* only inside .dev
   ============================================================ */

.dev {
  /* ---- surface alpha steps: every rgba in this file is one of these ---- */
  --dev-hair:       rgba(255,255,255,.08);
  --dev-hair-lit:   rgba(255,255,255,.16);
  --dev-tint-1:     rgba(255,255,255,.04);
  --dev-tint-2:     rgba(255,255,255,.07);
  --dev-shade:      rgba(0,0,0,.5);
  --dev-shade-deep: rgba(0,0,0,.65);

  /* ---- surfaces ---- */
  --dev-bg: var(--c-navy-deep);
  /* OPAQUE: the sticky gutter has to occlude code scrolling under it */
  --dev-code-bg:   color-mix(in srgb, var(--c-navy-deep) 78%, rgb(0 0 0));
  --dev-gutter-bg: color-mix(in srgb, var(--c-white) 4%, var(--dev-code-bg));

  --dev-fg:       rgba(255,255,255,.92);
  --dev-fg-dim:   rgba(255,255,255,.56); /* 5.7:1 on the window surface */
  --dev-fg-faint: rgba(255,255,255,.48); /* 4.8:1 on the gutter fill */

  /* ---- editor palette: three accents + two greys ---- */
  --tok-plain: rgba(255,255,255,.88);
  --tok-blue:  color-mix(in srgb, var(--c-cyan) 62%, var(--c-white)); /* fns AND types */
  --tok-str:   var(--c-lime);
  --tok-num:   var(--c-orange);
  --tok-kw:    color-mix(in srgb, var(--c-brand) 55%, var(--c-white)); /* quiet violet */
  --tok-com:   rgba(255,255,255,.52); /* 5.6:1 */
  --tok-punc:  rgba(255,255,255,.5);
  --tok-op:    rgba(255,255,255,.62);

  /* ---- code metrics: fixed so panel heights never jump ---- */
  --dev-code-fs:    var(--fs-xs);
  --dev-code-lh:    1.5rem;
  --dev-code-lines: 13;
  --dev-gutter-w:   calc(var(--s-8) + var(--s-2));     /* 48px incl. its own padding */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dev-bg);
  color: var(--text-invert-body);
}

/* ---- top edge: 1px lit hairline + one soft bloom beneath it ---- */
.dev::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  opacity: .5;
  background: linear-gradient(90deg,
    transparent 0%, var(--c-brand) 26%, var(--c-teal) 50%, var(--c-brand) 74%, transparent 100%);
  z-index: 1;
}
.dev__glow {
  position: absolute;
  inset: 0 0 auto;
  height: clamp(200px, 34vw, 460px);
  pointer-events: none;
  opacity: .22;
  background:
    radial-gradient(52% 100% at 50% -18%, var(--c-brand) 0%, transparent 68%),
    radial-gradient(38% 82% at 84% -10%, var(--c-cyan) 0%, transparent 70%);
}
.dev__inner { position: relative; z-index: 1; }

/* ---------------- Layout ---------------- */

.dev__grid { display: grid; gap: var(--s-10); }

@media (min-width: 1024px) {
  .dev__grid {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: var(--s-10);
    align-items: start;
  }
  /* optical: nudge the copy down so the eyebrow sits with the chrome bar */
  .dev__copy { padding-top: var(--s-2); }
}
@media (min-width: 1200px) {
  .dev__grid { gap: var(--s-12); }
}

/* ---------------- Left column ---------------- */

.dev__title { margin-top: var(--s-5); }

.dev__lead {
  margin-top: var(--s-5);
  max-width: 46ch;
  color: var(--text-invert-body);
}

.dev__list { margin-top: var(--s-7); display: grid; gap: var(--s-3); }

.dev__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--dev-fg);
}
.dev__check {
  flex: none;
  width: var(--s-5); height: var(--s-5);
  /* centre the 20px mark on the first 22.5px line box */
  margin-top: calc((var(--lh-normal) * 1em - var(--s-5)) / 2);
  color: var(--c-teal);
}

.dev__cta { margin-top: var(--s-6); }
/* own modifier class — 44px touch target without restyling the primitive */
.dev__doclink { padding-block: var(--s-3); }

/* ---------------- Code window ---------------- */

.dev__window {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--dev-tint-2), var(--dev-tint-1));
  box-shadow:
    inset 0 0 0 1px var(--dev-hair),
    inset 0 1px 0 var(--dev-tint-2),
    0 2px 6px -2px var(--dev-shade),
    0 24px 48px -24px var(--dev-shade-deep);
}

/* -- chrome bar -- */
.dev__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--s-9);
  padding-inline: var(--s-4);
  border-bottom: 1px solid var(--dev-hair);
}
.dev__dots { display: flex; gap: var(--s-2); flex: none; }
.dev__dot {
  width: var(--s-3); height: var(--s-3);
  border-radius: var(--r-pill);
  background: var(--dev-hair-lit);
}
.dev__dot:nth-child(1) { background: color-mix(in srgb, var(--c-magenta) 22%, transparent); }
.dev__dot:nth-child(2) { background: color-mix(in srgb, var(--c-orange) 22%, transparent); }
.dev__dot:nth-child(3) { background: color-mix(in srgb, var(--c-lime) 20%, transparent); }

.dev__file {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--dev-fg-dim);
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- copy button -- */
.dev__copybtn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--s-7);
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--dev-hair);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--dev-fg-dim);
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
/* ≥44px touch target without a fat button */
.dev__copybtn::after {
  content: "";
  position: absolute;
  inset: calc(var(--s-2) * -1);
}
.dev__copybtn:hover {
  color: var(--dev-fg);
  background: var(--dev-tint-2);
  box-shadow: inset 0 0 0 1px var(--dev-hair-lit);
}
.dev__copybtn.is-copied { color: var(--c-lime); box-shadow: inset 0 0 0 1px var(--dev-hair-lit); }

.dev__swap { display: grid; }
.dev__swap > * { grid-area: 1 / 1; }
.dev__swap--ico { width: var(--s-4); height: var(--s-4); }
.dev__swap--ico svg { width: var(--s-4); height: var(--s-4); }
.dev__swap--txt { justify-items: start; }

.dev__swap-a, .dev__swap-b {
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.dev__swap-b { opacity: 0; transform: translateY(3px); }
.dev__copybtn.is-copied .dev__swap-a { opacity: 0; transform: translateY(-3px); }
.dev__copybtn.is-copied .dev__swap-b { opacity: 1; transform: none; }

/* -- language tabs -- */
.dev__tabs-wrap {
  position: relative;
  border-bottom: 1px solid var(--dev-hair);
}
.dev__tabs {
  /* set from the scroll listener: 1 = there is content past that edge.
     Both default 0 so a no-JS load never dims a reachable tab. */
  --fade-l: 0;
  --fade-r: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--s-2);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,1) calc(var(--fade-l) * var(--s-8)),
    rgba(0,0,0,1) calc(100% - var(--fade-r) * var(--s-8)),
    transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,1) calc(var(--fade-l) * var(--s-8)),
    rgba(0,0,0,1) calc(100% - var(--fade-r) * var(--s-8)),
    transparent 100%);
}
.dev__tabs::-webkit-scrollbar { display: none; }

.dev__tab {
  position: relative;
  flex: none;
  height: var(--s-9);
  min-width: 44px; /* touch target: short labels ("Go") must not fall under 44px */
  padding-inline: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--dev-fg-dim);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out);
}
.dev__tab::after {
  content: "";
  position: absolute;
  left: var(--s-3); right: var(--s-3); bottom: -1px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform var(--t-base) var(--ease-expo), opacity var(--t-base) var(--ease-out);
}
.dev__tab:hover { color: var(--dev-fg); }
/* the tab strip is a scroll container — draw the ring inside so it never clips */
.dev__tab:focus-visible { outline-offset: -3px; }
.dev__tab.is-active { color: var(--c-white); font-weight: var(--fw-semi); }
.dev__tab.is-active::after { transform: none; opacity: 1; }

/* -- code -- */
.dev__code {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dev-code-bg);
  /* deliberately deeper bottom pad: on classic-scrollbar platforms the pre's
     horizontal scrollbar renders inside it, so both platforms read as balanced */
  padding-block: var(--s-5) var(--s-6);
  /* explicit height: tab switches never move the page */
  height: calc(var(--dev-code-lines) * var(--dev-code-lh) + var(--s-5) + var(--s-6));
}
/* one full-height gutter column, behind the code, above the panel fill */
.dev__code::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--dev-gutter-w);
  background: var(--dev-gutter-bg);
  z-index: -1;
}
.dev__code [role="tabpanel"][hidden] { display: none; }

.dev__pre {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* no padding here — the sticky gutter must pin flush at x = 0 */
  padding: 0;
  font-size: var(--dev-code-fs);
  line-height: var(--dev-code-lh);
  color: var(--tok-plain);
  scrollbar-width: thin;
  scrollbar-color: var(--dev-hair-lit) transparent;
}
.dev__pre:focus-visible { outline-offset: -3px; }
.dev__pre::-webkit-scrollbar { height: var(--s-2); }
.dev__pre::-webkit-scrollbar-thumb {
  background: var(--dev-hair-lit);
  border-radius: var(--r-pill);
}
/* base.css types `code` at --fs-sm; the window runs one step tighter */
.dev__pre code {
  display: block;
  white-space: normal;
  font-size: var(--dev-code-fs);
  counter-reset: dev-line;
}

.dev__ln {
  display: block;
  width: max-content;
  min-width: 100%;
  padding-right: var(--s-5);
  white-space: pre;
  counter-increment: dev-line;
  tab-size: 2;
}
/* non-selectable, opaque, sticky: code passes *under* it, never through it */
.dev__ln::before {
  content: counter(dev-line);
  position: sticky;
  left: 0;
  display: inline-block;
  width: var(--dev-gutter-w);
  padding-right: var(--s-3);
  margin-right: var(--s-3);
  text-align: right;
  color: var(--dev-fg-faint);
  background: var(--dev-gutter-bg);
  -webkit-user-select: none;
  user-select: none;
}

/* -- tokens: three accents (blue / lime / orange) + a quiet violet + greys -- */
.dev .tok-fn,
.dev .tok-type  { color: var(--tok-blue); }
.dev .tok-str   { color: var(--tok-str); }
.dev .tok-num,
.dev .tok-var   { color: var(--tok-num); }
.dev .tok-kw    { color: var(--tok-kw); }
.dev .tok-com   { color: var(--tok-com); }
.dev .tok-punc  { color: var(--tok-punc); }
.dev .tok-op    { color: var(--tok-op); }

/* ---------------- API stats ---------------- */

.dev__stats {
  margin-top: var(--s-12);
  border-top: 1px solid var(--dev-hair);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dev__stat {
  padding: var(--s-7) var(--s-6);
  border-left: 1px solid var(--dev-hair);
}
.dev__stat:first-child { border-left: 0; padding-left: 0; }
.dev__stat:last-child { padding-right: 0; }

.dev__stat-value {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
}
.dev__stat-unit { color: var(--dev-fg-dim); font-weight: var(--fw-medium); }
/* reserve the final digit count so the count-up never shifts the unit */
.dev__stat-value [data-count] {
  display: inline-block;
  min-width: 3ch; /* tabular-nums: every digit is exactly 1ch */
  text-align: right;
}

.dev__stat-label {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--dev-fg-dim);
  max-width: 22ch;
}

/* ---------------- Small screens ---------------- */

@media (max-width: 1023px) {
  .dev__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev__stat { padding: var(--s-6) var(--s-5); }
  .dev__stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .dev__stat:nth-child(even) { padding-right: 0; }
  .dev__stat:nth-child(n + 3) { border-top: 1px solid var(--dev-hair); }
  .dev__stat-label { max-width: 18ch; }
}

@media (max-width: 419px) {
  .dev { --dev-gutter-w: calc(var(--s-7) + var(--s-1)); }
  .dev__ln::before { padding-right: var(--s-2); margin-right: var(--s-2); }
  .dev__ln { padding-right: var(--s-4); }
}