/* apps/www/wspolne/skory.css — SKÓRY stron mot3r: studio · hi-fi · DJ deck (Król 13.10 20:40Z: „skóry i strony:
   studio, hi-fi i DJ deck w Twoim systemie”). Jeden atrybut na <html>: data-skora="studio|hifi|dj".

   ⛔ PRAWO TEGO PLIKU — skóra zmienia POWIERZCHNIĘ, nie markę.
   Zero literałów barwy (żadnego #hex, rgb(), hsl(), oklch(), lab(), nazwy barwy) i zero nazw krojów.
   Każda barwa tu to recepta z tokenów wspólne/mot3r.css: var(--mot3r-*) albo color-mix() dwóch takich tokenów.
   Sygnał #f04a41 / #d93a31, czerń, jasny (ARRIVAL) i trzy kroje (DotGothic16 · Inter Tight · Geist Mono)
   są te same we wszystkich trzech skórach — strażnik: apps/panel/tests/mot3r-strony.test.ts.

   Co wolno skórze: płaszczyzny (czym jest karta — wtopiona, oprawiona, podniesiona), cienie, siatka, gęstość
   (wnętrze, odstępy, wysokość wiersza), promienie. Nic więcej.

   studio — odsłuch bliskiego pola: najwięcej powietrza, karta wtopiona w tło, zero cienia i zero siatki.
   hifi   — płyta czołowa wzmacniacza: ciaśniej, karta oprawiona włosem, nad nią jeden jaśniejszy włos (fazka).
   dj     — deck: prostokątnie i gęsto, karta PODNIESIONA (płytka nad blatem) z twardym cieniem, blat w siatkę,
            cel dotyku większy (praca palcem w ruchu). */

/* wspólne dla skór: nazwana warstwa niżej niż reguły mot3r.css nie jest potrzebna — [data-skora] ma wyższą
   konkretność niż gołe .m3-* , a zmienne i tak dziedziczą z :root */
[data-skora] {
  /* recepty powierzchni — składane WYŁĄCZNIE z tokenów skóry mot3r */
  --www-plyta: color-mix(in srgb, var(--mot3r-tekst) 4%, var(--mot3r-karta));
  --www-cien: color-mix(in srgb, var(--mot3r-tlo) 72%, transparent);
  --www-fazka: color-mix(in srgb, var(--mot3r-tekst) 10%, transparent);
  --www-siatka: var(--mot3r-linia);
}

/* ───────────────────────── studio — najwięcej powietrza, płasko ───────────────────────── */
[data-skora="studio"] {
  --mot3r-wnetrze-karty: 24px;
  --mot3r-odstep-kart: 12px;
  --mot3r-odstep-sekcji: 40px;
  --mot3r-wiersz-h: 64px;
  --mot3r-promien-karta: 22px;
  --mot3r-promien-wiersz: 10px;
}
[data-skora="studio"] .m3-karta {
  border-color: transparent;
  box-shadow: none;
}

/* ───────────────────────── hi-fi — płyta czołowa: ciaśniej, karta w oprawie ───────────────────────── */
[data-skora="hifi"] {
  --mot3r-wnetrze-karty: 18px;
  --mot3r-odstep-kart: 8px;
  --mot3r-odstep-sekcji: 28px;
  --mot3r-wiersz-h: 56px;
  --mot3r-promien-karta: 14px;
  --mot3r-promien-wiersz: 6px;
}
[data-skora="hifi"] .m3-karta {
  border-color: var(--mot3r-linia);
  /* fazka: jeden jaśniejszy włos po górnej krawędzi, jak na froncie wzmacniacza */
  box-shadow: inset 0 1px 0 0 var(--www-fazka);
}
[data-skora="hifi"] .m3-wiersz {
  box-shadow: inset 0 1px 0 0 var(--www-siatka);
}
[data-skora="hifi"] .m3-grupa > .m3-wiersz:first-child {
  box-shadow: none;
}

/* ───────────────────────── dj — deck: prostokątnie, gęsto, płytka nad blatem ───────────────────────── */
[data-skora="dj"] {
  --mot3r-wnetrze-karty: 16px;
  --mot3r-odstep-kart: 10px;
  --mot3r-odstep-sekcji: 24px;
  --mot3r-wiersz-h: 60px;
  --mot3r-promien-karta: 6px;
  --mot3r-promien-wiersz: 3px;
  --mot3r-pigulka-h: 56px;
  --mot3r-dotyk: 48px;
}
/* blat w siatkę — rysowana tokenem linii, nie nową barwą */
[data-skora="dj"] body {
  background-image:
    repeating-linear-gradient(90deg, var(--www-siatka) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, var(--www-siatka) 0 1px, transparent 1px 24px);
}
[data-skora="dj"] .m3-karta {
  background: var(--www-plyta);
  border-color: var(--mot3r-linia);
  box-shadow: 0 2px 0 0 var(--www-cien);
}
[data-skora="dj"] .m3-kciuk {
  border-radius: var(--mot3r-promien-karta);
  box-shadow: 0 2px 0 0 var(--www-cien);
}
[data-skora="dj"] .m3-pigulka {
  border-radius: var(--mot3r-promien-wiersz);
}

/* ───────────────────────── wspólne drobiazgi stron (nie komponenty DS) ─────────────────────────
   mot3r.css ubiera .m3-*, ale nie dotyka <body> — w panelu robi to jego własny arkusz, a ekrany DS
   wnoszą <style>body{margin:0}</style> u siebie. Strony www mają jedno miejsce na to samo:
   bez tego domyślny margines 8 px przeglądarki daje przewijanie w poziomie (pomiar 13.10). */
body {
  margin: 0;
  min-height: 100dvh;
}
/* Strona www nie ma doku kciuka na każdym ekranie — dolne wnętrze .m3-ekran liczone jest pod dok.
   Tu ekran bez doku oddaje to miejsce treści. */
.www-bez-doku {
  padding-bottom: calc(var(--mot3r-odstep-sekcji) + env(safe-area-inset-bottom, 0px));
}
/* rząd przełącznika skóry i motywu: etykieta + pigułki w jednej linii, zawija się na telefonie */
.www-przelaczniki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mot3r-krok-2);
  margin-top: var(--mot3r-krok-3);
}
.www-przelaczniki > [role="radiogroup"] {
  display: flex;
  gap: var(--mot3r-krok-1);
  min-width: 0;
}
/* Wiersz pobierania bez wydania: DS daje stanowi wyłączonemu kursor i krycie (mot3r.css), ale na <a>
   to za mało — link dalej nawiguje. Zero barwy, zero kroju: wyłączamy samo zdarzenie. */
a.m3-wiersz[aria-disabled="true"] {
  pointer-events: none;
}

/* tabela dokumentacji = lista wierszy DS; tu tylko kolumna wartości nie ucieka na telefonie */
.www-klucz {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mot3r-krok-1);
}
@media (min-width: 560px) {
  .www-klucz {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--mot3r-krok-2) var(--mot3r-krok-4);
    align-items: baseline;
  }
}