/* Desktop route overlay: compact site navigation and centered route credit. */
.mock-site-menu-toggle{display:none;place-items:center;flex:none;width:30px;height:30px;padding:3px;border:1px solid var(--vz-line);border-radius:7px;background:var(--vz-card);color:var(--vz-blue);cursor:pointer}
.mock-site-menu-toggle svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mock-site-menu-toggle:hover{background:var(--vz-hover)}
.mock-site-menu-toggle:focus-visible,.mock-site-rail :is(a,button):focus-visible,.mock-site-menu button:focus-visible,.mock-site-menu a:focus-visible{outline:2px solid var(--vz-blue);outline-offset:2px}
.mock-site-rail{position:absolute;z-index:25;inset:0 auto 0 0;display:grid;grid-auto-rows:max-content;align-content:start;justify-items:center;gap:2px;width:35px;padding:max(calc(15.4vh + 12px),134px) 2px 4px;border:1px solid var(--vz-line);border-left:0;border-radius:0 0 10px 0;background:var(--vz-card);box-shadow:0 3px 12px #102a445c;color:var(--vz-copy)}
.mock-site-rail :is(a,button){display:grid;place-items:center;width:29px;height:31px;padding:3px;border:0;border-radius:7px;background:transparent;color:inherit;cursor:pointer;text-decoration:none}
.mock-site-rail :is(a,button):hover{background:var(--vz-hover)}
.mock-site-rail a.is-current{background:var(--vz-selection);color:var(--vz-current)}
.mock-site-rail svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mock-site-rail button svg{stroke-width:2}
.mock-site-rail img{display:block;width:24px;height:24px;object-fit:contain}
.mock-panel-heading--header{gap:7px;padding-left:9px}
.mock-crumbs{gap:7px;font-size:15px;line-height:1.15}
.mock-crumb-separator{font-size:17px;font-weight:500;line-height:1}
.mock-site-menu[popover]{position:fixed;inset:54px auto auto 12px;box-sizing:border-box;width:216px;max-height:calc(100vh - 66px);margin:0;padding:10px;border:1px solid var(--vz-line);border-radius:11px;background:var(--vz-card);box-shadow:var(--vz-shadow-popup);color:var(--vz-copy);font:600 14px/1.3 var(--vz-font-body);overflow-y:auto}
.mock-site-menu-head{display:flex;align-items:center;gap:5px;margin:0 0 6px;padding:0 0 7px;border-bottom:1px solid var(--vz-line);color:var(--vz-muted);font-size:11px;font-weight:500}
.mock-site-menu-head a{flex:none;padding:0}
.mock-site-menu-head img{display:block;width:66px;height:54px;object-fit:contain}
.mock-site-menu-head span{flex:1;min-width:0}
.mock-site-menu-head button{align-self:flex-start;width:25px;height:25px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--vz-muted);font:24px/1 Arial,sans-serif;cursor:pointer}
.mock-site-menu>a{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 9px;border-radius:9px;color:inherit;text-decoration:none}
.mock-site-menu>a:hover{background:var(--vz-hover)}
.mock-site-menu>a.is-current{background:var(--vz-selection);color:var(--vz-current)}
.mock-site-menu>a svg{display:block;flex:none;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-dark .mock-site-menu-toggle{border-color:var(--vz-line);background:var(--vz-card);color:var(--vz-blue)}
.theme-dark .mock-site-menu-toggle:hover{background:var(--vz-selection)}
.theme-dark .mock-site-rail{border-color:var(--vz-line);background:var(--vz-card);color:var(--vz-copy);box-shadow:0 3px 12px #0009}
.theme-dark .mock-site-rail :is(a,button):hover{background:var(--vz-hover)}
.theme-dark .mock-site-rail a.is-current{background:var(--vz-selection);color:var(--vz-current)}
.theme-dark .mock-site-menu[popover]{border-color:var(--vz-line);background:var(--vz-card);color:var(--vz-copy);box-shadow:var(--vz-shadow-popup)}
.theme-dark .mock-site-menu-head{border-color:var(--vz-line);color:var(--vz-muted)}
.theme-dark .mock-site-menu-head button{color:var(--vz-muted)}
.theme-dark .mock-site-menu>a:hover{background:var(--vz-hover)}
.theme-dark .mock-site-menu>a.is-current{background:var(--vz-selection);color:var(--vz-current)}
@media(min-width:1230px){
  .mock-explorer .mock-panel--header{left:calc(35px + var(--route-gap))}
  .mock-explorer .mock-panel--description,
  .mock-explorer .mock-panel--related{left:calc(35px + var(--route-gap))!important}
  .mock-explorer .mock-panel--credit,
  .mock-explorer .mock-panel--credit.mock-panel.is-collapsed[data-fold="down"]{left:50%!important;right:auto!important;top:0!important;bottom:auto!important;width:346px;transform:translateX(-50%)}
}
@media(min-width:1230px) and (max-width:1533px){
  .mock-explorer .mock-panel--header{width:min(531px,calc(50vw - 208px - var(--route-gap) - var(--route-gap)))}
  .mock-panel--header .mock-header-content{gap:9px;padding-left:11px;padding-right:11px}
  .mock-panel--header .mock-header-cover{width:clamp(66px,calc(20vw - 202px),86px)}
  .mock-panel--header .mock-header-content h1{font-size:clamp(28px,calc(8vw - 83px),32px)}
  .mock-panel--header .mock-gpx{width:108px}
}
@media(max-width:1229px){
  .mock-site-rail{display:none}
  .mock-site-menu-toggle{display:grid}
  .mock-site-menu[popover]{inset:56px auto auto 12px}
}

/* The long Asphalt 222 name must fit beside the centered route-credit pill. */
@media(min-width:1230px){
  .mock-route-asphalt .mock-panel--header{width:min(600px,calc(50vw - 208px - var(--route-gap) - var(--route-gap)))}
  .mock-route-asphalt .mock-panel--header .mock-header-cover{display:none}
  .mock-route-asphalt .mock-panel--header .mock-header-content h1{min-width:0;font-size:clamp(20px,calc(2.4vw - 10px),30px);letter-spacing:-.8px}
  .mock-route-asphalt .mock-panel--header .mock-gpx{width:150px;gap:5px;font-size:15px;white-space:nowrap}
  .mock-route-asphalt .mock-panel--header .mock-gpx svg{width:19px;height:19px;flex:none}
}
@media(min-width:1230px) and (max-width:1533px){
  .mock-route-asphalt .mock-panel--header .mock-gpx{width:136px;gap:3px;font-size:13px}
  .mock-route-asphalt .mock-panel--header .mock-star{font-size:clamp(25px,2.1vw,32px)}
}

.mock-route-memoriz .mock-gpx{width:auto;min-width:102px;padding-inline:10px;gap:5px;font-size:15px;white-space:nowrap}
.mock-route-memoriz .mock-gpx svg{width:19px;height:19px;flex:none}
@media(min-width:1230px) and (max-width:1533px){
  .mock-route-memoriz .mock-panel--header .mock-gpx{width:auto;min-width:96px;gap:3px;font-size:13px}
  .mock-route-memoriz .mock-panel--header .mock-header-content{gap:6px}
}
@media(min-width:1230px) and (max-width:1270px){
  .mock-route-memoriz .mock-panel--header .mock-header-content h1{font-size:31px}
  .mock-route-memoriz .mock-panel--header .mock-star{font-size:36px}
}
@media(min-width:1230px){
  .mock-route-memoriz .mock-panel--header{width:346px}
  .mock-route-asphalt .mock-panel--header{width:min(515px,calc(50vw - 208px - var(--route-gap) - var(--route-gap)))}
}
.mock-credit-topic{margin:5px 0 10px;font-weight:700}
.mock-credit-topic a{color:var(--vz-blue);text-underline-offset:2px}
.theme-dark .mock-credit-topic a{color:var(--vz-blue)}