/* ================================================================
   DripTronic — ramka demo aplikacji
   Sekcja #aplikacja osadza prawdziwą aplikację w iframe. Tylko tak
   odwzorowanie jest wierne: arkusz aplikacji reaguje na szerokość
   okna (min-width 1150/1280 px, orientation, vh), więc wstawiony
   wprost w stronę na desktopie wyglądałby inaczej niż na telefonie.
   W iframe te reguły liczą się względem jego własnego pudełka.

   Wszystkie kolory pochodzą z tokenów strony.
   ================================================================ */

.trk { margin-top: 26px; }

/* ── sterowanie demem alarmu ──────────────────────────────────────
   Przyciski obok ramki, nie w niej — ekran aplikacji zostaje
   nienaruszony, a stan alarmu widać bez wchodzenia w ustawienia. */
.trk-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
}
.btn-danger {
  border-color: rgba(230, 57, 70, .5);
  color: #FFB4BB;
}
.btn-danger:hover:not(:disabled) {
  background: var(--red-dim);
  border-color: var(--red);
}
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.trk-state {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.trk-state[data-kind="ok"] { color: var(--green); }
.trk-state[data-kind="active"] { color: #FF8A93; }
.trk-state[data-kind="wait"] { color: var(--oil); }
.trk-state[data-kind="warn"] { color: var(--oil); }

/* ── etykieta demo ────────────────────────────────────────────────
   Najważniejsza informacja w całej sekcji, więc nie drobnym drukiem. */
.trk-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--oil);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.trk-badge {
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--oil-dim);
  color: var(--oil);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── ramka telefonu ───────────────────────────────────────────────
   Telefon w uchwycie: ekran poziomo, 19,5:9 — proporcja, pod którą
   aplikacja jest zaprojektowana. Stosunek 2,16:1 odpowiada realnemu
   polu widzenia WebView, więc reguły @media aplikacji trafiają
   w te same przedziały co na telefonie. */
.trk-frame {
  position: relative;
  aspect-ratio: 930 / 417;           /* proporcja telefonu, z którego jest zrzut HUD */
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #0E1117;                 /* tło aplikacji, zanim się wczyta */
  box-shadow: var(--shadow);
}
.trk-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── stały rozmiar okna aplikacji ─────────────────────────────────
   Arkusz aplikacji rozmiaruje się od szerokości i wysokości okna:
   trójkolumnowy HUD, prędkościomierz liczony z wysokości, inne reguły
   dla wąskiego i niskiego ekranu. Gdyby ramka była raz wąska, raz
   szeroka, za każdym razem wyglądałoby to inaczej — a przy małej
   szerokości kolumny HUD w ogóle się nie mieści i nachodzi na siebie.

   Dlatego okno aplikacji ma stały rozmiar telefonu w poziomie
   (930×417, zmierzone ze zrzutu z telefonu), a skala dopasowuje je
   do szerokości kolumny. Współczynnik ustawia trk-control.js; dopóki
   go nie ma, iframe jest zwykły i responsywny. */
.trk-frame.is-scaled .trk-iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 930px;
  height: 417px;
  transform: scale(var(--trk-k, 1));
  transform-origin: 0 0;
}

/* ── pod ramką ────────────────────────────────────────────────────*/
.trk-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--faint);
}
.trk-links a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.trk-links a:hover { border-bottom-color: var(--green); }

/* ── na wąskim ekranie ────────────────────────────────────────────
   Ramka wychodzi poza marginesy strony, żeby wykorzystać całą
   szerokość — aplikacja jest pozioma i każdy piksel szerokości
   przekłada się na czytelność. */
@media (max-width: 760px) {
  .trk { margin-left: -16px; margin-right: -16px; }
  .trk-label { margin-left: 16px; margin-right: 16px; }
  .trk-frame { border-radius: 0; border-left: 0; border-right: 0; }
  .trk-links { margin-left: 16px; margin-right: 16px; }
}