/* ── API 仕様表示の共有スタイル（`.apispec` 配下） ─────────────────────────
   api-reference.html（§04 制御の実行）と clients.html のプレイグラウンド仕様
   パネルが js/api-spec-render.js の同一 markup を共有するため、見た目の定義も
   1 箇所に置く。旧: api-reference.html の <style> にのみ存在した。 */

.apispec .endpoint {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--border); background: var(--hover-bg);
  padding: 0.5rem 0.75rem; margin: 0.85rem 0 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem; overflow-x: auto;
}
.apispec .method {
  flex-shrink: 0; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 0.16rem 0.42rem; border: 1px solid var(--border); color: var(--muted);
}
.apispec .method.get    { color: #7dd3fc; border-color: rgba(56,189,248,0.45); background: var(--accent-bg); }
.apispec .method.post   { color: #6ee7b7; border-color: rgba(52,211,153,0.4); background: var(--ok-bg); }
.apispec .method.patch  { color: #fcd34d; border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.1); }
.apispec .method.delete { color: #fca5a5; border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.1); }
.apispec .endpoint .path { color: var(--fg); white-space: nowrap; }

.apispec pre {
  border: 1px solid var(--border); background: #0a0f1c;
  padding: 0.85rem 1rem; overflow-x: auto; margin: 0.6rem 0;
  font-size: 0.72rem; line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #cbd5e1;
  white-space: pre-wrap; word-break: break-word;
}
.apispec code.inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem; background: var(--hover-bg); border: 1px solid var(--border);
  padding: 0.05rem 0.3rem; color: var(--accent-fg);
}
/* 表の基本（枠線・行区切り・th 体裁）は main.css の table/th/td が供給する。
   ここは api-reference.html の元スタイルと同一の上書きだけに留める＝
   静的な散文中の表と、レンダラが出す表の見た目が一致する。 */
.apispec .table-wrap { border: 1px solid var(--border); overflow-x: auto; margin: 0.7rem 0; }
.apispec .table-wrap table { font-size: 0.74rem; }
.apispec .table-wrap th, .apispec .table-wrap td { padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
.apispec .table-wrap td:first-child code, .apispec .req {
  font-family: ui-monospace, Menlo, monospace; color: var(--accent-fg);
}
.apispec .opt { color: var(--dim); font-size: 0.66rem; }
.apispec table td.money { color: #fbbf24; }

.apispec .callout {
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  background: var(--accent-bg); padding: 0.7rem 0.9rem; margin: 0.9rem 0;
  font-size: 0.74rem; color: var(--muted); line-height: 1.65;
}
.apispec .callout.warn { border-left-color: #fbbf24; background: rgba(251,191,36,0.08); }
.apispec .callout ul { margin: 0.4rem 0 0.2rem 1.1rem; }
.apispec .callout li { margin: 0.2rem 0; }
.apispec .callout strong { color: var(--fg); }

/* ── レンダラが出す構造 ───────────────────────────────────────────── */
.apispec .spec-action { margin-bottom: 2.2rem; }
.apispec .spec-action:last-child { margin-bottom: 0; }
.apispec .spec-action.compact { margin-bottom: 0; }

.apispec .spec-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
  padding-bottom: 0.45rem; border-bottom: 1px solid var(--border); margin-bottom: 0.6rem;
}
.apispec .spec-verb {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.86rem; font-weight: 700;
  color: var(--accent-fg);
}
.apispec .spec-title { font-size: 0.78rem; font-weight: 650; color: var(--fg); }
.apispec .spec-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-left: auto; }
.apispec .spec-badge {
  font-size: 0.6rem; letter-spacing: 0.04em; padding: 0.1rem 0.4rem;
  border: 1px solid var(--border-strong); color: var(--muted); border-radius: 3px;
  font-family: ui-monospace, Menlo, monospace; white-space: nowrap;
}
.apispec .spec-badge.scope { color: var(--accent-fg); border-color: rgba(56,189,248,0.4); background: var(--accent-bg); }
.apispec .spec-badge.money { color: #fbbf24; border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.1); }
.apispec .spec-badge.warn  { color: #fca5a5; border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.1); }
.apispec .spec-badge.ok    { color: #6ee7b7; border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.1); }

.apispec .spec-h4 {
  font-size: 0.74rem; font-weight: 650; color: var(--fg); margin: 1rem 0 0.35rem;
}
.apispec .spec-p { font-size: 0.74rem; color: var(--muted); line-height: 1.7; margin: 0.4rem 0; }
.apispec .spec-p strong { color: var(--fg); }
.apispec .spec-variant { margin-top: 0.4rem; }
.apispec .spec-vendors { margin-top: 0.7rem; font-size: 0.7rem; }

.apispec .spec-example { margin-top: 0.5rem; }
.apispec .spec-example-bar { display: flex; align-items: center; gap: 0.5rem; }
.apispec .spec-example-label {
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.apispec .spec-apply {
  margin-left: auto; font-family: inherit; font-size: 0.62rem; color: var(--accent-fg);
  background: var(--accent-bg); border: 1px solid rgba(56,189,248,0.4);
  border-radius: 3px; padding: 0.15rem 0.45rem; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.apispec .spec-apply:hover { background: var(--accent-bg-strong); border-color: var(--accent); }