/* =============================================
   HYPEDATA · DOCS — stylesheet (extends legal.css)
   HypeLabs, LLC · 2026
   ============================================= */

/* -------- DOCS HERO eyebrow -------- */
.docs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .7rem;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.docs-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--amber);
}

/* -------- HUB GRID -------- */
.docs-hub {
  padding-block: clamp(3rem, 6vh, 5rem);
}
.docs-hub-section {
  margin-bottom: 4.5rem;
}
.docs-hub-section:last-child { margin-bottom: 0; }
.docs-hub-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.docs-hub-section-head h2 {
  font-family: var(--display);
  font-weight: 380;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.docs-hub-section-head h2 em {
  font-style: italic;
  color: var(--amber);
}
.docs-hub-section-head .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.docs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem 1.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .25s var(--e-swift), transform .25s var(--e-swift), background .25s var(--e-swift);
  min-height: 168px;
  overflow: hidden;
}
.docs-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 100px; height: 100px;
  background: radial-gradient(circle at top right, rgba(255,181,71,.07), transparent 65%);
  pointer-events: none;
}
.docs-card:hover {
  border-color: rgba(255,181,71,.35);
  transform: translateY(-2px);
  background: var(--surface-2);
}
.docs-card .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.docs-card .title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 48, "SOFT" 50;
  line-height: 1.2;
}
.docs-card .desc {
  font-size: .93rem;
  color: var(--ink-dim);
  line-height: 1.55;
  max-width: 38ch;
}
.docs-card .arrow {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .08em;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.docs-card .arrow span.go { color: var(--amber); }
.docs-card:hover .arrow span.go { letter-spacing: .12em; }

/* -------- API METHOD BADGES -------- */
.method {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(255,181,71,.12);
  color: var(--amber);
  border: 1px solid rgba(255,181,71,.25);
}
.method.post { background: rgba(212,255,62,.1); color: var(--chart); border-color: rgba(212,255,62,.25); }
.method.del,
.method.delete { background: rgba(255,90,60,.1); color: var(--coral); border-color: rgba(255,90,60,.25); }
.method.put { background: rgba(159,181,163,.1); color: var(--sage); border-color: rgba(159,181,163,.25); }

/* -------- ENDPOINT BLOCK -------- */
.endpoint {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
  margin: 1rem 0 1.5rem;
  flex-wrap: wrap;
}
.endpoint .path { color: var(--ink); }
.endpoint .path .var { color: var(--amber); }

/* -------- CODE BLOCKS -------- */
.code-tabs {
  margin: 1.25rem 0 1.75rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  background: #0a0807;
}
.code-tabs-head {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.015);
  overflow-x: auto;
}
.code-tab {
  padding: .65rem 1.15rem;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s;
  position: relative;
}
.code-tab:hover { color: var(--ink-dim); }
.code-tab.active {
  color: var(--amber);
  background: rgba(255,181,71,.04);
}
.code-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--amber);
}
.code-tab-spacer { flex: 1; border: 0; }
.code-copy {
  padding: .55rem .9rem;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  cursor: pointer;
  transition: color .2s;
}
.code-copy:hover { color: var(--amber); }
.code-copy.copied { color: var(--chart); }

.code-tabs pre {
  margin: 0;
  padding: 1.1rem 1.25rem;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  overflow-x: auto;
  background: transparent;
  display: none;
}
.code-tabs pre.active { display: block; }
.code-tabs pre code { font-family: inherit; background: transparent; padding: 0; border: 0; color: inherit; }

