/*
 * fandhe-backend docs サイト共通スタイル。
 *
 * 由来: 当初 Fandhe-AI/fandhe-frontend の site/assets/site.css を移植したもの
 * だが、移植元は生成 CSS（Theme::to_css・StyleSheet）へ移行済みで両者間の
 * クラス名契約共有は既に成立していない。本ファイルは backend 独自の静的
 * アセットであり、`crates/docs-site` の実出力を正として保守する
 * （イシュー #389 で 3 カラムレイアウトへ刷新した際に記述を是正）。
 *
 * 役割・責務境界:
 *   docs サイトジェネレータ（crates/docs-site）が生成する全ページに読み込ませる
 *   プレーン CSS。外部リソース参照（CDN・Web フォント・リモート画像）を一切
 *   持たず、単一ファイルのみでレイアウト・タイポグラフィが完結する。
 *
 * クラス名契約（`crates/docs-site/src/layout.rs` / `nav.rs` / `markdown.rs` の
 * 実出力が正。ここに書かれたセレクタはすべて実際に生成される class 値であり、
 * `crates/docs-site/tests/site_css_contract.rs` が両者の乖離を検知する）:
 *
 *   body
 *     a.skip-nav                    … SkipNav（イシュー #391）。`body` 直下
 *       先頭に出力される、本文へのスキップリンク。既定は視覚上隠し、
 *       `:focus-visible` 時のみ表示する
 *     header.docs-header            … ヘッダバー（サイトタイトルへのリンク
 *       a.docs-brand + nav.docs-header-nav + div.docs-header-actions）
 *       nav.docs-header-nav          … ヘッダーセクションメニュー
 *         （`nav::header_nav()`。`layout::docs_page_with_header_nav` が
 *         a.docs-brand の直後に配置する。開閉は :hover / :focus-within の
 *         CSS のみで行い、`role` / `aria-expanded` は付与されない）
 *         ul.docs-header-menu        … セクション列（横並び）
 *           li.docs-header-group     … セクション 1 件分（position: relative）
 *             a.docs-header-trigger  … セクション索引ページ（index_path）への
 *               リンク。現在セクションでは `aria-current="true"` が付く
 *             ul.docs-header-dropdown … セクション直下ページのドロップダウン
 *               （li > a。現在ページには `aria-current="page"` が付く。
 *               `<768px` では非表示にし、トリガーの横スクロール列のみ残す）
 *       div.docs-header-actions      … ヘッダー右側のアクション領域
 *         （イシュー #390）。全文検索 UI・GitHub リンク・テーマトグルを
 *         この順で内包する
 *         div.docs-search            … 全文検索 UI（イシュー #396）。既定
 *           `hidden`、`assets/site.js` が配線完了後にのみ可視化する
 *           label.docs-search-label  … 視覚上は clip 手法で隠すが
 *             `for`/`id` 対応は維持する（a11y）
 *           input.docs-search-input  … `type="search"`。索引 URL は
 *             `data-search-index` 属性で保持する
 *           div.docs-search-results  … 検索結果パネル。既定 `hidden`、
 *             `assets/site.js` が `ul` > `li` > `a` を動的に追加する
 *         a.docs-github-link         … リポジトリへの外部リンク
 *         button.docs-theme-toggle   … ダークモードトグル。既定 `hidden`、
 *           `assets/site.js`（`crates/docs-site/src/script.rs`）が配線
 *           完了後にのみ可視化する）
 *     div.docs-container            … 3 カラムのグリッドコンテナ（header の下。
 *       `≥1200px` で 3 列、`768〜1199px` で 2 列（TOC 列を隠す）、
 *       `<768px` で単列に折りたたむ）
 *       aside.docs-sidebar          … 左カラム。`layout::docs_page` が
 *         input.docs-sidebar-toggle + label.docs-sidebar-toggle-label
 *         （狭幅時の無 JS 開閉トグル） + `nav::sidebar()`
 *         （`crates/docs-site/src/nav.rs`）の戻り値をこの順で内側に配置する契約
 *         nav.sidebar               … `nav::sidebar()` の実出力。セクション
 *           見出しは素の `h2`、ページ列は `ul` > `li` > `a`
 *           （`.nav-section` 等の専用クラスは付与されない。`role` 属性も
 *           付与されない headless 構造）
 *           a[aria-current="page"] … 現在ページのリンク（イシュー #391:
 *             `class="current"` の併用は廃止し `aria-current` に一本化）
 *       main.docs-main              … 中央カラム（本文）
 *         div#fandhe-skip-nav        … SkipNav のスキップ先ターゲット
 *           （イシュー #391。`article.docs-content` 直前、`tabindex="-1"`）
 *         article.docs-content      … Markdown レンダラの出力 + ページ内
 *           `nav.prev-next`（`a.prev` / `a.next`）を内包する
 *           - `pre > code.language-*` … フェンス付きコードブロック
 *             （言語トークンが無効な場合 class 自体が付かない）
 *       aside.docs-toc-aside（任意）… 右カラム。見出しが無いページでは
 *         `layout::docs_page` がこの `aside` 自体を出力しない
 *         nav.docs-toc              … ページ内目次。`li` に
 *           `docs-toc-level-2` / `docs-toc-level-3` でネスト深さを表現する
 *
 * 不変条件:
 *   - @import / @font-face / リモート url() を追加しない（外部参照ゼロを維持する）
 *   - フォントはシステムフォントスタックのみを使う
 */

