/* ============================================================
   15 — Docs hero (dark)
   Scope: .docs-hero*
   Dark by necessity as much as by taste: the nav is transparent
   with white ink until the page scrolls 12px, so whatever sits
   under it at rest has to be dark.
   ============================================================ */

.docs-hero {
  --dh-hair:     color-mix(in srgb, var(--c-white) 12%, transparent);
  --dh-hair-lit: color-mix(in srgb, var(--c-white) 26%, transparent);
  --dh-fill:     color-mix(in srgb, var(--c-white)  6%, transparent);
  --dh-fill-hi:  color-mix(in srgb, var(--c-white) 11%, transparent);
  --dh-dim:      color-mix(in srgb, var(--c-white) 66%, transparent); /* 6.4:1 on the canvas */
  --dh-field:    calc(var(--s-9) + var(--s-1));                       /* 52px */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--s-11) + var(--s-8)) var(--s-11);
  background: var(--surface-dark);
  color: var(--text-invert-body);
}

@media (min-width: 768px) {
  .docs-hero { padding-block: calc(var(--s-13) + var(--s-2)) var(--s-12); }
}

/* Two soft washes plus a 32px engineering grid. Static — docs are read,
   not landed on, so ambient motion here would only cost battery. */
.docs-hero__bg {
  position: absolute;
  inset: -30% -10% -20%;
  z-index: -1;
  background:
    radial-gradient(40% 52% at 14% 26%, color-mix(in srgb, var(--c-brand) 44%, transparent), transparent 70%),
    radial-gradient(36% 46% at 86% 14%, color-mix(in srgb, var(--c-cyan)  22%, transparent), transparent 72%),
    var(--grad-dark);
}
.docs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image:
    linear-gradient(to right,  var(--dh-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dh-hair) 1px, transparent 1px);
  background-size: var(--s-7) var(--s-7);
  -webkit-mask-image: radial-gradient(72% 78% at 30% 34%, rgb(0 0 0 / .85), transparent 76%);
          mask-image: radial-gradient(72% 78% at 30% 34%, rgb(0 0 0 / .85), transparent 76%);
}

/* Hairline foot so the white quickstart below lands on an edge, not a seam. */
.docs-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dh-hair-lit) 22%, var(--dh-hair-lit) 78%, transparent);
}

.docs-hero__inner { position: relative; z-index: 1; }

.docs-hero__eyebrow { color: var(--c-teal); }

.docs-hero__title {
  margin-block: var(--s-4) 0;
  font-size: var(--fs-h1);
  color: var(--text-invert);
}

.docs-hero__lead {
  margin-block-start: var(--s-5);
  max-width: 58ch;
  color: var(--text-invert-body);
}

/* ---------------- Search field ---------------- */

.docs-hero__search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 34rem;
  margin-block-start: var(--s-8);
  border-radius: var(--r-md);
  background: var(--dh-fill);
  box-shadow: inset 0 0 0 1px var(--dh-hair);
  transition: background var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.docs-hero__search:hover { background: var(--dh-fill-hi); }
/* The ring belongs to the field, not the bare <input> inside it. */
.docs-hero__search:focus-within {
  background: var(--dh-fill-hi);
  box-shadow: inset 0 0 0 1px var(--dh-hair-lit),
              0 0 0 2px color-mix(in srgb, var(--c-teal) 62%, transparent);
}

.docs-hero__glass {
  flex: none;
  width: var(--s-5);
  height: var(--s-5);
  margin-inline: var(--s-4) 0;
  color: var(--dh-dim);
}

.docs-hero__input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--dh-field);
  padding-inline: var(--s-3) var(--s-3);
  border: 0;
  background: none;
  color: var(--text-invert);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-snug);
  appearance: none;
}
.docs-hero__input::placeholder { color: var(--dh-dim); }
/* The field draws the focus ring; a second ring inside it reads as a bug. */
.docs-hero__input:focus-visible { outline: none; }
.docs-hero__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.docs-hero__kbd {
  flex: none;
  display: none;
  place-items: center;
  min-width: var(--s-6);
  height: var(--s-6);
  margin-inline: 0 var(--s-3);
  padding-inline: var(--s-2);
  border-radius: var(--r-xs);
  background: var(--dh-fill-hi);
  box-shadow: inset 0 0 0 1px var(--dh-hair);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--dh-dim);
}
/* Shown only once the script has confirmed a keyboard is plausible. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  .docs-hero__kbd:not([hidden]) { display: grid; }
}

.docs-hero__hint {
  margin-block-start: var(--s-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--dh-dim);
}
.docs-hero__hintlink { color: var(--c-teal); }
.docs-hero__hintlink:hover { color: var(--c-lime); }

.docs-hero__count { color: var(--text-invert); font-variant-numeric: tabular-nums; }
.docs-hero__count:not(:empty)::before { content: "· "; color: var(--dh-dim); }

/* ---------------- Jump chips ---------------- */

.docs-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-7);
}

.docs-hero__chip {
  display: inline-flex;
  align-items: center;
  height: var(--s-8);
  padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--dh-hair);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--text-invert);
  transition: background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
/* 40px pill, 44px hit area — the extra 2px is invisible and required. */
.docs-hero__chip { position: relative; }
.docs-hero__chip::after { content: ""; position: absolute; inset: calc(var(--s-1) * -.5); }
.docs-hero__chip:hover {
  color: var(--text-invert);
  background: var(--dh-fill-hi);
  box-shadow: inset 0 0 0 1px var(--dh-hair-lit);
}