/* FasTrax Dark Theme — Mobile (≤900px)
   Top accordion TOC, stacked layout. Pairs with desktop CSS.
*/
: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)}

/* Header */
.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;flex-wrap:wrap}
.header-wrap .logo{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--surface)}
.title{font-weight:700;font-size:1.15rem}
.subtitle{color:var(--muted);margin-top:2px;font-size:.95rem}

.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;min-height:44px
}
.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: stack */
.layout{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:start;margin:var(--space-3) 0 var(--space-5)}

/* TOC: top accordion */
.toc{position:sticky;top:0;z-index:10;border:none;background:transparent;padding:0;margin:0 0 var(--space-2)}
/* Expected 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 .toc-list{
  list-style:none;margin:0;padding:8px 12px 12px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;
}
.toc .toc-list a{text-decoration:none}
.toc .toc-list a:hover{text-decoration:underline}

/* Cards, grid */
.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:1fr}

/* Code/Pre & Figures */
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}

/* Print tweaks */
@media print{
  .header-actions,.toc details.toc-accordion>summary{display:none !important}
  .layout{grid-template-columns:1fr}
  a{color:inherit;text-decoration:none}
}

/* Add CSS for Modal window */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}
.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  border-radius: 8px;
  text-align: center;
}
.close {
  color: #aaa;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}