/*
 * fandhe-ai ドキュメントサイトのベーステーマ CSS。
 *
 * イシュー #870（crates/docs-site::theme）が `include_str!` で埋め込み、
 * ビルド時に `<out>/assets/site.css` へ書き出す。リポジトリルートの `site/`
 * 原稿ツリーとは分離した本クレート専用アセット（実装計画 §2.5）。
 *
 * ライトテーマを `:root` の既定値として定義し、ダークは
 * `prefers-color-scheme: dark` メディアクエリで変数を上書きする。
 * `[data-theme="dark"]` / `[data-theme="light"]` 属性セレクタは、イシュー
 * #870 が先行用意したフックにイシュー #871 のテーマトグル JS
 * （`crates/docs-site/src/script.rs`）が接続する。
 *
 * `.docs-theme-toggle`・`.docs-search` 一式（イシュー #871）は既存の
 * CSS 変数体系のみを使い、`[data-theme]` フックとは独立に最小限のスタイルを
 * 追加する（新規変数追加は可・既存値の変更はしない）。
 */

:root {
  --color-bg: #ffffff;
  --color-bg-raised: #f6f8fa;
  --color-text: #1f2328;
  --color-text-muted: #59636e;
  --color-border: #d1d9e0;
  --color-link: #0969da;
  --color-accent: #0969da;
  --color-code-bg: #f6f8fa;
  --color-table-border: #d1d9e0;
  --color-blockquote-border: #d1d9e0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0d1117;
    --color-bg-raised: #161b22;
    --color-text: #e6edf3;
    --color-text-muted: #9198a1;
    --color-border: #30363d;
    --color-link: #4493f8;
    --color-accent: #4493f8;
    --color-code-bg: #161b22;
    --color-table-border: #30363d;
    --color-blockquote-border: #30363d;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0d1117;
  --color-bg-raised: #161b22;
  --color-text: #e6edf3;
  --color-text-muted: #9198a1;
  --color-border: #30363d;
  --color-link: #4493f8;
  --color-accent: #4493f8;
  --color-code-bg: #161b22;
  --color-table-border: #30363d;
  --color-blockquote-border: #30363d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", sans-serif;
  line-height: 1.6;
}

a {
  color: var(--color-link);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-raised);
}

.site-header .site-title a {
  font-weight: 700;
  text-decoration: none;
  color: var(--color-text);
}

/*
 * ---- ヘッダーセクションメニュー（fandhe-backend/frontend と同設計） ----
 *
 * `layout::header_nav` の実出力（nav.docs-header-nav > ul.docs-header-menu >
 * li.docs-header-group > a.docs-header-trigger + ul.docs-header-dropdown）。
 * fandhe-backend/fandhe-frontend の docs-site と同じ設計・クラス名体系。
 *
 * ドロップダウンの開閉は JS を使わず :hover / :focus-within のみで行う
 * （layout.rs モジュール冒頭「ヘッダーメニュー・サイドバー設計」節参照）。
 * `top: 100%` で group に密着させ、トリガーからドロップダウンへポインタを
 * 移動する途中に隙間（hover が切れる領域）を作らない。
 *
 * すべて class セレクタで記述する（`.site-header nav ul` 等の汎用子孫
 * セレクタは使わない）: 汎用セレクタは詳細度でこれらのクラスセレクタより
 * 優先されてしまい、`.docs-header-dropdown { display: none }` が
 * 常時上書きされてドロップダウンが閉じなくなる事故を招くため。
 */

