/* ============================================================
   45 — API object reference preview (dark)
   Scope: .docs-obj*  ·  .dtok-* only inside .docs-obj
   The window chrome itself is .docs-win*, defined once in
   25-quickstart.css; this file only re-declares the --w-* surface
   variables it reads, because here it sits on navy, not on white.
   ============================================================ */

.docs-obj {
  --w-bg:      color-mix(in srgb, var(--c-navy-deep) 76%, rgb(0 0 0));
  --w-bar:     color-mix(in srgb, var(--c-white) 4%, var(--c-navy-deep));
  --w-hair:    color-mix(in srgb, var(--c-white) 10%, transparent);
  --w-hair-hi: color-mix(in srgb, var(--c-white) 20%, transparent);
  --w-fg:      color-mix(in srgb, var(--c-white) 90%, transparent);
  --w-dim:     color-mix(in srgb, var(--c-white) 58%, transparent);

  --dtk-key:  color-mix(in srgb, var(--c-cyan) 60%, var(--c-white));
  --dtk-str:  var(--c-lime);
  --dtk-num:  var(--c-orange);
  --dtk-bool: color-mix(in srgb, var(--c-brand) 44%, var(--c-white));
  --dtk-punc: color-mix(in srgb, var(--c-white) 52%, transparent);

  --w-fs:   var(--fs-xs);
  --w-lh:   1.55rem;
  --w-padY: var(--s-5);

  --ob-hair: color-mix(in srgb, var(--c-white) 11%, transparent);
  --ob-dim:  color-mix(in srgb, var(--c-white) 68%, transparent); /* 6.9:1 on navy */
}

.docs-obj__head { max-width: 58ch; }
.docs-obj__title { margin-block-start: var(--s-4); }
.docs-obj__lead { margin-block-start: var(--s-5); }

.docs-obj__disclosure {
  margin-block-start: var(--s-5);
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid color-mix(in srgb, var(--c-teal) 46%, transparent);
  max-width: 58ch;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--ob-dim);
}

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

.docs-obj__grid {
  display: grid;
  gap: var(--s-7);
  margin-block-start: var(--s-9);
}

@media (min-width: 900px) {
  .docs-obj__grid {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--s-9);
    align-items: start;
  }
}

/* ---------------- Resource list ---------------- */

.docs-obj__list {
  display: grid;
  gap: 1px;                                     /* hairline between rows */
  background: var(--ob-hair);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ob-hair);
}

@media (min-width: 560px) and (max-width: 899px) {
  .docs-obj__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.docs-obj__res {
  position: relative;
  display: grid;
  gap: var(--s-1);
  align-content: center;
  min-height: calc(var(--s-9) + var(--s-2));    /* 56px */
  padding: var(--s-3) var(--s-5);
  background: color-mix(in srgb, var(--c-white) 3%, var(--c-navy));
  text-align: start;
  transition: background var(--t-fast) var(--ease-out);
}
.docs-obj__res::before {
  content: "";
  position: absolute;
  inset-block: var(--s-2);
  inset-inline-start: 0;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--c-teal);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform var(--t-base) var(--ease-expo), opacity var(--t-base) var(--ease-out);
}
.docs-obj__res:hover { background: color-mix(in srgb, var(--c-white) 7%, var(--c-navy)); }
.docs-obj__res:focus-visible { outline-offset: -3px; }
.docs-obj__res.is-active { background: color-mix(in srgb, var(--c-white) 9%, var(--c-navy)); }
.docs-obj__res.is-active::before { transform: none; opacity: 1; }

.docs-obj__res-n {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ob-dim);
  letter-spacing: var(--tracking-normal);
  transition: color var(--t-fast) var(--ease-out);
}
.docs-obj__res:hover .docs-obj__res-n,
.docs-obj__res.is-active .docs-obj__res-n { color: var(--text-invert); }

.docs-obj__res-d {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: color-mix(in srgb, var(--c-white) 52%, transparent);
}
.docs-obj__res.is-active .docs-obj__res-d { color: var(--ob-dim); }

.docs-obj__badge {
  display: inline-flex;
  align-items: center;
  height: var(--s-5);
  padding-inline: var(--s-2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-teal) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-teal) 34%, transparent);
  font-family: var(--font-sans);
  font-size: 0.6875rem;                          /* 11px — a tag, not a label */
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-snug);
  color: var(--c-teal);
}

/* ---------------- Stage ---------------- */

.docs-obj__stage { min-width: 0; }
.docs-obj__panel[hidden] { display: none; }

.docs-obj__method {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: var(--s-5);
  padding-inline: var(--s-2);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--c-lime) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lime) 30%, transparent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  color: var(--c-lime);
}
/* the endpoint sits tight against its method chip, not at bar-gap distance */
.docs-obj__method + .docs-win__file { margin-inline-start: calc(var(--s-4) * -1 + var(--s-2)); }

.docs-obj__note {
  margin-block-start: var(--s-5);
  max-width: 74ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ob-dim);
}
.docs-obj__note em { font-style: italic; color: var(--text-invert); }

.docs-obj__inline {
  padding: 0.1em var(--s-1);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--c-white) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--ob-hair);
  font-size: 0.92em;
  color: var(--text-invert);
  overflow-wrap: anywhere;
}

/* ---------------- JSON tokens ---------------- */

/* Punctuation is the default ink, so braces, colons and commas need no span
   of their own — only the four things that carry meaning do. */
.docs-obj .docs-win__pre code { color: var(--dtk-punc); }
.docs-obj .dtok-key  { color: var(--dtk-key); }
.docs-obj .dtok-str  { color: var(--dtk-str); }
.docs-obj .dtok-num  { color: var(--dtk-num); }
.docs-obj .dtok-bool { color: var(--dtk-bool); }

/* Tallest body is 16 lines (charges, payouts, fee_lines, opportunities), so
   every panel is 16 lines. Choosing a resource never moves the page. */
.docs-win__pre--json { height: calc(16 * var(--w-lh) + var(--w-padY) * 2); }

@media (max-width: 419px) {
  .docs-obj { --w-fs: 0.75rem; --w-lh: 1.4rem; }
  .docs-obj__res { padding-inline: var(--s-4); }
}