/* stream.css — the stream kit (stream.html, js/stream.js) */
.sk-checks { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.sk-socials { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .sk-socials { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sk-socials { grid-template-columns: 1fr; } }

.sk-list { list-style: none; display: grid; gap: 14px; margin-top: 14px; counter-reset: sk; }
.sk-list li { counter-increment: sk; padding: 12px 14px; background: var(--store-panel); border: 1px solid var(--store-line); border-radius: var(--r); }
.sk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sk-head b { font-family: var(--sg); font-weight: 700; color: var(--store-ink); }
.sk-head b::before { content: counter(sk) ". "; color: var(--store-dim); }
.sk-head span { color: var(--store-dim); font-size: .8rem; }
.sk-url { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.sk-url input {
  flex: 1; min-width: 0; min-height: 34px; padding: 6px 9px;
  background: var(--store-pit); color: var(--store-muted);
  border: 1px solid var(--store-line-2); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: .76rem;
}
.sk-url input:focus { border-color: var(--g-live); outline: none; color: var(--store-ink); }

.sk-dl { align-items: flex-end; margin-top: 12px; }
.sk-os { min-width: 180px; }
.sk-modes { list-style: none; display: grid; gap: 10px; margin-top: 12px; color: var(--store-muted); font-size: .9rem; }
.sk-modes b { color: var(--store-ink); }
.sk-modes code { font-family: var(--mono); font-size: .84rem; color: var(--store-ink); }
.sk-group { margin-top: 22px; font: 700 .78rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--store-muted); }
.sk-group:first-child { margin-top: 6px; }
.sk-cmds .sk-head b::before { content: none; }
.sk-cmds .sk-head b { font-family: var(--mono); color: var(--g-live); }
.sk-cmds { counter-reset: none; }
.row .note code { font-family: var(--mono); font-size: .84rem; color: var(--store-ink); }
.sk-live-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sk-live-row b { font-family: var(--sg); font-weight: 700; color: var(--store-ink); }
.sk-live-go { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

.pk-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.pk-item { display: grid; gap: 8px; align-content: start; padding: 12px; background: var(--store-panel); border: 1px solid var(--store-line); border-radius: var(--r); }
.pk-item .btn { justify-self: start; }
.pk-img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); background: var(--store-pit); }
.pk-avatar .pk-img { width: 70%; justify-self: center; border-radius: 50%; }
.pk-panel .pk-img { max-width: 320px; }
.pk-bios { margin-top: 18px; }
.pk-text {
  width: 100%; margin-top: 8px; padding: 8px 10px; resize: vertical;
  background: var(--store-pit); color: var(--store-muted);
  border: 1px solid var(--store-line-2); border-radius: var(--r-sm);
  font: .84rem/1.45 var(--mono);
}
.pk-bios .btn { margin-top: 6px; }
.pk-item .sk-head b::before { content: none; }
.rl-links { display: grid; gap: 8px; margin: 10px 0; }
.rl-links span { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rl-links code { font-family: var(--mono); font-size: .84rem; color: var(--store-ink); word-break: break-all; }
.rl-dests { list-style: none; display: grid; gap: 6px; margin: 12px 0; padding: 0; }
.rl-dests li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--store-muted); font-size: .9rem; }
.rl-dests b { color: var(--store-ink); }
.rl-dests code { font-family: var(--mono); font-size: .8rem; }