/* Softineo: „Rejestracja czasu pracy”. Tylko to, czego nie ma w softineo.css:
   plan wejścia (kołowroty, czytniki, ewidencja), zakres jako tabela symboli, szczegół symulacji,
   mapa systemu, kroki wdrożenia, pytania, prośba o rozmowę. */

/* ---------- plan wejścia ---------- */
.rcp-plan .park { fill: url(#h-diag-wide); stroke: var(--ink-2); stroke-width: 1.2; }
.rcp-plan .bays { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.rcp-plan .road { stroke-width: 46; }
.rcp-plan .route { stroke-width: 10; opacity: .9; }
.rcp-plan .walk { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; stroke-linejoin: round; }
.rcp-plan .hall .wall { fill: url(#h-cross); stroke: var(--ink); stroke-width: 1.6; }
.rcp-plan .hall .room { fill: var(--paper-hi); stroke: var(--ink-2); stroke-width: 1; }
.rcp-plan .roof { fill: rgba(237, 241, 244, .6); stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 8 4; }
.rcp-plan .lane { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: square; }
.rcp-plan .turn-c { fill: var(--ink); }
.rcp-plan .turn-h { fill: url(#h-cross); stroke: var(--ink); stroke-width: 1.4; }
.rcp-plan .turn-a { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.rcp-plan .reader rect { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.4; }
.rd-led { fill: var(--line-2); stroke: var(--ink); stroke-width: .8; transition: fill .25s var(--ease-out); }
.rd-led.is-ok { fill: var(--ok); }
.rd-led.is-no { fill: var(--err); }
.rcp-plan .onsite rect { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.4; }
.rcp-plan .reg-f { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.6; }
.rcp-plan .reg-rule { fill: none; stroke: var(--ink); stroke-width: 1; }
.rcp-plan .reg .lbl { font-size: 14px; }
.rcp-plan .reg .lbl.sm { font-size: 11.5px; fill: var(--ink-2); }
.rcp-plan .reg .lbl-b { font-size: 16px; }
.row-bg { fill: transparent; transition: fill .45s var(--ease-out); }
.reg-row.is-now .row-bg { fill: var(--y); }
.reg-row .lbl { fill: var(--ink); }
.rcp-plan .hr rect { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.4; transition: fill .45s var(--ease-out); }
.rcp-plan .hr.is-hot rect { fill: var(--y); }
.rcp-plan .hr .lbl { fill: var(--ink); }
.person ellipse { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.4; }
.person circle { fill: var(--ink); }
.person.p-c ellipse { fill: url(#h-diag); stroke-dasharray: 3 2; }
.person.p-c circle { fill: var(--ink-2); }
.rcp-plan .gate .lbl { fill: var(--ink-2); }

/* ---------- co obejmuje: tabela symboli ---------- */
.lead-h { font-size: clamp(22px, 1.8vw, 30px); letter-spacing: -.015em; margin-bottom: 10px; }
.legend-t { width: 100%; margin-top: clamp(32px, 4vw, 56px); border-collapse: collapse; }
.legend-t thead th { text-align: left; font: 13px/1 var(--tech); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; padding: 0 16px 10px 0; border-bottom: 1.5px solid var(--ink); }
.legend-t td { vertical-align: top; padding: 18px 16px 20px 0; border-bottom: 1px solid var(--line); }
.legend-t .lg-sym { width: 128px; padding-right: 24px; border-right: 1px solid var(--line); }
.legend-t .lg-plan { width: 26%; padding-left: 20px; font: 16px/1.35 var(--tech); color: var(--ink); }
.legend-t .lg-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px clamp(20px, 3vw, 56px); }
.legend-t h3 { font-size: clamp(19px, 1.4vw, 23px); margin: 0; }
.legend-t p { color: var(--ink-2); margin: 0; max-width: 60ch; }
.legend-t tbody tr:hover .lg-plan { background: linear-gradient(transparent 58%, rgba(255, 182, 0, .5) 58%, rgba(255, 182, 0, .5) 90%, transparent 90%) 20px 18px / calc(100% - 36px) 1.35em no-repeat; }
.spec-sym { width: 96px; height: 56px; display: block; overflow: visible; }
.spec-sym * { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spec-sym .s-thin { fill: none; stroke: var(--line); stroke-width: 1.2; }
.spec-sym .s-fill { fill: var(--paper); }
.spec-sym .s-ink { fill: var(--ink); stroke: none; }
.spec-sym .s-ink2 { fill: var(--ink-2); stroke: none; }
.spec-sym .s-lane { fill: none; stroke-width: 3; stroke-linecap: square; }
.spec-sym .s-hatch { fill: url(#h-diag); }
.spec-sym .s-dash { stroke-dasharray: 3 2; }
.spec-sym .s-arm { fill: none; stroke-width: 2.4; }
.spec-sym .s-ok { fill: var(--ok); stroke-width: .8; }
.spec-sym .s-no { fill: var(--err); stroke-width: .8; }
.spec-sym .s-lead { fill: none; stroke-width: 1.2; }
.spec-sym .s-mark { fill: var(--y); stroke: none; }
.spec-sym .s-cmd { fill: none; stroke: var(--y-deep); stroke-width: 2.2; stroke-dasharray: 6 3; }
.spec-sym .s-arrow { fill: none; stroke: var(--y-deep); stroke-width: 2.2; }
.spec-sym .s-road { fill: none; stroke: #d5dce3; stroke-width: 22; stroke-linecap: butt; }
.spec-sym .s-post { fill: var(--paper-hi); }
.spec-sym .s-boom { fill: none; stroke-width: 4; }
.spec-sym .s-truck { fill: #262b30; stroke: #59626a; stroke-width: 1; }
.spec-sym .s-cab { fill: var(--y); stroke: none; }
.spec-sym .s-cable { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 5 3; }

/* ---------- szczegół: symulacja ---------- */
.sim { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 80px); align-items: center; }
.sim h2 { margin-bottom: 22px; }
.sim .sec-p { margin-bottom: 28px; }
/* .detail jak na stronie głównej (strona-glowna.css); do przeniesienia do softineo.css */
.detail { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border: 1.5px solid var(--ink); background: var(--paper-hi); padding: 18px 20px 22px; transition: background-color .3s var(--ease-out); }
.detail:hover { background: #fff; }
.detail-art { width: 100%; height: auto; margin-bottom: 18px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.detail-art .lbl { fill: var(--ink-2); font-size: 15px; }
.d-mark { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.d-mark-t { font-size: 20px; text-anchor: middle; fill: var(--ink); }
.d-fence { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 14 4 2 4; }
.d-lane { fill: none; stroke: var(--ink); stroke-width: 3; }
.d-turn circle { fill: var(--ink); }
.d-turn rect { fill: url(#h-cross); stroke: var(--ink); stroke-width: 1.3; }
.d-turn path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.d-walk { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.d-p ellipse { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.d-p circle { fill: var(--ink); }
.d-stop ellipse { fill: url(#h-diag); stroke-dasharray: 3 2; }
.d-x { fill: none; stroke: var(--err); stroke-width: 2.4; stroke-linecap: round; }
.d-lead { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.detail h3 { font-size: clamp(22px, 1.8vw, 30px); margin-bottom: 10px; }
.detail p { color: var(--ink-2); max-width: 52ch; }
.detail .link-arrow { margin-top: auto; }

/* ---------- mapa systemu ---------- */
.sysmap { list-style: none; margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink); background: var(--paper-hi); }
.sysmap li + li { border-left: 1px solid var(--ink); }
.sysmap a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: center; padding: 22px clamp(16px, 1.8vw, 28px) 24px; height: 100%; text-decoration: none; transition: background-color .25s var(--ease-out); }
.sysmap .swatch { grid-row: 1 / 3; width: 42px; height: 30px; }
.sysmap b { font-size: clamp(19px, 1.45vw, 23px); line-height: 1.2; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .25em; transition: text-decoration-color .25s; }
.sysmap span { grid-column: 2; color: var(--ink-2); font-size: 16px; }
.sysmap a::after { content: ""; grid-column: 3; grid-row: 1 / 3; width: 18px; height: 10px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--ease-out); }
.sysmap a:hover { background: #fff; }
.sysmap a:hover b { text-decoration-color: var(--y-deep); }
.sysmap a:hover::after { transform: translateX(3px); }

/* ---------- kroki wdrożenia: stacje na jednej linii ---------- */
.steps { list-style: none; margin: clamp(36px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 44px); counter-reset: st; }
.steps li { position: relative; padding-top: 64px; counter-increment: st; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 0; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper-hi); font: 18px/37px var(--tech); text-align: center; }
.steps li::after { content: ""; position: absolute; left: 0; right: calc(-1 * clamp(20px, 2.4vw, 44px)); top: 20px; border-top: 1.5px solid var(--ink); }
.steps li:last-child::after { right: 0; border-top-style: dashed; border-top-color: var(--line); }
.steps li:last-child::before { background: var(--y); }
.steps h3 { font-size: clamp(20px, 1.5vw, 25px); margin-bottom: 10px; }
.steps p { color: var(--ink-2); margin: 0; max-width: 40ch; }

/* ---------- pytania ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 80px); align-items: start; }
.faq { border-top: 1.5px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--ink); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px 20px 0; font-weight: 700; font-size: clamp(18px, 1.35vw, 22px); line-height: 1.3; transition: background-color .2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: linear-gradient(transparent 62%, rgba(255, 182, 0, .45) 62%, rgba(255, 182, 0, .45) 92%, transparent 92%) 0 0 / calc(100% - 40px) 100% no-repeat; }
.faq-i { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.8; transition: transform .3s var(--ease-out); }
.faq-item[open] .faq-i { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 0 22px; color: var(--ink-2); max-width: 62ch; }

/* ---------- prośba o rozmowę ---------- */
.talk { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(56px, 7vw, 110px); }
.talk-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px clamp(20px, 3vw, 48px); align-items: center; border: 1.5px solid var(--ink); background: var(--paper-hi); padding: clamp(24px, 3vw, 44px); }
.talk-box > .rev-tri { width: 40px; height: 34px; margin: 0; align-self: start; }
.talk-box > .rev-tri path { fill: var(--y); }
.talk h2 { font-size: clamp(26px, 2.5vw, 42px); letter-spacing: -.025em; line-height: 1.08; margin-bottom: 12px; }
.talk-text p { color: var(--ink-2); margin: 0; max-width: 60ch; }
.talk-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ---------- układy ---------- */
@media (max-width: 1180px) {
    .talk-box { grid-template-columns: auto minmax(0, 1fr); }
  .talk-actions { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
}
@media (max-width: 1000px) {
  .legend-t .lg-in { grid-template-columns: 1fr; }
  .sim, .faq-grid { grid-template-columns: 1fr; }
  .sysmap { grid-template-columns: 1fr; }
  .sysmap li + li { border-left: 0; border-top: 1px solid var(--ink); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .steps li:nth-child(2)::after { right: 0; }
}
@media (max-width: 680px) {
  .legend-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legend-t, .legend-t tbody { display: block; }
  .legend-t tr { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
  .legend-t td { display: block; padding: 0; border: 0; width: auto; }
  .legend-t .lg-sym { grid-row: 1 / 3; width: auto; padding: 0; border: 0; }
  .legend-t .lg-plan { padding: 0 0 6px; font-size: 14px; color: var(--ink-2); }
  .legend-t .lg-in { gap: 4px; }
  .legend-t .lg-plan { width: auto; }
  .legend-t tbody tr:hover .lg-plan { background: none; }
  .spec-sym { width: 80px; height: 47px; }
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .steps li { padding: 4px 0 30px 60px; }
  .steps li::after, .steps li:nth-child(2)::after { left: 20px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px solid var(--ink); }
  .steps li:last-child::after { display: none; }
  .talk-box { grid-template-columns: 1fr; }
  .talk-actions { grid-column: auto; flex-direction: column; align-items: stretch; }
  .talk-actions .btn { width: 100%; }
}