/* Matches Contacts' restrained typography, with drawn transport symbols. */
.ct-logistics .transport-icon { width:28px; height:28px; flex:none; color:var(--fg-2); }
.ct-logistics .transport-icon__accent { stroke:var(--accent-text); }
.ct-logistics>summary .transport-icon { width:23px; height:23px; color:var(--accent-text); }
.ct-logistics__count { font-size:12px; color:var(--fg-3); margin-left:auto; }
.ct-logistics>summary>.icon { margin-left:0; }
.ct-connections [hidden] { display:none!important; }
.ct-connections { padding-bottom:8px; }
.ct-connections__filters { display:flex; flex-wrap:wrap; gap:4px 16px; border-bottom:1px solid var(--rule); }
.ct-connections__filters button { position:relative; padding:8px 0; min-height:44px; background:none; border:0; color:var(--fg-3); font:500 13px/1.3 var(--font-sans); cursor:pointer; }
.ct-connections__filters button::after { content:''; position:absolute; inset:auto 0 -1px; height:2px; background:var(--accent-text); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.ct-connections__filters button[aria-pressed=true] { color:var(--fg); }
.ct-connections__filters button[aria-pressed=true]::after { transform:scaleX(1); }
.ct-route-preview { position:relative; padding:18px 0 12px; margin-bottom:6px; border-bottom:1px solid var(--rule); }
.ct-route-preview__ends { display:flex; justify-content:space-between; padding:0 2px; }
.ct-route-preview__factory .transport-icon { color:var(--accent-text); }
.ct-route-preview__line { display:block; width:100%; height:40px; margin-top:-2px; overflow:visible; }
.ct-route-preview__line path { stroke-width:1.3px; }
.ct-route-preview__track { stroke:var(--rule); }
.ct-route-preview__draw { stroke:var(--accent-text); stroke-dasharray:1; stroke-dashoffset:0; }
.ct-route-preview__line circle { fill:var(--accent-text); }
.ct-route-preview__names { display:flex; justify-content:space-between; gap:15px; }
.ct-route-preview__names>span { min-width:0; max-width:62%; }
.ct-route-preview__names>span:last-child { text-align:right; }
.ct-route-preview__names small { display:block; font-size:11px; color:var(--fg-3); margin-bottom:2px; }
.ct-route-preview__names strong { display:block; font:500 14px/1.4 var(--font-sans); overflow-wrap:anywhere; }
.ct-route-preview__action { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-top:4px; color:var(--accent-text); font:500 13px/1.4 var(--font-sans); }
.ct-route-preview__action .icon { width:16px; height:16px; flex:none; }
.ct-connections__list { list-style:none; padding:0; margin:0; max-height:252px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
.ct-connection { margin:0; border-bottom:1px solid var(--rule); }
.ct-connection:last-child { border-bottom:0; }
.ct-connection__select,.ct-connection__fallback { display:grid; grid-template-columns:28px minmax(0,1fr) auto 15px; align-items:center; gap:12px; width:100%; min-height:62px; padding:10px 8px; border:0; border-radius:3px; background:none; text-align:left; color:var(--fg-2); font:400 14px/1.3 var(--font-sans); cursor:pointer; transition:background .2s; }
.ct-connection__select:hover,.ct-connection__fallback:hover { background:var(--bg-raised); }
.ct-connection__select[aria-pressed=true] { background:color-mix(in srgb,var(--accent-text) 7%,transparent); }
.ct-connection__select[aria-pressed=true]>.transport-icon { color:var(--accent-text); }
.ct-connection__text { min-width:0; }
.ct-connection__text strong { display:block; font-weight:500; color:var(--fg); overflow-wrap:anywhere; }
.ct-connection__text small { display:block; margin-top:3px; font-size:11px; color:var(--fg-3); }
.ct-connection__km { font-size:11px; white-space:nowrap; color:var(--fg-3); }
.ct-connection .icon { width:15px; height:15px; transition:transform .2s; }
.ct-connection__select[aria-pressed=true]>.icon { color:var(--accent-text); transform:rotate(-45deg); }
.ct-connections__note { font-size:11px; line-height:1.5; color:var(--fg-3); margin:12px 0 0; }
.ct-connections button:focus-visible,.ct-connections a:focus-visible { outline:2px solid var(--accent-text); outline-offset:-2px; }
@media(max-width:360px) { .ct-connection__select,.ct-connection__fallback { gap:8px; } .ct-connections__filters { gap:0 12px; } }
@media(prefers-reduced-motion:reduce) { .ct-connections *, .ct-connections *::after { transition:none!important; } }