/* ===== 目次（[toc] または ns/toc） ===== */

/* 外枠 */
.toc{
  margin:1.25rem 0;
  background:#fff;
  border:1px solid #e9e9ee;
  border-radius:.6rem;
}

/* タイトル行 */
.toc .toc__title{
  margin:0; padding:.45rem .6rem;
  font-weight:700; font-size:.95rem; text-align:center;
  background:#f5f7ff; border-bottom:1px solid #e9e9ee;
}

/* 折りたたみ：チェックボックスは視覚的に隠す */
.toc-wrap .toc__cb{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; clip-path:inset(50%);
}

/* タイトルをトグル化（左アイコン：開=▼ / 閉=▶） */
.toc .toc__title .toc__toggle{
  position:relative; display:block; padding-left:1.2rem;
  cursor:pointer; user-select:none;
}
.toc .toc__title .toc__toggle:focus-visible{ outline:2px solid #4c8bf5; outline-offset:2px; }
.toc .toc__title .toc__toggle::before{
  content:"▼"; position:absolute; left:.45rem; top:50%; transform:translateY(-50%); transition:transform .2s;
}
.toc-wrap .toc__cb:not(:checked) ~ .toc .toc__body{ display:none; }
.toc-wrap .toc__cb:not(:checked) ~ .toc .toc__title .toc__toggle::before{ content:"▶"; }

/* 旧dl互換（移行期間のみ必要。不要になったら削除OK） */
.toc-wrap .toc__cb:not(:checked) ~ dl.toc dd{ display:none; }

/* リスト共通 */
.toc li{ list-style:none; }
.toc li::marker{ content:''; } .toc li::before{ content:none; }
.toc .toc__ol{ margin:0; }

/* --- 縦リスト（list） --- */
.toc .toc__ol[data-layout="list"]{
  display:block; padding:.6rem .9rem;
}
.toc .toc__ol[data-layout="list"] > li{ margin:.2rem 0 .2rem 1.1rem; }
.toc .toc__ol[data-layout="list"] a{
  text-decoration:none; border-bottom:1px dotted #bbb; color:#222;
}
.toc .toc__ol[data-layout="list"] a:hover{ border-bottom-color:#888; }

/* --- ピル型（pill）--- ルート行：H2ピルを横スクロールで並べる */
.entry-content .toc .toc__ol[data-layout="pill"],
.entry-content ol.toc.is-pill,
.entry-content ul.toc.is-pill {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: .5rem;
  padding: .4rem .5rem;
  margin: .6rem 0 1rem;
  background: #fff;
  border: 1px solid #e9e9ee;
  border-radius: .6rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  align-items: start;
  align-content: start;
  justify-items: start;
}

/* H2 セル（1行目=H2ピル、2行目=子リスト） */
.entry-content .toc .toc__ol[data-layout="pill"] > .toc__li,
.entry-content ol.toc.is-pill > li,
.entry-content ul.toc.is-pill > li {
  display: grid;
  grid-template-rows: auto auto;
  align-items: start;
  min-width: max-content;
}

/* H2 ピル */
.entry-content .toc .toc__ol[data-layout="pill"] > .toc__li > .toc__a,
.entry-content ol.toc.is-pill > li > a,
.entry-content ul.toc.is-pill > li > a {
  display: block;
  color: #222; background: #fff;
  border: 1px solid #eee; border-radius: .6rem;
  padding: .35rem .6rem; line-height: 1.2;
  white-space: nowrap; max-width: 20ch; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.entry-content .toc .toc__ol[data-layout="pill"] > .toc__li > .toc__a:hover,
.entry-content ol.toc.is-pill > li > a:hover,
.entry-content ul.toc.is-pill > li > a:hover {
  background: #f7f9ff; border-color: #e6ebff;
}

/* H3/H4 のグループ */
.entry-content .toc .toc__ol[data-layout="pill"] > .toc__li > .toc__ol,
.entry-content ol.toc.is-pill > li > ol,
.entry-content ul.toc.is-pill > li > ul {
  display: grid;
  grid-auto-rows: auto;
  gap: .35rem;
  margin: .45rem 0 0 .6rem;
  padding: 0;
}

/* H3/H4 のリンク */
.entry-content .toc .toc__ol[data-layout="pill"] > .toc__li > .toc__ol a,
.entry-content .toc .toc__ol[data-layout="pill"] > .toc__li > .toc__ol > li > .toc__ol a,
.entry-content ol.toc.is-pill > li > ol a,
.entry-content ul.toc.is-pill > li > ul a {
  display: block;
  padding: .3rem .5rem;
  border: 1px solid #e6eaf0; border-radius: .45rem;
  background: #fff; color: #222;
  text-decoration: none; line-height: 1.35;
}
.entry-content .toc .toc__ol[data-layout="pill"] > .toc__li > .toc__ol a:hover,
.entry-content .toc .toc__ol[data-layout="pill"] > .toc__li > .toc__ol > li > .toc__ol a:hover,
.entry-content ol.toc.is-pill > li > ol a:hover,
.entry-content ul.toc.is-pill > li > ul a:hover {
  background: #f7f9ff; border-color: #dfe6f0;
}

/* H4 控えめ */
.entry-content .toc .toc__ol[data-layout="pill"] > .toc__li > .toc__ol > li > .toc__ol a,
.entry-content ol.toc.is-pill > li > ol > li > ol a,
.entry-content ul.toc.is-pill > li > ul > li > ul a {
  opacity: .9;
  margin-left: .2rem;
}

/* アクセシビリティ */
.entry-content .toc a:focus-visible,
.entry-content ol.toc a:focus-visible,
.entry-content ul.toc a:focus-visible {
  outline: 2px solid #4c8bf5; outline-offset: 2px;
}