:root {
  --ink:#11120f;
  --paper:#fff;

  /*
   * Publiczne punkty konfiguracji wyglądu klienta. Opcjonalny arkusz
   * assets/clients/{streamName}.css może nadpisać wyłącznie wybrane wartości,
   * bez kopiowania całych reguł odpowiedzialnych za responsywny układ strony.
  */
  --client-table-font-size:16px;
  --client-session-title-font-size:16px;
  --client-session-title-color:var(--ink);
  --client-live-button-font-size:16px;
  --client-live-button-color:var(--ink);
  --client-live-button-background:#fff;
  --client-live-button-border-width:1px;
  --client-live-button-border-color:var(--ink);
  --client-live-button-border-style:solid;
  --client-live-button-hover-background:#e5e5e5;
  --client-live-button-hover-color:var(--ink);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; min-height:100vh; }
.shell { width:min(960px,calc(100% - 32px)); margin:0 auto; padding:34px 0 60px; }
.shell--compact-top { padding-top:4px; }
.branding { display:grid; justify-items:center; gap:12px; margin:0 auto 28px; text-align:center; }
.branding img { display:block; max-width:100%; height:auto; }
.branding p { margin:0; font-size:18px; line-height:1.25; font-weight:700; }
.label { font-size:11px; letter-spacing:.17em; font-weight:800; }
.card { border:1px solid var(--ink); background:#fff; }
.workspace { display:block; }
.video-frame { position:relative; width:100%; max-width:960px; margin:0 auto; background:transparent; border:0; padding:0; line-height:0; }
/* Video.js ustawia inline-block, który zostawia szczelinę linii bazowej pod playerem. */
.video-js { display:block; width:100%; overflow:hidden; }
/*
 * Dekodowana warstwa wideo jest minimalnie powiększona i przycinana przez
 * player. Zapobiega to prześwitom jego czarnego tła na ułamkowych krawędziach
 * podczas przewijania i zmiany szerokości okna.
 */
.video-frame .video-js .vjs-tech { transform:scale(1.004); transform-origin:center; }
/*
 * Poster klienta jest pokazywany wyłącznie w stanach bez aktywnego materiału.
 * `display:block` nadpisuje regułę Video.js ukrywającą poster po pierwszym play.
 * Warstwa tech zostaje tylko ukryta, więc rozmiar i responsywność nie zmieniają
 * się. `object-fit:contain` nie kadruje grafiki przygotowanej przez klienta.
 */
.video-js.vjs-client-poster-visible .vjs-poster {
  display:block;
  pointer-events:none;
  cursor:default;
}
.video-js.vjs-client-poster-visible .vjs-poster img { object-fit:contain; }
.video-js.vjs-client-poster-visible .vjs-tech { visibility:hidden; }
.video-js.vjs-client-poster-visible .vjs-big-play-button,
.video-js.vjs-client-poster-visible .vjs-loading-spinner { display:none; }
/*
 * Video.js domyślnie ukrywa czas bieżący i długość, również w swoich trybach
 * responsywnych. Arkusz projektu jest ładowany później, a !important jest tu
 * potrzebne do nadpisania bardziej szczegółowych klas vjs-layout-*.
 */
.video-js .vjs-current-time,
.video-js .vjs-time-divider,
.video-js .vjs-duration { display:block !important; }
.video-js .vjs-remaining-time { display:none !important; }
/*
 * Video.js domyślnie ukrywa cały pasek przed pierwszym odtworzeniem. Stary
 * player pokazywał go w stanie pauzy, dlatego zachowujemy to samo zachowanie.
 */
.video-js.vjs-paused .vjs-control-bar,
.video-js.vjs-ended .vjs-control-bar { display:flex; }
.now-playing { padding:16px 4px 0; text-align:center; }
.now-playing strong { display:block; color:var(--client-session-title-color); font-size:var(--client-session-title-font-size); line-height:1.3; }
button { border:1px solid var(--ink); background:white; padding:10px 14px; font-weight:800; cursor:pointer; }
button:active { transform:translate(1px,1px); }
.recordings { width:100%; max-width:960px; margin:24px auto 0; padding:0; border:0; background:transparent; }
.recordings[hidden] { display:none; }
.live-return {
  display:block;
  margin:0 auto 15px;
  color:var(--client-live-button-color);
  font-size:var(--client-live-button-font-size);
  background:var(--client-live-button-background);
  border-width:var(--client-live-button-border-width);
  border-color:var(--client-live-button-border-color);
  border-style:var(--client-live-button-border-style);
}
.live-return[hidden] { display:none; }
.live-return:hover,
.live-return:focus-visible {
  color:var(--client-live-button-hover-color);
  background:var(--client-live-button-hover-background);
}
.recordings-heading { display:block; margin:0; }
.recordings-heading h2 { margin:15px 0; font-size:18px; line-height:normal; letter-spacing:normal; }
.recordings .label, .recordings-count { display:none; }
.table-scroll { width:80%; margin:0 auto; overflow-x:auto; border:0; background:transparent; }
table { width:100%; min-width:0; border-collapse:separate; border-spacing:3px; }
.recordings thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
th { background:var(--ink); color:white; padding:11px 14px; text-align:left; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
th:first-child { width:auto; }
td { border:0; padding:2px 5px; vertical-align:middle; color:var(--client-table-color,var(--ink)); font-size:var(--client-table-font-size); font-weight:400; }
tbody tr:first-child td { border-top:0; }
td:first-child { width:1%; padding:2px 5px; white-space:nowrap; font-weight:400; font-variant-numeric:tabular-nums; }
td:last-child { width:99%; }
.recording-choice { display:block; width:100%; border:0; padding:2px 5px; color:var(--client-table-color,#000); text-align:left; white-space:normal; overflow-wrap:anywhere; font-size:var(--client-table-font-size); line-height:1.35; font-weight:400; background:transparent; }
.recordings tbody tr:hover,
.recordings tbody tr:focus-within { background:#e5e5e5; }
.recording-choice:hover { background:transparent; outline:0; }
.recording-choice:focus-visible { background:transparent; outline:2px solid var(--ink); outline-offset:-2px; }
tr.selected { background:transparent; }
tr.selected .recording-choice::after { content:none; }
.table-message { padding:18px; color:#62645b; text-align:center; }
h2 { font-size:30px; letter-spacing:-.035em; margin:12px 0; }
@media (max-width:520px) { .shell{width:calc(100% - 20px);padding-top:20px}.shell.shell--compact-top{padding-top:4px}.now-playing{padding-top:14px} }