/* BeeCore Homepage — Developer Experience (V2-D).
   Visual language follows the existing homepage: white / #fafafa surfaces,
   hairline #eaeaea borders, small radii, black/grey typography, yellow strictly
   as a small accent. This should read as infrastructure documentation embedded
   in a polished homepage — explicitly NOT terminal cosplay: no fake window
   chrome, no neon editor, no gradient, no glass, no oversized shadow.

   Two-column on desktop (copy + developer links | code), single column on
   mobile. The code block scrolls internally so it never widens the page.

   Scoped to #root > .page > .bc-devx. Logical properties are used for inline
   spacing so RTL mirroring is not made worse by the pre-existing global dir
   issue.

   V2-E: this file no longer needs any !important override. The single
   `display: block !important` it carried was a defence against the old
   positional cleanup rule; that rule is gone, so this section is visible
   because the cleanup guard does not target it. */

#root > .page > .bc-devx {
  padding: 76px 24px 80px;
  background: #ffffff;
  overflow: hidden;
  /* V2-E: the `display: block !important` that used to live here is gone.
     It existed only to override the old positional cleanup rule
     (section:nth-of-type(n+11)), which is now replaced by an explicit legacy
     selector list that never targets this section. */
}
#root > .page > .bc-devx,
#root > .page > .bc-devx * { box-sizing: border-box; }

#root > .page > .bc-devx .bc-devx__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: start;
}

/* ---------- Header ---------- */
#root > .page > .bc-devx .bc-devx__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  margin-bottom: 20px;
  border: 0.67px solid rgb(245, 230, 184);
  border-radius: 20px;
  background: rgb(255, 248, 225);
  color: rgb(180, 83, 9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
#root > .page > .bc-devx .bc-devx__eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f5b800;
}
#root > .page > .bc-devx h2,
#root > .page > .bc-devx p { margin-top: 0; }
#root > .page > .bc-devx .bc-devx__title {
  margin: 0 0 14px;
  color: #111827;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(26px, 2.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
#root > .page > .bc-devx .bc-devx__title span { color: #f5b800; }
#root > .page > .bc-devx .bc-devx__sub {
  max-width: 520px;
  margin: 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- Compatibility signal (one, not three) ---------- */
#root > .page > .bc-devx .bc-devx__compat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 6px 12px;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  background: #fafafa;
  color: #334155;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
#root > .page > .bc-devx .bc-devx__compat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f5b800;
  flex: 0 0 auto;
}

/* ---------- Developer links ---------- */
#root > .page > .bc-devx .bc-devx__links {
  margin-top: 34px;
  border-top: 1px solid #eaeaea;
}
#root > .page > .bc-devx .bc-devx__links-label {
  display: block;
  padding-top: 18px;
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#root > .page > .bc-devx .bc-devx__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px solid #eaeaea;
  text-decoration: none;
  transition: padding-inline-start 0.18s ease;
}
#root > .page > .bc-devx .bc-devx__link:hover { padding-inline-start: 6px; }
#root > .page > .bc-devx .bc-devx__link-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#root > .page > .bc-devx .bc-devx__link-title {
  color: #111827;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
#root > .page > .bc-devx .bc-devx__link-desc {
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.45;
}
#root > .page > .bc-devx .bc-devx__link-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  color: #94a3b8;
  transition: color 0.18s ease;
}
#root > .page > .bc-devx .bc-devx__link-arrow svg { width: 20px; height: 10px; }
#root > .page > .bc-devx .bc-devx__link:hover .bc-devx__link-arrow { color: #f5b800; }

/* ---------- Code block ---------- */
#root > .page > .bc-devx .bc-devx__code {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  background: #fafafa;
  overflow: hidden;
}
#root > .page > .bc-devx .bc-devx__code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid #eaeaea;
  background: #ffffff;
}
#root > .page > .bc-devx .bc-devx__code-lang {
  color: #111827;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#root > .page > .bc-devx .bc-devx__code-sdk {
  padding: 2px 7px;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  background: #fafafa;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
#root > .page > .bc-devx .bc-devx__copy {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  color: #334155;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
#root > .page > .bc-devx .bc-devx__copy:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
#root > .page > .bc-devx .bc-devx__copy:focus-visible {
  outline: 2px solid #f5b800;
  outline-offset: 2px;
}
#root > .page > .bc-devx .bc-devx__copy svg { width: 14px; height: 14px; flex: 0 0 auto; }
#root > .page > .bc-devx .bc-devx__copy--done {
  color: rgb(180, 83, 9);
  border-color: rgb(245, 230, 184);
  background: rgb(255, 248, 225);
}

#root > .page > .bc-devx .bc-devx__pre {
  margin: 0;
  padding: 18px 20px 20px;
  /* Internal horizontal scroll only: the block never widens the page. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
#root > .page > .bc-devx .bc-devx__code-body {
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.75;
  color: #1f2937;
  white-space: pre;
  tab-size: 4;
}
/* Restrained token colouring: one ink family plus a single amber accent for
   strings. No purple, no neon, no multi-hue syntax theme. */
#root > .page > .bc-devx .bc-devx__t--kw { color: #0f172a; font-weight: 600; }
#root > .page > .bc-devx .bc-devx__t--nm { color: #334155; font-weight: 500; }
#root > .page > .bc-devx .bc-devx__t--pr { color: #475569; }
#root > .page > .bc-devx .bc-devx__t--st { color: rgb(180, 83, 9); }
#root > .page > .bc-devx .bc-devx__t--pl { color: #1f2937; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  #root > .page > .bc-devx { padding: 64px 24px 68px; }
  #root > .page > .bc-devx .bc-devx__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  #root > .page > .bc-devx .bc-devx__sub { max-width: 640px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  #root > .page > .bc-devx { padding: 56px 20px 60px; }
  #root > .page > .bc-devx .bc-devx__inner { gap: 30px; }
  #root > .page > .bc-devx .bc-devx__title {
    font-size: 26px;
    letter-spacing: -0.02em;
  }
  #root > .page > .bc-devx .bc-devx__sub { font-size: 14.5px; }
  #root > .page > .bc-devx .bc-devx__link { padding: 13px 2px; }
  #root > .page > .bc-devx .bc-devx__link-desc { font-size: 13px; }
  #root > .page > .bc-devx .bc-devx__code-head { padding: 9px 10px 9px 14px; }
  #root > .page > .bc-devx .bc-devx__pre { padding: 16px 16px 18px; }
  #root > .page > .bc-devx .bc-devx__code-body { font-size: 12.5px; line-height: 1.7; }
  /* Keep the Copy button tappable without crowding the lang labels. */
  #root > .page > .bc-devx .bc-devx__copy { padding: 6px 9px; }
  #root > .page > .bc-devx .bc-devx__copy svg { width: 13px; height: 13px; }
}

@media (max-width: 380px) {
  #root > .page > .bc-devx .bc-devx__title { font-size: 24px; }
  #root > .page > .bc-devx .bc-devx__code-body { font-size: 12px; }
}