/* The film-synced demo (film.html): the demo fills the page in a frame, the
   film docks in a corner on wide screens and sits under the demo on phones
   and tablets, so neither covers the other there. */
html, body.film-shell { height: 100%; }
body.film-shell {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: #f6f2ec;
  color: #1c2b2a;
  font: 400 0.9375rem/1.45 "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.film-shell .demo-banner {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  padding: 0.45rem max(1rem, env(safe-area-inset-right, 0px)) 0.45rem max(1rem, env(safe-area-inset-left, 0px));
  background: #1f7a74;
  color: #fff;
  font: 600 0.8125rem/1.2 "Source Sans 3", system-ui, sans-serif;
}
.film-shell .demo-banner__link { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }

.film-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.film-demo { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }

/* While the film shows something the demo cannot (sign-up, the import…). */
.film-away {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(246 242 236 / 0.84);
  backdrop-filter: blur(3px);
  z-index: 5;
}
.film-away[hidden] { display: none; }
.film-away__card {
  max-width: 28rem;
  background: #fffdf9;
  border: 1px solid #e4ddd2;
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 12px 32px rgb(28 43 42 / 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.film-away__text { margin: 0; font-size: 1rem; }
.film-away__skip {
  align-self: flex-start;
  border: 0;
  border-radius: 999px;
  background: #1f7a74;
  color: #fff;
  padding: 0.6rem 1rem;
  font: 600 0.875rem/1 "Source Sans 3", system-ui, sans-serif;
  cursor: pointer;
}

/* The player. */
.film-player {
  background: #fffdf9;
  border-top: 1px solid #e4ddd2;
  flex: 0 0 auto;
  z-index: 20;
}
.film-player__media { position: relative; background: #000; }
.film-player__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.film--collapsed .film-player__media { display: none; }
.film-player__start {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: #1f7a74;
  color: #fff;
  padding: 0.75rem 1.2rem;
  font: 600 1rem/1 "Source Sans 3", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}
.film-player__start[hidden] { display: none; }
.film-player__start svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

.film-player__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.55rem max(0.8rem, env(safe-area-inset-right, 0px)) calc(0.6rem + env(safe-area-inset-bottom, 0px)) max(0.8rem, env(safe-area-inset-left, 0px)); }
.film-player__head { display: flex; align-items: center; gap: 0.3rem; }
.film-player__caption { margin: 0; min-height: 2.9em; font-size: 0.95rem; line-height: 1.45; }

.film-player__bar { position: relative; height: 1.25rem; display: flex; align-items: center; }
.film-player__seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(to right, #1f7a74 var(--progress, 0%), #e4ddd2 var(--progress, 0%));
  cursor: pointer;
}
.film-player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #1f7a74; border: 2px solid #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.film-player__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #1f7a74; border: 2px solid #fff; }
.film-player__seek:focus-visible { outline: 3px solid rgb(31 122 116 / 0.4); outline-offset: 3px; }
.film-player__ticks { position: absolute; inset: 0; pointer-events: none; }
.film-player__tick { position: absolute; top: 50%; width: 2px; height: 10px; margin: -5px 0 0 -1px; background: #fffdf9; border-radius: 1px; }

.film-player__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.film-player__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #1c2b2a;
  cursor: pointer;
}
.film-player__icon:hover { background: #efe9e0; }
.film-player__icon svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.film-player__play { background: #1f7a74; color: #fff; }
.film-player__play:hover { background: #18645f; }
.film-player__time { font-size: 0.8125rem; color: #4b5b59; font-variant-numeric: tabular-nums; padding: 0 0.15rem; }
.film-player__chapters {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.1rem;
  border: 1px solid #e4ddd2;
  border-radius: 0.6rem;
  background: #fff;
  color: #1f7a74;
  padding: 0 0.4rem;
  font: 600 0.8125rem/1 "Source Sans 3", system-ui, sans-serif;
  text-overflow: ellipsis;
}
.film-player__video { cursor: pointer; }
.film-player__voice {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 2.1rem;
  border: 1px solid #e4ddd2;
  border-radius: 999px;
  background: #fff;
  color: #1c2b2a;
  padding: 0 0.7rem 0 0.55rem;
  font: 600 0.8125rem/1 "Source Sans 3", system-ui, sans-serif;
  cursor: pointer;
}
.film-player__voice svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.film-player__voice[aria-pressed="true"] { background: #1f7a74; border-color: #1f7a74; color: #fff; }
.film-shell button:focus-visible, .film-shell select:focus-visible { outline: 3px solid rgb(31 122 116 / 0.45); outline-offset: 2px; }

.film-player__note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; background: #fdf1e8; border-left: 3px solid #e07a3f; border-radius: 0.5rem; padding: 0.5rem 0.7rem; }
.film-player__note[hidden] { display: none; }
.film-player__note p { margin: 0; flex: 1 1 12rem; font-size: 0.875rem; }
.film-player__back { border: 0; border-radius: 999px; background: #1f7a74; color: #fff; padding: 0.5rem 0.9rem; font: 600 0.8125rem/1 "Source Sans 3", system-ui, sans-serif; cursor: pointer; }
.film-player__toast { margin: 0; font-size: 0.8125rem; color: #1f7a74; font-weight: 600; }
.film-player__toast[hidden] { display: none; }

/* Phones and tablets: a part of the film the demo cannot show is marked on
   the film, with "Pomiń" by the controls, and the demo stays usable. The
   card over the demo is for wide screens. */
.film-player__badge {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  max-width: calc(100% - 0.7rem);
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgb(28 43 42 / 0.85);
  color: #fff;
  font: 600 0.6875rem/1.2 "Source Sans 3", system-ui, sans-serif;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.film-player__skip {
  margin-left: auto;
  height: 2.1rem;
  border: 1px solid #1f7a74;
  border-radius: 999px;
  background: #fff;
  color: #1f7a74;
  padding: 0 0.85rem;
  font: 600 0.8125rem/1 "Source Sans 3", system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.film-player__badge[hidden], .film-player__skip[hidden] { display: none; }
@media (max-width: 63.99rem) {
  .film-away { display: none; }
}

/* Wide screens: the film floats over the demo's corner. */
@media (min-width: 64rem) {
  .film-player {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 25rem;
    border: 1px solid #e4ddd2;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 16px 40px rgb(28 43 42 / 0.22);
    transition: width 0.3s ease;
  }
  .film--large .film-player, .film--spotlight .film-player { width: min(46rem, calc(100vw - 2.5rem)); }
  body[data-dock="bl"] .film-player, body[data-dock="tl"] .film-player { right: auto; left: 1.25rem; }
  body[data-dock="tr"] .film-player, body[data-dock="tl"] .film-player { bottom: auto; top: calc(var(--film-banner, 2.5rem) + 1.25rem); }
  .film--spotlight .film-away { justify-content: flex-start; align-items: flex-start; padding: 2rem; }
  .film-player__badge, .film-player__skip { display: none; }
}
/* Tablets: under the demo, the film beside its subtitle and controls. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .film-player { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: center; }
  .film--collapsed .film-player { grid-template-columns: minmax(0, 1fr); }
  .film-player__size { display: none; }
}

/* Phones: a compact strip under the demo – a small film next to the chapter
   and subtitle, the controls below. "Powiększ" gives the film the full width. */
@media (max-width: 39.99rem) {
  .film-player {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: 0.6rem;
    row-gap: 0.35rem;
    padding: 0.5rem max(0.75rem, env(safe-area-inset-right, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
  }
  .film-player__body { display: contents; }
  .film-player__head { grid-column: 1 / -1; grid-row: 1; }
  .film-player__media { grid-column: 1; grid-row: 2; align-self: start; border-radius: 0.5rem; overflow: hidden; }
  .film-player__caption {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    font-size: 0.875rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .film-player__bar, .film-player__controls, .film-player__note, .film-player__toast { grid-column: 1 / -1; }
  .film-player__voice span { display: none; }
  .film-player__voice { padding: 0 0.55rem; }
  .film-player__start { padding: 0.5rem 0.7rem; font-size: 0.8125rem; }
  .film-player__start span { display: none; }
  .film--large .film-player__media, .film--large .film-player__caption { grid-column: 1 / -1; grid-row: auto; }
  .film--collapsed .film-player__caption { grid-column: 1 / -1; grid-row: auto; }
  .film-shell .demo-banner__text { display: none; }
}