:root {
  color-scheme: light dark;

  --docs-color-bg: #ffffff;
  --docs-color-bg-subtle: #f6f7f9;
  --docs-color-bg-raised: #ffffff;
  --docs-color-text: #1a1f26;
  --docs-color-text-muted: #5b6472;
  --docs-color-border: #e2e5ea;
  --docs-color-accent: #4d5eff;
  --docs-color-accent-bg: #eef0ff;
  --docs-color-code-bg: #f2f3f5;
  --docs-color-code-text: #1a1f26;

  --docs-font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
    "Noto Sans CJK JP", "Yu Gothic", sans-serif;
  --docs-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
    "Liberation Mono", monospace;

  --docs-sidebar-width: 16rem;
  --docs-toc-width: 14rem;
  --docs-max-content-width: 46rem;
  --docs-header-height: 3.25rem;
}

/*
 * ダークモードトグル（イシュー #390）のテーマトークン 4 ブロック構成
 * （移植元 fandhe-frontend `crates/pre-styled-ui/src/theme.rs::Theme::to_css`
 * と同型）:
 *
 *   1. 上記 `:root { ... }`（ライト値、常定義）
 *   2. `:root[data-theme="light"]` … `assets/site.js` が明示的にライトを
 *      選択した場合。トークンは 1. のライト値がそのまま効くため
 *      `color-scheme` のみ上書きする
 *   3. `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }`
 *      … OS 設定がダークで、かつ利用者が明示的にライトを選択していない場合
 *   4. `:root[data-theme="dark"]` … `assets/site.js` が明示的にダークを
 *      選択した場合（OS 設定に関わらず常に勝つ）
 *
 * `data-theme` は `assets/site.js`（`crates/docs-site/src/script.rs`）が
 * `<html>` へ設定する。JS 無効・未選択時は `data-theme` 未設定のまま 1./3. の
 * `prefers-color-scheme` 追従のみが効く。
 */
:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --docs-color-bg: #0d1117;
    --docs-color-bg-subtle: #131a22;
    --docs-color-bg-raised: #161d26;
    --docs-color-text: #e6edf3;
    --docs-color-text-muted: #8b96a5;
    --docs-color-border: #24303c;
    --docs-color-accent: #8d9bff;
    --docs-color-accent-bg: #1c2233;
    --docs-color-code-bg: #131a22;
    --docs-color-code-text: #e6edf3;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --docs-color-bg: #0d1117;
  --docs-color-bg-subtle: #131a22;
  --docs-color-bg-raised: #161d26;
  --docs-color-text: #e6edf3;
  --docs-color-text-muted: #8b96a5;
  --docs-color-border: #24303c;
  --docs-color-accent: #8d9bff;
  --docs-color-accent-bg: #1c2233;
  --docs-color-code-bg: #131a22;
  --docs-color-code-text: #e6edf3;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--docs-color-bg);
  color: var(--docs-color-text);
  font-family: var(--docs-font-sans);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---- ヘッダー ---- */

.docs-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: var(--docs-header-height);
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--docs-color-border);
  background: var(--docs-color-bg);
}