/* Tiny syntax tinting */
.code-tabs .tk-k { color: #ffb547; }              /* keyword */
.code-tabs .tk-s { color: #d4ff3e; }              /* string */
.code-tabs .tk-n { color: #ff9a6c; }              /* number */
.code-tabs .tk-c { color: #6b6458; font-style: italic; } /* comment */
.code-tabs .tk-p { color: #9fb5a3; }              /* punctuation / property */
.code-tabs .tk-b { color: #ffcc6d; }              /* boolean/null */
.code-tabs .tk-v { color: #f5efe3; }              /* var/value */
.code-tabs .tk-u { color: #ffb547; }              /* url/method */

/* Standalone code blocks (no tabs) */
.code-block {
  margin: 1.25rem 0 1.75rem;
  padding: 1.1rem 1.25rem;
  background: #0a0807;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  overflow-x: auto;
}
.code-block pre { margin: 0; }

/* -------- PARAMS TABLE -------- */
.params {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 2rem;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.params th, .params td {
  text-align: left;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.params tr:last-child th, .params tr:last-child td { border-bottom: 0; }
.params th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  background: rgba(255,255,255,.02);
}
.params td { color: var(--ink-dim); }
.params td.p-name {
  font-family: var(--mono);
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}
.params td.p-type {
  font-family: var(--mono);
  color: var(--amber);
  font-size: 12px;
}
.params .req {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 6px;
  text-transform: uppercase;
  background: rgba(255,90,60,.1);
  color: var(--coral);
  border: 1px solid rgba(255,90,60,.25);
}
.params .opt {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 6px;
  text-transform: uppercase;
  background: rgba(245,239,227,.04);
  color: var(--ink-faint);
  border: 1px solid var(--line);
}
.params td.p-desc code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink);
}

/* -------- STATUS CHIPS -------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 1.5rem;
}
.chip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
  letter-spacing: .04em;
}
.chip.green { color: var(--chart); border-color: rgba(212,255,62,.3); background: rgba(212,255,62,.04); }
.chip.amber { color: var(--amber); border-color: rgba(255,181,71,.3); background: rgba(255,181,71,.04); }
.chip.red   { color: var(--coral); border-color: rgba(255,90,60,.3); background: rgba(255,90,60,.04); }

/* -------- SDK PILLS -------- */
.sdk-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.25rem 0 2rem;
}
.sdk-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  text-decoration: none;
  transition: all .2s var(--e-swift);
}
.sdk-pill:hover {
  border-color: var(--amber);
  color: var(--ink);
}
.sdk-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
}
.sdk-pill.stable .dot  { background: var(--chart); box-shadow: 0 0 6px var(--chart); }
.sdk-pill.beta .dot    { background: var(--amber); }
.sdk-pill.alpha .dot   { background: var(--coral); }

/* -------- RESPONSE SHAPES -------- */
.shape {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.25rem 0 2rem;
  background: var(--bg-elev);
}
.shape-row {
  display: grid;
  grid-template-columns: 200px 130px 1fr;
  padding: .9rem 1rem;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.shape-row:last-child { border-bottom: 0; }
.shape-row .k {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
}
.shape-row .k .nest { color: var(--ink-faint); }
.shape-row .t {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--amber);
}
.shape-row .d {
  color: var(--ink-dim);
  font-size: 13.5px;
  line-height: 1.55;
}

/* -------- FOOT NAV inside doc page (Prev/Next) -------- */
.doc-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.doc-pager a {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: border-color .25s, transform .25s;
  text-decoration: none;
  color: inherit;
}
.doc-pager a:hover { border-color: rgba(255,181,71,.35); transform: translateY(-2px); }
.doc-pager a.prev { text-align: left; }
.doc-pager a.next { text-align: right; }
.doc-pager .meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.doc-pager .label {
  font-family: var(--display);
  font-weight: 420;
  font-size: 1.05rem;
  color: var(--ink);
  font-variation-settings: "opsz" 48;
}

/* -------- LANGUAGE / OBJECT TYPE PILL -------- */
.type-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--amber);
  background: rgba(255,181,71,.06);
  border: 1px solid rgba(255,181,71,.2);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: .35rem;
  vertical-align: middle;
  text-transform: lowercase;
}

/* -------- SEARCH BAR (decorative) -------- */
.docs-search {
  margin-top: 2.25rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.05rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-elev);
  max-width: 520px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
}
.docs-search svg { flex-shrink: 0; opacity: .55; }
.docs-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
}
.docs-search input::placeholder { color: var(--ink-faint); }
.docs-search kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--ink-dim);
  background: rgba(255,255,255,.02);
  letter-spacing: .04em;
}

/* -------- RESPONSE STATUS HEADER -------- */
.resp-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  margin: 1.5rem 0 .5rem;
  color: var(--ink-dim);
}
.resp-head .code-pill {
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 3px;
}
.resp-head.ok .code-pill   { background: rgba(212,255,62,.1); color: var(--chart); border: 1px solid rgba(212,255,62,.3); }
.resp-head.warn .code-pill { background: rgba(255,181,71,.1); color: var(--amber); border: 1px solid rgba(255,181,71,.3); }
.resp-head.err  .code-pill { background: rgba(255,90,60,.1); color: var(--coral); border: 1px solid rgba(255,90,60,.3); }

/* -------- HERO STATS for hub -------- */
.docs-hero-stats {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.docs-hero-stats .s {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.docs-hero-stats .s .v {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink);
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.015em;
}
.docs-hero-stats .s .l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* -------- TWO-COLUMN feature for sections -------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}
.two-col > .col {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.two-col > .col h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .75rem;
  font-weight: 400;
}
.two-col > .col p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* -------- RESPONSIVE -------- */
@media (max-width: 1100px) {
  .docs-grid { grid-template-columns: repeat(2, 1fr); }
  .docs-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .docs-grid { grid-template-columns: 1fr; }
  .shape-row { grid-template-columns: 1fr; gap: .25rem; }
  .doc-pager { grid-template-columns: 1fr; }
  .doc-pager a.next { text-align: left; }
  .two-col { grid-template-columns: 1fr; }
  .docs-hub-section-head { flex-direction: column; align-items: flex-start; gap: .35rem; }
}