/* assets/css/components/toc.css
   TOC (目次)
   Layer: comp
=============================== */

@layer comp {

  .cd-toc{
    margin: 1.8em 0 1.9em;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: 16px;

    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
  }

  /* 旧マークアップ用のラッパ（現行では未使用だが互換のため残す） */
  .cd-toc__inner{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 16px;
  }

  /* ヘッダー + トグル */
  .cd-toc__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cd-toc__header strong{
    font-size: 1rem;
  }

  .cd-toc__toggle{
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    padding: .35rem .9rem;
    font-size: .85rem;

    border-radius: 999px;
    /* 枠線をアクセント寄りに */
    border: 1px solid color-mix(in oklab, var(--cd-accent), var(--cd-border) 55%);

    /* 背景をほんのり光らせる */
    background:
      radial-gradient(circle at 50% 0,
        color-mix(in oklab, var(--cd-accent), transparent 70%) 0,
        transparent 55%)
      #0f141b;

    color: var(--cd-fg);
    cursor: pointer;

    /* うっすらグロー */
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .6),
      0 0 18px rgba(102, 224, 255, .18);
  }

  /* ホバー時：境界とグローを強める */
  .cd-toc__toggle:hover{
    border-color: var(--cd-accent);
    background:
      radial-gradient(circle at 50% 0,
        color-mix(in oklab, var(--cd-accent), transparent 60%) 0,
        transparent 60%)
      color-mix(in oklab, #0f141b, var(--cd-accent) 8%);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .7),
      0 0 22px rgba(102, 224, 255, .26);
  }

  /* キーボードフォーカスもはっきり見えるように */
  .cd-toc__toggle:focus-visible{
    outline: 2px solid var(--cd-accent);
    outline-offset: 2px;
  }

  /* 目次リスト本体 */
  .cd-toc__list{
    margin: .25rem 0 0;
    padding-left: 0;
    list-style: none;
  }

	ol.cd-toc__list {
    padding-left: 10px;
	}
	
  .cd-toc__list > li{
    margin: .25rem 0;
    max-width: 100%;
  }

  /* 小見出し（H3）用：旧 .cd-toc__sub（現行では .is-sub を使用） */
  .cd-toc__sub{
    margin-top: .25rem;
    list-style: decimal;
  }

  /* リンク共通 */
  .cd-toc a{
    color: inherit;
    text-decoration: none;
  }

  .cd-toc a:hover{
    text-decoration: underline;
    color: var(--cd-accent);
  }

  /* H2 の番号 + ラベル */
  .cd-toc__list a{
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .9rem;
  }

  .cd-toc__index{
    flex: 0 0 auto;
    min-width: 1.8ch; /* 1〜10 で桁ズレしないように */
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklab, var(--cd-muted), white 12%);
  }

  .cd-toc__label{
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 現在位置（将来的に aria-current を使う場合に備えて） */
  .cd-toc a[aria-current="true"] .cd-toc__label{
    color: var(--cd-accent);
    text-decoration: underline;
  }

  /* 折りたたみ状態：リスト全体を隠す */
  .cd-toc.is-collapsed .cd-toc__list{
    display: none;
  }

  .cd-toc__title{
    font-size: .9rem;
    white-space: nowrap;
  }

}