/* Styles for ContextSplat Guides and Blogs */
:root{
  --bg:#f6f7fb;
  --sidebar:#0f1724;
  --accent:#06b6d4;
  --muted:#94a3b8;
  --card:#ffffff;
  --max-width:1400px;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#0b1220;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  display:flex;
  min-height:100vh;
  max-width:var(--max-width);
  margin:0px auto;
  background:transparent;
  gap:20px;
  padding:0 16px;
}
.sidebar{
  width:280px;
  background:linear-gradient(180deg, rgba(15,23,36,0.98), rgba(10,14,20,0.96));
  color:#fff;
  border-radius:12px;
  padding:20px;
  margin:20px;
  box-shadow: 0 6px 20px rgba(2,6,23,0.12);
  flex-shrink:0;
}
.site-title{
  font-size:18px;
  margin:0 0 12px 0;
  padding-left: 12px;
  line-height:1.2;
}
.blog-list ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.blog-list a{
  display:block;
  color:var(--card);
  text-decoration:none;
  background:transparent;
  padding:10px 12px;
  border-radius:8px;
  transition:background .18s, transform .08s;
  font-weight:600;
  color:#e6eef5;
}
.blog-list a:hover{
  background:rgba(255,255,255,0.04);
  transform:translateY(-1px);
}
.sidebar-foot{
  margin-top:16px;
  font-size:13px;
  color:var(--muted);
}
.main-view{
  flex:1;
  background:var(--card);
  border-radius:12px;
  overflow:hidden;
  min-height:64vh;
  display:flex;
  flex-direction:column;
  margin:20px;
}
.content-frame{
  border:0;
  width:100%;
  height:100%;
  min-height:540px;
}
/* make the iframe fill the main-view area */
.main-view > .content-frame{
  flex:1 1 auto;
  display:block;
}
/* Responsive */
@media (max-width:900px){
  .container{flex-direction:column; padding:12px;}
  .sidebar{width:100%; border-radius:10px; order:2;}
  .main-view{order:1; min-height:320px;}
  .content-frame{min-height:420px;}
  .site-title{text-align:center}
}
/* Simple content styling for standalone blog pages when opened directly */
.blog-article{
  padding:28px;
  margin:20px auto;
  color:#0b1220;
}
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.blog-article h2{margin-top:0}
.meta{color:var(--muted);font-size:13px;margin-bottom:18px}
.toc{margin:18px 0;padding-left:18px;color:var(--muted)}
.lead{color:#213547;line-height:1.6}
/* small helper for code blocks */
pre{background:#0b1220;color:#e6eef5;padding:12px;border-radius:8px;overflow:auto}
a.button{display:inline-block;background:var(--accent);color:#062022;padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:700}