/* SansqritPy documentation extensions — matches cosmic brutalism design system */
.py-hero { padding: 140px 80px 70px; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 20% 20%, rgba(0,229,255,.16), transparent 34%), radial-gradient(circle at 80% 10%, rgba(0,255,204,.10), transparent 30%), var(--void); }
.py-hero .eyebrow { font-family: var(--font-code); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; }
.py-hero h1 { font-family: var(--font-display); font-size: clamp(56px, 9vw, 128px); line-height: .88; letter-spacing: 6px; color: var(--text-1); text-shadow: 0 0 70px rgba(0,229,255,.25); }
.py-hero .lead { max-width: 1000px; margin-top: 24px; font-size: 18px; color: var(--text-1); }
.py-hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.py-layout { display:grid; grid-template-columns: 310px 1fr; min-height: 100vh; }
.py-content { padding: 54px 70px 120px; max-width: 1180px; }
.py-content h2.section-title { scroll-margin-top: 110px; }
.py-content h3.sub-title, .py-content h4.mini-title { scroll-margin-top: 110px; }
.py-content ul, .py-content ol { color: var(--text-2); margin: 12px 0 18px 24px; }
.py-content li { margin: 6px 0; }
.py-doc-card { background: linear-gradient(180deg, rgba(10,22,40,.75), rgba(3,6,16,.9)); border:1px solid var(--border); padding:24px; margin:20px 0; position:relative; overflow:hidden; }
.py-doc-card::after { content:''; position:absolute; top:0; right:0; width:160px; height:160px; background: radial-gradient(circle, rgba(0,229,255,.12), transparent 70%); pointer-events:none; }
.matrix-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:24px 0; }
.micro-pill { display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border:1px solid var(--border); color:var(--text-2); font-family:var(--font-code); font-size:10px; letter-spacing:1px; text-transform:uppercase; margin:3px; }
.micro-pill::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.code-search { width:100%; background: var(--abyss); border:1px solid var(--border); color:var(--text-1); padding:14px 16px; font-family:var(--font-code); margin: 18px 0 28px; }
.example-card { border:1px solid var(--border); background:rgba(3,6,16,.72); margin:14px 0; }
.example-card summary { cursor:pointer; padding:16px 20px; font-family:var(--font-code); color:var(--cyan); letter-spacing:1px; border-bottom:1px solid rgba(0,229,255,.08); }
.example-card .example-meta { padding: 12px 20px 0; color:var(--text-3); font-size:13px; }
.copy-btn { float:right; font-family:var(--font-code); font-size:10px; letter-spacing:1px; border:1px solid var(--border); color:var(--text-2); background:transparent; padding:5px 9px; cursor:pointer; }
.copy-btn:hover { color:var(--cyan); border-color:var(--cyan); }
.react-panel { min-height: 300px; margin: 22px 0 32px; }
.flow-note { font-family:var(--font-code); font-size:11px; letter-spacing:1px; color:var(--text-3); margin-top:-16px; margin-bottom:28px; }
.big-toc-count { font-family:var(--font-display); color:var(--cyan); font-size:36px; line-height:1; }
.docs-warning { border-left:3px solid #F59E0B; background: rgba(245,158,11,.08); padding: 18px 22px; color:#fcd34d; margin: 24px 0; }
@media (max-width: 980px){ .py-layout { grid-template-columns: 1fr; } .sidebar-toc{ position:relative; top:0; height:auto; border-right:0; border-bottom:1px solid var(--border); padding:24px; } .py-content{ padding:36px 24px 80px; } .py-hero{ padding:120px 24px 50px; } }

@keyframes reactDash { to { stroke-dashoffset: -120; } }
@keyframes reactPulseOrb { 0%{transform:translate(0,0);opacity:.2} 50%{transform:translate(850px,80px);opacity:1} 100%{transform:translate(0,0);opacity:.2} }
.react-flow-dash { animation: reactDash 5s linear infinite; }
.react-pulse-orb { transform-origin: 30px 90px; animation: reactPulseOrb 7s ease-in-out infinite; }

/* 2026-04 SansqritPy readability and diagram overflow fixes */
.py-content { min-width: 0; }
.py-content table { display:block; overflow-x:auto; white-space: normal; }
.py-content td, .py-content th { vertical-align: top; }
.py-content pre { white-space: pre; max-width: 100%; }
.py-doc-card { overflow-x: auto; }
.py-explain-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin:24px 0; }
.py-explain-card { border:1px solid var(--border); background:rgba(0,229,255,.045); padding:20px; border-radius:18px; }
.py-explain-card h3 { margin:0 0 10px; color:var(--cyan); font-family:var(--font-code); font-size:12px; letter-spacing:1.8px; text-transform:uppercase; }
.py-explain-card p { margin:0; line-height:1.75; }
.py-plain-flow { display:grid; grid-template-columns: repeat(4, minmax(150px,1fr)); gap:12px; margin:22px 0; }
.py-plain-flow .flow-step { border:1px solid rgba(0,229,255,.2); background:rgba(3,6,16,.68); padding:16px; border-radius:16px; }
.py-plain-flow .flow-step strong { display:block; color:var(--cyan); font-family:var(--font-code); font-size:11px; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.py-plain-flow .flow-step span { color:var(--text-2); font-size:13px; line-height:1.55; }
.diagram-shell svg { max-width:100%; height:auto; }
.diagram-shell-header { flex-wrap: wrap; }
.diagram-subtitle { max-width: 820px; line-height:1.6; }
@media (max-width: 760px){ .py-plain-flow{ grid-template-columns:1fr; } .py-hero h1{ letter-spacing:3px; } }

/* 2026-04-27 deeper SansqritPy package fixes */
.sidebar-toc { overflow-y:auto; }
.sidebar-toc .toc-group-title { margin:18px 0 8px; color:var(--cyan); font-family:var(--font-code); font-size:10px; letter-spacing:2px; text-transform:uppercase; }
.sidebar-toc .toc-sub { display:block; padding:7px 0 7px 12px; margin-left:6px; border-left:1px solid rgba(0,229,255,.18); color:var(--text-3); font-size:12px; line-height:1.35; }
.sidebar-toc .toc-sub:hover { color:var(--cyan); border-left-color:var(--cyan); }
.diagram-shell { overflow:hidden; }
#react-shard-bridge { min-height: 650px; }
#react-shard-bridge svg { display:block; width:100%; max-width:100%; }
@keyframes reactPulseWide { 0%{transform:translate(0,0);opacity:.25} 45%{transform:translate(375px,0);opacity:1} 100%{transform:translate(745px,0);opacity:.25} }
@keyframes reactPulseBridge { 0%{transform:translate(0,0);opacity:.2} 50%{transform:translate(48px,-70px);opacity:1} 100%{transform:translate(96px,0);opacity:.2} }
.react-pulse-orb-wide { transform-origin:170px 80px; animation: reactPulseWide 6s ease-in-out infinite; }
.react-pulse-bridge { animation: reactPulseBridge 3.8s ease-in-out infinite; }
.docs-hub { border:1px solid var(--border); background:linear-gradient(180deg, rgba(0,229,255,.07), rgba(3,6,16,.75)); padding:22px; margin:24px 0 30px; border-radius:22px; }
.docs-hub h3 { color:var(--cyan); font-family:var(--font-code); letter-spacing:2px; text-transform:uppercase; font-size:13px; margin:0 0 12px; }
.docs-hub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:18px; }
.docs-hub-grid a { display:block; border:1px solid rgba(0,229,255,.18); padding:14px 16px; border-radius:16px; color:var(--text-2); background:rgba(0,0,0,.22); }
.docs-hub-grid a strong { display:block; color:var(--cyan); font-family:var(--font-code); font-size:11px; letter-spacing:1px; margin-bottom:6px; }
.docs-hub-grid a span { color:var(--text-3); font-size:13px; line-height:1.55; }
.docs-merge-note { border-left:3px solid var(--cyan); padding:16px 18px; background:rgba(0,229,255,.06); color:var(--text-2); margin:18px 0; line-height:1.75; }
.py-doc-card h2.section-title { border-bottom:1px solid rgba(0,229,255,.15); padding-bottom:14px; }
@media (max-width: 980px){ #react-shard-bridge{ min-height:460px; } }
.section-deep-dive { border:1px solid rgba(0,229,255,.16); background:rgba(0,0,0,.24); padding:18px 20px; border-radius:18px; margin:18px 0 24px; }
.section-deep-dive h3 { margin:0 0 10px; color:var(--cyan); font-family:var(--font-code); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
.section-deep-dive p { margin:0 0 12px; line-height:1.78; color:var(--text-2); }
.section-deep-dive p:last-child { margin-bottom:0; }


/* 2026-04-27 package disclaimer section */
.disclaimer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:20px 0 22px; }
.disclaimer-card { border:1px solid rgba(245,158,11,.24); background:rgba(245,158,11,.06); border-radius:18px; padding:18px; }
.disclaimer-card h3 { margin:0 0 8px; color:#fcd34d; font-family:var(--font-code); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; }
.disclaimer-card p { margin:0; color:var(--text-2); line-height:1.7; font-size:14px; }
.disclaimer-list { margin:16px 0 0 0; padding-left:20px; }
.disclaimer-list li { color:var(--text-2); line-height:1.8; margin:8px 0; }
.disclaimer-note { border-left:3px solid #F59E0B; background:rgba(245,158,11,.08); padding:16px 18px; color:#fde68a; margin-top:18px; line-height:1.75; }