/* API reference. A long list that has to stay scannable, so the method is a
   fixed-width column and the path is the thing the eye lands on. */
.api-start { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.api-start p { color: var(--ink-soft); margin: 0; }
.api-start code { font-size: var(--t-13); }

.api-tools { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-5); flex-wrap: wrap; }
.api-tools input {
  flex: 1 1 300px; font: inherit; padding: 10px 13px; border: 1px solid var(--line);
  border-radius: 3px; background: var(--bg); color: var(--ink);
}
.api-count { color: var(--ink-soft); font-size: var(--t-13); font-variant-numeric: tabular-nums; }

.api-jump { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.api-jump a {
  font-size: var(--t-12); padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink-soft); text-decoration: none;
}
.api-jump a:hover { border-color: var(--accent); color: var(--accent-deep); }
.api-jump span { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.api-group { padding-top: var(--s-5); margin-bottom: var(--s-5); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.api-group > .h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.api-group-n { font-size: var(--t-12); font-weight: 400; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }

.api-list { list-style: none; margin: 0; padding: 0; }
.api-list li {
  display: grid; grid-template-columns: 68px minmax(180px, 1.4fr) minmax(0, 2fr); gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.api-m {
  font: 660 var(--t-11)/1.6 var(--mono); text-align: center; border-radius: 2px;
  padding: 2px 0; letter-spacing: 0.04em; color: var(--on-accent);
  /* A ground of its own, so a method with no rule below is still a readable
     badge instead of white text on white paper. PATCH had no rule and appears
     39 times across the reference: thirty-nine invisible badges, on pages that
     passed every check because the markup was correct. A default that fails
     visible beats a list that has to be complete. */
  background: var(--ink-soft);
}
.m-get { background: var(--accent-deep); }
.m-post { background: var(--good); }
.m-put { background: var(--warn); }
.m-patch { background: var(--spacesiq-deep); }
.m-delete { background: var(--bad); }
.api-p { font-size: var(--t-13); }
/* Every cell in the row can hold a long unbroken identifier: a path, a method
   name, or an event kind. Any one of them will push a phone sideways, so the
   whole row is allowed to break inside a word. */
.api-list li, .api-p, .api-t, .api-t em { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.api-t { font-size: var(--t-13); color: var(--ink); }
.api-t em { display: block; font-style: normal; color: var(--ink-faint); font-size: var(--t-12); margin-top: 2px; }

@media (max-width: 720px) {
  /* minmax(0, 1fr), not 1fr: a grid track defaults to min-width auto and will
     not shrink below its content, and an API path is one long unbreakable
     token. That pushed this page 127px sideways on a phone. */
  .api-list li { grid-template-columns: 58px minmax(0, 1fr); }
  .api-t { grid-column: 2; }
}

.m-hook { background: var(--ink-soft); }
.api-products { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: 0; }
.api-products li { border-top: 1px solid var(--line); }
.api-products li:last-child { border-bottom: 1px solid var(--line); }
.api-products a {
  display: grid; grid-template-columns: minmax(140px, 1fr) auto; gap: var(--s-3) var(--s-4);
  padding: var(--s-4) 0; text-decoration: none; color: inherit; align-items: baseline;
}
.api-products a:hover b { color: var(--accent-deep); }
.api-products b { font-size: var(--t-17); border-left: 3px solid var(--accent); padding-left: var(--s-3); }
.api-products span { color: var(--ink-soft); font-size: var(--t-13); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 560px) {
  /* The count is nowrap so it never breaks mid-figure, which on a narrow
     screen made the row wider than the phone. Stacked, it has the whole width
     and the nowrap costs nothing. */
  .api-products a { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .api-products span { white-space: normal; padding-left: calc(var(--s-3) + 3px); }
  .api-products em { padding-left: calc(var(--s-3) + 3px); }
}
.api-products em { grid-column: 1 / -1; font-style: normal; color: var(--ink-faint); font-size: var(--t-12); padding-left: calc(var(--s-3) + 3px); }