.text-pos { color: #4ade80; }
.text-neg { color: #f87171; }
.stat-box { padding: .6rem .8rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.stat-box .lbl { font-size: .75rem; color: var(--bs-secondary-color); }
.stat-box .val { font-size: 1.15rem; font-weight: 600; }

/* Os czasu strategii: pionowa kreska z kropkami przy wpisach. */
.timeline { position: relative; padding-left: 1.1rem; }
.timeline::before { content: ""; position: absolute; left: .25rem; top: .4rem; bottom: .4rem;
  width: 1px; background: var(--bs-border-color); }
.timeline-item { position: relative; padding: .5rem 0 .6rem .4rem; }
.timeline-item + .timeline-item { border-top: 1px solid var(--bs-border-color); }
.timeline-item::before { content: ""; position: absolute; left: -1.0rem; top: .95rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-secondary-color); }
.timeline-item.timeline-run::before { background: #4ade80; }
.timeline summary, .cfg-section summary { cursor: pointer; }

/* Pole, ktorego silnik przy obecnych ustawieniach nie czyta. Przygaszone,
   ale nie ukryte — ma byc widac, ze opcja istnieje i co ja wlacza. */
.field-off { opacity: .45; }
.field-off label, .field-off .form-text { cursor: help; }

/* Zwijana sekcja — strzalka obraca sie wraz ze stanem przycisku. */
.collapse-toggle .chev { display: inline-block; transition: transform .15s; }
.collapse-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }

/* Os czasu danych (/wykresy/pokrycie/): jedna linia na pare.
   Pasek rysuje CSS, a nie Plotly — ta strona ma byc czytelna takze wtedy, gdy
   CDN nie odpowiada, bo wlasnie wtedy czlowiek sprawdza, czy to on nie ma
   danych, czy ekran nie dziala. Geometrie (procenty) liczy widok. */
.tl-axis { position: relative; height: 1.1rem; font-size: .7rem;
  color: var(--bs-secondary-color); }
.tl-axis .tick { position: absolute; top: 0; transform: translateX(-50%);
  white-space: nowrap; }
.tl-axis .tick::after { content: ""; position: absolute; left: 50%; top: 1rem;
  width: 1px; height: .25rem; background: var(--bs-border-color); }

.tl-bar { position: relative; height: 1.35rem; border-radius: .2rem;
  background: #11161c; border: 1px solid var(--bs-border-color); overflow: hidden; }
/* Dane, ktore MAMY. */
.tl-bar .run { position: absolute; top: 0; height: .95rem; background: #26a69a;
  border-radius: .15rem; }
/* Przebieg z brakami WEWNATRZ dob zostaje JEDNOLITY. Kreskowanie calej dlugosci
   mowilo „tu nic nie ma" o kawalku, w ktorym brakuje 15 swiec na 2400 — czyli
   o rzedzie wielkosci nieprawde. Gdzie dokladnie brakuje, pokazuja zolte
   znaczniki, kazdy na swojej dobie. */
/* Przerwa: kreskowana, a kolor mowi, czy o ten okres w ogole pytalismy. */
.tl-bar .gap { position: absolute; top: 0; height: .95rem; }
.tl-bar .gap.asked { background: repeating-linear-gradient(135deg,
  #ef5350 0 4px, transparent 4px 8px); }
.tl-bar .gap.partial { background: repeating-linear-gradient(135deg,
  #ffa726 0 4px, transparent 4px 8px); }
.tl-bar .gap.unasked { background: repeating-linear-gradient(135deg,
  #546e7a 0 4px, transparent 4px 8px); }
/* Doba z brakiem WEWNATRZ: wiemy ile swiec, nie wiemy gdzie — wiec kreska
   stoi na dobie, a nie na pozycji braku. */
.tl-bar .mark { position: absolute; top: 0; width: 2px; height: .95rem;
  background: #ffd54f; }
/* Zakres ODPYTANY — cienka linia pod spodem. Tam, gdzie wychodzi poza zielone,
   pytalismy i nic nie przyszlo. */
.tl-bar .asked-line { position: absolute; bottom: 0; height: .25rem;
  background: var(--bs-border-color); border-radius: .15rem; }
.tl-bar .now { position: absolute; top: 0; bottom: 0; width: 1px;
  background: #90a4ae; }

.tl-row + .tl-row { border-top: 1px solid var(--bs-border-color); }
.tl-name { font-size: .8rem; }
.tl-legend span { display: inline-block; width: .8rem; height: .55rem;
  border-radius: .1rem; vertical-align: middle; margin-right: .25rem; }