/* /corridor/ — route explorer. Page layer on top of tools.css (tokens and
   shared controls come from there). A full-screen map app: the site
   navigation and footer are not shown on this page. */

#nav,.nav,footer{display:none!important}
html,body{height:100%;overflow:hidden}
body{background:#0A1220}

.cx{
  /* Colours that encode data on the map; the same values are set in the page script. */
  --cx-rail:#D9B878;
  --cx-sea:#5BB8D2;
  --cx-air:#B3A6E6;
  --cx-city:#7CCB9E;
  --cx-risk-high:#E39384;
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;min-height:0;
}
.cx button{font-family:inherit}
.cx h2{font-size:inherit;font-weight:inherit;line-height:inherit}
/* Keep each control's own corner radius when it shows the shared focus ring. */
.cx-back:focus-visible{border-radius:9px}
.layer-btn:focus-visible,.tl-item:focus-visible,.cx-linkrow:focus-visible{border-radius:8px}
.cx-sheet-toggle:focus-visible,.cx-jump .ws-btn:focus-visible,.cx-bar .ws-btn:focus-visible{border-radius:10px}
.sec-head:focus-visible,.ctrl-btn:focus-visible{border-radius:0}

/* ── Top bar: navigation between tools only ── */
.cx-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 20px 0 14px;border-bottom:1px solid var(--ws-line);background:linear-gradient(180deg,#0D182B 0%,var(--ws-bg) 100%)}
.cx-bar-left{display:flex;align-items:center;gap:14px;min-width:0}
.cx-bar .ws-tools{margin:0}
.cx-back{display:inline-flex;align-items:center;gap:7px;flex:none;height:36px;padding:0 11px 0 8px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--ws-muted);white-space:nowrap;transition:color .2s,background .2s}
.cx-back:hover{color:var(--ws-text);background:rgba(255,255,255,.05)}
.cx-back:active{transform:translateY(1px)}
.cx-back svg{width:15px;height:15px;flex:none}
.cx-bar .ws-btn{height:36px}

/* ── Layout ── */
.cx-app{flex:1;min-height:0;display:flex}
.globe-wrap{flex:1;min-width:0;position:relative;overflow:hidden;cursor:grab;background:radial-gradient(900px 600px at 50% 45%,rgba(198,164,109,.045),transparent 70%)}
.globe-wrap:active{cursor:grabbing}
.globe-wrap canvas{display:block;width:100%;height:100%;touch-action:none}

/* ── Controls on the map ── */
.cx-float{border:1px solid var(--ws-line-strong);background:rgba(10,18,32,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cx-layers{position:absolute;top:14px;left:14px;z-index:60;display:flex;align-items:center;gap:4px;max-width:calc(100% - 28px);padding:4px;border-radius:12px;overflow-x:auto;scrollbar-width:none}
.cx-layers::-webkit-scrollbar{display:none}
.cx-layers-label{flex:none;padding:0 8px 0 10px;font-size:12px;font-weight:600;color:var(--ws-faint)}
.layer-btn{display:inline-flex;align-items:center;gap:8px;flex:none;height:32px;padding:0 12px 0 9px;border:1px solid transparent;border-radius:8px;background:none;font-size:12.5px;font-weight:600;color:var(--ws-muted);white-space:nowrap;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.layer-btn::before{content:"";flex:none;width:15px;height:15px;border:1.5px solid var(--ws-faint);border-radius:4px;background:center/11px 11px no-repeat;transition:background-color .2s,border-color .2s}
.layer-btn:hover{color:var(--ws-text);background:rgba(255,255,255,.05)}
.layer-btn:active{transform:translateY(1px)}
.layer-btn.active{color:var(--ws-text);background:var(--ws-raised);border-color:var(--ws-line-strong)}
.layer-btn.active::before{border-color:var(--ws-gold);background-color:var(--ws-gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2314203A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E")}

.cx-status{position:absolute;top:66px;left:14px;z-index:55;display:grid;gap:4px;max-width:min(600px,calc(100% - 28px));pointer-events:none}
.cx-status p{display:flex;gap:8px;align-items:baseline;width:fit-content;max-width:100%;padding:5px 10px;border-radius:8px;background:rgba(10,18,32,.78);font-size:12px;line-height:1.45;color:var(--ws-muted)}
.cx-status p::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ws-faint);transform:translateY(-1px)}
.cx-status p[data-state="live"]::before{background:var(--ws-gold)}
.cx-status b{font-weight:600;color:var(--ws-text)}
.cx-status[hidden]{display:none}
.cx-status .is-short{display:none}

.cx-zoom{position:absolute;right:14px;bottom:14px;z-index:60;display:grid;border-radius:11px;overflow:hidden}
.ctrl-btn{display:grid;place-items:center;width:38px;height:38px;border:0;background:none;color:var(--ws-muted);cursor:pointer;transition:color .2s,background .2s}
.ctrl-btn+.ctrl-btn{border-top:1px solid var(--ws-line)}
.ctrl-btn:hover{color:var(--ws-gold);background:rgba(198,164,109,.1)}
.ctrl-btn:active{background:rgba(198,164,109,.18)}
.ctrl-btn:focus-visible{outline-offset:-2px}
.ctrl-btn svg{width:16px;height:16px}

.cx-mapstate{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:24px;text-align:center;pointer-events:none}
.cx-mapstate p{max-width:34ch;font-size:13.5px;line-height:1.6;color:var(--ws-muted)}
.cx-mapstate[data-state="error"] p{padding:14px 18px;border:1px solid var(--ws-line-strong);border-radius:12px;background:var(--ws-surface);color:var(--ws-text)}
.cx-mapstate[hidden]{display:none}

.globe-tooltip{position:absolute;z-index:80;padding:8px 12px;border:1px solid var(--ws-line-strong);border-radius:9px;background:rgba(22,36,60,.96);box-shadow:0 10px 28px rgba(4,9,18,.55);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.globe-tooltip.visible{opacity:1}
.tt-title{font-size:13px;font-weight:600;color:#fff}
.tt-subtitle{margin-top:2px;font-size:12px;font-weight:500;color:#DCC08C}
.tt-detail{margin-top:2px;font-size:12px;color:var(--ws-muted)}

/* ── Data layer cards ── */
.cx-overlays{display:contents}
.data-overlay{position:absolute;z-index:50;padding:13px 15px 14px;border:1px solid var(--ws-line-strong);border-radius:12px;background:rgba(16,27,46,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.data-overlay.visible{opacity:1;visibility:visible}
.cx-stack{position:absolute;top:14px;right:14px;z-index:50;display:grid;gap:8px;justify-items:end;pointer-events:none}
.cx-stack .data-overlay{position:static}
#doBotLeft{bottom:14px;left:14px}
#doBotRight{bottom:14px;right:66px}
.do-val{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.1;color:#fff}
.do-badge{margin-top:3px;font-size:12.5px;font-weight:600;color:#DCC08C}
.do-label,.do-title{font-size:12px;color:var(--ws-faint)}
.do-label{margin-top:5px}
.do-title{margin-bottom:7px;font-weight:600;color:var(--ws-muted)}
.do-bars{display:flex;align-items:flex-end;gap:3px;height:38px;margin-top:10px}
.do-bar{flex:1;border-radius:2px 2px 0 0;background:rgba(198,164,109,.26);transition:height 1s}
.do-bar.hl{background:var(--ws-gold)}
.do-minitbl{font-size:12.5px;border-collapse:collapse}
.do-minitbl td{padding:2px 14px 2px 0}
.do-minitbl td:last-child{padding-right:0}
.do-minitbl .name{color:var(--ws-muted)}
.do-minitbl .val{font-weight:600;color:var(--ws-text);text-align:right}
.do-ticker{width:230px;overflow:hidden;white-space:nowrap}
.do-ticker-inner{display:inline-block;padding-left:100%;animation:cxTicker 26s linear infinite}
.do-ticker-inner span{margin-right:30px;font-size:12.5px;color:var(--ws-text)}
@keyframes cxTicker{to{transform:translateX(-100%)}}
.live-dot{display:inline-flex;align-items:center;gap:5px;margin-left:8px;font-size:12px;font-weight:600;color:#DCC08C;vertical-align:baseline}
.live-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ws-gold);animation:cxPulse 1.8s ease-in-out infinite}
@keyframes cxPulse{50%{opacity:.35}}

/* ── Side panel ── */
.panel{flex:none;display:flex;flex-direction:column;width:392px;min-height:0;border-left:1px solid var(--ws-line);background:var(--ws-surface)}
.panel-header{position:relative;padding:20px 22px 18px;border-bottom:1px solid var(--ws-line)}
.cx-eyebrow{font-size:12px;font-weight:600;color:var(--ws-gold)}
.panel-header h1{margin-top:6px;font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#fff}
.panel-header p{margin-top:6px;font-size:13px;line-height:1.5;color:var(--ws-muted)}
.cx-sheet-toggle{display:none}
.panel-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.panel-scroll::-webkit-scrollbar{width:6px}
.panel-scroll::-webkit-scrollbar-thumb{border-radius:3px;background:rgba(255,255,255,.16)}

.sec{border-bottom:1px solid var(--ws-line)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:15px 22px;border:0;background:none;font-size:13px;font-weight:600;color:var(--ws-text);text-align:left;cursor:pointer;transition:background .2s}
.sec-head:hover{background:rgba(255,255,255,.03)}
.sec-head:focus-visible{outline-offset:-2px}
.sec-head .chevron{flex:none;width:7px;height:7px;margin-right:3px;border-right:1.5px solid var(--ws-faint);border-bottom:1.5px solid var(--ws-faint);transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.sec-head.open .chevron{transform:translateY(2px) rotate(-135deg)}
.sec-body{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility .3s}
.sec-body.open{grid-template-rows:1fr;visibility:visible}
.sec-clip{min-height:0;overflow:hidden}
.sec-body-inner{padding:2px 22px 20px}

.stats-grid{display:grid;grid-template-columns:1fr 1fr}
.stat-card{padding:12px 0 13px}
.stat-card:nth-child(odd){padding-right:18px;border-right:1px solid var(--ws-line)}
.stat-card:nth-child(even){padding-left:18px}
.stat-card:nth-child(-n+2){padding-top:0;border-bottom:1px solid var(--ws-line)}
.stat-card:nth-last-child(-n+2){padding-bottom:0}
.stat-card .val{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.15;color:#fff}
.stat-card .val small{font-size:13px;font-weight:500;color:var(--ws-muted)}
.stat-card .lbl{margin-top:3px;font-size:12px;color:var(--ws-faint)}

.timeline{position:relative;display:grid;padding-left:24px}
.timeline::before{content:"";position:absolute;left:5px;top:16px;bottom:16px;width:1px;background:var(--ws-line-strong)}
.tl-item{position:relative;display:block;width:calc(100% + 16px);margin:0 -8px;padding:8px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer;transition:background .2s}
.tl-item:hover{background:rgba(255,255,255,.045)}
.tl-item:active{background:rgba(255,255,255,.07)}
.tl-dot{position:absolute;left:-21px;top:13px;width:11px;height:11px;border:2px solid var(--ws-surface);border-radius:50%;background:var(--ws-faint)}
.tl-dot.origin,.tl-dot.dest{background:#fff}
.tl-dot.corridor{background:var(--cx-city)}
.tl-dot.port{background:var(--cx-sea)}
.tl-dot.hub{background:var(--ws-gold);box-shadow:0 0 0 3px rgba(198,164,109,.22)}
.tl-name{display:block;font-size:13.5px;font-weight:600;color:var(--ws-text)}
.tl-role{display:block;margin-top:1px;font-size:12px;line-height:1.45;color:var(--ws-faint)}

.info-card{animation:cxCardIn .3s ease}
@keyframes cxCardIn{from{opacity:0;transform:translateY(6px)}}
.info-badge,.seg-type-badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;padding:3px 9px;border:1px solid var(--ws-line-strong);border-radius:6px;font-size:12px;font-weight:500;color:var(--ws-muted)}
.info-badge .bdot{width:7px;height:7px;border-radius:50%;background:#fff}
.info-badge.corridor .bdot{background:var(--cx-city)}
.info-badge.port .bdot{background:var(--cx-sea)}
.info-badge.hub .bdot{background:var(--ws-gold)}
.info-badge.air .bdot{background:var(--cx-air)}
.seg-type-badge{border-color:rgba(198,164,109,.4);color:#DCC08C}
.info-title,.transport-info .ti-name{font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:#fff}
.info-desc{margin:6px 0 12px;font-size:13.5px;line-height:1.62;color:var(--ws-muted)}
.transport-info .ti-route{margin:4px 0 12px;font-size:13px;font-weight:600;color:#DCC08C}
.detail-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:9px 0;border-top:1px solid var(--ws-line)}
.detail-row .dlabel{font-size:12px;line-height:1.55;color:var(--ws-faint)}
.detail-row .dval{font-size:13px;line-height:1.55;color:var(--ws-text)}
.cx-sub{margin:18px 0 8px;font-size:12px;font-weight:600;color:var(--ws-muted)}
.cx-linkrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:calc(100% + 16px);margin:0 -8px;padding:8px;border:0;border-radius:8px;background:none;font-size:13px;text-align:left;cursor:pointer;transition:background .2s}
.cx-linkrow:hover{background:rgba(255,255,255,.045)}
.cx-linkrow b{font-weight:600;color:var(--ws-text)}
.cx-linkrow span{flex:none;font-size:12px;color:var(--ws-faint)}
.seg-from-to{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.seg-city{font-size:17px;font-weight:700;color:#fff}
.seg-arrow{font-size:16px;color:var(--ws-gold)}
.cx-jump{display:flex;gap:8px;margin-top:14px}
.cx-jump .ws-btn{flex:1;justify-content:center;min-width:0}

.cmp-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cmp-table th{padding:0 8px 8px 0;border-bottom:1px solid var(--ws-line-strong);font-size:12px;font-weight:500;color:var(--ws-faint);text-align:left;white-space:nowrap}
.cmp-table td{padding:9px 8px 9px 0;border-bottom:1px solid var(--ws-line);color:var(--ws-muted);white-space:nowrap}
.cmp-table tr:last-child td{border-bottom:0}
.cmp-table th:last-child,.cmp-table td:last-child{padding-right:0}
.cmp-table td:first-child{font-weight:600;color:var(--ws-text)}
.cmp-table tr.hl td{color:#fff}
.cmp-table tr.hl td:first-child{color:#DCC08C}
.cmp-table .risk-low{color:var(--cx-city)}
.cmp-table .risk-med{color:#DCC08C}
.cmp-table .risk-high{color:var(--cx-risk-high)}

.legend-group+.legend-group{margin-top:14px}
.legend-row{display:flex;flex-wrap:wrap;gap:8px 16px}
.legend-item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ws-muted)}
.legend-dot{flex:none;width:9px;height:9px;border-radius:50%}
.legend-line{flex:none;width:20px;height:0;border-top:2px solid currentColor}
.legend-line.is-dashed{border-top-style:dashed}
.legend-mark{flex:none;width:0;height:0;border:5px solid transparent;border-left:9px solid currentColor;border-right:0}
.legend-group .cx-sub{margin-top:0}
.legend-dot.is-hub{background:var(--ws-gold)}
.legend-dot.is-port{background:var(--cx-sea)}
.legend-dot.is-city{background:var(--cx-city)}
.legend-dot.is-end{background:#fff}
.legend-line.is-rail{color:var(--cx-rail)}
.legend-line.is-sea,.legend-mark.is-sea{color:var(--cx-sea)}
.legend-mark.is-air{color:var(--cx-air)}

/* ── Narrow desktop: the data cards move under the layer switches ── */
@media(max-width:1180px){
  .cx-stack{top:66px}
  .cx-status{max-width:calc(100% - 236px)}
  .cx-status .is-long{display:none}
  .cx-status .is-short{display:inline}
}

/* ── Phone and tablet: the panel becomes a sheet under the map ── */
@media(max-width:900px){
  .cx-bar{height:52px;padding:0 10px 0 6px;gap:8px}
  .cx-bar-left{gap:6px;flex:1}
  .cx-back{width:36px;padding:0;justify-content:center}
  .cx-back span,.cx-bar-right{display:none}
  .cx-bar .ws-tools{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
  .cx-bar .ws-tools::-webkit-scrollbar{display:none}
  .cx-bar .ws-tools a{padding:7px 11px}

  .cx-app{flex-direction:column}
  .globe-wrap{flex:1;min-height:0}
  .panel{position:relative;z-index:70;width:100%;height:46dvh;margin-top:-14px;border-left:0;border-top:1px solid var(--ws-line-strong);border-radius:16px 16px 0 0;box-shadow:0 -12px 32px rgba(4,9,18,.45);transition:height .28s ease}
  .panel.collapsed{height:66px}
  .panel-header{padding:22px 54px 13px 18px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
  .panel-header::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--ws-line-strong)}
  .panel-header h1{margin-top:0;font-size:19px}
  .cx-eyebrow,.panel.collapsed .panel-header p{display:none}
  .panel-header p{margin-top:3px;font-size:12.5px}
  .cx-sheet-toggle{position:absolute;top:18px;right:12px;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--ws-line-strong);border-radius:10px;background:rgba(255,255,255,.04);cursor:pointer}
  .cx-sheet-toggle::before{content:"";width:8px;height:8px;border-right:1.5px solid var(--ws-muted);border-bottom:1.5px solid var(--ws-muted);transform:translateY(-2px) rotate(45deg);transition:transform .25s}
  .panel.collapsed .cx-sheet-toggle::before{transform:translateY(2px) rotate(-135deg)}
  .sec-head{padding:14px 18px}
  .sec-body-inner{padding:2px 18px 18px}

  .cx-layers{top:10px;left:10px;gap:2px;max-width:calc(100% - 20px)}
  .cx-layers-label{display:none}
  .layer-btn{height:34px;gap:6px;padding:0 8px 0 6px;font-size:12px}
  .layer-btn::before{width:14px;height:14px}
  .cx-status{top:60px;left:10px;max-width:calc(100% - 68px)}
  .cx-status .is-long{display:none}
  .cx-status .is-short{display:inline}
  .cx-zoom{top:60px;right:10px;bottom:auto}

  /* Data cards: one scrollable row above the sheet instead of four corners */
  .cx-overlays{position:absolute;left:0;right:0;bottom:24px;z-index:50;display:flex;gap:8px;padding:0 10px;overflow-x:auto;scrollbar-width:none;pointer-events:none}
  .cx-overlays::-webkit-scrollbar{display:none}
  .cx-stack{display:contents}
  .data-overlay{position:static;flex:none;display:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none}
  .data-overlay.visible{display:block;pointer-events:auto}
  .do-val{font-size:19px}
  .do-bars{display:none}
}
@media(max-width:768px){
  /* Signed-in visitors get the site's bottom tab bar on phones. */
  body.has-tabbar{padding-bottom:0}
  body.has-tabbar .cx{height:calc(100vh - 62px - env(safe-area-inset-bottom));height:calc(100dvh - 62px - env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .do-ticker-inner,.live-dot::before,.info-card{animation:none}
  .do-ticker-inner{padding-left:0;white-space:normal}
  .do-ticker{white-space:normal}
  .do-ticker-inner span{display:block;margin:0 0 3px}
  .sec-body,.panel{transition:none}
}