.ptoc {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 24px 0;
  overflow: hidden;
  transition: border-color .15s var(--ease);
}
.ptoc:hover {
  border-color: var(--border-strong);
}

.ptoc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ptoc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: var(--black);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  line-height: 1;
}
.ptoc-toggle:hover {
  background: var(--bg-soft);
}
.ptoc-toggle > span {
  flex: 1;
  letter-spacing: .01em;
}
.ptoc-toggle svg:first-child {
  flex-shrink: 0;
  color: var(--color-accent);
}

.ptoc-chevron {
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  color: var(--grey);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ptoc-toggle[aria-expanded="false"] .ptoc-chevron {
  transform: rotate(-90deg);
}

.ptoc-nav {
  max-height: 600px;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .35s;
  padding: 0 18px 14px;
}
.ptoc-nav.ptoc-collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.ptoc-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ptoc-nav ul ul {
  margin: 0;
  padding: 0;
}

.ptoc-nav li {
  position: relative;
  margin: 0;
}
.ptoc-nav li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 0;
  opacity: .55;
  transition: opacity .15s, transform .15s;
}
.ptoc-nav li:has(.ptoc-active)::before {
  opacity: 1;
  transform: scale(1.15);
}

.ptoc-nav .ptoc-link {
  display: block;
  padding: 7px 0 7px 16px;
  color: var(--grey);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s;
  line-height: 1.4;
  border-radius: 4px;
}
.ptoc-nav .ptoc-link:hover {
  color: var(--color-accent);
}
.ptoc-nav .ptoc-link.ptoc-active {
  color: var(--color-accent);
  font-weight: 600;
}

.ptoc-nav .ptoc-level-1 {
  padding-left: 16px;
}
.ptoc-nav .ptoc-level-2 {
  padding-left: 28px;
  font-size: 13.5px;
}
.ptoc-nav .ptoc-level-2::before { left: 12px; top: 11px; }
.ptoc-nav .ptoc-level-3 {
  padding-left: 40px;
  font-size: 13px;
}
.ptoc-nav .ptoc-level-3::before { left: 24px; top: 10px; width: 5px; height: 5px; }
.ptoc-nav .ptoc-level-4 {
  padding-left: 52px;
  font-size: 12.5px;
}
.ptoc-nav .ptoc-level-4::before { left: 36px; top: 10px; width: 5px; height: 5px; }

@media(max-width:576px) {
  .ptoc { margin: 16px 0; border-radius: 8px; }
  .ptoc-toggle { padding: 12px 14px; font-size: 13px; gap: 8px; }
  .ptoc-nav { padding: 0 14px 12px; }
  .ptoc-nav .ptoc-link { padding: 6px 0 6px 14px; font-size: 13px; }
  .ptoc-nav .ptoc-level-2 { padding-left: 24px; font-size: 12.5px; }
  .ptoc-nav .ptoc-level-3 { padding-left: 34px; font-size: 12px; }
  .ptoc-nav .ptoc-level-4 { padding-left: 44px; font-size: 12px; }
}