/* JavaScript Stock Charts production page. Shared document rhythm and hero
   behavior live in s8-content.css; this file owns only chart-page presentation. */
.s8sc .s8c-hero{align-items:end}
.s8sc .s8c-facts{min-width:250px}
.s8sc .s8c-cta-row svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

.s8sc-demo{
  height:600px;
  overflow:hidden;
  border:1px solid var(--s8-line);
  border-radius:var(--s8-r-lg);
  background:var(--s8-inset);
  box-shadow:var(--s8-pop)
}
.s8sc-demo>.sc-chart-container{height:100%}

.s8sc-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8-4)}
.s8sc-chart-card{overflow:hidden;padding:0}
.s8sc-chart-card__demo{height:400px;overflow:hidden;border-bottom:1px solid var(--s8-line);background:var(--s8-inset)}
.s8sc-chart-card__demo>.sc-chart-container{height:100%}
.s8sc-chart-card__copy{padding:var(--s8-4) var(--s8-5) var(--s8-5)}

.s8sc .s8c-docs>div{min-width:0}
.s8sc .s8c-tablewrap{overflow-x:auto}
.s8sc .s8-table{min-width:660px}
.s8sc .s8c-code pre{white-space:pre}
.s8sc .s8c-note p{margin:0}
.s8sc .s8c-note strong{color:var(--s8-warn)}

@media(max-width:900px){
  .s8sc-gallery{grid-template-columns:1fr}
}
@media(max-width:680px){
  .s8sc-demo{height:500px}
  .s8sc-demo>.sc-chart-container{height:100%}
  .s8sc-chart-card__demo{height:360px}
  .s8sc-chart-card__demo>.sc-chart-container{height:100%}
}