/* EscapeVerse → Strony www: „Ściąga” (www-sciaga.js) – tabela: kod, przykład, co robi. Kolory stron jak w www.css; jasny i ciemny motyw.
   Na telefonie wiersze tabeli zamieniają się w karty. Animacje tylko transform/opacity. */
.wsc-sec { position: relative; margin-top: 4.5rem; }
.wsc-sec > .tl3d-head { margin-bottom: 1.2rem; }
.wsc { --sc: #00B8D9; --sc-ink: var(--sc); position: relative; max-width: 1180px; margin: 0 auto; padding: 1.4rem; border-radius: 24px;
  background: var(--glass, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08));
  box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--sc) 55%, transparent); }
.wsc[data-sciaga="html"] { --sc: #FF7A4D; } .wsc[data-sciaga="css"] { --sc: #4FB3F0; } .wsc[data-sciaga="js"] { --sc: #F7DF1E; }
.wsc[data-sciaga="php"] { --sc: #9EA3E0; } .wsc[data-sciaga="sql"] { --sc: #2DD4BF; }
body.light .wsc[data-sciaga="html"] { --sc: #C2410C; } body.light .wsc[data-sciaga="css"] { --sc: #1565A8; } body.light .wsc[data-sciaga="js"] { --sc: #7A6200; }
body.light .wsc[data-sciaga="php"] { --sc: #4F5B93; } body.light .wsc[data-sciaga="sql"] { --sc: #0B766C; }

.wsc-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.wsc-tt { flex: 1 1 260px; min-width: 0; }
.wsc-tt h2 { margin: 0; font: 700 clamp(1.35rem, 3vw, 1.8rem)/1.2 'Space Grotesk', sans-serif; color: var(--text); }
.wsc-tt p { margin: .3rem 0 0; font-size: .9rem; color: var(--muted); }
.wsc-pdf { display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.2rem; border: 0; border-radius: 14px; cursor: pointer;
  font: 700 .95rem 'Space Grotesk', sans-serif; color: #fff; background: linear-gradient(135deg, #E5484D, #B4232A);
  box-shadow: 0 12px 26px -12px rgba(229, 72, 77, .7); transition: transform .2s; }
.wsc-pdf:hover:not(:disabled) { transform: translateY(-2px); }
.wsc-pdf:focus-visible { outline: 3px solid var(--sc); outline-offset: 3px; }
.wsc-pdf:disabled { opacity: .7; cursor: progress; }

.wsc-tools { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; }
.wsc-search { display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.wsc-search:focus-within { border-color: var(--sc); }
.wsc-search i { color: var(--muted); }
.wsc-search input { flex: 1; min-width: 0; padding: .75rem 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 1rem Inter, sans-serif; }
.wsc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wsc-chip { padding: .38rem .8rem; border-radius: 999px; cursor: pointer; font: 600 .82rem Inter, sans-serif; color: var(--muted);
  background: transparent; border: 1px solid var(--border); transition: color .2s, border-color .2s, background-color .2s; }
.wsc-chip:hover { color: var(--text); border-color: var(--sc); }
.wsc-chip[aria-pressed="true"] { color: var(--text); border-color: var(--sc); background: color-mix(in srgb, var(--sc) 16%, transparent); }
.wsc-chip:focus-visible { outline: 2px solid var(--sc); outline-offset: 2px; }

.wsc-scroll { max-height: min(680px, 72vh); overflow: auto; border-radius: 16px; border: 1px solid var(--border); background: var(--bg); overscroll-behavior: contain; }
.wsc-t { width: 100%; border-collapse: collapse; font-size: .92rem; }
.wsc-t thead th { position: sticky; top: 0; z-index: 2; padding: .7rem .9rem; text-align: left; font: 700 .78rem 'Space Grotesk', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--bg) 88%, var(--sc)); border-bottom: 1px solid var(--border); }
.wsc-t thead th:first-child { width: 24%; } .wsc-t thead th:nth-child(2) { width: 38%; }
.wsc-g th { position: sticky; top: 2.3rem; z-index: 1; padding: .6rem .9rem; text-align: left; font: 700 .95rem 'Space Grotesk', sans-serif; color: var(--text);
  background: color-mix(in srgb, var(--bg) 82%, var(--sc)); border-left: 4px solid var(--sc); }
.wsc-t td { padding: .65rem .9rem; vertical-align: top; border-bottom: 1px solid var(--border); }
.wsc-t tbody tr:not(.wsc-g):hover td { background: color-mix(in srgb, var(--sc) 6%, transparent); }
.wsc-k code { font: 700 .88rem/1.45 'Space Mono', monospace; color: var(--sc); word-break: break-word; }
.wsc-copy { position: relative; display: block; width: 100%; padding: .35rem 2rem .35rem .55rem; text-align: left; cursor: pointer; border-radius: 9px;
  background: var(--glass); border: 1px solid var(--border); color: var(--text); transition: border-color .2s; }
.wsc-copy code { font: 400 .82rem/1.5 'Space Mono', monospace; white-space: pre-wrap; word-break: break-word; }
.wsc-copy::after { content: '\f0c5'; position: absolute; top: .4rem; right: .55rem; font: 900 .78rem 'Font Awesome 6 Free'; color: var(--muted); opacity: .6; }
.wsc-copy:hover { border-color: var(--sc); }
.wsc-copy:hover::after { opacity: 1; }
.wsc-copy.ok { border-color: #22C55E; }
.wsc-copy.ok::after { content: '\f00c'; color: #22C55E; opacity: 1; }
.wsc-copy:focus-visible { outline: 2px solid var(--sc); outline-offset: 2px; }
.wsc-d { line-height: 1.5; color: var(--text); }
.wsc-empty { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--muted); }
.wsc-err { margin: .6rem 0 0; color: #E5484D; font-size: .9rem; }
.wsc-err:empty { display: none; }
.wsc [hidden] { display: none !important; }

/* telefon: wiersz = karta */
@media (max-width: 700px) {
  .wsc { padding: 1rem; border-radius: 20px; }
  .wsc-pdf { width: 100%; justify-content: center; }
  .wsc-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -.2rem; padding: 0 .2rem .1rem; }
  .wsc-chips::-webkit-scrollbar { display: none; }
  .wsc-chip { flex: none; }
  .wsc-scroll { max-height: 70vh; }
  .wsc-t thead { display: none; }
  .wsc-t, .wsc-t tbody, .wsc-t tr, .wsc-t td, .wsc-t th { display: block; width: 100%; }
  .wsc-g th { top: 0; }
  .wsc-t tbody tr:not(.wsc-g) { padding: .7rem .8rem; border-bottom: 1px solid var(--border); }
  .wsc-t td { padding: .15rem 0; border: 0; }
  .wsc-t td.wsc-x { margin: .35rem 0; }
  .wsc-t tbody tr:not(.wsc-g):hover td { background: none; }
}