/* ==========================================================================
   RescueLink · pierwszy ekran: pierścień z tablicami (r01)

   Scena jest nocna w obu trybach strony (jedyne świadome odstępstwo od trybu
   jasnego, opisane w specyfikacji strony głównej). Wartości lokalnych tokenów
   .rg to nocne neutralne i jasne odmiany barw z /css/tokens.css; reszta
   (promienie, ruch, kroje, tabliczki .plate, przycisk .btn) pochodzi z tokens.css
   i field.css. Wszystkie selektory z przedrostkiem .rg.
   ========================================================================== */

.rg {
  /* Noc: neutralne i światło modułu (wartości trybu nocnego z tokens.css) */
  --rg-bg: #101416;
  --rg-surface: #181D20;
  --rg-surface-2: #20262A;
  --rg-ink: #E7EBE9;
  --rg-ink-2: #AEB7BB;
  --rg-ink-3: #8E989E;
  --rg-line: #2A3135;
  --rg-line-strong: #3B4449;
  --rg-light: #FF8A84;          /* światło modułu z przodu pierścienia */
  --rg-signal: var(--red);      /* barwa tabliczek modułu */
  --rg-ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(296px, 1fr) auto auto;
  min-height: calc(100dvh - var(--lp-head, 64px) - 1px);
  padding: 22px max(var(--lp-pad, 16px), calc((100% - var(--lp-max, 1200px)) / 2)) 28px;
  overflow: hidden;
  background: var(--rg-bg);
  color: var(--rg-ink);
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
}
.rg[data-module="evac"] { --rg-light: #6FD39D; --rg-signal: var(--green); }
.rg[data-module="info"] { --rg-light: #8DB6F2; --rg-signal: var(--blue); }

.rg ::selection { background: var(--rg-light); color: var(--rg-bg); }

.rg :focus-visible {
  outline: 2px solid var(--rg-light);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

/* ── Plakat i scena: pełne tło sekcji ─────────────────────────────────── */

.rg-poster,
.rg-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Telefon: plakat w kadrze 390 px przypięty do góry (skaluje się z szerokością, jak scena) */
.rg-poster img {
  width: 100%;
  height: auto;
  max-width: none;
  transition: opacity 360ms ease;
}
.rg-poster.is-off img { opacity: 0; }

.rg-stage {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.rg-stage:focus-visible { outline: none; }
.rg-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 420ms ease;
}
.rg-stage.is-ready canvas { opacity: 1; }
.rg-stage.is-drag { cursor: grabbing; }
.rg-stage.is-pointer { cursor: pointer; }

/* Fokus na scenie: obwódka wokół pola pierścienia, nie wokół całej sekcji */
.rg-ringbox {
  position: relative;
  z-index: 0;
  min-height: 296px;
  border-radius: var(--r-l);
  pointer-events: none;
}
.rg:has(.rg-stage:focus-visible) .rg-ringbox { outline: 2px solid var(--rg-light); outline-offset: 6px; }

/* Migawka do przenikania przy ograniczonym ruchu */
.rg-snap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  transition: opacity 280ms ease;
}

/* ── Tekst sekcji ─────────────────────────────────────────────────────── */

.rg-copy,
.rg-ui,
.rg-feats {
  position: relative;
  z-index: 2;
}

/* Dwa zdania, każde w swojej linii; rozmiar dobrany tak, by dłuższe mieściło się w kolumnie */
.rg-h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--rg-ink);
}
.rg-h1 span { display: block; }

.rg-lead {
  max-width: 40ch;
  margin-top: 12px;
  color: var(--rg-ink-2);
  font-size: 1rem;
  line-height: 1.45;
}

