/* ==========================================================================
   Scena InfoLink (strona główna). Selektory wyłącznie z przedrostkiem .di-.
   Barwy, kroje, promienie i krzywe z /css/tokens.css; .plate i .icon-btn z /css/field.css.
   Ramka telefonu jak .lp-phone na stronie głównej (te same trzy sceny, jedna rodzina).
   Ruch prowadzi demo-info.js (Web Animations API: transform, opacity, clip-path,
   stroke-dashoffset); tutaj stany spoczynkowe, w których każda warstwa jest schowana.
   ========================================================================== */

.di-root {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

/* Plakat dla strony bez skryptu (zastępowany sceną) */
.di-poster {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-l);
}

.di {
  --di-bezel: #15191B;          /* ramka urządzeń: stała w obu trybach, jak --lp-bezel */
  --di-shot-shadow: 0 2px 6px rgb(27 32 35 / 0.08), 0 14px 36px rgb(27 32 35 / 0.12); /* cień z jasnego interfejsu na zrzutach */
  container: di / inline-size;
  display: grid;
  gap: 10px;
}

/* ── Scena i „kamera” ─────────────────────────────────────────────────── */

.di-stage {
  position: relative;
  aspect-ratio: 1 / 0.96;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--blue-wash);
  isolation: isolate;
  contain: layout paint;
  user-select: none;
  -webkit-user-select: none;
}

.di-stage img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  -webkit-user-drag: none;
}

.di-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.di-par {
  position: absolute;
  inset: 0;
  perspective: 1600px;
}

/* ── Panel organizatora: ekran komputera w tej samej ramce co telefon ── */

.di-panel {
  position: absolute;
  left: 2%;
  top: 13%;
  width: 64%;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--di-bezel);
  box-shadow: var(--shadow-lift);
  transform-origin: 80% 50%;
  opacity: 0;
}

.di-win {
  position: relative;
  aspect-ratio: 792 / 660;
  overflow: hidden;
  border-radius: var(--r-s);
  background: #F3F4F2;          /* tło panelu, który ma tylko tryb jasny */
}

.di-band,
.di-wtop,
.di-ws {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.di-wtop { z-index: 1; }
.di-ws { z-index: 2; opacity: 0; }

.di-crop {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  opacity: 0;
}
.di-stage .di-crop img {
  width: 100%;
  height: 100%;
}
.di-band .di-crop { z-index: auto; }

/* Kursor tekstowy: wrapper ma rozmiar okna (albo formularza), przesuwa go transform */
.di-caretw {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.di-caret {
  position: absolute;
  left: 0;
  top: 0;
  width: max(1px, 0.24%);
  background: #1B2023;
  opacity: 0;
}

/* Kursor myszy: czubek strzałki w punkcie docelowym */
.di-curw {
  position: absolute;
  left: 7px;
  top: 7px;
  width: calc(100% - 14px);
  aspect-ratio: 792 / 660;
  z-index: 5;
  pointer-events: none;
}
.di-cur {
  position: absolute;
  left: 0;
  top: 0;
  width: 4.4%;
  translate: -16.7% -16.7%;
  transform-origin: 16.7% 16.7%;
  opacity: 0;
}
.di-pointer {
  display: block;
  width: 100%;
  height: auto;
  fill: #FCFCFB;
  stroke: #1B2023;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.di-click {
  position: absolute;
  left: 0;
  top: 0;
  width: 6%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 2px solid var(--blue);
  border-radius: 50%;
  opacity: 0;
}

/* ── Telefony ─────────────────────────────────────────────────────────── */

.di-slot {
  position: absolute;
  left: 61%;
  top: 7%;
  width: 35%;
  aspect-ratio: 404 / 858;
  perspective: 1400px;
}

.di-phone {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--di-bezel);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  backface-visibility: hidden;
}

/* Telefony innych uczestników: dalej od kamery, przygaszone barwą sceny */
.di-ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blue-wash);
  opacity: 0.32;
  pointer-events: none;
}

.di-screen {
  position: relative;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: var(--r-s);
  background: #F3F4F2;          /* tło widoku InfoLink na zrzutach (tryb jasny) */
}

.di-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.di-patch {
  position: absolute;
  opacity: 0;
}
.di-stage .di-patch img {
  width: 100%;
  height: 100%;
}

