/* Docs / Blog / News layout — shares tokens from styles.css */
/* positioned, full-height body so the .glows wash (position:absolute;inset:0)
   spans the whole page instead of being clipped to the viewport with a hard edge */
.doc-page{position:relative;min-height:100vh}
.page-wrap{padding-top:72px;min-height:100vh}
.docs-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:50px;max-width:1240px;margin:0 auto;padding:40px 32px 90px}
@media(max-width:900px){.docs-layout{grid-template-columns:1fr;gap:20px}}

/* sidebar */
.sidebar{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:10px}
.sidebar .sec{margin-bottom:24px}
.sidebar .sec-title{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);font-weight:700;margin-bottom:10px}
.sidebar a{display:block;padding:7px 12px;border-radius:8px;color:var(--text-body);font-size:14.5px;transition:.15s;border-left:2px solid transparent}
.sidebar a:hover{color:var(--text);background:var(--bg-card)}
.sidebar a.active{color:var(--accent-soft);background:var(--accent-bg);border-left-color:var(--accent-soft);font-weight:600}
@media(max-width:900px){.sidebar{position:static;max-height:none;border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:10px}}

/* prose */
.prose{max-width:820px}
.prose h1{font-size:42px;font-weight:800;letter-spacing:-1px;color:var(--text);line-height:1.12;margin-bottom:10px}
.prose .lead{font-size:19px;color:var(--text-2);margin-bottom:30px}
.prose h2{font-size:28px;font-weight:700;color:var(--text);margin:42px 0 14px;letter-spacing:-.5px}
.prose h3{font-size:21px;font-weight:600;color:var(--text);margin:30px 0 10px}
.prose h4{font-size:17px;font-weight:600;color:var(--text-2);margin:24px 0 8px}
.prose p{color:var(--text-body);margin:14px 0;font-size:16px;line-height:1.75}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-border)}
.prose a:hover{color:var(--accent-soft);border-bottom-color:var(--accent-soft)}
.prose ul,.prose ol{margin:14px 0 14px 24px;color:var(--text-body)}
.prose li{margin:7px 0;line-height:1.7}
.prose strong{color:var(--text-2)}
.prose code{font-family:var(--mono);background:var(--bg-code);color:var(--accent-soft);padding:2px 7px;border-radius:6px;font-size:.88em}
.prose pre{background:var(--bg-code);border:1px solid var(--border-card);border-radius:12px;padding:20px 22px;overflow-x:auto;margin:20px 0}
.prose pre code{background:none;color:var(--text-2);padding:0;font-size:14px;line-height:1.7}
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border)}
.prose th{color:var(--text);font-weight:600;background:var(--bg-card)}
.prose td{color:var(--text-body)}
.prose blockquote{border-left:3px solid var(--accent);background:var(--accent-bg);border-radius:8px;padding:14px 20px;margin:20px 0;color:var(--text-2)}
.prose hr{border:none;border-top:1px solid var(--border);margin:36px 0}
.prose img{max-width:100%;border-radius:12px;border:1px solid var(--border-card)}
.breadcrumb{font-size:13px;color:var(--text-muted);margin-bottom:18px;font-family:var(--mono)}
.breadcrumb a{color:var(--text-muted)}.breadcrumb a:hover{color:var(--accent-soft)}

/* blog */
.list-head{max-width:1100px;margin:0 auto;padding:60px 32px 10px;text-align:center}
.list-head h1{font-size:48px;font-weight:800;letter-spacing:-1.5px;color:var(--text)}
.list-head p{color:var(--text-body);font-size:18px;margin-top:10px}
.post-grid{max-width:1100px;margin:0 auto;padding:40px 32px 90px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:760px){.post-grid{grid-template-columns:1fr}}
.post-card{display:block;background:var(--bg-card);border:1px solid var(--border-card);border-radius:16px;padding:30px;transition:.25s}
.post-card:hover{background:var(--bg-card-h);border-color:var(--accent-border);transform:translateY(-4px)}
.post-card .cat{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--accent);text-transform:uppercase}
.post-card h3{font-size:22px;color:var(--text);margin:10px 0;font-weight:700;line-height:1.25}
.post-card .ex{color:var(--text-body);font-size:15px}
.post-card .date{color:var(--text-muted);font-size:13px;margin-top:14px}
.article{max-width:880px;margin:0 auto;padding:50px 28px 16px}
.article .meta{font-family:var(--mono);font-size:13px;color:var(--text-muted);margin-bottom:14px}
.post-hero{display:block;width:100%;margin:8px 0 0;border-radius:16px;border:1px solid var(--border-card)}

/* blog post iframe */
.post-frame{width:100%;border:none;min-height:600px;display:block;background:transparent}

/* phone: the article wrapper stacked three padding layers (outer div + .article
   + the iframe's .post-pad), leaving a ~270px text column on a 375px screen and
   forcing article components to overflow. Trim the wrapper padding to widen the
   iframe; the list grid already collapses at 760px. */
@media(max-width:640px){
  .article{padding:28px 14px 12px}
  .list-head{padding:44px 18px 8px}
  .list-head h1{font-size:32px}
  .post-grid{padding:28px 18px 70px}
  .post-card{padding:22px}
}