/* IThandy Monitor - grafiki stanu usługi (komponenty resources/views/components/ith/*): ikony sprawdzeń, ścieżka klienta,
   pierścień dostępności, oś czasu incydentu, puste stany. Wspólne dla paneli i publicznej strony zdarzenia.
   Kolory tylko z brand kitu i stanów (ithandy/docs/01-brand-kit.md); stan zawsze także znakiem i słowem, nie samym kolorem.
   Znak na kolorze stanu: biały tylko na czerwieni (4,8:1), na zieleni, bursztynie, błękicie i szarości ink. */

.ith-tone--ok { --ith-tone: #16A34A; --ith-tone-ink: #0B2B2A; }
.ith-tone--warn { --ith-tone: #F59E0B; --ith-tone-ink: #0B2B2A; }
.ith-tone--down { --ith-tone: #DC2626; --ith-tone-ink: #FFFFFF; }
.ith-tone--info { --ith-tone: #0EA5E9; --ith-tone-ink: #0B2B2A; }
.ith-tone--idle { --ith-tone: #869998; --ith-tone-ink: #0B2B2A; }
.ith-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Ikona rodzaju sprawdzenia z kolorem stanu (tabele sprawdzeń, historia). */
.ith-ci { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: .65rem; color: #0B2B2A;
    background: color-mix(in srgb, var(--ith-tone) 14%, #FFFFFF); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ith-tone) 60%, #FFFFFF); }
.ith-ci__icon { width: 1.3rem; height: 1.3rem; }
.ith-ci__mark { position: absolute; right: -.3rem; bottom: -.3rem; display: flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; border-radius: 50%;
    background: var(--ith-tone); color: var(--ith-tone-ink); box-shadow: 0 0 0 2px #FFFFFF; }
.ith-ci__mark svg { width: .8rem; height: .8rem; stroke-width: 3.2; }
.ith-ci--lg { width: 3rem; height: 3rem; border-radius: .85rem; }
.ith-ci--lg .ith-ci__icon { width: 1.7rem; height: 1.7rem; }
.ith-ci--lg .ith-ci__mark { width: 1.3rem; height: 1.3rem; }
.ith-ci--lg .ith-ci__mark svg { width: 1rem; height: 1rem; }
.ith-tone--idle.ith-ci { box-shadow: inset 0 0 0 1.5px #B4C6C4; }
.dark .ith-ci { color: #FFFFFF; background: color-mix(in srgb, var(--ith-tone) 22%, var(--gray-900)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ith-tone) 70%, var(--gray-900)); }
.dark .ith-ci__mark { box-shadow: 0 0 0 2px var(--gray-900); }

/* Ścieżka klienta: sześć kroków z łącznikami; pod schematem podpowiedź wybranego kroku. */
.ith-path-wrap { display: grid; gap: .75rem; }
.ith-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.ith-path__item { position: relative; min-width: 0; }
.ith-path__item + .ith-path__item::before { content: ""; position: absolute; top: calc(.35rem + 1.75rem - 1px); left: calc(-50% - .5rem + 1.75rem + 6px); right: calc(50% + 1.75rem + 6px); height: 2px; border-radius: 2px; background: #B4C6C4; }
.ith-path__step { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem .25rem .45rem; border: 0; border-radius: .75rem; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.ith-path__step:hover { background: rgba(18, 181, 165, .07); }
.ith-path__step:focus-visible { outline: 3px solid #12B5A5; outline-offset: 1px; }
.ith-path__node { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; color: #0B2B2A;
    background: color-mix(in srgb, var(--ith-tone) 14%, #FFFFFF); box-shadow: inset 0 0 0 2.5px var(--ith-tone); }
.ith-path__icon { width: 1.6rem; height: 1.6rem; }
.ith-path__mark { position: absolute; right: -.15rem; bottom: -.15rem; display: flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
    background: var(--ith-tone); color: var(--ith-tone-ink); box-shadow: 0 0 0 2.5px #FFFFFF; }
.ith-path__mark svg { width: .95rem; height: .95rem; stroke-width: 3.2; }
/* Nie sprawdzam: przerywany obrys zamiast pełnego - inny także bez koloru. */
.ith-tone--idle .ith-path__node, .ith-path__node.ith-tone--idle { background: #F4FBFA; box-shadow: none; outline: 2px dashed #869998; outline-offset: -2px; }
.ith-path__label { margin-top: .35rem; font-size: .85rem; font-weight: 600; line-height: 1.25; color: #0B2B2A; }
.ith-path__status { font-size: .78rem; line-height: 1.3; color: #5B6B6A; }
.ith-path__hint { margin: 0; padding: .6rem .8rem; border-radius: .6rem; background: #F4FBFA; border: 1px solid #D7E6E4; font-size: .85rem; line-height: 1.5; color: #0B2B2A; overflow-wrap: anywhere; }
.dark .ith-path__item + .ith-path__item::before { background: rgba(255, 255, 255, .2); }
.dark .ith-path__node { color: #FFFFFF; background: color-mix(in srgb, var(--ith-tone) 22%, var(--gray-900)); }
.dark .ith-tone--idle .ith-path__node, .dark .ith-path__node.ith-tone--idle { background: rgba(255, 255, 255, .04); }
.dark .ith-path__mark { box-shadow: 0 0 0 2.5px var(--gray-900); }
.dark .ith-path__label { color: #FFFFFF; }
.dark .ith-path__status { color: var(--gray-400); }
.dark .ith-path__hint { color: #FFFFFF; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
/* Telefon: dwa rzędy po trzy kroki, łącznik tylko w rzędzie. */
@media (max-width: 640px) {
    .ith-path { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .6rem; }
    .ith-path__item:nth-child(3n + 1)::before { display: none; }
    .ith-path__node { width: 3rem; height: 3rem; }
    .ith-path__icon { width: 1.4rem; height: 1.4rem; }
    .ith-path__item + .ith-path__item::before { top: calc(.35rem + 1.5rem - 1px); left: calc(-50% - .5rem + 1.5rem + 5px); right: calc(50% + 1.5rem + 5px); }
    .ith-path__label { font-size: .8rem; }
}

/* Wersja kompaktowa (lista sklepów): kroki na linii, sprawdzane pełne (turkus 100), niesprawdzane przerywane - inne
   także bez koloru; znak w rogu tylko przy problemie (uwaga, awaria, informacja). Nad nakładką linku wiersza. */
.ith-path--mini { position: relative; z-index: 2; display: flex; align-items: center; gap: 0; }
.ith-path--mini .ith-path__node { width: 1.65rem; height: 1.65rem; color: #0B2B2A; background: #E3F6F4; box-shadow: none; }
.ith-path--mini .ith-path__node.ith-tone--warn, .ith-path--mini .ith-path__node.ith-tone--down, .ith-path--mini .ith-path__node.ith-tone--info { box-shadow: inset 0 0 0 2px var(--ith-tone); }
.ith-path--mini .ith-path__icon { width: .95rem; height: .95rem; }
.ith-path--mini .ith-path__mark { right: -.3rem; bottom: -.3rem; width: .9rem; height: .9rem; box-shadow: 0 0 0 2px #FFFFFF; }
.ith-path--mini .ith-path__mark svg { width: .65rem; height: .65rem; stroke-width: 3.4; }
.ith-path--mini .ith-tone--ok .ith-path__mark, .ith-path--mini .ith-tone--idle .ith-path__mark { display: none; }
.ith-path--mini .ith-path__node.ith-tone--idle { color: #5B6B6A; background: #FFFFFF; outline: 1.5px dashed #869998; outline-offset: -1.5px; }
.ith-path__link { flex: 1 1 auto; min-width: 4px; height: 2px; background: #8FDBD3; }
.ith-path__link.is-off { background: repeating-linear-gradient(90deg, #869998 0 3px, transparent 3px 6px); }
.dark .ith-path--mini .ith-path__node { color: #FFFFFF; background: #1F2D2C; }
.dark .ith-path--mini .ith-path__node.ith-tone--idle { color: #B4C6C4; background: transparent; outline-color: #869998; }
.dark .ith-path--mini .ith-path__mark { box-shadow: 0 0 0 2px var(--gray-900); }
.dark .ith-path__link { background: #0D6A62; }
.dark .ith-path__link.is-off { background: repeating-linear-gradient(90deg, #869998 0 3px, transparent 3px 6px); }

/* Pierścień dostępności: łuk w kolorze progu, procent w środku. */
.ith-donut { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 3.75rem; height: 3.75rem; }
.ith-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ith-donut__track { stroke: #D7E6E4; }
.ith-donut__arc { stroke: var(--ith-tone); }
.ith-donut__value { position: relative; font-size: .7rem; font-weight: 700; letter-spacing: -.02em; color: #0B2B2A; font-variant-numeric: tabular-nums; }
.ith-tone--idle .ith-donut__track, .ith-donut.ith-tone--idle .ith-donut__track { stroke: #B4C6C4; stroke-dasharray: 2 2.2; }
.dark .ith-donut__track { stroke: rgba(255, 255, 255, .12); }
.dark .ith-donut.ith-tone--idle .ith-donut__track { stroke: var(--gray-500); }
.dark .ith-donut__value { color: #FFFFFF; }

/* Oś czasu incydentu: węzły z godziną, między nimi czas od poprzedniego kroku. */
.ith-itl { display: grid; gap: .75rem; }
.ith-itl__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; }
.ith-itl__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; padding-top: 1.35rem; text-align: center; }
.ith-itl__step + .ith-itl__step::before { content: ""; position: absolute; top: calc(1.35rem + 1.4rem - 1.5px); left: calc(-50% - .5rem + 1.4rem + 6px); right: calc(50% + 1.4rem + 6px); height: 3px; border-radius: 3px; background: #B4C6C4; }
.ith-itl__gap { position: absolute; top: 0; left: calc(-50% - .25rem); width: 100%; font-size: .72rem; font-weight: 600; line-height: 1.2; color: #5B6B6A; text-align: center; white-space: nowrap; }
.ith-itl__node { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; color: #0B2B2A;
    background: color-mix(in srgb, var(--ith-tone) 14%, #FFFFFF); box-shadow: inset 0 0 0 2.5px var(--ith-tone); }
.ith-itl__icon { width: 1.3rem; height: 1.3rem; }
.ith-itl__mark { position: absolute; right: -.2rem; bottom: -.2rem; display: flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: var(--ith-tone); color: var(--ith-tone-ink); box-shadow: 0 0 0 2px #FFFFFF; }
.ith-itl__mark svg { width: .8rem; height: .8rem; stroke-width: 3.2; }
.ith-itl__step.is-pending .ith-itl__node, .ith-itl__step.ith-tone--idle .ith-itl__node { background: #F4FBFA; box-shadow: none; outline: 2px dashed #869998; outline-offset: -2px; }
.ith-itl__text { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 0; }
.ith-itl__label { font-size: .85rem; font-weight: 600; line-height: 1.25; color: #0B2B2A; overflow-wrap: anywhere; }
.ith-itl__at { font-size: .8rem; font-weight: 600; color: #0B2B2A; font-variant-numeric: tabular-nums; }
.ith-itl__detail { font-size: .75rem; line-height: 1.35; color: #5B6B6A; overflow-wrap: anywhere; }
.ith-itl__total { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; font-weight: 600; color: #0B2B2A; }
.ith-itl__total-icon { width: 1.1rem; height: 1.1rem; color: #0E8C80; }
/* Trwająca awaria: delikatny puls węzła, tylko gdy system nie prosi o ograniczenie ruchu. */
@media (prefers-reduced-motion: no-preference) {
    .ith-itl__step.is-live .ith-itl__node::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); animation: ith-pulse 2.4s ease-out infinite; }
    .ith-art-pulse { animation: ith-pulse-fade 2.4s ease-in-out infinite; }
}
@keyframes ith-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } }
@keyframes ith-pulse-fade { 0%, 100% { opacity: .35; } 50% { opacity: .05; } }
.dark .ith-itl__step + .ith-itl__step::before { background: rgba(255, 255, 255, .2); }
.dark .ith-itl__gap, .dark .ith-itl__detail { color: var(--gray-400); }
.dark .ith-itl__node { color: #FFFFFF; background: color-mix(in srgb, var(--ith-tone) 22%, var(--gray-900)); }
.dark .ith-itl__step.is-pending .ith-itl__node, .dark .ith-itl__step.ith-tone--idle .ith-itl__node { background: rgba(255, 255, 255, .04); }
.dark .ith-itl__mark { box-shadow: 0 0 0 2px var(--gray-900); }
.dark .ith-itl__label, .dark .ith-itl__at, .dark .ith-itl__total { color: #FFFFFF; }
.dark .ith-itl__total-icon { color: #12B5A5; }
/* Telefon: oś pionowa - węzeł po lewej, czas od poprzedniego kroku nad nazwą. */
@media (max-width: 640px) {
    .ith-itl__steps { grid-auto-flow: row; gap: 0; }
    .ith-itl__step { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: .75rem; align-items: start; padding: 0 0 .9rem; text-align: left; }
    .ith-itl__step + .ith-itl__step::before { display: none; }
    .ith-itl__step:not(:last-child)::after { content: ""; position: absolute; left: calc(1.4rem - 1.5px); top: 3rem; bottom: .15rem; width: 3px; border-radius: 3px; background: #B4C6C4; }
    .dark .ith-itl__step:not(:last-child)::after { background: rgba(255, 255, 255, .2); }
    .ith-itl__node { grid-column: 1; grid-row: 1 / span 2; }
    .ith-itl__gap { position: static; grid-column: 2; grid-row: 1; width: auto; text-align: left; }
    .ith-itl__text { grid-column: 2; align-items: flex-start; }
}

/* Puste stany z ilustracją. */
.ith-es { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.5rem 1rem; text-align: center; }
.ith-es__art { width: 150px; height: auto; margin-bottom: .35rem; }
.ith-es--compact { padding: 1rem .5rem; }
.ith-es--compact .ith-es__art { width: 110px; }
.ith-es__heading { margin: 0; font-family: Poppins, Inter, sans-serif; font-size: 1rem; font-weight: 600; color: #0B2B2A; }
.ith-es__text { margin: 0; max-width: 34rem; font-size: .875rem; line-height: 1.5; color: #5B6B6A; }
.dark .ith-es__heading { color: #FFFFFF; }
.dark .ith-es__text { color: var(--gray-400); }
.ith-ta-empty { padding: .5rem 1rem; }


/* Historia sprawdzenia: ikona rodzaju i stan teraz. */
.ith-hist__head { display: flex; align-items: center; gap: .85rem; }
.ith-hist__type { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.3; color: #0B2B2A; }
.ith-hist__state { font-size: .85rem; color: #5B6B6A; }
.dark .ith-hist__type { color: #FFFFFF; }
.dark .ith-hist__state { color: var(--gray-400); }

/* Mała ikona sprawdzenia przy nazwie (tabela na telefonie). */
.ith-ci--sm { width: 1.75rem; height: 1.75rem; border-radius: .5rem; }
.ith-ci--sm .ith-ci__icon { width: 1.05rem; height: 1.05rem; }
.ith-ci--sm .ith-ci__mark { right: -.25rem; bottom: -.25rem; width: .9rem; height: .9rem; }
.ith-ci--sm .ith-ci__mark svg { width: .65rem; height: .65rem; }
.ith-ci-name { display: inline-flex; align-items: center; gap: .6rem; }

/* ===== Ilustracje "Pracownia" (.ith-ill): witryny sklepów, ulica i pasaż, przystanki drogi klienta, puste stany.
   Jedna kreska 1,75 px w każdej skali (vector-effect), ink na bieli i turkusie 100, koral tylko jako drobny akcent.
   Kolory wyłącznie z BrandPalette; w trybie ciemnym kreska jasna (turkus 100), papier i tła z szarości 900/800. */
.ith-ill {
    --i-ink: #0B2B2A; --i-paper: #FFFFFF; --i-mint: #E3F6F4; --i-mint2: #C4ECE8; --i-mint3: #8FDBD3;
    --i-teal: #12B5A5; --i-teal7: #0E8C80; --i-muted: #5B6B6A;
    fill: none; stroke: var(--i-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    font-family: Poppins, Inter, sans-serif; overflow: visible;
}
.ith-ill * { vector-effect: non-scaling-stroke; }
.dark .ith-ill { --i-ink: #E3F6F4; --i-paper: #0F1E1D; --i-mint: #1F2D2C; --i-mint2: #34423F; --i-mint3: #0D6A62; --i-teal7: #4FC8BB; --i-muted: #B4C6C4; }
.ith-ill .f-p { fill: var(--i-paper); }
.ith-ill .f-m { fill: var(--i-mint); }
.ith-ill .f-m2 { fill: var(--i-mint2); }
.ith-ill .f-m3 { fill: var(--i-mint3); }
.ith-ill .f-t { fill: var(--i-teal); }
.ith-ill .f-t7 { fill: var(--i-teal7); }
.ith-ill .f-ink { fill: var(--i-ink); }
.ith-ill .f-ink-fixed { fill: #0B2B2A; }
.ith-ill .f-white { fill: #FFFFFF; }
.ith-ill .f-coral { fill: #FF6B5C; }
.ith-ill .f-ok { fill: #16A34A; }
.ith-ill .f-warn { fill: #F59E0B; }
.ith-ill .f-down { fill: #DC2626; }
.ith-ill .f-info { fill: #0EA5E9; }
.ith-ill .f-idle { fill: #869998; }
.ith-ill .f-muted { fill: #5B6B6A; }
.ith-ill .s-n { stroke: none; }
.ith-ill .s-l { stroke: var(--i-mint2); }
.ith-ill .s-m3 { stroke: var(--i-mint3); }
.ith-ill .s-t7 { stroke: var(--i-teal7); }
.ith-ill .s-line { stroke: #D7E6E4; }
.ith-ill .s-paper { stroke: var(--i-paper); }
.ith-ill .s-white { stroke: #FFFFFF; }
.ith-ill .s-ink-fixed { stroke: #0B2B2A; }
.ith-ill .s-down { stroke: #DC2626; }
.ith-ill .s-muted { stroke: var(--i-muted); }
.ith-ill .tx { stroke: none; fill: var(--i-ink); font-weight: 600; }
.ith-ill .tx-rev { fill: var(--i-paper); }
.ith-ill .tx-fixed { stroke: none; font-weight: 600; }
.ith-ill .ith-art-pulse { opacity: .25; }
.ith-portrait, .ith-street { display: block; width: 100%; height: auto; }

/* Wykres czasu odpowiedzi (x-ith.response-chart). Linia turkus 700, wypełnienie turkus 100, linia odniesienia 1 s
   bursztynowa przerywana, wolne punkty bursztyn z obwódką ink, znaczniki nieudanych pomiarów przy osi. */
.ith-rc { display: block; width: 100%; height: auto; overflow: visible; font-family: Inter, sans-serif; font-size: 12px; font-variant-numeric: tabular-nums;
    --rc-ink: #0B2B2A; --rc-muted: #5B6B6A; --rc-grid: #D7E6E4; --rc-line: #0E8C80; --rc-area: #E3F6F4; --rc-hatch: #C4ECE8; --rc-hatch-bg: #F4FBFA; --rc-paper: #FFFFFF; }
.dark .ith-rc { --rc-ink: #FFFFFF; --rc-muted: #B4C6C4; --rc-grid: #34423F; --rc-line: #4FC8BB; --rc-area: #0D6A62; --rc-hatch: #34423F; --rc-hatch-bg: #0F1E1D; --rc-paper: #0F1E1D; }
.ith-rc--compact { font-size: 11px; }
.ith-rc--narrow { display: none; }
@media (max-width: 640px) { .ith-rc--wide { display: none; } .ith-rc--narrow { display: block; } }
.ith-rc__hatch-bg { fill: var(--rc-hatch-bg); }
.ith-rc__hatch { stroke: var(--rc-hatch); }
.ith-rc__grid { stroke: var(--rc-grid); }
.ith-rc__axis { stroke: var(--rc-ink); }
.ith-rc__muted { fill: var(--rc-muted); }
.ith-rc__muted-line { stroke: var(--rc-muted); }
.ith-rc__ink { fill: var(--rc-ink); font-weight: 600; }
.ith-rc__ink-line { fill: none; stroke: var(--rc-ink); stroke-width: 1.2; }
.ith-rc__label-bg { fill: var(--rc-paper); }
.ith-rc__threshold { stroke: #F59E0B; stroke-width: 2; stroke-dasharray: 5 4; }
.ith-rc__area { fill: var(--rc-area); opacity: .85; }
.ith-rc__line { fill: none; stroke: var(--rc-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ith-rc__slow { fill: #F59E0B; stroke: var(--rc-ink); stroke-width: 1.5; }
.ith-rc__mark circle { fill: #DC2626; stroke: var(--rc-paper); stroke-width: 1.5; }
.ith-rc__mark path { fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; }
.ith-rc__mark--false circle { fill: #869998; }
.ith-rc__mark--false path { stroke: #0B2B2A; }
.ith-rc__mark--planned circle { fill: #0EA5E9; }
.ith-rc__mark--planned path { stroke: #0B2B2A; }
.ith-rc-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; padding: 0 1.75rem 1.25rem; list-style: none; font-size: .78rem; color: #5B6B6A; }
.dark .ith-rc-legend { color: var(--gray-400); }
.ith-rc-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.ith-rc-legend li::before { content: ""; flex: none; width: 22px; height: 0; border-top: 2px solid #0E8C80; }
.ith-rc-legend__gap::before { height: 12px !important; width: 14px !important; border: 1px solid #C4ECE8 !important; background: repeating-linear-gradient(135deg, #C4ECE8 0 1.5px, #F4FBFA 1.5px 4px); }
.ith-rc-legend__threshold::before { border-top: 2px dashed #F59E0B !important; }
.ith-rc-legend__down::before, .ith-rc-legend__false::before, .ith-rc-legend__planned::before { width: 11px !important; height: 11px !important; border: 0 !important; border-radius: 50%; background: #DC2626; }
.ith-rc-legend__false::before { background: #869998; }
.ith-rc-legend__planned::before { background: #0EA5E9; }
.dark .ith-rc-legend li::before { border-top-color: #4FC8BB; }
.dark .ith-rc-legend__gap::before { border-color: #34423F !important; background: repeating-linear-gradient(135deg, #34423F 0 1.5px, #0F1E1D 1.5px 4px); }

/* Droga klienta przez sklep (x-ith.road): przystanki na drodze, szlaban przy braku zgody. Telefon: lista pionowa. */
.ith-road { display: grid; gap: 1rem; }
.ith-road__way { position: relative; padding-top: .4rem; }
.ith-road__track { position: absolute; left: 0; right: 0; top: .4rem; width: 100%; height: 84px; overflow: visible; }
.ith-road__band { fill: none; stroke: #C4ECE8; stroke-width: 22; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ith-road__center { fill: none; stroke: #FFFFFF; stroke-width: 1.75; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; }
.ith-road__off { fill: none; stroke: #869998; stroke-width: 1.75; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.ith-road__post { stroke: #0B2B2A; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ith-road__boom { stroke: #0B2B2A; stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ith-road__boom-stripe { stroke: #F59E0B; stroke-width: 4; stroke-dasharray: 8 8; vector-effect: non-scaling-stroke; }
.ith-road__stations { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ith-road__btn { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 .4rem .3rem; border: 0; border-radius: .75rem; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.ith-road__btn:focus-visible { outline: 3px solid #12B5A5; outline-offset: 2px; }
.ith-road__disc { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: .85rem; border-radius: 50%; background: #FFFFFF; border: 1.75px solid #0B2B2A; }
.ith-road__btn:hover .ith-road__disc { box-shadow: 0 0 0 4px #E3F6F4; }
.ith-road__art { width: 52px; height: 52px; }
.ith-road__stop.is-off .ith-road__disc { border-style: dashed; border-color: #869998; background: #F4FBFA; }
.ith-road__stop.is-off .ith-ill { --i-ink: #5B6B6A; }
.ith-road__badge { position: absolute; right: -2px; bottom: 2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ith-tone); color: var(--ith-tone-ink); box-shadow: 0 0 0 3px #FFFFFF; }
.ith-road__badge svg { width: 13px; height: 13px; stroke-width: 3.2; }
.ith-road__stop.is-off .ith-road__badge { background: #E9F3F2; color: #5B6B6A; }
.ith-road__text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ith-road__n { font-family: Poppins, Inter, sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .08em; color: #5B6B6A; }
.ith-road__name { margin: .2rem 0 .1rem; font-family: Poppins, Inter, sans-serif; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.ith-road__s1 { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ith-road__s2 { margin-top: .15rem; font-size: .78rem; line-height: 1.4; color: #5B6B6A; overflow-wrap: anywhere; }
.ith-road__hint { margin: 0; padding: .6rem .8rem; border-radius: .6rem; background: #F4FBFA; border: 1px solid #D7E6E4; font-size: .85rem; line-height: 1.5; color: #0B2B2A; overflow-wrap: anywhere; }
.dark .ith-road__band { stroke: #1F2D2C; }
.dark .ith-road__center { stroke: #4FC8BB; }
.dark .ith-road__post, .dark .ith-road__boom { stroke: #E3F6F4; }
.dark .ith-road__disc { background: #0F1E1D; border-color: #E3F6F4; }
.dark .ith-road__btn:hover .ith-road__disc { box-shadow: 0 0 0 4px #1F2D2C; }
.dark .ith-road__stop.is-off .ith-road__disc { background: transparent; border-color: #869998; }
.dark .ith-road__stop.is-off .ith-ill { --i-ink: #B4C6C4; }
.dark .ith-road__badge { box-shadow: 0 0 0 3px var(--gray-900); }
.dark .ith-road__stop.is-off .ith-road__badge { background: #34423F; color: #E3F6F4; }
.dark .ith-road__n, .dark .ith-road__s2 { color: var(--gray-400); }
.dark .ith-road__hint { color: #FFFFFF; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
@media (max-width: 767px) {
    .ith-road__track { display: none; }
    .ith-road__stations { grid-template-columns: minmax(0, 1fr); }
    .ith-road__stop { position: relative; padding-bottom: 1rem; }
    .ith-road__stop:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: 64px; bottom: 0; width: 2px; background: #8FDBD3; }
    .ith-road__stop.is-off:not(:last-child)::before, .ith-road__stop:has(+ .is-off)::before { background: repeating-linear-gradient(180deg, #869998 0 4px, transparent 4px 8px); }
    .ith-road__stop.is-gate .ith-road__disc::before { content: ""; position: absolute; left: -10px; top: -9px; width: 84px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, #F59E0B 0 8px, #0B2B2A 8px 16px); }
    .ith-road__btn { flex-direction: row; align-items: flex-start; gap: .9rem; padding: 0; text-align: left; }
    .ith-road__disc { flex: none; width: 64px; height: 64px; margin: 0; }
    .ith-road__art { width: 38px; height: 38px; }
    .ith-road__text { align-items: flex-start; padding-top: .3rem; }
}

/* Strona WWW bez sklepu: lista monitorowanych podstron zamiast drogi klienta (widżet CustomerPath, ServiceGraphics::websitePages). */
.ith-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ith-pages__item { display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; border: 1px solid #D7E6E4; border-radius: 12px; background: #F4FBFA; }
.dark .ith-pages__item { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .1); }
.ith-pages__main { min-width: 0; flex: 1 1 auto; }
.ith-pages__name { font-weight: 600; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.ith-pages__path { font-weight: 400; font-size: .8rem; color: #5B6B6A; margin-left: .35rem; }
.ith-pages__result { font-size: .8rem; color: #5B6B6A; line-height: 1.4; margin-top: .15rem; overflow-wrap: anywhere; }
.dark .ith-pages__path, .dark .ith-pages__result { color: var(--gray-400); }
.ith-pages__status { flex: none; font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: #E9F3F2; color: #0B2B2A; white-space: nowrap; }
.ith-pages__status--ok { background: #16A34A; color: #0B2B2A; }
.ith-pages__status--down { background: #DC2626; color: #fff; }
.ith-pages__status--warn { background: #F59E0B; color: #0B2B2A; }
.ith-pages__status--info { background: #0EA5E9; color: #0B2B2A; }
@media (max-width: 640px) { .ith-pages__item { flex-wrap: wrap; } .ith-pages__status { margin-left: auto; } }