.docs-header a.docs-brand {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--docs-color-text);
  text-decoration: none;
}

/*
 * ---- ヘッダーセクションメニュー ----
 *
 * `nav::header_nav()` の実出力（nav.docs-header-nav > ul.docs-header-menu >
 * li.docs-header-group > a.docs-header-trigger + ul.docs-header-dropdown）。
 * ドロップダウンの開閉は JS を使わず :hover / :focus-within のみで行う。
 * `top: 100%` で group に密着させ、トリガーからドロップダウンへポインタを
 * 移動する途中に隙間（hover が切れる領域）を作らない。
 */

.docs-header-nav {
  margin-left: 1.25rem;
  min-width: 0;
}

.docs-header-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-header-group {
  position: relative;
}

.docs-header-trigger {
  display: block;
  padding: 0.3rem 0.65rem;
  border-radius: 0.4rem;
  color: var(--docs-color-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

.docs-header-trigger:hover,
.docs-header-trigger:focus-visible {
  color: var(--docs-color-text);
  background: var(--docs-color-bg-subtle);
}

/* 現在ページが属するセクションのトリガー（`aria-current="true"`。
 * ページ完全一致の `"page"` とは意味軸が異なる。nav.rs 参照）。 */
.docs-header-trigger[aria-current="true"] {
  color: var(--docs-color-accent);
  background: var(--docs-color-accent-bg);
  font-weight: 600;
}

.docs-header-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 14rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--docs-color-bg-raised);
  border: 1px solid var(--docs-color-border);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.docs-header-group:hover .docs-header-dropdown,
.docs-header-group:focus-within .docs-header-dropdown {
  display: block;
}

.docs-header-dropdown li {
  margin: 0;
}

.docs-header-dropdown a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
  color: var(--docs-color-text);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}

.docs-header-dropdown a:hover,
.docs-header-dropdown a:focus-visible {
  background: var(--docs-color-bg-subtle);
  outline: none;
}

.docs-header-dropdown a[aria-current="page"] {
  color: var(--docs-color-accent);
  background: var(--docs-color-accent-bg);
  font-weight: 600;
}

/* ---- ヘッダー右側のアクション領域（イシュー #390） ---- */

.docs-header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-left: auto;
}

/* ---- 全文検索 UI（イシュー #396） ---- */

.docs-search {
  position: relative;
}

/*
 * `assets/site.js` は配線完了後にのみ `hidden` 属性を除去する
 * （`crates/docs-site/src/script.rs` モジュール doc 参照。テーマトグルの
 * `.docs-theme-toggle[hidden]` と同じ fail-closed パターン）。JS 無効・
 * 読み込み失敗時は常にこの規則が非表示を担保する。
 */
.docs-search[hidden] {
  display: none;
}

/* ラベルは視覚上のみ隠す clip 手法（`.skip-nav` と同流儀）。 */
.docs-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.docs-search-input {
  font: inherit;
  font-size: 0.85rem;
  color: var(--docs-color-text);
  background: var(--docs-color-bg-subtle);
  border: 1px solid var(--docs-color-border);
  border-radius: 0.4rem;
  padding: 0.3rem 0.65rem;
  width: 12rem;
}

.docs-search-input:focus-visible {
  outline: 2px solid var(--docs-color-accent);
  outline-offset: 1px;
  border-color: var(--docs-color-accent);
}

.docs-search-results {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  min-width: 18rem;
  max-height: calc(100vh - var(--docs-header-height) - 1.5rem);
  overflow-y: auto;
  background: var(--docs-color-bg-raised);
  border: 1px solid var(--docs-color-border);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  padding: 0.4rem;
}

.docs-search-results[hidden] {
  display: none;
}

.docs-search-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.docs-search-results li {
  margin: 0;
}

.docs-search-results a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
  color: var(--docs-color-text);
  text-decoration: none;
  font-size: 0.85rem;
}

.docs-search-results a:hover,
.docs-search-results a:focus-visible {
  background: var(--docs-color-bg-subtle);
  outline: none;
}

.docs-github-link {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--docs-color-text-muted);
  text-decoration: none;
}

.docs-github-link:hover {
  color: var(--docs-color-text);
}

