/* WiraPass developer documentation (/developers), loaded after site.css.
   The frame (header band, navigation column, article) comes from the site's
   document styles; this file adds a wider article column, code blocks, the
   endpoint reference, tiles, numbered steps and the pager. Same tokens as
   site.css, light theme only, no inline styles. Code uses the system
   monospace font (no extra font download). */

.docs {
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --code-bg: #0b1418;
  --code-ink: #d6e4e8;
}

/* The navigation marks the current page (the side list and the phone menu). */
.docs .toc a[aria-current='page'] {
  background: var(--tint);
  color: var(--brand-deep);
  font-weight: 700;
}

.docs-article {
  min-width: 0;
}

.docs-article h3 {
  margin: 26px 0 8px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--ink-deep);
}

.docs-article code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--tint-soft);
  color: var(--ink-deep);
  border-radius: 6px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

.docs-article .muted {
  color: var(--muted);
  font-size: 14px;
}

/* Code blocks: dark, scroll inside the block, never the page. */

.code-block {
  margin: 12px 0 18px;
  min-width: 0;
}

.code-block figcaption {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.code-block pre {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: 16px;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  tab-size: 4;
}

.code-block pre code {
  display: block;
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  white-space: pre;
  overflow-wrap: normal;
}

/* Tables: columns sized by content (the site's fixed first column is for two-column legal tables). */

.docs .table table {
  table-layout: auto;
}

.docs .table td code {
  white-space: normal;
}

/* Parameter names and codes in the first column never break in the middle. */
.docs .table td:first-child code {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Phones: each row is a card; name every value after the first. */
@media (max-width: 719.98px) {
  .docs .table td {
    padding: 2px 0;
  }

  .docs .table td + td[data-label]::before {
    content: attr(data-label) ': ';
    font-weight: 700;
    color: var(--muted);
  }
}

@media (min-width: 720px) {
  .docs .table th:first-child,
  .docs .table td:first-child {
    width: auto;
  }
}

/* Numbered steps */

.doc-steps {
  counter-reset: doc-step;
  list-style: none;
  padding-left: 0 !important;
  gap: 10px !important;
}

.doc-steps > li {
  counter-increment: doc-step;
  position: relative;
  padding-left: 42px;
  min-height: 30px;
}

.doc-steps > li::before {
  content: counter(doc-step);
  position: absolute;
  left: 0;
  top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

/* Tiles on the overview */

.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 8px 0 14px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--body);
}

.tile strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-deep);
}

.tile span {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.tile:hover,
.tile:focus-visible {
  border-color: var(--dot);
}

@media (min-width: 720px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.note {
  background: var(--tint-soft);
  border-radius: 18px;
  padding: 14px 16px;
  margin: 10px 0 16px;
}

.note p:last-child {
  margin-bottom: 0;
}

/* Endpoint reference */

.endpoint {
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 8px;
}

.endpoint h3 {
  margin-top: 16px;
}

.endpoint-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.endpoint-path code {
  font-size: 15px;
  font-weight: 700;
  background: none;
  padding: 0;
}

.method {
  display: inline-block;
  min-width: 50px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #ffffff;
  background: var(--brand);
  border-radius: 8px;
  padding: 1px 8px;
}

.method-get {
  background: #2f8f95;
}

.auth-note {
  font-size: 14px;
  color: var(--muted);
}

.answer {
  margin-top: 14px !important;
}

/* Pager */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
}

.pager a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 48%;
  background: var(--card);
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 700;
  text-decoration: none;
}

.pager a span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--faint);
}

.pager-next {
  margin-left: auto;
  text-align: right;
}

/* A wider article than the legal pages: code and tables need the room. */
@media (min-width: 1024px) {
  .docs .doc-layout.has-toc {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .docs .doc {
    max-width: 820px;
  }
}

@media (min-width: 1200px) {
  .docs .doc-layout.has-toc {
    grid-template-columns: 240px minmax(0, 820px);
    gap: 56px;
  }

  .code-block pre {
    font-size: 13px;
  }
}