.fb-article-categories {
  margin-block: 1rem;
  border: 1px solid var(--fb-line);
  border-radius: 14px;
  background: var(--fb-card);
}
.fb-article-categories summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 44px;
  padding: .625rem .875rem;
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}
.fb-article-categories summary::-webkit-details-marker { display: none; }
.fb-article-categories summary strong, .fb-article-categories summary small { display: block; }
.fb-article-categories summary strong { font-size: .875rem; }
.fb-article-categories summary small { color: var(--fb-muted); margin-block-start: .125rem; }
.fb-article-categories summary i {
  width: .5rem; height: .5rem; flex: none;
  border: solid var(--fb-brand-solid); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); margin-inline: .25rem;
}
.fb-article-categories[open] summary i { transform: rotate(225deg); }
.fb-article-categories summary:focus-visible { outline: 2px solid var(--fb-brand-solid); outline-offset: 2px; }
.fb-article-categories nav {
  padding: .625rem; border-block-start: 1px solid var(--fb-line);
}
.fb-article-categories .fb-category-tree { gap: .125rem; }
.fb-article-categories .fb-category-tree .fb-category-tree { margin-block-start: 0; padding-inline-start: .625rem; }
.fb-article-categories .fb-category-tree .fb-chip {
  display: block; padding: .375rem .5rem; border: 0; border-radius: .5rem;
  color: var(--fb-text); background: transparent; text-align: start;
}
.fb-article-categories .fb-category-tree .fb-chip:is(:hover, :focus-visible, .is-active) {
  background: #edf4ff; color: #1457ab;
}
.freelancer-blog .fb-sidebar {
  align-self: start;
}
.freelancer-blog .fb-article-toc {
  max-height: none;
  overflow: visible;
}
.freelancer-blog :is(h2, h3, #comments) {
  scroll-margin-top: 7rem;
}
@media (min-width: 981px) {
  .freelancer-blog .fb-sidebar {
    position: static;
    overflow: visible;
  }
}
@media (max-width: 980px) {
  .freelancer-blog .fb-sidebar {
    position: static;
    grid-row: 1;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 1rem;
  }
  .freelancer-blog :is(.fb-sidebar-toggle, .fb-sidebar-backdrop, .fb-sidebar-close),
  .freelancer-blog .fb-sidebar .fb-mini {
    display: none;
  }
}
.fb-toc-access {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 1000;
  min-height: 44px;
  padding: .65rem 1rem;
  border: 1px solid #d8e5f8;
  border-radius: 999px;
  background: #fff;
  color: #1457ab;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  box-shadow: 0 4px 20px #163c7020;
  cursor: pointer;
}
.fb-toc-access[hidden] { display: none; }
.fb-toc-access:focus-visible, .fb-toc-dialog a:focus-visible {
  outline: 2px solid #156aeb;
  outline-offset: 3px;
}
.fb-toc-dialog {
  margin: auto;
  width: min(32rem, calc(100% - 2rem));
  max-height: min(70dvh, 40rem);
  padding: 0 1rem 1rem;
  border: 1px solid #d8e5f8;
  border-radius: 20px;
  color: #1e293b;
  background: #fff;
  font: inherit;
  box-shadow: 0 16px 60px #163c7033;
}
.fb-toc-dialog::backdrop { background: #14223866; backdrop-filter: blur(4px); }
.fb-toc-dialog header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: .75rem;
  background: #fff;
  border-bottom: 1px solid #e4ebf5;
}
.fb-toc-dialog header button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #f1f5fa;
  color: #475569;
  font: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}
.fb-toc-dialog nav { display: grid; gap: .25rem; padding-top: .5rem; }
.fb-toc-dialog nav a {
  padding: .625rem;
  border-radius: 8px;
  color: inherit;
  line-height: 1.8;
  text-decoration: none;
  font-size: .875rem;
}
.fb-toc-dialog nav a:hover { background: #edf4ff; color: #1457ab; }
