/* ============================================================
   DTB Tool Page — "On This Page" TOC Widget
   Replaces the old emoji-list "Quick Navigation" widget.
   Consistent design language with toc.css (blog posts) but
   tuned for the simpler flat-list structure of tool pages.
   ============================================================ */

/* ── Widget shell ── */
.dtb-tool-toc-widget {
  padding: 0;                         /* override .sidebar-widget default */
  overflow: hidden;
  position: relative;
}

/* ── Reading progress bar (absolutely placed at widget top) ── */
.dtb-tool-toc-progress-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gray-100);
}

.dtb-tool-toc-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 0.15s linear;
  border-radius: 0 2px 2px 0;
}

/* ── Header row ── */
.dtb-tool-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--gray-100);
}

.dtb-tool-toc-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.01em;
}

.dtb-tool-toc-title svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* ── Navigation list ── */
.dtb-tool-toc-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

/* ── Individual item ── */
.dtb-tool-toc-item {
  margin: 0;
}

.dtb-tool-toc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  text-decoration: none;
  color: var(--gray-600);
  font-size: 0.875rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-left-color 0.15s ease;
  line-height: 1.3;
}

.dtb-tool-toc-link:hover {
  background: var(--gray-50);
  color: var(--primary);
}

/* ── Icon circle ── */
.dtb-tool-toc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray-100);
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
  color: var(--gray-500);
}

.dtb-tool-toc-link:hover .dtb-tool-toc-icon {
  background: var(--primary-light);
  color: var(--primary);
}

.dtb-tool-toc-text {
  flex: 1;
}

/* ── Active item state (JS-driven) ── */
.dtb-tool-toc-item.is-active .dtb-tool-toc-link {
  color: var(--primary);
  background: rgba(37, 99, 235, 0.04);
  border-left-color: var(--primary);
  font-weight: 600;
}

.dtb-tool-toc-item.is-active .dtb-tool-toc-icon {
  background: var(--primary-light);
  color: var(--primary);
}

/* ── Footer: back to top ── */
.dtb-tool-toc-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: center;
}

.dtb-tool-toc-back-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--gray-500);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.dtb-tool-toc-back-top:hover {
  color: var(--gray-800);
}

/* ── H3 sub-items (indented, smaller icon) ── */
.dtb-tool-toc-sub .dtb-tool-toc-link {
  padding-left: 36px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--gray-500);
}

.dtb-tool-toc-sub .dtb-tool-toc-icon {
  width: 20px;
  height: 20px;
  background: transparent;
  color: var(--gray-400);
}

.dtb-tool-toc-sub .dtb-tool-toc-link:hover {
  color: var(--primary);
  background: var(--gray-50);
}

.dtb-tool-toc-sub .dtb-tool-toc-link:hover .dtb-tool-toc-icon {
  color: var(--primary);
  background: transparent;
}

.dtb-tool-toc-sub.is-active .dtb-tool-toc-link {
  color: var(--primary);
  background: rgba(37, 99, 235, 0.04);
  border-left-color: var(--primary);
  font-weight: 600;
}