.docs-header-nav {
  /* `.site-header` は `justify-content: space-between` のため、伸長しない
     子は余白を両側に分配されて中央へ寄る。`flex: 1` でメニューにタイトル
     右隣からアクション領域手前までを占有させ、トリガー列をタイトルの
     隣に据え置く（`min-width: 0` は狭幅で縮めるための指定）。 */
  flex: 1;
  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;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

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

/* 現在ページが属するセクションのトリガー（`aria-current="true"`。ページ
   完全一致の `"page"` とは意味軸が異なる。`layout::header_nav` doc 参照）。 */
.docs-header-trigger[aria-current="true"] {
  color: var(--color-accent);
  background: var(--color-bg-raised);
  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(--color-bg);
  border: 1px solid var(--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;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.85rem;
  white-space: nowrap;
}

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

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

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

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

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

.docs-theme-toggle {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.docs-theme-toggle:hover {
  background: var(--color-bg-raised);
}

.docs-search {
  position: relative;
  display: flex;
  align-items: center;
}

/* JS 配線前・配線失敗時は hidden 属性で非表示にする fail-closed 契約（イシュー #871）。
   author stylesheet の `display: flex` はブラウザ既定の `[hidden] { display: none }` より
   詳細度で優先されるため、hidden 属性下でも表示されてしまう。明示的に上書きして
   「配線完了後にのみ表示する」契約を満たす。 */
.docs-search[hidden] {
  display: none;
}

.docs-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

.docs-search-results {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 10;
  min-width: 16rem;
  max-height: 20rem;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.docs-search-results ul {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.docs-search-results li a {
  display: block;
  padding: 0.35rem 0.75rem;
  text-decoration: none;
  color: var(--color-text);
}

.docs-search-results li a:hover {
  background: var(--color-bg-raised);
}

.site-body {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}

.site-sidebar {
  flex: 0 0 16rem;
  position: sticky;
  top: 1rem;
}

.site-sidebar h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.25rem 0 0.5rem;
}

/* セクション見出し（セクション着地点への `<a>` に変更。
   `layout::sidebar` doc 参照）は本文リンクと同じ `.site-sidebar a` の
   色（`--color-text`）で上書きされるため、見出しらしい控えめな配色に
   個別で戻す。詳細度は `.site-sidebar h2 a`（0,1,2）> `.site-sidebar a`
   （0,1,1）で確実に優先される。 */
.site-sidebar h2 a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-sidebar h2 a:hover,
.site-sidebar h2 a:focus-visible {
  color: var(--color-text);
}

.site-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-sidebar a {
  display: block;
  padding: 0.15rem 0;
  text-decoration: none;
  color: var(--color-text);
}

.site-sidebar a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
}

.site-main {
  flex: 1 1 auto;
  min-width: 0;
}

.site-main h1,
.site-main h2,
.site-main h3 {
  line-height: 1.3;
}

.site-main pre {
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.9rem;
  overflow-x: auto;
}

.site-main code {
  background: var(--color-code-bg);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  font-size: 0.9em;
}

.site-main pre code {
  background: none;
  padding: 0;
}

.site-main table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  overflow-x: auto;
  display: block;
}

.site-main th,
.site-main td {
  border: 1px solid var(--color-table-border);
  padding: 0.4rem 0.6rem;
  text-align: left;
}

.site-main blockquote {
  margin: 1rem 0;
  padding: 0.25rem 1rem;
  border-left: 4px solid var(--color-blockquote-border);
  color: var(--color-text-muted);
}

@media (max-width: 48rem) {
  .site-body {
    flex-direction: column;
  }

  .site-sidebar {
    position: static;
    flex-basis: auto;
    width: 100%;
  }

  /* イシュー #900 codex-review 指摘対応: 固定幅 12rem の検索欄 + テーマ
     ボタンを持つ .site-header-actions は折り返さない flex 行のままだと
     モバイル幅でヘッダー合計最小幅が viewport を超え横スクロール・
     操作要素欠落を招く。ヘッダー自体を折り返し可能にし、actions 行を
     全幅で 2 段目へ回して検索欄を可変幅（画面幅に収まる分だけ伸縮）に
     変える。 */
  .site-header {
    flex-wrap: wrap;
  }

  .site-header-actions {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }

  .docs-search {
    flex: 1 1 auto;
    min-width: 0;
  }

  .docs-search-input {
    width: 100%;
    max-width: none;
  }

  /*
   * 狭幅ではサイドバーが現在セクションのみになるため、
   * ヘッダーセクションメニューを消すと他セクションへの導線が絶たれる。
   * メニューは非表示にせず折り返し（トリガーの横スクロール列）、
   * ドロップダウンのみ無効化する（:hover はタッチ環境で信頼できないため。
   * トリガー自体がセクション着地点ページへのリンクとして導線を担い、
   * 到達後はサイドバーが当該セクションの全ページを表示する。
   * `layout.rs` モジュール冒頭「ヘッダーメニュー・サイドバー設計」節参照）。
   *
   * 参照実装（fandhe-backend）は `max-width: 767px` の別ブレークポイントを
   * 使うが、本リポジトリは既存のイシュー #900 対応ブレークポイント
   * （`max-width: 48rem` = 768px）に統一し、2 つのブレークポイントが
   * 1px 幅でずれて挙動が食い違う窓を作らない（advisor 指摘）。
   */
  .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;
  }
}