/* CAE network map — styles for index.html. Colours, type and motion come from tokens.css.

   SIZING SYSTEM
   The kiosk is portrait (9:16) but the page must also work on a landscape laptop. All layout sizes are
   multiples of --u, a "portrait unit": 1u = 1% of the width of a 9:16 frame that fits inside the viewport
   (min(1vw, .5625vh)). Portrait screens get 1u = 1vw; on a landscape screen the frame is height-bound, so
   1u = .5625vh and the UI keeps the same proportions as on the kiosk. Pixel minimums (max(…px, …)) keep
   text and touch targets usable on small laptops.
   --m is the page margin; --panel-pad is the side panel's horizontal padding (cqw = % of the panel width). */

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{
  --u:min(1vw,.5625vh);
  --m:max(20px,calc(5.3*var(--u)));
  --panel-pad:5.3cqw;
  --panel-hairline:var(--hairline) solid var(--alpha-dark-45);
}
html,body{height:100%;background:var(--color-dark-blue);color:var(--color-white);font-family:var(--font-family);line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:var(--color-lime);text-decoration:none}a:hover{color:var(--color-white)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--color-lime);outline-offset:2px}
.panel :focus-visible{outline-color:var(--color-bright-blue)}
#app{position:fixed;inset:0;overflow:hidden}

/* ---------- Map canvas (d3) ---------- */
#map{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#map:active{cursor:grabbing}
.land{fill:var(--color-tint);stroke:var(--color-bright-blue);stroke-width:.8;stroke-opacity:.6;vector-effect:non-scaling-stroke}
.graticule{fill:none;stroke:var(--color-bright-blue);stroke-opacity:.16;stroke-width:.8;vector-effect:non-scaling-stroke}

/* Site dots: halo (pulsing ring, decorative) · dot (visible) · hitarea (invisible, the only interactive circle) */
.site{cursor:pointer;outline:none}
.site circle.dot{fill:var(--color-white);transition:fill var(--dur-fast),opacity var(--dur-base);pointer-events:none}
.site circle.hitarea{fill:transparent;pointer-events:all}
.site circle.halo{fill:var(--color-white);fill-opacity:.14;stroke:var(--color-white);stroke-opacity:.9;stroke-width:2;vector-effect:non-scaling-stroke;animation:pulse 2.4s var(--ease-standard) infinite;transform-origin:0 0;transition:opacity var(--dur-base);pointer-events:none}
@keyframes pulse{0%{transform:scale(.6);opacity:0}20%{opacity:1}100%{transform:scale(2.4);opacity:0}}
.site:hover circle.dot,.site:focus-visible circle.dot,.site.active circle.dot{fill:var(--color-bright-blue)}
.site:focus-visible circle.hitarea{stroke:var(--color-lime);stroke-width:2;vector-effect:non-scaling-stroke}
.site.active circle.halo{animation-duration:3.2s}
/* Manufacturer filter: matching sites turn lime, the others fade and pulse slower */
.site.hit circle.dot,.site.hit circle.halo{fill:var(--color-lime);stroke:var(--color-lime)}
.site.dim circle.dot{opacity:.3}
.site.dim circle.halo{animation:pulse-dim 4.2s var(--ease-standard) infinite;stroke-opacity:.35}
@keyframes pulse-dim{0%{transform:scale(.6);opacity:0}20%{opacity:1}100%{transform:scale(1.5);opacity:0}}

