/* Najdroższe minuty (scena 7): oś czasu przykładowej wizyty; poniżej 700 px lista pionowa */
.tline{margin-top:clamp(8px,2vw,24px)}
.tline-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink-3);margin-bottom:22px}
.tline-cap b{color:var(--ink);font-weight:600}

/* pasek odcinków: szerokość odcinka = minuty (--w) */
.track{position:relative;margin-top:56px;height:14px;display:flex;gap:3px}
.track .seg{position:relative;height:100%;flex:var(--w);background:var(--c);opacity:.85;transform-origin:left center}
.track .seg:first-child{border-radius:7px 0 0 7px}
.track .seg:nth-last-child(2){border-radius:0 7px 7px 0}
.track .seg.hot{opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--st-bill) 18%,transparent)}
.callout{position:absolute;left:var(--at);bottom:calc(100% + 16px);transform:translateX(-50%);background:var(--crit);color:var(--on-blue);font-size:14px;font-weight:600;padding:8px 14px;border-radius:12px;white-space:nowrap}
.callout::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--crit)}
.callout .cnt,.tline-v .cnt{display:inline-block;min-width:2ch;text-align:right}

/* zegar wizyty: widoczny tylko, gdy oś czasu prowadzi przewijanie (klasa is-live z js/timeline-scene.js) */
.tline-clock{display:none;font-size:clamp(40px,4.4vw,60px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.tline.is-live .tline-cap{align-items:flex-end}
.tline.is-live .tline-clock{display:block}
.tline.is-live .tline-cap .range{display:none}
/* przestrzeń, którą GSAP dokłada na czas przypięcia: tło sceny, żeby pod niższą sekcją nie prześwitywała biel */
.pin-spacer:has(> #etapy){background:var(--mist)}

/* znaczniki godzin na trzech poziomach, żeby bliskie godziny na siebie nie nachodziły */
.marks{position:relative;height:150px;margin-top:10px}
.mark{position:absolute;left:var(--at);top:0;transform:translateX(-50%);display:grid;justify-items:center;gap:4px;text-align:center;font-size:13px;color:var(--ink-2);width:110px}
.mark::before{content:"";width:1px;height:12px;background:var(--line)}
.mark time{font-weight:600;color:var(--ink)}
/* napisy nad kreskami sąsiednich znaczników: tło sceny przykrywa kreskę */
.mark time,.mark span{position:relative;z-index:1;background:var(--mist);padding-inline:3px;border-radius:3px}
.mark.low{top:46px}
.mark.low::before{height:58px;margin-top:-46px}
.mark.low2{top:92px}
.mark.low2::before{height:104px;margin-top:-92px}
.mark.first{transform:none;justify-items:start;text-align:left}
.mark.last{transform:translateX(-100%);justify-items:end;text-align:right}

/* lista pionowa na telefonie */
.tline-v{display:none;list-style:none;margin:0;padding:0}

@media (max-width:700px){
  .track,.marks,.tline-cap .range{display:none}
  .tline-v{display:grid}
  .tline-v li{display:grid;grid-template-columns:56px 14px 1fr;gap:10px;align-items:start;padding-bottom:16px;position:relative;color:var(--ink-2)}
  .tline-v li::after{content:"";position:absolute;left:62px;top:16px;bottom:-2px;width:2px;background:var(--c)}
  .tline-v li:last-child::after{display:none}
  .tline-v time{font-weight:600;color:var(--ink)}
  .tline-v i{width:12px;height:12px;border-radius:50%;background:var(--c);margin-top:5px}
  .tline-v .hot{background:color-mix(in srgb,var(--st-bill) 8%,transparent);border-radius:12px;padding:10px 10px 12px 0;margin:0 0 12px}
  .tline-v .hot b{color:color-mix(in srgb,var(--st-bill) 70%,var(--ink))}
}