/* ================================================================
   WEB SCRAPING — page-specific visuals on top of css/tools/tools-page.css:
   the extraction vignette's inline dataset (rows fill in as records
   are structured) and the full-width dataset preview. Everything
   else is the shared Tools page grammar.
   ================================================================ */
/* rows of the vignette dataset appear one by one */
.ws-set { margin: 8px 0 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02); overflow: hidden; }
.ws-set table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; table-layout: fixed; }
.ws-set th { padding: 7px 10px; text-align: left; font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-lavender); border-bottom: 1px solid var(--color-border-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-set td { padding: 7px 10px; border-bottom: 1px solid var(--color-border-subtle); }
.ws-set tr:last-child td { border-bottom: 0; }
.ws-set tbody tr { opacity: 0; transform: translateX(-4px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.ws-set tbody tr.is-on { opacity: 1; transform: none; }
.ws-set .sk { display: block; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.ws-set .sk--ac { background: var(--tp-purple-line); }
.ws-set .sk--ok { background: rgba(94, 224, 160, 0.55); }

/* the dataset preview in the Çıktı chapter: page-width window, internal scroll on phones */
.ws-preview .tp-data table { min-width: 34rem; }
.ws-preview .tp-data td:first-child .sk { width: 62%; }
.ws-preview .tp-data .sk { width: 48%; }

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .ws-set tbody tr { transition: none; }
}