/* ---------- Header (logo, quiz button, headline, helper lines) ---------- */
header{position:absolute;left:0;right:0;top:0;padding:calc(1.6*var(--m)) var(--m) 0;pointer-events:none;background:var(--color-dark-blue)}
header:after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(8*var(--u));background:linear-gradient(var(--color-dark-blue),transparent)}
header>*{pointer-events:auto}
header h1,header .legend{pointer-events:none} /* plain text: dots framed next to it stay tappable */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.brand img{height:max(32px,calc(7.7*var(--u)));width:auto;display:block}
h1{font-weight:var(--weight-light);font-size:max(34px,calc(6.3*var(--u)));line-height:1.12;letter-spacing:-.01em;margin-top:calc(5.4*var(--u));width:11.5em;max-width:100%;text-wrap:balance}
.legend{font-size:max(15px,calc(1.75*var(--u)));line-height:1.55;margin-top:calc(2.6*var(--u));padding-bottom:calc(2*var(--u))}
.quiz-cta{background:var(--color-bright-blue);color:var(--color-white);padding:0 max(20px,calc(2.2*var(--u)));font-size:max(15px,calc(1.7*var(--u)));min-height:max(var(--tap-min),calc(5*var(--u)));display:inline-flex;align-items:center;border-radius:var(--radius-pill);transition:background var(--dur-fast);white-space:nowrap}
.quiz-cta:hover{background:var(--color-press);color:var(--color-white)}

/* ---------- Bottom-left block: location count + manufacturer filter ---------- */
.bigstat{position:absolute;left:var(--m);right:var(--m);bottom:calc(var(--m) + 11*var(--u));color:var(--color-bright-blue);pointer-events:none;transition:opacity var(--dur-base)}
.bigstat b{display:block;font-weight:var(--weight-light);font-size:max(72px,min(calc(18.5*var(--u)),16vh));line-height:.9;letter-spacing:-.03em}
.bigstat>span{display:block;font-weight:var(--weight-light);font-size:max(20px,min(calc(3.4*var(--u)),3.2vh));line-height:1.1;margin-top:calc(1.2*var(--u));white-space:nowrap}
.oemfilter{display:flex;flex-direction:column;gap:max(8px,calc(1*var(--u)));margin-top:calc(2.4*var(--u));font-size:max(14px,calc(1.6*var(--u)));pointer-events:auto}
.oemfilter>span{color:var(--color-white)}
/* width in chip-font ems so the chips always wrap onto two rows */
.chips{display:flex;flex-wrap:wrap;gap:max(6px,calc(.7*var(--u)));width:min(100%,41em);font-size:max(12px,calc(1.3*var(--u)))}
.chips button{font-size:inherit;line-height:1;color:var(--color-white);background:var(--alpha-dark-45);border:var(--hairline) solid var(--alpha-white-55);padding:max(6px,calc(.7*var(--u))) max(10px,calc(1.1*var(--u)));min-height:30px;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);white-space:nowrap}
.chips button:hover{border-color:var(--color-white);background:var(--alpha-dark-65)}
.chips button.on{background:var(--color-lime);border-color:var(--color-lime);color:var(--color-dark-blue)}
.chips button.all.on{background:var(--color-white);border-color:var(--color-white);color:var(--color-dark-blue)}

/* ---------- Region tabs ---------- */
.regions{position:absolute;left:var(--m);right:var(--m);bottom:calc(var(--m) + 4*var(--u));display:grid;grid-template-columns:.6fr 1fr 1fr 1fr}
.regions button{text-align:left;padding:max(10px,calc(1.2*var(--u))) calc(2.1*var(--u)) max(10px,calc(1.1*var(--u))) 0;font-size:max(14px,calc(1.95*var(--u)));color:var(--color-white);border-bottom:max(4px,calc(.7*var(--u))) solid var(--color-white);white-space:nowrap;transition:border-color var(--dur-base)}
.regions button+button{padding-left:calc(2.1*var(--u))}
.regions button.on{border-bottom-color:var(--color-bright-blue)}

