/* --- reset w obrębie komponentu v2 --- */
.cme2-tl, .cme2-tl * { box-sizing: border-box; }
.cme2-tl, .cme2-tl * { writing-mode: horizontal-tb; text-orientation: mixed; }

/* zmienna sterująca minimalnymi szerokościami toru/kart/tabeli */
.cme2-tl { --cme2-minw: 900px; }
@media (max-width: 480px){ .cme2-tl { --cme2-minw: 680px; } }

/* ====== wspólny scroller ====== */
.cme2-tl__section { margin: 28px 0 44px; }
.cme2-tl__scroll,
.cme2-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 10px;
  scroll-snap-type: x proximity;
  scroll-padding: 48px;       /* żeby skrajne elementy nie „kleiły się” do krawędzi */
  overscroll-behavior-x: contain;
}

/* ====== karta podsumowania ====== */
.cme2-card {
  min-width: var(--cme2-minw);
  background:#fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: 14px;
  margin-bottom: 14px;
}
.cme2-card__name {
  font-size: 16px;
  margin-bottom: 10px;
  display:flex; align-items:center; gap:10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cme2-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:#666;
  background:#f3f4f6; border:1px solid #e5e7eb; border-radius:999px; padding:2px 8px;
}
.cme2-status { color:#00c853; font-weight:600; }
.cme2-card__grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.cme2-card__grid > div { text-align:center; }

/* ====== tor osi czasu ====== */
.cme2-track {
  position: relative;
  min-width: var(--cme2-minw);
  height: 140px;
  padding: 0 48px;             /* bufor lewo/prawo, wpływa też na % pozycji punktów */
  scroll-snap-align: start;
}
.cme2-track__line {
  position:absolute;
  left: 48px; right: 48px;     /* pasuje do paddingu toru */
  top: 50%; height:2px;
  background:#ddd;
  transform: translateY(-50%);
}
.cme2-point {
  position:absolute; top:50%;
  transform: translate(-50%, -50%);
  text-align:center;
}
.cme2-point__dot {
  width:12px; height:12px; border-radius:50%; background:#333; margin:0 auto;
}
.cme2-point.is-last .cme2-point__dot { background:#00c853; }

/* dymek nad kropką */
.cme2-point__bubble {
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  font-size:12px; line-height:1.35;
  white-space: normal; word-break: break-word; hyphens: auto;
  background:#fff; border:1px solid #eee; border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  padding:6px 8px; margin-bottom:6px;
  max-width: 220px;            /* więcej miejsca – nie łamie pionowo */
}
.cme2-point__date {
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  font-size:12px; color:#555; margin-top:6px;
  background:#fff; border-radius:6px; padding:2px 6px;
}

/* ====== tabela podsumowania ====== */
.cme2-wrap { margin: 22px 0; }
.cme2-table {
  width:100%;
  min-width: var(--cme2-minw);
  border-collapse: collapse;
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.cme2-row td { padding:12px 8px; }
.cme2-row--main td { font-weight:600; }
.cme2-row--fee { background:#fafafa; }
.cme2-row--total { border-top:2px solid #e5e7eb; }

.cme2-col { text-align:center; }
.cme2-col--name { text-align:left; width:22%; }

.cme2-val { display:block; font-size:16px; color:#111; }
.cme2-label { display:block; margin-top:4px; font-size:12px; color:#777; }

/* mobile dopasowania */
@media (max-width: 480px) {
  .cme2-point__bubble { font-size:11px; max-width: 180px; }
}