/* ─────────────────────────────────────────────────────────────────────────────
   apis.css — the pieces only the REST API page needs.

   Everything else comes from shell.css. This file exists for the numbered
   steps, the spec drop zone and the endpoint list, which appear nowhere else.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Steps ───────────────────────────────────────────────────────────────── */

.step { display: flex; flex-direction: column; gap: 12px; }

.step-head { display: flex; gap: 13px; align-items: flex-start; }
.step-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.step-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 74ch;
}

.step-n {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 4px; }
.tab {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}
.tab:hover { color: var(--text); }
.tab.is-on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* ── Drop zone ───────────────────────────────────────────────────────────── */

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 34px 20px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-dim); }
.drop-icon { font-size: 24px; }
.drop-title { font-size: 13.5px; font-weight: 600; }
.drop-sub { font-size: 12px; color: var(--muted); }

/* ── Spec summary ────────────────────────────────────────────────────────── */

.spec {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.spec-title { font-size: 14px; font-weight: 700; }
.spec-fact { font-size: 12px; color: var(--muted); }
.spec-fact b { color: var(--text); font-weight: 650; }

/* ── Endpoint list ───────────────────────────────────────────────────────── */

.ep-search {
  font: inherit;
  font-size: 13px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  flex: 1;
  min-width: 180px;
}
.ep-search:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.ep-list { max-height: 520px; overflow-y: auto; }

.ep-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.ep-group-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1;
}

.ep {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.ep:last-child { border-bottom: none; }
.ep:hover { background: var(--surface-2); }
.ep input { margin-top: 3px; flex-shrink: 0; }
.ep-main { min-width: 0; flex: 1; }
.ep-sig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ep-path {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  word-break: break-all;
}
.ep-desc {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* HTTP verbs, coloured the way every API tool colours them — read before the
   path is, which is the point. */
.verb {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
  flex-shrink: 0;
}
.verb-get    { background: var(--method-get); }
.verb-post   { background: var(--method-post); }
.verb-put    { background: var(--method-put); }
.verb-patch  { background: var(--method-patch); }
.verb-delete { background: var(--method-delete); }
.verb-head, .verb-options { background: var(--muted); }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .field--wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

.form-grid input[type="password"],
.form-grid input[type="email"] {
  font: inherit;
  font-size: 13.5px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.form-grid input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.card-foot .btn { margin-left: auto; }

/* ── People chips ────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.chip.is-on { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.chip-x {
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.chip-x:hover { opacity: 1; }
.chips-empty { font-size: 12.5px; color: var(--muted); }