/* Data-viz page styles; extends global style.css */
:root { --surface-ink:#fff; }

/* Toolbar */
#toolbar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; margin:1rem 0; }
#toolbar .controls { display:flex; gap:.5rem; flex-wrap:wrap; }
#toolbar input[type="search"], #toolbar input[type="url"]{
    padding:.55rem .7rem; border:1px solid rgba(0,0,0,.12); border-radius:.55rem;
    min-width:24ch; background:var(--bg); color:var(--fg);
}
#toolbar .chip.active { background:var(--button-bg); color:var(--button-fg); border-color:transparent; }

/* Grid + cards (reuse global .grid but tighten min width for code blocks) */
.grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(26ch,1fr)); }
.card{ background:var(--surface); padding:var(--gap); border-radius:var(--radius); box-shadow:var(--shadow); position:relative; display:flex; flex-direction:column; }
.card h3{ color:var(--accent); margin-bottom:.45rem; font-size:1.15rem; }
.card .mini{ opacity:.8; font-size:.9rem; }
.card pre{ background:var(--surface-ink); border-radius:.5rem; padding:.8rem; font-size:.88rem; overflow:auto; white-space:pre-wrap; word-break:break-word; }
.card .actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.card:target{ outline:2px solid var(--accent); scroll-margin-top:6rem; }

/* Runtime + log */
#viz-runtime{ margin-top:var(--gap); display:grid; gap:var(--gap); }
#viz-runtime .card pre{ max-height:30vh; }
.analysis{ margin-top:.6rem; }
.analysis summary{ cursor:pointer; }

/* Config panel */
#viz-config{ margin-top:var(--gap); }
#viz-config form label{ display:block; margin:.35rem 0; font-size:.92rem; }

/* Fallback table */
table.fallback{ width:100%; border-collapse:collapse; margin-top:.6rem; background:var(--surface-ink); }
table.fallback caption{ text-align:left; font-weight:600; color:var(--muted); margin-bottom:.25rem; }
table.fallback th, table.fallback td{ border:1px solid rgba(0,0,0,.12); padding:.4rem .55rem; text-align:left; }
table.fallback th{ background:color-mix(in oklab, var(--accent) 12%, white); color:var(--fg); }

@media (max-width:720px){
    #toolbar{ flex-direction:column; align-items:stretch; }
    #toolbar .controls[aria-label="External loading"]{ margin-left:0; }
}