/* ==========================================================================
   Oś czasu „Kiedy zadziała fala?” (#kiedy, podstrona Fala, 29.09, dla dociekliwych).
   5 etapów od pierwszego zabiegu. Od 1024 px oś pozioma (5 kolumn, kreska nad węzłami),
   węziej pionowa (kreska po lewej). Ruch (js/fala-czas.js): kreska wypełnia się pomarańczem
   przy przewijaniu (--p 0..1), węzły, które minęła, zapalają się (.is-on). Bez JS i przy
   ograniczeniu ruchu: wszystko widoczne, kreska pełna.
   ========================================================================== */

.fala-czas .czas__lite { color: var(--ink-3); }

.czas {
  --p: 1;
  position: relative;
}
.js .czas.is-anim { --p: 0; }

.czas .czas__list {             /* .czas przed: reset ol[role=list] w base.css ma wyższą specyficzność */
  position: relative;
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0 0 0 40px;
  list-style: none;
}

/* kreska: tło + wypełnienie */
.czas__rail {
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  pointer-events: none;
}
.czas__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #f69251, #e07a38);
  transform-origin: 50% 0;
  transform: scaleY(var(--p));
}

.czas__stage { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
/* pigułki „Co dzieje się w tkance” w jednej linii (od 1024 px): dół kolumny */
@media (min-width: 1024px) { .czas__tissue { margin-top: auto !important; padding-top: 16px; } }
.czas__node {
  position: absolute;
  left: -40px;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  transition: border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}
.czas__node::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color 0.35s ease, transform 0.35s var(--ease-out);
  transform: scale(0.6);
}
.czas__stage.is-on .czas__node,
.czas:not(.is-anim) .czas__node { border-color: #f69251; box-shadow: 0 0 0 6px rgba(246, 146, 81, 0.14); }
.czas__stage.is-on .czas__node::after,
.czas:not(.is-anim) .czas__node::after { background: #f69251; transform: scale(1); }

.czas__when {
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.czas__marker {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-badges);
  background: var(--color-fog);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  color: var(--ink-2);
  white-space: nowrap;
}
.czas__marker:empty { display: none; }
.czas__title {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: var(--font-weight-medium);
  color: var(--ink-strong);
}
.czas__patient {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* „Co dzieje się w tkance” (właściciel 29.09: „podkreśl jakoś, łatwo to umyka”): pigułka z pomarańczowym
   kółkiem i plusem, od razu wygląda na klikalną. Otwarta: pełne pomarańczowe kółko z minusem. */
.czas__tissue { margin-top: 14px; }
.czas__tissue summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(246, 146, 81, 0.5);
  background: rgba(246, 146, 81, 0.08);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.czas__tissue summary::-webkit-details-marker { display: none; }
.czas__tissue summary::before {
  content: '+';
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(246, 146, 81, 0.7);
  font-size: 16px;
  line-height: 1;
  color: var(--accent-text);
}
.czas__tissue[open] summary::before { content: '–'; background: #f69251; border-color: #f69251; color: #fff; }
.czas__tissue summary:hover { background: rgba(246, 146, 81, 0.16); border-color: #f69251; }
.czas__tissue-label {
  font-size: 13.5px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-text);
}
.czas__tissue p {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-cardinner);
  background: var(--color-fog);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.czas__note { margin-top: 28px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

.czas__src { margin-top: 16px; border-top: 1px solid var(--line); }
.czas__src summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--ink-strong);
}
.czas__src summary::-webkit-details-marker { display: none; }
.czas__src summary::after {
  content: '+';
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-3);
}
.czas__src[open] summary::after { content: '–'; }
.czas__src ol {
  list-style: decimal;
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}
.czas__src a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* ---- Komputer: oś pozioma ---- */
@media (min-width: 1024px) {
  .czas .czas__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 28px;
    padding: 44px 0 0;
  }
  .czas__rail {
    left: 12px;
    right: calc((100% - 4 * 28px) / 5 - 12px);
    top: 11px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .czas__fill { transform-origin: 0 50%; transform: scaleX(var(--p)); }
  .czas__node { left: 0; top: -44px; }
}

@media (prefers-reduced-motion: reduce) {
  .czas__node, .czas__node::after { transition: none; }
}