/* FasTrax Theme (Dark, Mobile-first) — with TOC accordion */
:root{
  --bg:#0b1426; --surface:#0f1b33; --surface-2:#0c1730;
  --text:#e6ecff; --muted:#9fb0d1; --link:#8db8ff;
  --border:#1e2a45; --accent:#3b82f6; --accent-contrast:#ffffff;
  --radius:14px; --container:1100px;
  --space-1:6px; --space-2:10px; --space-3:16px; --space-4:22px; --space-5:28px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
img,svg,video{max-width:100%;height:auto} a{color:var(--link)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-3)}
.small{font-size:.9rem}.muted{color:var(--muted)}
.site{background:var(--surface-2);border-bottom:1px solid var(--border)}
.header-wrap{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0}
.header-wrap .logo{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--surface)}
.title{font-weight:700;font-size:clamp(1.05rem,2vw+1rem,1.5rem)}
.subtitle{color:var(--muted);margin-top:2px;font-size:clamp(.9rem,1vw+.8rem,1rem)}
.pill,.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;
  text-decoration:none;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
.pill:hover,.btn:hover{background:#122141} .btn{border-radius:10px}
.btn.outline{background:transparent}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.btn.primary:hover{filter:brightness(.95)}
.layout{display:grid;grid-template-columns:280px 1fr;gap:var(--space-4);align-items:start;margin:var(--space-3) 0 var(--space-5)}
.toc{position:sticky;top:.5rem;align-self:start;border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3);background:var(--surface)}
.toc h3{margin:.2rem 0 var(--space-2);font-size:1rem}
.toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.toc-list a{text-decoration:none}.toc-list a:hover{text-decoration:underline}
.doc{min-width:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3)}
.grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}
pre{background:#0e1830;border:1px solid var(--border);border-radius:12px;padding:12px;overflow:auto;color:#e6ecff}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
figure{margin:0} figure>img{border:1px solid var(--border);border-radius:12px}
figcaption{color:var(--muted);font-size:.85rem;margin-top:6px}

/* Mobile: TOC accordion */
@media (max-width: 900px){
  .layout{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}

  .toc{position:sticky;top:0;z-index:10;border:none;background:transparent;padding:0;margin:0 0 var(--space-2)}
  .toc h3{display:none}

  /* Preferred HTML:
     <nav class="toc">
       <details class="toc-accordion">
         <summary>Table of Contents</summary>
         <ul class="toc-list"> … </ul>
       </details>
     </nav>
  */
  .toc details.toc-accordion{
    border:1px solid var(--border);border-radius:12px;background:var(--surface);
    padding:0;overflow:hidden;
  }
  .toc details.toc-accordion > summary{
    list-style:none;cursor:pointer;padding:12px 14px;font-weight:600;
    display:flex;align-items:center;gap:10px;outline:none;
  }
  .toc details.toc-accordion > summary::-webkit-details-marker{display:none}
  .toc details.toc-accordion > summary::before{content:"☰";font-size:1rem;opacity:.9}
  .toc details.toc-accordion > summary::after{content:"▾";margin-left:auto;transition:transform .2s ease;opacity:.9}
  .toc details.toc-accordion[open] > summary::after{transform:rotate(180deg)}

  .toc details.toc-accordion > .toc-list{
    padding:8px 12px 12px;border-top:1px solid var(--border);
    display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;
  }

  /* Fallback for legacy markup (no <details>): expand on hover/focus */
  .toc:not(:has(details)){
    border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:0;
  }
  .toc:not(:has(details)) .toc-list{max-height:0;overflow:hidden;transition:max-height .2s ease}
  .toc:not(:has(details)):focus-within .toc-list,
  .toc:not(:has(details)):hover .toc-list{max-height:60vh;padding:8px 12px 12px;border-top:1px solid var(--border)}
  .toc:not(:has(details))::before{content:"Table of Contents";display:block;padding:12px 14px;font-weight:600;cursor:pointer}
}

@media (max-width: 900px){
  .pill,.btn{min-height:44px}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .toc details.toc-accordion > summary::after{transition:none}
}