/* ---------- Side panel (opens when a dot is tapped) ---------- */
.panel{position:absolute;top:0;right:0;bottom:0;width:min(100%,max(520px,46vw));background:var(--color-surface);color:var(--color-dark-blue);transform:translateX(100%);transition:transform var(--dur-base) var(--ease-standard);overflow-y:auto;container-type:inline-size;z-index:10}
@media (orientation:portrait){.panel{width:min(100%,max(520px,64vw))}}
@media (max-width:600px){.panel{width:100%}}
.panel.open{transform:none}
.panel .hero{background:var(--color-bright-blue);color:var(--color-white);padding:max(32px,10.5cqw) var(--panel-pad) max(28px,8cqw);position:relative}
.panel .hero img{height:max(28px,7.6cqw);width:auto;display:block}
.panel .hero .simcom{display:flex;align-items:baseline;gap:.3em;line-height:1}
.panel .hero .simcom b{font-weight:var(--weight-bold);font-size:max(40px,12.5cqw);letter-spacing:-.025em}
.panel .hero .simcom span{font-size:max(16px,4.4cqw)}
.panel .hero h2{font-weight:var(--weight-light);font-size:max(28px,8.4cqw);line-height:1.05;letter-spacing:-.015em;margin-top:max(24px,6.5cqw)}
.panel .hero p{font-size:max(16px,4.5cqw);margin-top:max(6px,1.8cqw)}
.panel .hero .herotag{margin-top:max(20px,6cqw);padding-top:max(14px,4cqw);border-top:var(--hairline) solid var(--alpha-white-35);font-size:max(16px,4.2cqw);line-height:1.25;max-width:24em;text-wrap:pretty}
.panel .hero .herotag:empty{display:none}
.panel .close{position:absolute;top:max(16px,4cqw);right:max(16px,4cqw);width:max(var(--tap-min),8cqw);height:max(var(--tap-min),8cqw);color:var(--color-white);border-radius:var(--radius-round);display:grid;place-items:center;transition:background var(--dur-fast)}
.panel .close:hover{background:var(--color-press)}
.panel .close svg{width:40%;height:40%}
.panel .photo{position:relative;aspect-ratio:622/510;background:var(--color-tint);overflow:visible}
.panel .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.panel .photo .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--alpha-white-70);font-size:14px;padding:24px;text-align:center}
.panel .down{position:absolute;left:50%;transform:translateX(-50%);bottom:max(16px,4cqw);width:max(var(--tap-min),9cqw);height:max(var(--tap-min),9cqw);background:var(--color-dark-blue);color:var(--color-white);border-radius:var(--radius-round);display:grid;place-items:center;transition:background var(--dur-fast),opacity var(--dur-base);z-index:1}
.panel .down.gone{opacity:0;pointer-events:none}
.panel .down:hover{background:var(--color-press)}
.panel .down svg{width:52%;height:52%}
/* Blue block: facts + amenities */
.panel .facts{background:var(--color-bright-blue);color:var(--color-white);padding:max(32px,11cqw) var(--panel-pad) max(28px,6cqw);display:flex;flex-direction:column;gap:max(16px,4cqw)}
.panel .facts p{font-size:max(18px,4.5cqw);line-height:1.2;max-width:22em;text-wrap:pretty}
#d-factlist{display:flex;flex-direction:column;gap:max(16px,4cqw)}#d-factlist:empty{display:none}
.amen h4{font-weight:var(--weight-bold);font-size:max(12px,2.4cqw);letter-spacing:.08em;text-transform:uppercase;margin-bottom:max(10px,2.4cqw)}
.amen ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:max(6px,1.4cqw) max(16px,3cqw)}
.amen li{font-size:max(14px,3.1cqw);line-height:1.3;padding-left:1.1em;position:relative}
.amen li:before{content:"";position:absolute;left:0;top:.55em;width:.45em;height:.45em;background:var(--color-lime)}
.amen:empty{display:none}
/* Photo gallery (photos[1…]) */
.gallerywrap{position:relative;background:var(--color-surface)}
.gallerywrap[hidden]{display:none}
.gallery{display:flex;gap:max(8px,1.6cqw);overflow-x:auto;scroll-snap-type:x mandatory;padding:max(16px,4cqw) var(--panel-pad);scroll-padding-inline:var(--panel-pad);scrollbar-width:none;cursor:grab;user-select:none}
.gallery.dragging{cursor:grabbing;scroll-snap-type:none}
.gallery::-webkit-scrollbar{display:none}
.gallery picture{flex:0 0 78%;width:78%;min-width:0;scroll-snap-align:start;display:block}
.gallery img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--color-tint);pointer-events:none}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:max(36px,6.4cqw);height:max(36px,6.4cqw);border-radius:var(--radius-round);background:var(--color-dark-blue);color:var(--color-white);display:grid;place-items:center;transition:background var(--dur-fast),opacity var(--dur-fast);z-index:1}
.gnav:hover{background:var(--color-press)}
.gnav:disabled{opacity:.25;cursor:default}
.gnav.prev{left:max(8px,1.6cqw)}.gnav.next{right:max(8px,1.6cqw)}
.gnav svg{width:44%;height:44%}
/* Simulators by manufacturer */
.panel .oemhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:max(40px,9.5cqw) var(--panel-pad) max(32px,7.5cqw);color:var(--color-bright-blue)}
.panel .oemhead h3{font-weight:var(--weight-light);font-size:max(34px,10cqw);line-height:1.02;letter-spacing:-.01em}
.panel .oemhead span{font-weight:var(--weight-light);font-size:max(20px,4.8cqw);line-height:1.2}
.oem{display:grid;grid-template-columns:1fr auto;gap:max(6px,1.6cqw) 16px;padding:max(16px,4.4cqw) var(--panel-pad) max(18px,4.4cqw);border-top:var(--panel-hairline)}
.oem b,.oem .n{font-weight:var(--weight-regular);font-size:max(20px,4.6cqw);line-height:1.15}
.oem p{grid-column:1/-1;font-size:max(13px,2.1cqw);line-height:1.35;max-width:36em}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;background:var(--color-dark-blue);color:var(--color-white);padding:max(14px,3.6cqw) var(--panel-pad);font-size:max(18px,4.6cqw);font-weight:var(--weight-bold)}
.sechead span{font-weight:var(--weight-regular)}
/* Training hours (bottom blue block) */
.panel .hours{background:var(--color-bright-blue);color:var(--color-white);padding:max(32px,9cqw) var(--panel-pad);display:flex;flex-direction:column;gap:max(10px,2.4cqw)}
.panel .hours[hidden]{display:none}
.panel .hours b{font-weight:var(--weight-light);font-size:max(56px,16cqw);line-height:.9;letter-spacing:-.02em}
.panel .hours span{font-weight:var(--weight-bold);font-size:max(12px,2.4cqw);letter-spacing:.08em;text-transform:uppercase}
.scrim{position:absolute;inset:0;background:var(--alpha-dark-35);opacity:0;pointer-events:none;transition:opacity var(--dur-base);z-index:9}
.scrim.open{opacity:1;pointer-events:auto}

/* ---------- Quiz overlay (iframe hosting quiz.html) ---------- */
.quiz{position:absolute;inset:0;z-index:20;background:var(--color-dark-blue);opacity:0;pointer-events:none;transition:opacity var(--dur-base)}
.quiz.open{opacity:1;pointer-events:auto}
.quiz iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--alpha-white-70);font-size:15px;pointer-events:none}

/* ---------- Responsive ---------- */
@media (max-width:560px){.regions button{font-size:13px;white-space:normal}.quiz-cta{font-size:14px}}
@media (orientation:landscape){
  header{background:none;right:auto;max-width:min(46vw,560px)}
  header:after{display:none}
  header .top{position:fixed;left:var(--m);right:var(--m);top:calc(1.6*var(--m))}
  header h1{margin-top:calc(max(32px,7.7*var(--u)) + 5.4*var(--u))}
}
/* Reduced motion: no pulsing halos, no sliding panel. Map zoom durations are shortened in js/map.js (CONFIG.motion). */
@media (prefers-reduced-motion:reduce){
  .site circle.halo{animation:none;opacity:.5}
  .panel,.scrim,.quiz,.site circle.dot,.bigstat,.regions button{transition:none}
}