/* FasTrax Dark Theme — Desktop (≥901px), centered two‑column layout */
:root{
  --bg:#0b1426; --surface:#0f1b33; --surface-2:#0c1730;
  --text:#e6ecff; --muted:#9fb0d1; --link:#8db8ff;
  --border:#1e2a45; --accent:#3b82f6; --accent-contrast:#ffffff;
  --radius:14px; --container:1320px;
  --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}
.header-wrap .logo{width:74px;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)}

/* === Desktop Layout (Centered) === */
@media (min-width: 901px){
  .container.layout{
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: 300px minmax(720px, 860px);
    gap: var(--space-4);
    align-items: start;
    justify-content: center;
    margin-top: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .toc{position: sticky; top: .5rem; align-self: start}
  .toc details.toc-accordion{
    display:block;width:300px;border:1px solid var(--border);
    border-radius:var(--radius);background:var(--surface);
    padding:var(--space-3);margin:0
  }
  .toc details.toc-accordion > summary{display:block}
  .toc .toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  .toc .toc-list a{text-decoration:none}
  .toc .toc-list a:hover{text-decoration:underline}

  .doc{
    max-width: 860px;
    width: 100%;
    justify-self: center;
    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))}
}

/* 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 */
@media print{
  .header-actions,.toc details.toc-accordion>summary{display:none !important}
  .container.layout{grid-template-columns:1fr;max-width: 100%}
  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;
}