/* Tiingo + Stock Charts tutorial. Builds on s8-content.css (document rhythm) and
   s8-stock-charts.css (chart frame, code blocks); this file owns only the demo bar,
   the relay flow, and the attribution line. */
.s8tc-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s8-3);margin-bottom:var(--s8-3)}
.s8tc-bar .s8-field{margin:0}
.s8tc-bar .s8-input{width:140px;text-transform:uppercase}
.s8tc-status{display:inline-flex;align-items:center;gap:var(--s8-2);margin-left:auto;font-size:var(--s8-fs-sm);color:var(--s8-fg-3)}
.s8tc-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s8-fg-3)}
.s8tc-status[data-state="live"]{color:var(--s8-up)}
.s8tc-status[data-state="live"]::before{background:var(--s8-up);box-shadow:0 0 0 3px color-mix(in srgb,var(--s8-up) 25%,transparent)}
.s8tc-status[data-state="error"]{color:var(--s8-down)}
.s8tc-status[data-state="error"]::before{background:var(--s8-down)}
.s8tc-credit{margin:var(--s8-3) 0 0;font-size:var(--s8-fs-sm);color:var(--s8-fg-3)}
.s8tc-credit a{color:var(--s8-fg);text-decoration:none}
.s8tc-credit a:hover,.s8tc-credit a:focus-visible{color:var(--s8-accent);text-decoration:none}

/* Browser -> relay -> Tiingo */
.s8tc-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8-4);counter-reset:flow}
.s8tc-flow .s8c-card{position:relative}
.s8tc-flow .s8c-card+.s8c-card::before{content:"";position:absolute;left:calc(-1 * var(--s8-4) + 2px);top:50%;width:calc(var(--s8-4) - 4px);height:1px;background:var(--s8-line)}
.s8tc-flow code,.s8tc-why code{font-size:.92em}
.s8tc-why{margin-top:var(--s8-5)}

@media(max-width:900px){
  .s8tc-flow{grid-template-columns:1fr}
  .s8tc-flow .s8c-card+.s8c-card::before{display:none}
}
@media(max-width:680px){
  .s8tc-status{margin-left:0;width:100%}
}