.rg-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 18px;
}
.rg .rg-btn {
  background: var(--red);
  color: var(--on-signal);
}
.rg-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--rg-ink);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: var(--fs-l);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-color: var(--rg-line-strong);
}
.rg-tel .ico { width: 22px; height: 22px; color: #FF8A84; }

/* ── Przełącznik modułów ──────────────────────────────────────────────── */

.rg-ui {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.js .rg-ui { display: flex; }

.rg-tabs {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--rg-line);
  border-radius: var(--r-m);
  background: rgb(16 20 22 / 0.72);
}

.rg-tab {
  --tab-light: #FF8A84;
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
  min-height: 52px;
  padding: 5px 8px 9px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--rg-ink-2);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: var(--fs-m);
  line-height: 1.05;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.rg-tab[data-module="evac"] { --tab-light: #6FD39D; }
.rg-tab[data-module="info"] { --tab-light: #8DB6F2; }
.rg-tab small {
  margin-top: 3px;
  overflow: hidden;
  max-width: 100%;
  color: var(--rg-ink-3);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color var(--t-ui) ease;
}
.rg-tab:active { transform: scale(0.97); }
.rg-tab[aria-selected="true"] { background: var(--rg-surface-2); color: var(--rg-ink); }
.rg-tab[aria-selected="true"] small { color: var(--rg-ink-2); }

/* Czas postoju tablicy z przodu: wypełnienie odmierza skrypt */
.rg-tab-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  height: 2px;
  overflow: hidden;
  border-radius: 1px;
  opacity: 0;
  transition: opacity var(--t-ui) ease;
}
.rg-tab-bar i {
  position: absolute;
  inset: 0;
  background: var(--tab-light);
  transform: scaleX(0);
  transform-origin: left center;
}
.rg-tab[aria-selected="true"] .rg-tab-bar { opacity: 1; }

.rg-pause {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rg-line-strong);
  border-radius: var(--r-m);
  background: rgb(16 20 22 / 0.72);
  color: var(--rg-ink-2);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease, color var(--t-ui) ease;
}
.rg-pause .ico { width: 20px; height: 20px; }
.rg-pause:active { transform: scale(0.96); }

/* ── Cechy tablicy z przodu ───────────────────────────────────────────── */

.rg-feats { margin-top: 18px; }

.rg-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rg-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 40px;
}
.rg-list .plate {
  width: 36px;
  height: 36px;
  background: var(--rg-signal);
}
.rg-list .plate .ico { width: 22px; height: 22px; }
.rg-li {
  color: var(--rg-ink);
  font-size: var(--fs-s);
  line-height: 1.3;
  text-wrap: pretty;
}
.rg-check { display: inline-grid; color: var(--rg-light); }
.rg-check .ico { width: 20px; height: 20px; stroke-width: 2.25; }

/* Wejście cech, gdy tablica dojedzie do przodu: wiersze co 50 ms, potem odhaczenie.
   Dłuższe niż zwykły ruch interfejsu, bo objaśnia produkt i zdarza się raz na tablicę;
   wyjście krótkie (140 ms). Bez skryptu (brak .is-live) lista jest po prostu widoczna. */
.rg.is-live .rg-list li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 140ms ease, transform 140ms var(--ease-out);
}
.rg.is-live .rg-list li.is-in {
  opacity: 1;
  transform: none;
  transition-duration: 360ms, 460ms;
  transition-delay: calc(var(--i, 0) * 50ms);
}
.rg.is-live .rg-check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 120ms ease;
}
.rg.is-live .rg-list li.is-in .rg-check path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 340ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms + 240ms);
}

/* ── Znaczniki na stole (pozycje z rzutowania punktów sceny) ──────────── */
/* Każdy znacznik stoi nad swoim punktem na blacie jak szpilka: tabliczka,
   cienka nóżka do punktu i fala rozchodząca się po blacie. */

.rg-marks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.rg-mks {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.rg-mks.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease, visibility 0s;
}

.rg-mk {
  --pl: 28px;                    /* bok tabliczki */
  position: absolute;
  left: 0;
  top: 0;
}
.rg-mk-in {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(calc(var(--pl) / -2));
}
.rg-mk.is-left .rg-mk-in { left: auto; right: 0; transform: translateX(calc(var(--pl) / 2)); }
.rg-mk-anim {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;           /* wysokość nóżki */
}
.rg-mk.is-left .rg-mk-anim { flex-direction: row-reverse; }

.rg-mk .plate {
  position: relative;
  width: var(--pl);
  height: var(--pl);
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);
}
.rg-mk .plate .ico { width: 18px; height: 18px; }
.rg-stem {
  position: absolute;
  left: calc(var(--pl) / 2 - 1px);
  top: 100%;
  width: 2px;
  height: 10px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.85;
}
.rg-mk.is-left .rg-stem { left: auto; right: calc(var(--pl) / 2 - 1px); }