/* Podświetlenie zmienionego wiersza programu */
.di-hl {
  position: absolute;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--blue) 15%, transparent);
  opacity: 0;
}

/* Komunikat na żywo: zrzut paska z widoku, pod górnym paskiem aplikacji */
.di-live {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 3.9% / 13.7%;
  box-shadow: var(--di-shot-shadow);
  opacity: 0;
}

.di-ring {
  position: absolute;
  z-index: 1;
  border: 3px solid var(--yellow);
  border-radius: 3.9% / 13.7%;
  opacity: 0;
  pointer-events: none;
}
.di-page .di-ring--live { border-radius: 3.9% / 11%; }
.di-ring--badge {
  border-width: 2px;
  border-color: var(--blue);
  border-radius: var(--r-s);
}

.di-top,
.di-act {
  position: absolute;
  left: 0;
  z-index: 2;
}
.di-top { top: 0; }
.di-act { bottom: 0; }

/* Dotknięcie palcem: wrapper wielkości ekranu przesuwany do punktu */
.di-tw {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.di-touch {
  position: absolute;
  left: 0;
  top: 0;
  width: 17%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 2px solid rgb(255 255 255 / 0.95);
  border-radius: 50%;
  background: rgb(27 32 35 / 0.26);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
  opacity: 0;
}
.di-touch--ring {
  background: none;
  box-shadow: none;
  border-color: rgb(29 79 145 / 0.9);
}

/* Wygaszony ekran przed przyłożeniem do tablicy */
.di-off {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #1D2225;
  opacity: 0;
}

/* Plan dojścia na pełnym ekranie (arkusz z widoku InfoLink) */
.di-sheet {
  position: absolute;
  inset: 0;
  z-index: 4;
  transform: translateY(101%);
}
.di-route {
  position: absolute;
  overflow: visible;
}
.di-route-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.di-route-head {
  fill: var(--blue);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.di-route-goal {
  fill: none;
  stroke: var(--blue);
  stroke-width: 6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Tablica NFC: znak, do którego przykłada się telefon ─────────────── */

.di-tag {
  position: absolute;
  left: 6%;
  top: 37%;
  width: 46%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  opacity: 0;
}
.di-tag-plate {
  position: relative;
  display: grid;
}
.di-tag .plate {
  width: 48px;
  height: 48px;
}
.di-tag .plate .ico { width: 30px; height: 30px; }
.di-ping {
  position: absolute;
  inset: -6px;
  border: 3px solid var(--blue);
  border-radius: 50%;
  opacity: 0;
}
.di-tag-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.di-tag-text b {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: var(--fs-m);
  line-height: 1.15;
  color: var(--ink);
}
.di-tag-text small {
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--ink-2);
}

/* ── Rozdziały i pauza ────────────────────────────────────────────────── */

.di-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
}

.di-chaps {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.di-chap {
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  padding: 8px 0 6px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--fs-s);
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-ui) ease;
}
.di-chap[aria-current] { color: var(--ink); }

.di-seg {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line);
}
.di-seg i {
  display: block;
  height: 100%;
  background: var(--blue-ink);
  transform: scaleX(0);
  transform-origin: left center;
}

.di-pause { flex: none; }
.di[data-still] .di-pause { display: none; }

.di-cap {
  min-height: 2.9em;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: var(--fs-s);
  line-height: 1.45;
  text-wrap: pretty;
}

/* ── Wąska kolumna (telefon): panel nad telefonem ─────────────────────── */

@container di (max-width: 519px) {
  .di-stage { aspect-ratio: 1 / 1.32; }
  .di-panel { left: 0; top: 2%; width: 100%; }
  .di-slot { left: 51%; top: 25%; width: 44%; }
  .di-tag { left: 3%; top: 39%; width: 49%; padding: 10px 10px 10px 12px; gap: 8px; }
  .di-tag .plate { width: 40px; height: 40px; }
  .di-tag .plate .ico { width: 26px; height: 26px; }
  .di-tag-text b { font-size: var(--fs-s); }
  .di-chaps { gap: 4px; }
  .di-chap { font-size: var(--fs-xs); }
}

@media (hover: hover) and (pointer: fine) {
  .di-chap:not([aria-current]):hover { color: var(--ink-2); }
  .di-chap:not([aria-current]):hover .di-seg { background: var(--line-strong); }
}