/* Routes use the city controls' pale stone materials. */
.city-network__entrypoints { position:absolute; top:8%; right:6%; z-index:5; display:flex; align-items:center; gap:10px; }
.city-network__entrypoints .city-network__info-toggle { position:static; }
html:root body#top .sea-city-visual .city-network__routes-toggle {
  display:flex; align-items:center; gap:10px; min-height:48px; padding:12px 18px; border:1px solid var(--city-control-edge)!important;
  border-radius:16px!important; color:var(--city-control-ink)!important; background:var(--city-control-fill)!important;
  box-shadow:var(--city-control-shadow)!important; font:400 11px/1.45 var(--ui-font-display,Bowler,sans-serif)!important;
  -webkit-backdrop-filter:blur(12px) saturate(.8); backdrop-filter:blur(12px) saturate(.8); cursor:pointer; list-style:none;
}
.city-network__routes-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
html:root body#top main#main-content .city-routes-panel {
  --ui-ink:#202b22; --ui-muted:#566451; --ui-line:#c7cfc1;
  position:absolute; z-index:7; top:calc(8% + 64px); right:6%; width:min(410px,calc(100% - 32px))!important; max-width:calc(100% - 32px)!important;
  max-height:calc(84% - 120px); overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; box-sizing:border-box;
  padding:28px; border:1px solid var(--city-control-edge)!important; border-radius:18px; background:var(--city-panel-fill)!important;
  color:#202b22!important; box-shadow:var(--city-control-shadow); -webkit-backdrop-filter:blur(12px) saturate(.82); backdrop-filter:blur(12px) saturate(.82);
}
.city-routes-panel[hidden],.city-routes-panel [hidden],.city-route-context[hidden] { display:none!important; }
html:root body#top main#main-content .city-routes-panel h3 { margin:0 0 20px!important; padding-right:10px; color:#202b22!important; font:400 21px/1.4 var(--ui-font-display,Bowler,sans-serif)!important; overflow-wrap:anywhere; }
html:root body#top main#main-content .city-routes-eyebrow { margin:0 0 10px!important; color:#566451!important; font:400 12px/1.5 var(--ui-font,Inter,sans-serif)!important; }
html:root body#top main#main-content .city-route-field { display:grid; gap:8px; color:#566451!important; font:500 13px/1.5 var(--ui-font,Inter,sans-serif); }
html:root body#top main#main-content .city-route-field select {
  display:block; box-sizing:border-box; width:100%; max-width:100%; min-height:48px; padding:10px 28px 10px 12px;
  color:#202b22!important; background:rgb(255 255 250 / .48)!important; border:1px solid #bcc8b5!important; border-radius:8px!important;
  font:400 14px/1.5 var(--ui-font,Inter,sans-serif)!important; text-overflow:ellipsis;
}
html:root body#top main#main-content .city-route-feedback { color:#566451!important; margin:16px 0 0!important; font:400 14px/1.6 var(--ui-font,Inter,sans-serif)!important; }
.city-route-feedback:empty { display:none; }
html:root body#top main#main-content .city-route-body h4 { margin:20px 0 14px!important; color:#202b22!important; font:600 18px/1.4 var(--ui-font,Inter,sans-serif)!important; }
.city-route-body dl { display:grid; gap:12px; margin:0; }
.city-route-body dl > div { padding-top:10px; border-top:1px solid rgb(86 100 81 / .16); }
html:root body#top main#main-content .city-route-body dt { color:#566451!important; font:400 12px/1.5 var(--ui-font,Inter,sans-serif); }
html:root body#top main#main-content .city-route-body dd { margin:4px 0 0; color:#202b22!important; font:500 14px/1.6 var(--ui-font,Inter,sans-serif); }
.city-route-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:20px; }
html:root body#top main#main-content .city-route-actions a { min-height:44px; display:inline-flex; align-items:center; color:#202b22; font:500 13px/1.5 var(--ui-font,Inter,sans-serif); text-decoration:underline; text-underline-offset:4px; }
.city-route-actions .btn-primary { flex-basis:100%; justify-content:center; color:#fff!important; text-decoration:none; padding:12px 18px; }
html:root body#top main#main-content .city-route-retry { min-height:44px; padding:8px 0; border:0; background:none!important; color:#202b22!important; font:600 14px/1.5 var(--ui-font,Inter,sans-serif); text-decoration:underline; text-underline-offset:4px; }
.city-routes-panel :is(a,button,select):focus-visible { outline:2px solid #273d2d!important; outline-offset:3px; }
html:root body#top main#main-content .city-route-context { margin:12px 0 20px; }
html:root body#top main#main-content .city-route-context a { display:inline-flex; align-items:center; min-height:44px; color:var(--ui-ink); font:500 14px/1.5 var(--ui-font,Inter,sans-serif); text-decoration:underline; text-underline-offset:4px; }
@media (hover:hover) {
  html:root body#top .sea-city-visual .city-network__routes-toggle:hover { background:var(--city-control-hover)!important; }
}
@media (max-width:760px) {
  .city-network__entrypoints { top:22px; right:16px; gap:6px; }
  .city-network__entrypoints .city-network__info-toggle { padding:10px 12px; gap:6px; }
  html:root body#top .sea-city-visual .city-network__routes-toggle { min-height:44px; padding:10px 12px; gap:6px; font-size:10px!important; }
  .city-network__routes-toggle svg { width:18px; height:18px; }
  html:root body#top main#main-content .city-routes-panel { top:78px; right:16px; padding:22px; max-height:min(540px,calc(100svh - 200px)); }
}
@media (max-width:380px) {
  .city-network__entrypoints .city-network__office-pin { display:none; }
  .city-network__entrypoints .city-network__info-toggle { padding:10px 8px; }
  html:root body#top .sea-city-visual .city-network__routes-toggle { padding:10px 8px; }
  .city-network__routes-toggle svg { display:none; }
  .city-network__entrypoints .city-network__info-toggle span { font-size:10px; }
  .city-network__entrypoints { gap:4px; }
  html:root body#top main#main-content .city-routes-panel { padding:20px; }
}