/* ===================== TOC knobs (tweak freely) ===================== */
:root{
  --toc-width: 240px;             /* left column width */
  --toc-font-size: 0.95rem;       /* link text size */
  --toc-toggle-col: 0.9rem;       /* caret column width */
  --toc-gap: 0.25rem;             /* space between caret and text */

  --toc-indent-h2: 0.6rem;        /* extra indent for H3 lists */
  --toc-indent-h3: 1.1rem;        /* extra indent for H4 lists */

  --toc-sublist-gap: 0.35rem;     /* space between a topic and its subtopic list (top) */
  --toc-after-sublist-gap: 0.6rem;/* space after the subtopic list before next topic */

  --toc-topic-bg: rgba(0,0,0,.05);/* background for the ACTIVE topic group */
  --toc-active-link-bg: transparent; /* background for the active link (keep subtle) */
  --toc-active-link-underline: none; /* or none */
  --toc-row-radius: 6px;
  --header-h: 60px;                 /* keep in sync with your header height */
  --sticky-offset: calc(var(--header-h) + 60px);  /* little breathing room */
}

/* ===================== Two-column layout ===================== */
.doc { display:grid; grid-template-columns: var(--toc-width) 1fr; gap:1.25rem; }
.doc__toc{
  position: sticky;
  top: var(--sticky-offset);        /* ← ensures it never tucks under header */
  z-index: 1001;                    /* ← above header if header z-index is 1000 */
  height: calc(100vh - var(--sticky-offset) - 10rem);
  overflow: auto;
  padding-right: .75rem;
  border-right: 1px solid #eaecef;
}
.doc__content{ min-width:0; }

@media (max-width:900px){
  .doc{ grid-template-columns:1fr; }
  .doc__toc{ position:static; height:auto; border:0; margin-bottom:1rem; }
}

/* ===================== Master TOC ===================== */
.toc{ font-size: var(--toc-font-size); }
.toc a{ text-decoration:none; }

.toc-topic-title{ margin:.35rem 0 .25rem; font-size:.95rem; font-weight:600; }
.toc-topic-link{ display:inline-block; padding:.12rem .25rem; border-radius: var(--toc-row-radius); }

/* Group wrapper so we can highlight the whole active topic area */
.toc-group{ border-radius: var(--toc-row-radius); padding:.15rem .15rem; }
.toc-group.is-selected{ background: var(--toc-topic-bg); }

/* Reset ul and turn each row into [caret][text] */
.toc-tree ul{ list-style:none; margin:0; padding-left:0; }
.toc-tree li{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap: var(--toc-gap);
  margin:.08rem 0;
  border-radius: var(--toc-row-radius);
}

/* Caret button */
.toc-tree li > .toc-toggle{
  flex: 0 0 var(--toc-toggle-col);
  border:0; background:none; font:inherit; cursor:pointer;
  line-height:1; text-align:center;
  z-index: 1;               /* caret above, but confined to its column */
}

/* Link column (1 line with ellipsis) */
.toc-tree li > a{
  flex:1 1 auto; min-width:0; display:block;
  padding:.08rem .25rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Indent nested lists: align under text column and add extra depth indent */
.toc-tree li > ul{
  flex:1 1 100%;
  margin: var(--toc-sublist-gap) 0 var(--toc-after-sublist-gap) 0;
  margin-left: calc(var(--toc-toggle-col) + var(--toc-gap));
  padding-left:0;
  display: block !important;

}

.toc-tree ul ul{ margin-left: calc(var(--toc-toggle-col) + var(--toc-gap) + var(--toc-indent-h2)); }
.toc-tree ul ul ul{ margin-left: calc(var(--toc-toggle-col) + var(--toc-gap) + var(--toc-indent-h3)); }

/* Collapse state */
.toc-tree .is-collapsed > ul{ display:none; }

/* Active link styling */
.toc a.is-active{
  font-weight:600;
  text-decoration: var(--toc-active-link-underline);
  background: var(--toc-active-link-bg);
  border-radius: var(--toc-row-radius);
}

/* Make parent rows feel clickable (caret toggles; link navigates) */
.toc-tree li.has-children > a{ cursor:pointer; }
.toc-topic-title { display:none; }
.doc__content .page-title.is-hidden-title {
  display: none;
}

.doc-topic-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem 0;
}
.doc-topic {
  border: 1px solid #eaecef;
  border-radius: 8px;
  padding: .75rem .9rem;
  background: #fdfdfd;
}
.doc-topic h3 { margin: 0 0 .25rem 0; font-size: 1rem; }
.doc-topic p { margin: 0; font-size: .95rem; color: #555; }


.toc-tree li {
  position: relative;
}

.toc-tree li > a {
  position: relative;
  z-index: 0;               /* ensure clicks on text are not hitting the caret */
}

/* Visibility is purely class/aria-driven; no :focus or :target tricks */
.toc-tree li.is-collapsed > ul { display: none !important; }