.rg-chip {
  padding: 3px 6px 4px;
  border: 1px solid var(--rg-line-strong);
  border-radius: var(--r-s);
  background: rgb(16 20 22 / 0.9);
  color: var(--rg-ink);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rg-chip--opt { display: none; }

/* Fala na blacie: koło spłaszczone jak rzut na stół oglądany pod kątem */
.rg-ripple {
  position: absolute;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.rg-mk--red { color: #FF8A84; }
.rg-mk--yellow { color: #F7C64D; }
.rg-mk--green { color: #6FD39D; }
.rg-mk--blue { color: #8DB6F2; }

@media (min-width: 640px) {
  .rg-mk { --pl: 32px; }
  .rg-mk .plate .ico { width: 20px; height: 20px; }
  .rg-chip--opt { display: inline-block; }
}

/* Hydranty: spadają po kolei i uderzają falą o blat */
.rg-mks.is-on .rg-mk-drop .rg-mk-anim { animation: rg-drop 460ms var(--ease-out) var(--d, 0ms) both; }
.rg-mks.is-on .rg-mk-drop .rg-ripple { animation: rg-ripple 720ms var(--ease-out) calc(var(--d, 0ms) + 240ms) both; }
@keyframes rg-drop {
  from { opacity: 0; transform: translateY(-28px); }
  40% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes rg-ripple {
  from { opacity: 0.9; transform: scale(0.45, 0.25); }
  to { opacity: 0; transform: scale(1.7, 0.95); }
}

/* Urządzenia na obrysie i punkty na planie: pojawiają się, potem pulsują */
.rg-mks.is-on .rg-mk-pop .rg-mk-anim,
.rg-mks.is-on .rg-mk-pulse .rg-mk-anim,
.rg-mks.is-on .rg-mk-you .rg-mk-anim { animation: rg-pop 380ms var(--ease-out) var(--d, 0ms) both; }
.rg-mks.is-on .rg-mk-pulse .rg-ripple { animation: rg-pulse 1700ms var(--ease-out) calc(var(--d, 0ms) + 300ms) infinite; }
.rg-mks.is-on .rg-mk-pop .rg-ripple { animation: rg-ripple 720ms var(--ease-out) calc(var(--d, 0ms) + 120ms) both; }
@keyframes rg-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
@keyframes rg-pulse {
  0% { opacity: 0.85; transform: scale(0.55, 0.3); }
  70% { opacity: 0; transform: scale(1.6, 0.9); }
  100% { opacity: 0; transform: scale(1.6, 0.9); }
}

/* „Tu jesteś”: pulsuje dwa razy, a potem nagle rośnie */
.rg-mk-you .plate { transform-origin: 50% 100%; }
.rg-mks.is-on .rg-mk-you .rg-ripple { animation: rg-pulse 1000ms var(--ease-out) calc(var(--d, 0ms) + 250ms) 2 both; }
.rg-mks.is-on .rg-mk-you .plate { animation: rg-grow 640ms var(--ease-out) calc(var(--d, 0ms) + 1650ms) both; }
@keyframes rg-grow {
  0% { transform: scale(1); }
  30% { transform: scale(1.38); }
  100% { transform: scale(1.2); }
}

/* InfoLink: komunikat wjeżdża nad wiersz programu, który zmienia salę */
.rg-mk-card .rg-cards {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: max-content;
  transform: translate(-50%, -62%);
}
.rg-card {
  max-width: min(84vw, 300px);
  padding: 8px 10px;
  border: 1px solid var(--rg-line-strong);
  border-radius: var(--r-m);
  background: rgb(24 29 32 / 0.95);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.5);
  color: var(--rg-ink);
  font-size: var(--fs-xs);
  line-height: 1.3;
}
.rg-prog {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}
.rg-prog .plate { width: 28px; height: 28px; background: var(--blue); }
.rg-prog .plate .ico { width: 18px; height: 18px; }
.rg-prog b {
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: var(--fs-s);
  line-height: 1.15;
}
.rg-prog-time { color: var(--rg-ink-2); font-variant-numeric: tabular-nums; }
.rg-room { position: relative; display: inline-block; margin-right: 6px; }
.rg-room--old::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 54%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}
.rg-room--new {
  padding: 0 4px;
  border-radius: 3px;
  background: var(--rg-surface-2);
  color: #8DB6F2;
  font-weight: 600;
  opacity: 0;
}
.rg-badge {
  align-self: start;
  padding: 2px 6px;
  border-radius: var(--r-s);
  background: var(--blue);
  color: var(--on-signal);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--fs-xs);
  opacity: 0;
}
.rg-live {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
  border-color: transparent;
  background: var(--blue);
  color: var(--on-signal);
}
.rg-live .ico { width: 18px; height: 18px; margin-top: 1px; }
.rg-live b { display: block; font-family: var(--font-cond); font-weight: 700; font-size: var(--fs-s); line-height: 1.15; }
.rg-live small { display: block; margin-top: 1px; font-size: var(--fs-xs); opacity: 0.92; }

.rg-mks.is-on .rg-prog { animation: rg-card 420ms var(--ease-out) 150ms both; }
.rg-mks.is-on .rg-room--old { animation: rg-dim 300ms ease 1500ms both; }
.rg-mks.is-on .rg-room--old::after { animation: rg-strike 320ms var(--ease-out) 1500ms both; }
.rg-mks.is-on .rg-room--new { animation: rg-fade 280ms ease 1780ms both; }
.rg-mks.is-on .rg-badge { animation: rg-fade 280ms ease 1880ms both; }
.rg-mks.is-on .rg-live { animation: rg-slide 460ms var(--ease-out) 3000ms both; }
@keyframes rg-card {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes rg-slide {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes rg-strike { to { transform: scaleX(1); } }
@keyframes rg-dim { to { opacity: 0.55; } }
@keyframes rg-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Układ: komputer ──────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .rg-lead { font-size: var(--fs-m); }
  .rg-tab { padding-inline: 12px; }
  .rg-tab-bar { left: 12px; right: 12px; }
}

@media (min-width: 1024px) {
  /* Komputer: plakat wypełnia sekcję, zakotwiczony w środku pierścienia */
  .rg-poster img { height: 100%; object-fit: cover; object-position: 68% 48%; }
  .rg {
    /* Tekst trzyma się kontenera strony; pole pierścienia sięga do prawej krawędzi ekranu */
    --rg-pi: max(var(--lp-pad, 32px), calc((100vw - var(--lp-max, 1200px)) / 2));
    grid-template-columns: clamp(21rem, 34vw, 30rem) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 40px;
    padding-top: clamp(28px, 6vh, 72px);
    padding-bottom: clamp(24px, 4vh, 44px);
    padding-inline: var(--rg-pi);
  }
  .rg-copy { grid-column: 1; grid-row: 1; }
  .rg-feats { grid-column: 1; grid-row: 3; align-self: end; margin-top: 28px; }
  .rg-ringbox { grid-column: 2; grid-row: 1 / -1; min-height: 0; margin-right: calc(24px - var(--rg-pi)); }
  .rg-ui {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: center;
    width: min(100%, 470px);
    margin-top: 0;
    margin-right: calc(24px - var(--rg-pi)); /* środek pod środkiem pierścienia */
  }
  .rg-h1 { font-size: clamp(2.25rem, 3.4vw, 3.25rem); }
  .rg-lead { margin-top: 16px; }
  .rg-cta { margin-top: 24px; }
  .rg-list { gap: 10px; }
  .rg-li { font-size: var(--fs-m); }
  .rg-mk { --pl: 36px; }
  .rg-mk .plate .ico { width: 22px; height: 22px; }
  .rg-card { font-size: var(--fs-s); padding: 10px 12px; }
  .rg-prog .plate { width: 32px; height: 32px; }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .rg-h1 { font-size: clamp(2rem, 3vw, 2.75rem); }
  .rg-list { gap: 4px; }
  .rg-feats { margin-top: 16px; }
}

/* ── Wskaźnik ─────────────────────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
  .rg-tab[aria-selected="false"]:hover { background: rgb(32 38 42 / 0.6); color: var(--rg-ink); }
  .rg-pause:hover { background: var(--rg-surface-2); color: var(--rg-ink); }
  .rg-tel:hover { text-decoration: underline; }
}

/* ── Ograniczony ruch: wszystko od razu w stanie końcowym ─────────────── */

@media (prefers-reduced-motion: reduce) {
  .rg.is-live .rg-list li,
  .rg.is-live .rg-list li.is-in { transform: none; transition: opacity 200ms ease; transition-delay: 0ms; }
  .rg.is-live .rg-check path,
  .rg.is-live .rg-list li.is-in .rg-check path { stroke-dashoffset: 0; transition: none; }
  .rg-mks.is-on .rg-mk-anim,
  .rg-mks.is-on .rg-card,
  .rg-mks.is-on .rg-mk-you .plate { animation: none; }
  .rg-mks.is-on .rg-ripple { animation: none; opacity: 0; }
  .rg-mks.is-on .rg-room--old { animation: none; opacity: 0.55; }
  .rg-mks.is-on .rg-room--old::after { animation: none; transform: scaleX(1); }
  .rg-mks.is-on .rg-room--new,
  .rg-mks.is-on .rg-badge { animation: none; opacity: 1; }
  .rg-tab:active,
  .rg-pause:active { transform: none; }
}