/**
 * andW Floating TOC — フロントエンド表示スタイル.
 *
 * テーマ干渉を避けるため詳細度は低く保ち、ID セレクタや過剰な !important は
 * 使わない。配置・配色は :root の CSS 変数で上書きできる。
 * クラスはすべて `.andw-toc-` プレフィックスで統一する。
 */

:root {
	--andw-toc-z-index: 9999;
	--andw-toc-btn-bg: #222;
	--andw-toc-btn-bg-hover: #000; /* ボタンのホバー時背景色. */
	--andw-toc-btn-color: #fff;
	--andw-toc-panel-bg: #fff;
	--andw-toc-panel-border: #e0e0e0;
	--andw-toc-link-color: #555;
	--andw-toc-link-hover-bg: #f5f5f5;
	--andw-toc-active-color: #000;
	--andw-toc-focus-color: #2563eb; /* キーボードフォーカスの可視色（a11y）. */
	--andw-toc-width: 200px;
	--andw-toc-top: 120px;
	--andw-toc-right: 24px;  /* サイドバー右端／ボタン右端の余白（C-6）. */
	--andw-toc-bottom: 80px; /* フローティングボタン下端の余白。チャットボタン等の FAB と重ならない高さ. */
}

.andw-toc,
.andw-toc * {
	box-sizing: border-box;
}

.andw-toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.andw-toc-item {
	margin: 0;
}

.andw-toc-link {
	display: block;
	padding: 6px 10px;
	color: var(--andw-toc-link-color);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
}

.andw-toc-link:hover {
	background: var(--andw-toc-link-hover-bg);
}

.andw-toc-link.andw-toc-active {
	color: var(--andw-toc-active-color);
	font-weight: 600;
}

/* キーボードフォーカスを可視化する。テーマが outline:none にしても上書きする（C-7・a11y）. */
.andw-toc-link:focus-visible,
.andw-toc-btn:focus-visible {
	outline: 2px solid var(--andw-toc-focus-color);
	outline-offset: 2px;
}

/* h3 は視認用の軽いインデントのみ。階層構造は持たせない（C-5）. */
.andw-toc-item.andw-toc-level-h3 > .andw-toc-link {
	padding-left: 22px;
}

/* ===== サイドバーモード（F-05 / Y-4） ===== */
.andw-toc--wide .andw-toc-nav {
	position: fixed;
	top: var(--andw-toc-top);
	right: var(--andw-toc-right);
	z-index: var(--andw-toc-z-index);
	width: var(--andw-toc-width);
	max-height: calc(100vh - var(--andw-toc-top) - 24px); /* 見出し多数でも画面内に収める（Y-4）. */
	overflow-y: auto;
}

/* ワイド時はサイドバー常時表示のためトグルボタンは隠す（JS の btn.hidden と二重化）. */
.andw-toc--wide .andw-toc-btn {
	display: none;
}

/* ===== フローティングモード（F-03 / F-04 / Y-6） ===== */
.andw-toc-btn {
	position: fixed;
	right: var(--andw-toc-right);
	bottom: var(--andw-toc-bottom);
	z-index: var(--andw-toc-z-index);
	display: inline-flex; /* アイコンとテキストを横並びに. */
	align-items: center;
	gap: 6px;
	min-width: 48px;  /* タップターゲット確保（Y-6）. */
	min-height: 48px; /* タップターゲット確保（Y-6）. */
	padding: 12px 18px;
	color: var(--andw-toc-btn-color);
	background: var(--andw-toc-btn-bg);
	border: 0;
	border-radius: 28px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); /* 浮き上がって見える影. */
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* 先頭のメニューアイコン（装飾。読み上げは btn の aria-label に委ねる）. */
.andw-toc-btn::before {
	content: "\2630"; /* ☰ ハンバーガーアイコン. */
	font-size: 16px;
	line-height: 1;
}

.andw-toc-btn:hover {
	background: var(--andw-toc-btn-bg-hover);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px); /* わずかに浮く. */
}

.andw-toc--floating .andw-toc-nav {
	display: none; /* 既定は閉じた状態。.is-open で表示する. */
	position: fixed;
	right: var(--andw-toc-right);
	bottom: calc(var(--andw-toc-bottom) + 56px); /* ボタン直上に開く（F-04）. */
	z-index: var(--andw-toc-z-index);
	width: 240px;
	max-width: calc(100vw - 48px); /* 狭幅で画面外にはみ出さない. */
	max-height: 60vh; /* パネルが長くなってもスクロール内に収める（F-04）. */
	overflow-y: auto;
	padding: 8px;
	background: var(--andw-toc-panel-bg);
	border: 1px solid var(--andw-toc-panel-border);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.andw-toc--floating.is-open .andw-toc-nav {
	display: block;
}

/* 視覚過敏（prefers-reduced-motion）設定時はボタンのアニメーションを抑制する（a11y）. */
@media (prefers-reduced-motion: reduce) {
	.andw-toc-btn {
		transition: none;
	}

	.andw-toc-btn:hover {
		transform: none;
	}
}