/* Dojazd — zakładki wariantów, oś trasy z tarczami drogowymi, panel boczny. */
.route{background:var(--sand-100); padding:76px 0; border-bottom:1px solid var(--sand-200)}
.route-head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:36px}
.route-head h2{font-size:clamp(30px,3.6vw,42px)}
.route-head p{margin:8px 0 0; color:var(--brown-700); max-width:52ch}

.route-board{background:var(--white); border:1px solid var(--sand-200); border-radius:var(--r); overflow:hidden}
.tabs{display:flex; border-bottom:1px solid var(--sand-200); overflow-x:auto; scrollbar-width:thin}
.tab{
  flex:1 0 auto; background:none; border:0; border-bottom:3px solid transparent;
  padding:18px 22px; cursor:pointer; text-align:left; color:var(--brown-500);
  font:500 15px var(--body); white-space:nowrap; transition:.18s;
}
.tab small{display:block; font-family:var(--mono); font-size:11.5px; font-weight:400; margin-top:3px}
.tab:hover{background:var(--sand-100); color:var(--brown-900)}
.tab[aria-selected="true"]{color:var(--brown-900); border-bottom-color:var(--blue-600); background:var(--white)}
.tab[aria-selected="true"] small{color:var(--blue-700)}

.panel{padding:36px 32px; display:none}
.panel[data-active]{display:grid; grid-template-columns:1.35fr 1fr; gap:44px}

/* oś trasy z tarczami drogowymi */
.legs{list-style:none; margin:0; padding:0; position:relative}
.legs::before{content:""; position:absolute; left:23px; top:14px; bottom:14px; width:2px; background:var(--sand-200)}
.legs li{position:relative; display:grid; grid-template-columns:48px 1fr auto; gap:18px; align-items:start; padding:11px 0}
.shield{
  grid-column:1; z-index:1; width:48px; min-height:30px; display:grid; place-items:center;
  font:500 13px/1 var(--mono); color:var(--white); background:var(--blue-600);
  border:2px solid var(--white); border-radius:3px; padding:6px 0;
  box-shadow:0 0 0 1px var(--blue-600);
}
.shield--nat{background:var(--red-600); box-shadow:0 0 0 1px var(--red-600)}   /* droga krajowa */
.shield--loc{background:var(--brown-500); box-shadow:0 0 0 1px var(--brown-500)} /* droga lokalna */
.shield--dot{background:var(--white); color:var(--blue-700); box-shadow:0 0 0 1px var(--blue-400)}
.leg-text strong{display:block; font-weight:600; font-size:16px}
.leg-text span{font-size:14px; color:var(--brown-500)}
.km{font-family:var(--mono); font-size:13px; color:var(--brown-700); white-space:nowrap; padding-top:5px}

.route-aside{border-left:1px solid var(--sand-200); padding-left:36px}
.gps{background:var(--blue-100); border:1px solid var(--blue-400); border-radius:var(--r); padding:18px}
.gps b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-700); margin-bottom:8px}
.gps code{font-family:var(--mono); font-size:16px; color:var(--brown-900); display:block; margin-bottom:12px}
.copy{background:var(--white); border:1px solid var(--blue-400); color:var(--blue-700); border-radius:var(--r); padding:9px 14px; font:500 13px var(--body); cursor:pointer}
.copy:hover{background:var(--blue-600); color:var(--white); border-color:var(--blue-600)}

.note{display:flex; gap:12px; margin-top:22px; font-size:14.5px; color:var(--brown-700)}
.note svg{width:19px; height:19px; flex:0 0 auto; margin-top:3px; color:var(--blue-600)}
.aside-list{list-style:none; margin:22px 0 0; padding:22px 0 0; border-top:1px solid var(--sand-200); font-size:14.5px}
.aside-list li{display:flex; justify-content:space-between; gap:16px; padding:7px 0; color:var(--brown-700)}
.aside-list b{font-family:var(--mono); font-weight:500; color:var(--brown-900)}

@media (max-width:1023px){
  .panel[data-active]{grid-template-columns:1fr; gap:32px}
  .route-aside{border-left:0; border-top:1px solid var(--sand-200); padding:32px 0 0}
}

@media (max-width:719px){
  .panel{padding:24px 18px}
  .legs li{grid-template-columns:44px 1fr; row-gap:2px}
  .km{grid-column:2; padding-top:0}
  .tab{padding:14px 16px}
}