.docs-theme-toggle {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--docs-color-text-muted);
  background: var(--docs-color-bg-subtle);
  border: 1px solid var(--docs-color-border);
  border-radius: 0.4rem;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
}

.docs-theme-toggle:hover {
  color: var(--docs-color-text);
  border-color: var(--docs-color-accent);
}

/*
 * `assets/site.js` は配線完了後にのみ `hidden` 属性を除去する
 * （`crates/docs-site/src/script.rs` モジュール doc 参照）。JS 無効・
 * 読み込み失敗時は常にこの規則が非表示を担保し、「押しても効かない
 * ボタン」を見せない。
 */
.docs-theme-toggle[hidden] {
  display: none;
}

/*
 * ---- 3 カラムレイアウト ----
 *
 * 既定（クエリなし）は `768〜1199px` の 2 カラム（サイドバー + 本文、TOC 列は
 * 隠す）を基準にし、`@media (min-width: 1200px)` で 3 カラム化、
 * `@media (max-width: 767px)` で単列化する 3 段階（イシュー #389）。
 */

.docs-container {
  display: grid;
  grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
  align-items: start;
  max-width: 88rem;
  margin: 0 auto;
}

/*
 * `768〜1199px` では TOC 列自体を隠す既定値（見出しは本文中に残るため情報は
 * 失われない）。CSS カスケードは同一詳細度の規則を出現順で解決するため、
 * この既定を後段（下の「右カラム: ページ内目次」節）の詳細スタイルと同じ
 * ブロックに同居させると、そちらが後に出現する構成では常にこちらが勝って
 * `@media (min-width: 1200px)` の `display: block` 上書きが無効化される
 * （実際に本イシュー #399 の視覚確認で検出: 全 breakpoint で右 TOC が
 * 一度も描画されなかった不具合）。単独ブロックとして @media より前に置き、
 * カスケード順の罠を再発させない。
 */
.docs-toc-aside {
  display: none;
}

@media (min-width: 1200px) {
  .docs-container {
    grid-template-columns:
      var(--docs-sidebar-width) minmax(0, 1fr)
      var(--docs-toc-width);
  }

  .docs-toc-aside {
    display: block;
  }

  /* 見出しがなく `aside.docs-toc-aside` 自体が省略されるページ
   * （`crates/docs-site/src/layout.rs` が `docs-no-toc` を付与）では、
   * 3 列トラック定義のままだと子要素 2 個に対し TOC 幅ぶんの空白列が
   * 右側に残る。2 カラム構成へ切り替えて空白を解消する
   * （Bugbot 指摘、イシュー #389）。
   */
  .docs-container.docs-no-toc {
    grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
  }
}

/* ---- サイドバー ---- */

.docs-sidebar {
  /*
   * `.docs-header` が sticky top: 0 で常時可視のため、`.docs-sidebar` は
   * ヘッダー分オフセットして常時可視のヘッダー直下に張り付く。
   */
  position: sticky;
  top: var(--docs-header-height);
  align-self: start;
  max-height: calc(100vh - var(--docs-header-height));
  overflow-y: auto;
  padding: 1.75rem 1rem 2rem;
  border-right: 1px solid var(--docs-color-border);
  font-size: 0.875rem;
}

/*
 * サイドバー折りたたみトグル（無 JS のチェックボックスハック）。
 * `≥768px`（既定・クエリなし）では常時展開の現行挙動へ収束させるため
 * input/label とも隠す（`max-width: 767px` 側のモバイル対応セクションで
 * 表示側へ上書きする）。
 */
.docs-sidebar-toggle,
.docs-sidebar-toggle-label {
  display: none;
}

.docs-sidebar nav.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.docs-sidebar nav.sidebar h2 {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--docs-color-text-muted);
  margin: 1.1rem 0.5rem 0.3rem;
}

.docs-sidebar nav.sidebar h2:first-child {
  margin-top: 0;
}

