/*
 * ロリポップ！ 公開API ドキュメントの見た目調整
 * ------------------------------------------------------------------
 * このファイルはデザイナーが自由に編集してよい（ビルド不要・編集→リロードで反映）。
 * API の「内容」は openapi.yaml 側。ここは「見た目」だけを担当する。
 *
 * Scalar は CSS カスタムプロパティ（--scalar-*）でテーマを上書きできる。
 * 代表的な変数を下に置いた。値を変えて調整する。一覧:
 *   https://github.com/scalar/scalar/blob/main/documentation/themes.md
 */

:root {
  /* フォント */
  --scalar-font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --scalar-font-code: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* 配色（ロリポップのブランドカラーに合わせてデザイナーが調整） */
  --scalar-color-accent: #f57e20;        /* アクセント（リンク/強調） */
  --scalar-color-1: #1a1a1a;             /* 主要テキスト */
  --scalar-color-2: #555;                /* 補助テキスト */
  --scalar-background-1: #ffffff;        /* 背景 */

  /* 左サイドバー幅 */
  --scalar-sidebar-width: 280px;
}

/*
 * VS Code / Cursor / Generate MCP の連携ボタン群を非表示にする。
 * Scalar には現状これを消す公式設定が無い（scalar/scalar#8549, #8552）ため、
 * コンポーネント（AgentScalar/OpenMCPButton.vue）のコンテナクラスを CSS で隠す。
 */
.scalar-mcp-layer {
  display: none !important;
}

/*
 * API 概要の Server / Authentication / Client Libraries カードを非表示にする。
 * これらは IntroductionCard.vue の .introduction-card にまとまっている。
 * （タイトル・説明文は .introduction-description 側なので残る）
 */
.introduction-card {
  display: none !important;
}

/*
 * 上記でカードを消すと、イントロは2カラムグリッド（左=説明 / 右=カード）の
 * 右側が空いて説明文が左半分に間延びする。イントロ専用ラッパー
 * .introduction-section 配下だけ、2カラム（.section-columns）を全幅1カラムにし、
 * 右のカード列（.sticky-cards）を畳む。
 * ※ .section-columns は各エンドポイントの2カラムでも使われるため、必ず
 *   .introduction-section にスコープする（画面下部の幅には影響させない）。
 */
.introduction-section .section-columns {
  display: block !important;
}
.introduction-section .sticky-cards {
  display: none !important;
}

/*
 * レイアウト微調整の例。
 * 「余白が空きすぎ」への当て木として、本文セクションの過剰な上下余白を詰める例。
 * Scalar の内部クラス名はバージョンで変わりうるので、まずは CSS 変数での調整を優先し、
 * どうしても必要な箇所だけ下記のように上書きする（要ブラウザの検証）。
 */
/*
.scalar-app .section {
  padding-top: 24px;
  padding-bottom: 24px;
}
*/