* {
  box-sizing: border-box;
}

/*
 * Reguła z arkusza przeglądarki `[hidden] { display: none }` ma specyficzność (0,1,0)
 * i przegrywa z każdym własnym `display` na selektorze typu — a Web Components mają je
 * wszystkie. Bez tej linii `element.hidden = true` nie chowa niczego, co ma własny
 * `display: flex`, i każdy komponent potrzebuje osobnego `nazwa[hidden]`. Potknęliśmy się
 * o to trzy razy (backlog, pozycja 27), więc reguła jest tu raz, dla wszystkich.
 */
[hidden] {
  display: none !important;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-body);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

/*
 * Otwarte okno modalne unieruchamia stronę pod spodem. Bez tego kółko myszy nad oknem —
 * także nad polem tekstowym, które doszło do końca — przewija scenariusz w tle, więc po
 * zamknięciu okna użytkownik jest w innym miejscu niż go zostawił. `overscroll-behavior`
 * na samej treści okna tego nie domyka: łańcuch zatrzymuje tylko wtedy, gdy kursor stoi
 * nad elementem, który faktycznie się przewija.
 *
 * `scrollbar-gutter: stable` wyżej jest częścią tej samej naprawy — bez niego zniknięcie
 * paska przewijania przy `overflow: hidden` przesuwa całą stronę o jego szerokość.
 */
body:has(script-description[visible]),
body:has(version-history[visible]),
body:has(share-modal[visible]),
body:has(frame-picker[visible]),
body:has(script-player[visible]),
body:has(export-modal[visible]),
body:has(comment-panel[visible]),
body:has(ui-prompt[visible]),
body:has(ui-confirm[visible]) {
  overflow: hidden;
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sp-9) var(--sp-9) 110px;
}

.wrap:has(> .editor) {
  min-width: 1280px;
}

h1 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.lead {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-md);
  color: var(--ink-soft);
}

.row {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
}

.spread {
  margin-right: auto;
}

/*
 * Poniżej 720 px margines strony schodzi z 24 na 16 px, a dolny zapas z 110 na 64 —
 * 110 px robiło miejsce pod pasek narzędzi edytora, którego na tych szerokościach
 * i tak nie ma.
 *
 * `:not(:has(> .editor))` nie jest ostrożnością na wyrost. Edytor ma stałe 1280 px
 * i przewija się poziomo, ale zapytanie o media patrzy na okno, nie na `.wrap` —
 * bez tego wykluczenia ta sama strona 1280 px dostawała inne marginesy zależnie od
 * szerokości okna, a kolumny przesuwały się o 8 px (zmierzone: 465 px przy oknie
 * 360 px, 457 px przy 800 px).
 */
@media (max-width: 720px) {
  .wrap:not(:has(> .editor)) {
    padding: var(--sp-7) var(--sp-7) 64px;
  }
}