.docs-sidebar nav.sidebar ul {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.docs-sidebar nav.sidebar li {
  margin: 0;
}

.docs-sidebar nav.sidebar a {
  display: block;
  padding: 0.32rem 0.5rem;
  border-radius: 0.4rem;
  color: var(--docs-color-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  border-left: 2px solid transparent;
}

.docs-sidebar nav.sidebar a:hover {
  color: var(--docs-color-text);
  background: var(--docs-color-bg-subtle);
}

/*
 * `nav::sidebar()` は現在ページのリンクに `aria-current="page"` のみを
 * 付与する（イシュー #391。`class="current"` 併用は廃止し
 * `aria-current` に一本化。nav.rs 参照）。
 */
.docs-sidebar nav.sidebar a[aria-current="page"] {
  background: var(--docs-color-accent-bg);
  color: var(--docs-color-accent);
  border-left-color: var(--docs-color-accent);
  font-weight: 600;
}

/*
 * ---- SkipNav（イシュー #391） ----
 * `layout::docs_page` が `<body>` 先頭に出力するスキップリンク。既定は
 * clip 手法で視覚上隠しつつ Tab 順序には含め（`display: none` 等の
 * Tab 順序自体からの除外はしない）、`:focus-visible` 時のみ画面に
 * 固定表示して視認可能にする。
 */
.skip-nav {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-nav:focus-visible {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 100;
  background: var(--docs-color-bg-raised);
  color: var(--docs-color-accent);
  border: 1px solid var(--docs-color-border);
  border-radius: 0.25rem;
}

/* スキップ先ターゲット自体はプログラム的フォーカスのみを想定するため、
 * フォーカスリングを表示しない（移植元 pre-styled-ui と同契約）。 */
#fandhe-skip-nav {
  outline: none;
}

/* ---- 本文カラム ---- */

.docs-main {
  min-width: 0;
  padding: 2.25rem 2rem 5rem;
}

.docs-content {
  display: block;
  max-width: var(--docs-max-content-width);
  margin: 0 auto;
}

.docs-content h1,
.docs-content h2,
.docs-content h3 {
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.docs-content h1 {
  font-size: 2rem;
  margin: 0 0 1.1rem;
}

.docs-content h2 {
  font-size: 1.375rem;
  margin: 2.25rem 0 0.85rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--docs-color-border);
}

.docs-content h3 {
  font-size: 1.1rem;
  margin: 1.6rem 0 0.5rem;
}

.docs-content p {
  margin: 0 0 1.05rem;
}

.docs-content ul,
.docs-content ol {
  margin: 0 0 1.05rem;
  padding-left: 1.4rem;
}

.docs-content li {
  margin: 0.3rem 0;
}

.docs-content a {
  color: var(--docs-color-accent);
  text-decoration: none;
}

.docs-content a:hover {
  text-decoration: underline;
}

.docs-content blockquote {
  margin: 0 0 1.05rem;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--docs-color-border);
  color: var(--docs-color-text-muted);
}

.docs-content code {
  font-family: var(--docs-font-mono);
  font-size: 0.875em;
  color: var(--docs-color-code-text);
  background: var(--docs-color-code-bg);
  padding: 0.15em 0.4em;
  border-radius: 0.35em;
}

.docs-content pre {
  margin: 0 0 1.05rem;
  padding: 1rem 1.1rem;
  background: var(--docs-color-code-bg);
  border: 1px solid var(--docs-color-border);
  border-radius: 0.6rem;
  overflow-x: auto;
}

.docs-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85em;
}

.docs-content table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1.05rem;
  max-width: 100%;
  font-size: 0.925em;
}

.docs-content th,
.docs-content td {
  border: 1px solid var(--docs-color-border);
  padding: 0.45rem 0.75rem;
  text-align: left;
}

.docs-content th {
  background: var(--docs-color-bg-subtle);
  font-weight: 600;
}

/* ---- 右カラム: ページ内目次（任意。見出しの無いページでは aside 自体が
   出力されず、このスタイルは適用対象を持たない） ---- */

.docs-toc-aside {
  /*
   * `.docs-sidebar` と同じくヘッダー分オフセットして sticky にすることで、
   * 本文スクロールに追従する右レールにする。既定 `display: none` と
   * `≥1200px` の `display: block` 上書きは上の 3 カラムレイアウト節
   * （`.docs-container` 直後の単独ブロック）を参照。カスケード順序の罠を
   * 避けるため、`display` はここでは設定しない。
   */
  position: sticky;
  top: var(--docs-header-height);
  align-self: start;
  max-height: calc(100vh - var(--docs-header-height));
  overflow-y: auto;
  padding: 1.75rem 1rem 2rem;
  border-left: 1px solid var(--docs-color-border);
}

