/* 右端フローティング目次 (render_page_toc)。
   extracted from refine.css §F-1b (was L893-1268)
   — render_head の css[] 経由で refine.css より前に読み込まれる。

   このブロック全体が @media (min-width:1160px) and (hover:hover) 相当の
   デスクトップ専用。1160px 未満では refine.css 側に残した
   `.page-toc { display: none }` が効いて何も表示されないため、
   <link media> を付けて狭い画面ではクリティカルパスから外している。

   ⚠ refine.css:884-892 の `.page-toc{display:none}` と forced-colors 復帰は
   こちらへ移していない。あれは全画面幅で必要な土台で、動かすと
   モバイル全ページで目次が本文に露出する。 */

/* 「目次」ラベルは style.css:256 .visually-hidden utility 付与で SR 専用テキストに。
   独自定義 (10 decl) は削除、HTML 側で `class="page-toc-title visually-hidden"` を付与。 */

.page-toc-list {
    position: relative;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    max-width: 280px;
}

/* 縦スパイン: 先頭ドット〜末尾ドットを貫く1本の線 */
.page-toc-list::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: var(--border-bright);
}

/* section-container 内に置かれた目次は、コンテナ側の左右paddingと二重にならないように */
.section-container .page-toc {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 20px;
}

/* 狭幅端末の SNS ボタン列: 全幅縦積みをやめ、2列グリッドで高さを半減
   （奇数個の最後だけ全幅で締める）。hero と contact の social-bar 共通。 */
@media (max-width: 380px) {
    .social-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .social-btn {
        justify-content: center;
        padding-inline: 8px;
    }

    .social-btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* レール行: 線の右に見出し名。行全体がリンク（左端が広いタップ標的）。 */
.page-toc a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px 6px 20px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.4;
    transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

/* 各行のスパイン上のドット（既定は不可視、ホバーで淡く、現在地で発光） */
.page-toc a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translate(-50%, -50%) scale(0.6);
    border-radius: 50%;
    background: var(--border-bright);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

/* 目次レールのホバー: 文字を灯し、左に淡いフェード + ドットを出す */
.page-toc a:hover,
.page-toc a:focus-visible {
    color: var(--text);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 72%);
}

.page-toc a:hover::before,
.page-toc a:focus-visible::before {
    opacity: 1;
}

/* タッチ端末はサイト規約どおり 44px のタップ標的に */
@media (pointer: coarse) {
    .page-toc a {
        min-height: 44px;
    }
}

/* F-2. アクティブ状態の共通語彙。目次レールは発光ドット。 */
.page-toc a.is-active,
.page-toc a[aria-current="true"] {
    color: var(--accent-strong);
    background: linear-gradient(90deg, var(--accent-soft), transparent 75%);
    font-weight: 600;
}

.page-toc a.is-active::before,
.page-toc a[aria-current="true"]::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
}

/* forced-colors: スパイン/ドットの背景は消えるためシステム色で現在地を明示 */
@media (forced-colors: active) {
    .page-toc-list::before {
        background: CanvasText;
    }

    .page-toc a.is-active,
    .page-toc a[aria-current="true"] {
        color: Highlight;
    }

    .page-toc a.is-active::before,
    .page-toc a[aria-current="true"]::before {
        opacity: 1;
        background: Highlight;
    }
}

/* F-1b. デスクトップ（広い hover 環境）: 目次を画面右端のフローティング
   ナビゲータに。既定は右端に短いティック目盛りだけを出し、ホバー/キーボード
   フォーカスで見出し名のガラスパネルがスッと開く（Claude チャット右端の目次と
   同じ振る舞い）。本文が中央 1040px なので、右ガターにティックが収まる
   1160px 以上でのみ有効。forced-colors 時は本ブロックが外れ、上の縦レールへ退避。 */
