/* 30A-06 in-page table of contents: part of the page, scrolls away with it, never sticky. Compact so a page keeps its height budget. */
.toc{background:var(--surface-2);padding-block:4px}
.toc > .wrap{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:24px;align-items:center}
.toc-label{margin:0;font-size:16px;font-weight:700;color:var(--muted);line-height:1.4}
.toc-btn{display:none}
.toc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));column-gap:32px}
.toc-list li{margin:0;display:flex}
.toc-a{flex:1 1 auto;display:flex;align-items:center;min-height:40px;padding-block:2px;font-size:17px;line-height:1.3;font-weight:600;color:var(--accent-text);text-decoration:none;overflow-wrap:anywhere}
.toc-a:hover,.toc-a:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* the section right after the list gives back part of its top padding, so the list does not add to the page height */
.toc + script + section.band{padding-top:20px!important}
/* 30A-06b: spacing only, to keep three pages inside their height limits with the list added */
@media (min-width:761px){.sol-reader > .tc-reader{padding-block:88px!important}}
@media (max-width:760px){
  .sol-reader > .tc-reader{padding-block:20px!important}
  /* AI page on phone: the grid gap above an empty side column and the band padding give back about 90 px */
  #ai-solution .wrap{gap:16px}
  #ai-solution.band{padding-bottom:18px}
  #ai-solution-pilot.band,#ai-solution-in-depth.band,#closing.band{padding-block:18px}
  #ai-solution-pilot .pilot{row-gap:16px}
  #ai-solution-pilot .pilot-top{margin-bottom:8px}
  #ai-solution-pilot .ladder{margin-top:12px}
}
@media (max-width:1100px){
  .toc > .wrap{grid-template-columns:1fr;row-gap:0}
  .toc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .toc{padding-block:0}
  .toc-label{display:none}
  .toc-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0;background:none;border:0;font:inherit;font-size:17px;font-weight:700;color:var(--text);text-align:left;cursor:pointer}
  .toc-btn svg{flex:none;color:var(--accent-text);transition:transform .2s ease}
  .toc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .toc-list{grid-template-columns:1fr;padding-bottom:8px}
  .toc-list[hidden]{display:none}
  .toc + script + section.band{padding-top:6px!important}
}
@media (prefers-reduced-motion:reduce){.toc-btn svg{transition:none}}
html.mo-off .toc-btn svg{transition:none}