.docs-toc {
  font-size: 0.85rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.docs-toc ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.docs-toc a {
  color: var(--docs-color-text-muted);
  text-decoration: none;
}

.docs-toc a:hover {
  color: var(--docs-color-accent);
}

.docs-toc-level-2 {
  padding-left: 0;
}

.docs-toc-level-3 {
  padding-left: 1rem;
}

/* ---- 前後ページナビ（本文末尾、カード風） ---- */

nav.prev-next {
  display: flex;
  gap: 0.75rem;
  margin: 2.5rem 0 0;
  max-width: var(--docs-max-content-width);
}

nav.prev-next a {
  flex: 1 1 0;
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--docs-color-border);
  border-radius: 0.65rem;
  color: var(--docs-color-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--docs-color-bg-raised);
}

nav.prev-next a:hover {
  border-color: var(--docs-color-accent);
  color: var(--docs-color-accent);
}

nav.prev-next a.prev {
  text-align: left;
}

nav.prev-next a.next {
  text-align: right;
}

/* ---- モバイル対応: 767px 以下で単列に畳む ---- */

@media (max-width: 767px) {
  .docs-container {
    display: block;
  }

  /*
   * 狭幅ではサイドバーが現在セクションのみになるため、ヘッダーセクション
   * メニューを消すと他セクションへの導線が絶たれる。メニューは非表示に
   * せず 2 段目へ折り返し（トリガーの横スクロール列）、ドロップダウンのみ
   * 無効化する（:hover はタッチ環境で信頼できないため。トリガー自体が
   * セクション索引ページへのリンクとして導線を担い、索引ページ到達後は
   * サイドバーが当該セクションの全ページを表示する。fail-closed で
   * 導線ゼロにしない方針）。
   */
  .docs-header {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--docs-header-height);
    padding: 0.4rem 1rem;
    row-gap: 0.15rem;
  }

  .docs-header-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    margin-left: 0;
  }

  .docs-header-dropdown,
  .docs-header-group:hover .docs-header-dropdown,
  .docs-header-group:focus-within .docs-header-dropdown {
    display: none;
  }

  /*
   * 固定幅（`width: 12rem`）のままだと `.docs-header-actions` が
   * 折り返し・横スクロールの原因になるため、狭幅では相対幅へ縮める
   * （3 節設計方針: いずれの幅でも横スクロールを出さない）。
   */
  .docs-search-input {
    width: 100%;
    min-width: 0;
  }

  .docs-search-results {
    left: 0;
    right: 0;
    min-width: 0;
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--docs-color-border);
    padding: 1rem;
  }

  /*
   * サイドバー折りたたみトグル（無 JS のチェックボックスハック）。
   * label をトグルボタン風に表示し、input は視覚的に隠しつつ Tab
   * フォーカス・Space 操作を保つため `display: none` にしない
   * （`position: absolute; opacity: 0` の sr-only 型）。既定で折りたたむ
   * （`:checked` でのみ `nav.sidebar` を表示する）。
   */
  .docs-sidebar-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    opacity: 0;
  }

  .docs-sidebar-toggle-label {
    display: block;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--docs-color-border);
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--docs-color-text);
    cursor: pointer;
  }

  /*
   * input.docs-sidebar-toggle は視覚的に隠れているが Tab フォーカスは
   * 保持するため（上記コメント参照）、フォーカス時は隣接する label へ
   * 可視インジケータを復元する。`.skip-nav:focus-visible` と同じ
   * `:focus-visible` 方針（マウスクリックでは表示しない）。
   */
  .docs-sidebar-toggle:focus-visible + .docs-sidebar-toggle-label {
    outline: 2px solid var(--docs-color-accent);
    outline-offset: 2px;
  }

  .docs-sidebar nav.sidebar {
    display: none;
  }

  .docs-sidebar-toggle:checked ~ nav.sidebar {
    display: flex;
  }

  .docs-toc-aside {
    display: none;
  }

  .docs-main {
    min-width: 0;
    padding: 1.5rem 1.1rem 3rem;
  }

  nav.prev-next {
    flex-direction: column;
  }

  nav.prev-next a.next {
    text-align: left;
  }
}