/* Psyclone Guides — shared CMLabs-branded stylesheet
   Palette: #0095da (CMLabs blue), #ff4b33 (accent orange-red), charcoal/light neutrals.
   Offline-first: no web fonts, system font stack. */
:root{
  --cm-blue:#0095da; --cm-blue-dark:#0077b0; --cm-orange:#ff4b33;
  --ink:#1c2530; --muted:#5a6b7b; --line:#e2e8ee; --panel:#f5f8fb; --panel2:#eef3f8;
  --bg:#ffffff; --code-bg:#0e1b28; --code-ink:#e6edf3; --ok:#1e9e5a; --warn:#e8850c; --road:#8257e6;
  --nav-w:288px; --toc-w:212px; --maxw:900px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.62;font-size:16px}
a{color:var(--cm-blue);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd{font-family:"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;font-size:.92em}

/* Layout: fixed left nav, scrolling content, right in-page TOC */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--nav-w);flex:0 0 var(--nav-w);background:var(--ink);color:#cdd8e3;
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:0 0 40px}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:20px 20px 16px;border-bottom:1px solid #2a3a4a}
.sidebar .brand .gt{font-weight:800;font-size:1.18rem;color:#fff;line-height:1.15}
.sidebar .brand .gt small{display:block;font-weight:600;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cm-blue);margin-top:3px}
.searchbox{padding:12px 16px}
.searchbox input{width:100%;padding:9px 11px;border-radius:8px;border:1px solid #2f4256;
  background:#12202e;color:#eaf2f9;font-size:.9rem}
.searchbox input::placeholder{color:#6f8296}
#searchResults{list-style:none;margin:6px 0 0;padding:0;max-height:50vh;overflow:auto}
#searchResults li{padding:0}
#searchResults a{display:block;padding:7px 16px;color:#cdd8e3;font-size:.86rem;border-left:3px solid transparent}
#searchResults a:hover{background:#12202e;border-left-color:var(--cm-orange);text-decoration:none}
#searchResults .sr-chap{color:#6f8296;font-size:.74rem;display:block}
.navlist{list-style:none;margin:0;padding:6px 0}
.navlist li a{display:block;padding:7px 20px;color:#b7c4d2;font-size:.9rem;border-left:3px solid transparent}
.navlist li a:hover{background:#12202e;text-decoration:none;color:#fff}
.navlist li a.active{background:#0f2233;border-left-color:var(--cm-blue);color:#fff;font-weight:600}
.navlist .sec{padding:14px 20px 4px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#61788e}
.navlist li a .n{display:inline-block;min-width:1.7em;color:var(--cm-blue);font-weight:700}
.xguide{margin:8px 16px;padding:10px 12px;background:#12202e;border-radius:8px;font-size:.82rem;color:#9fb2c4}
.xguide a{color:var(--cm-blue);font-weight:600}

.main{flex:1 1 auto;min-width:0;display:flex;justify-content:center;padding:0}
.content{max-width:var(--maxw);width:100%;padding:34px 40px 90px}
.toc-right{width:var(--toc-w);flex:0 0 var(--toc-w);position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:34px 18px;border-left:1px solid var(--line);font-size:.83rem}
.toc-right h4{margin:0 0 8px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.toc-right a{display:block;padding:3px 0;color:var(--muted)}
.toc-right a.active{color:var(--cm-blue);font-weight:600}
.toc-right a.lvl3{padding-left:12px;font-size:.95em}

/* Hero (index pages) */
.hero{background:linear-gradient(135deg,#0d1b28,#12324a);color:#fff;border-radius:16px;padding:38px 40px;
  margin-bottom:30px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:url(../shared/img/cmlabs-hex-bg.jpg);
  background-size:cover;opacity:.06}
.hero > *{position:relative}
.hero .kick{letter-spacing:.24em;text-transform:uppercase;font-size:.72rem;color:var(--cm-blue);font-weight:700}
.hero h1{margin:.3em 0 .2em;font-size:2.1rem}
.hero p{color:#c6d4e2;max-width:640px;margin:.3em 0}

/* Typography */
h1,h2,h3,h4{line-height:1.25;scroll-margin-top:20px}
h1{font-size:1.95rem;margin:.2em 0 .5em}
h2{font-size:1.4rem;margin:1.7em 0 .5em;padding-bottom:.25em;border-bottom:2px solid var(--line)}
h3{font-size:1.12rem;margin:1.4em 0 .4em;color:var(--cm-blue-dark)}
h4{font-size:1rem;margin:1.1em 0 .3em}
p{margin:.6em 0}
ul,ol{padding-left:1.4em}
li{margin:.3em 0}

/* Code */
pre{background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:16px 18px;overflow:auto;
  position:relative;font-size:.86rem;line-height:1.5}
pre code{color:inherit}
:not(pre) > code{background:var(--panel2);color:#0b3550;padding:.1em .4em;border-radius:5px}
.copybtn{position:absolute;top:8px;right:8px;background:#1d3346;color:#cfe0ee;border:0;border-radius:6px;
  padding:4px 9px;font-size:.72rem;cursor:pointer;opacity:.75}
.copybtn:hover{opacity:1;background:var(--cm-blue)}
/* PsySpec XML syntax highlight */
.xml .tag{color:#7fd7ff}.xml .attr{color:#ffd479}.xml .str{color:#a6e3a1}.xml .com{color:#6b8299;font-style:italic}

/* Language toggle (C++ / Python) code tabs */
.codetabs{margin:14px 0;border-radius:10px;overflow:hidden;border:1px solid #16283a}
.codetabs .tabbar{display:flex;background:#0b1622;border-bottom:1px solid #16283a}
.codetabs .tabbar button{background:none;border:0;color:#8ba3b8;font:inherit;font-size:.8rem;font-weight:700;
  padding:9px 16px;cursor:pointer;border-bottom:2px solid transparent}
.codetabs .tabbar button:hover{color:#cfe0ee}
.codetabs .tabbar button.active{color:#fff;border-bottom-color:var(--cm-blue)}
.codetabs .tabbar .langnote{margin-left:auto;align-self:center;padding-right:12px;font-size:.7rem;font-weight:600;color:#5f7488}
.codetabs .panes pre{margin:0;border-radius:0}
.codetabs .pane{display:none}
.codetabs .pane.active{display:block}
.codetabs.hascpp .tabbar button[data-lang="cpp"]{}

/* Callouts */
.note,.tip,.warn,.road{border-radius:10px;padding:12px 16px;margin:14px 0;border-left:4px solid;background:var(--panel)}
.note{border-color:var(--cm-blue)}
.tip{border-color:var(--ok);background:#eefaf2}
.warn{border-color:var(--warn);background:#fef6ec}
.road{border-color:var(--road);background:#f3effe}
.note b,.tip b,.warn b,.road b{display:block;margin-bottom:3px}
.badge{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.05em;vertical-align:middle}
.badge.impl{background:#e2f6ec;color:var(--ok)}
.badge.stub{background:#fdf0dd;color:var(--warn)}
.badge.road{background:#efe8fd;color:var(--road)}
.badge.new{background:#e2f2fb;color:var(--cm-blue-dark)}

/* Tables */
table{border-collapse:collapse;width:100%;margin:1.1em 0;font-size:.92rem}
th,td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
th{background:var(--panel2);color:var(--ink);font-weight:700}
tr:nth-child(even) td{background:var(--panel)}

/* Popups (glossary / attr detail) */
.pop{border-bottom:1px dashed var(--cm-blue);cursor:help;color:var(--cm-blue-dark)}
#popbubble{position:fixed;z-index:9999;max-width:320px;background:#0e1b28;color:#e6edf3;border-radius:10px;
  padding:12px 14px;font-size:.84rem;line-height:1.5;box-shadow:0 10px 34px rgba(0,0,0,.4);display:none}
#popbubble b{color:var(--cm-blue)}

/* Diagram figures */
figure{margin:18px 0;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
figure figcaption{font-size:.85rem;color:var(--muted);margin-top:8px;text-align:center}
.diagram{width:100%;min-height:60px}
.vis-net{height:360px;border:1px solid var(--line);border-radius:8px;background:#fff}

/* Prev/next + footer */
.pager{display:flex;justify-content:space-between;margin-top:44px;gap:14px}
.pager a{flex:1;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.pager a.next{text-align:right}
.pager .lbl{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
footer.gfoot{color:var(--muted);font-size:.82rem;margin-top:40px;padding-top:16px;border-top:1px solid var(--line)}

/* Mobile */
.menu-toggle{display:none}
@media(max-width:1100px){.toc-right{display:none}}
@media(max-width:820px){
  .sidebar{position:fixed;left:-100%;z-index:1000;transition:left .25s}
  .sidebar.open{left:0}
  .menu-toggle{display:inline-flex;position:fixed;top:12px;left:12px;z-index:1001;background:var(--ink);
    color:#fff;border:0;border-radius:8px;padding:9px 12px;font-size:1.1rem;cursor:pointer}
  .content{padding:60px 20px 80px}
}