/* Skytte GO — jeden plik, zero zależności. */

:root {
  --tlo: #f6f7f9;
  --karta: #ffffff;
  --tekst: #12141a;
  --przygaszony: #5b6270;
  --obwodka: #e2e5ea;
  --akcent: #b3322c;
  --kod: #f2f4f7;
}

/* Motyw idzie za ustawieniem systemu. Strona ma jeden ekran treści i żaden
   przełącznik nie zarobiłby na miejsce, które by zabrał. */
@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #12141a;
    --karta: #1a1d25;
    --tekst: #e8eaee;
    --przygaszony: #99a0ad;
    --obwodka: #2a2f3a;
    --akcent: #e0605a;
    --kod: #222630;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.25rem 1rem 3rem;
  background: var(--tlo);
  color: var(--tekst);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.naglowek, .zgody, main, .stopka { max-width: 60rem; margin: 0 auto; }

h1 { font-size: 1.5rem; margin: 0 0 .35rem; }
h2 { font-size: .95rem; margin: 0 0 .6rem; color: var(--przygaszony); font-weight: 600; }

.podtytul { margin: 0 0 1rem; color: var(--przygaszony); max-width: 46rem; }

.paski { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.przycisk {
  font: inherit; font-weight: 600;
  padding: .5rem .9rem; border-radius: .5rem;
  border: 1px solid transparent; background: var(--akcent); color: #fff;
  cursor: pointer;
}
.przycisk.cichy { background: var(--karta); color: var(--tekst); border-color: var(--obwodka); }
.przycisk:hover { filter: brightness(1.08); }
.przycisk:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

.stan { color: var(--przygaszony); font-size: .85rem; }

.zgody { margin: 1.5rem auto .5rem; }

.karty {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.karta {
  background: var(--karta); border: 1px solid var(--obwodka);
  border-radius: .75rem; padding: .9rem 1rem 1rem;
  /* Wartości bywają bardzo długie (ciąg identyfikacyjny, lista kodeków),
     a karta nie może przez nie rozpychać siatki. */
  min-width: 0;
}
.karta h3 {
  margin: 0 0 .6rem; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--przygaszony);
}

dl { margin: 0; display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: .35rem .75rem; }
dt { color: var(--przygaszony); font-size: .85rem; min-width: 0; overflow-wrap: anywhere; }
dd {
  margin: 0; font-size: .85rem; min-width: 0;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}

.brak { color: var(--przygaszony); font-style: italic; }
.tak { color: #1a7f37; font-weight: 600; }
.nie { color: var(--akcent); font-weight: 600; }

code, .monospace {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8rem; background: var(--kod); padding: .1rem .3rem; border-radius: .25rem;
}

.ladowanie { color: var(--przygaszony); grid-column: 1 / -1; }

.stopka { margin-top: 2rem; color: var(--przygaszony); font-size: .8rem; }

@media (max-width: 30rem) {
  dl { grid-template-columns: 1fr; gap: .1rem .5rem; }
  dt { margin-top: .4rem; }
}