@media (min-width: 1160px) and (hover: hover) and (forced-colors: none) {
    .page-toc {
        position: fixed;
        top: 50%;
        right: 6px;
        left: auto;
        transform: translateY(-50%);
        z-index: 90;
        max-width: none;
        max-height: 78vh;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end;
        /* 透明の外周が本文クリックを塞がないように。実体はリストだけ受ける */
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.2s var(--ease-out);
    }

    /* フッターが視界に入ったら退く（script.js の IntersectionObserver が付与）。
       固定目次がフッターの上に浮いて見える事故を防ぐ。
       ⚠️ 外周 .page-toc は元々 pointer-events: none だが、内側の
       .page-toc-list は auto にしてあり、is-near-footer 時にそこが
       透明のまま残るとフッター上のクリックを奪う。list 側も明示的に
       none にして完全にクリック透過させる。 */
    .page-toc.is-near-footer {
        opacity: 0;
        pointer-events: none;
    }
    .page-toc.is-near-footer .page-toc-list {
        pointer-events: none;
    }

    /* リスト＝ホバー領域 兼 展開時のガラスパネル。既定は透明でティックだけ。
       align-items:stretch で全行を同じ幅に伸ばし、展開時にラベル左端を揃える
       （右揃えだと和文の長さ差で左端がガタつき読みにくい）。 */
    .page-toc-list {
        pointer-events: auto;
        align-items: stretch;
        gap: 2px;
        max-height: inherit;
        overflow-y: auto;
        scrollbar-width: none;
        padding: 12px;
        border: 1px solid transparent;
        border-radius: 14px;
        background: transparent;
        box-shadow: none;
        transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
                    box-shadow var(--dur) var(--ease-out);
    }

    .page-toc-list::-webkit-scrollbar {
        display: none;
    }

    /* 縦スパインはエッジ版では出さない */
    .page-toc-list::before {
        display: none;
    }

    /* 行: 左に［ラベル］右端に［ティック］（space-between で左右へ寄せる）。
       既定はラベルを幅0に畳み、右端のティックだけがミニマップとして残る。 */
    .page-toc a {
        position: relative;
        min-height: 0;
        padding: 7px 12px;
        justify-content: space-between;
        gap: 18px;
        border-radius: var(--radius-xs);
        background: none;
        color: var(--muted);
    }

    .page-toc-label {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0.9rem;
        line-height: 1.5;
        transition: max-width 0.28s var(--ease-out), opacity 0.2s var(--ease-out);
    }

    /* 既定の絶対配置ドットを、右端に置く横棒ティックへ作り替える */
    .page-toc a::before {
        position: static;
        order: 2;
        width: 20px;
        height: 2px;
        transform: none;
        opacity: 1;
        border-radius: 2px;
        background: var(--border-bright);
        box-shadow: none;
        transition: width var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
                    box-shadow var(--dur) var(--ease-out);
    }

    .page-toc a:hover::before,
    .page-toc a:focus-visible::before {
        width: 24px;
        background: var(--text);
    }

    /* 現在地: ティックを長く・アクセント発光に（畳んだ状態でも一目で分かる） */
    .page-toc a.is-active::before,
    .page-toc a[aria-current="true"]::before {
        width: 28px;
        background: var(--accent);
        box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.75);
    }

    .page-toc a.is-active,
    .page-toc a[aria-current="true"] {
        background: none;
    }

    .page-toc a.is-active .page-toc-label,
    .page-toc a[aria-current="true"] .page-toc-label {
        color: var(--accent-strong);
    }

    /* アイコン付き目次（home 等）: 抽象的なティックの代わりに、クイックナビと
       同じアイコンを畳んだ状態でも見せる。ラベルは他ページ同様ホバーで展開。 */
    .page-toc-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        flex: none;
        color: var(--muted);
        transition: color var(--dur) var(--ease-out);
    }

    .page-toc-icon .fa-icon {
        width: 16px;
        height: 16px;
    }

    .page-toc.has-icons a::before {
        display: none;
    }

    .page-toc.has-icons a:hover .page-toc-icon,
    .page-toc.has-icons a:focus-visible .page-toc-icon {
        color: var(--text);
    }

    .page-toc.has-icons a.is-active .page-toc-icon,
    .page-toc.has-icons a[aria-current="true"] .page-toc-icon {
        color: var(--accent);
    }

    /* 展開: ホバー or キーボードフォーカスでパネル＋ラベルを開く */
    .page-toc:hover .page-toc-list,
    .page-toc:focus-within .page-toc-list {
        border-color: var(--glass-border);
        /* モバイルのnav-menuドロップダウンと同じ glass-bg-strong。本文の上に浮く
           読み取り最優先のパネルなので、通常の glass-bg(0.82) だと背後の本文が
           透けて読みにくいため、より不透明な値(0.97)にしている。 */
        background: var(--glass-bg-strong);
        box-shadow: var(--glass-shadow-float);
    }

    .page-toc:hover .page-toc-label,
    .page-toc:focus-within .page-toc-label {
        max-width: 240px;
        opacity: 1;
    }

    /* 展開時の行ホバー: 面を灯し、文字をはっきり */
    .page-toc a:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text);
    }

    .page-toc a:hover .page-toc-label {
        color: var(--text);
    }

    /* 現在地の面（展開時）。render_page_toc() が出す <nav class="page-toc"> は
       1 枚だけで入れ子にならないため、内側の ".page-toc " は付けない
       (付けたままだと一度もマッチせず、展開時に現在地の背景が付かなかった)。 */
    .page-toc:hover a.is-active,
    .page-toc:focus-within a.is-active,
    .page-toc:hover a[aria-current="true"],
    .page-toc:focus-within a[aria-current="true"] {
        background: var(--accent-soft);
    }

    /* 焦点リングは行の角丸の内側にすっきり収める（既定のはみ出す枠を上書き） */
    .page-toc a:focus-visible {
        outline: 2px solid rgba(var(--accent-rgb), 0.6);
        outline-offset: -2px;
        box-shadow: none;
    }
}

/* 対応環境ではパネルをすりガラスに（ピルナビと同じ質感） */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    @media (min-width: 1160px) and (hover: hover) and (forced-colors: none) {

        .page-toc:hover .page-toc-list,
        .page-toc:focus-within .page-toc-list {
            /* 他のガラスパネルは -blur(0.62) だが、目次は本文の真上で可読性最優先
               のため -strong(0.97) を使う。ぼかし自体は質感として残す。 */
            background: var(--glass-bg-strong);
            -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
        }
    }
}

/* F-3. 件数バッジのアクセントピル様式は style.css V17 の :where() 基底へ移設済み
   (ページ CSS の死宣言も同時に整理したため、この層での上書きは不要になった)。 */