/* Interactive annotated X-ray. Works with styles.css (colours, .btn, .wrap, .eyebrow). */
.xr{background:linear-gradient(135deg,#1d3f71,#14305a);color:#fff;padding:clamp(52px,6vw,88px) 0;position:relative;overflow:hidden}
.xr .eyebrow{color:#8fdcec}
.xr h2.title{color:#fff}
.xr p.sub{color:#c9d6e3;max-width:700px;margin-bottom:30px}
.xr-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(24px,3.2vw,60px);align-items:start}

/* toolbar */
.xr-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.xr-tool{font:inherit;font-size:.9rem;font-weight:500;letter-spacing:.02em;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.32);
  padding:.6rem 1rem;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:.65rem;border-radius:999px;transition:background .2s,border-color .2s}
.xr-tool:hover{background:rgba(255,255,255,.2)}
.xr-tool .sw{width:2.1rem;height:1.15rem;border-radius:999px;background:rgba(255,255,255,.28);position:relative;flex:none;transition:background .2s}
.xr-tool .sw::after{content:"";position:absolute;top:.15rem;left:.15rem;width:.85rem;height:.85rem;border-radius:50%;background:#fff;transition:transform .2s}
.xr-tool[aria-checked="true"]{background:rgba(38,170,195,.28);border-color:#8fdcec}
.xr-tool[aria-checked="true"] .sw{background:var(--teal)}
.xr-tool[aria-checked="true"] .sw::after{transform:translateX(.95rem)}
.xr-tools .btn{padding:.8rem 1.4rem .8rem 1.5rem;min-height:44px;font-size:.9rem;margin-left:auto}
.xr-tools .btn-teal{color:#fff}

/* the image stage */
.xr-frame{position:relative;border-radius:var(--radius);box-shadow:0 22px 60px rgba(0,0,0,.35);background:#111;line-height:0;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.xr-frame img{width:100%;height:auto;border-radius:var(--radius);display:block;pointer-events:none}
.xr.mag-on .xr-frame{cursor:crosshair;touch-action:none}
.xr-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.xr-lines line{stroke:rgba(255,255,255,.75);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:3 3;transition:stroke .2s}
.xr-lines line.on{stroke:var(--teal);stroke-dasharray:none;stroke-width:2.2}
.xr-dot{position:absolute;left:var(--x);top:var(--y);width:.7rem;height:.7rem;margin:-.35rem 0 0 -.35rem;border-radius:50%;border:2px solid #fff;background:rgba(38,170,195,.35);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.35);transition:background .2s,transform .2s}
.xr-dot.on{background:var(--teal);transform:scale(1.35)}

/* numbered hotspots: 2.75rem hit area, smaller visible disc */
.xr-pt{position:absolute;left:var(--x);top:var(--y);width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;padding:0;border:0;background:none;cursor:pointer;font:inherit;line-height:1;color:#fff;z-index:2}
.xr-num{position:absolute;left:50%;top:50%;width:1.7rem;height:1.7rem;margin:-.85rem 0 0 -.85rem;border-radius:50%;background:var(--navy);border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;box-shadow:0 2px 8px rgba(0,0,0,.45);transition:background .2s,transform .2s}
.xr-pt:hover .xr-num{background:var(--navy-2);transform:scale(1.12)}
.xr-pt[aria-current="true"] .xr-num{background:var(--teal);transform:scale(1.18)}
.xr-pt::after{content:"";position:absolute;left:50%;top:50%;width:1.7rem;height:1.7rem;margin:-.85rem 0 0 -.85rem;border-radius:50%;border:2px solid #8fdcec;opacity:0;pointer-events:none}
.xr:not(.touched) .xr-pt::after{animation:xr-pulse 2.4s ease-out infinite}
.xr-pt:nth-of-type(2)::after{animation-delay:.4s}.xr-pt:nth-of-type(3)::after{animation-delay:.8s}.xr-pt:nth-of-type(4)::after{animation-delay:1.2s}
@keyframes xr-pulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.3);opacity:0}}
.xr-pt:focus-visible{outline:none}
.xr-pt:focus-visible .xr-num{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px var(--navy-2)}
/* name chips, shown by "Show all labels" */
.xr-tag{position:absolute;white-space:nowrap;background:rgba(255,255,255,.96);color:var(--navy);font-size:.78rem;font-weight:600;letter-spacing:.01em;line-height:1;padding:.4rem .6rem;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none}
.xr.labels-on .xr-tag{opacity:1;visibility:visible}
.xr-pt[data-side="t"] .xr-tag{left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:-.35rem}
.xr-pt[data-side="l"] .xr-tag{right:100%;top:50%;transform:translateY(-50%);margin-right:-.45rem}
.xr-pt[data-side="r"] .xr-tag{left:100%;top:50%;transform:translateY(-50%);margin-left:-.45rem}

/* magnifier lens */
.xr-lens{position:absolute;left:0;top:0;width:9.5rem;height:9.5rem;border-radius:50%;border:3px solid #fff;box-shadow:0 8px 28px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.25);background-repeat:no-repeat;background-color:#111;pointer-events:none;opacity:0;visibility:hidden;z-index:4;transition:opacity .12s}
.xr-lens.show{opacity:1;visibility:visible}

.xr-note{margin:16px 0 0;font-size:.85rem;line-height:1.55;color:#c9d6e3;max-width:760px}
.xr-note b{color:#fff;font-weight:600}

/* explanation panel */
.xr-panel{background:#fff;color:var(--ink);border-radius:var(--radius);padding:clamp(20px,2.2vw,32px);box-shadow:0 18px 50px rgba(0,0,0,.28);border-top:4px solid var(--teal);min-height:19rem;display:flex;flex-direction:column}
.xr-item{flex:1}
.xr-item[hidden]{display:none}
.xr-step{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d);font-weight:700;margin:0 0 8px}
.xr-item h3{margin:0 0 10px;font-weight:400;font-size:1.4rem;line-height:1.25;color:var(--navy)}
.xr-item p{margin:0 0 12px;font-size:.98rem;line-height:1.6;color:#2c3e50}
.xr-item p.why{border-left:3px solid var(--teal);padding-left:12px;color:var(--muted)}
.xr-item p:last-child{margin-bottom:0}
.xr-nav{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.xr-nav button{font:inherit;font-size:.9rem;font-weight:600;color:var(--navy);background:var(--soft);border:1px solid var(--line);min-height:44px;padding:.55rem 1.1rem;cursor:pointer;border-radius:999px;transition:background .2s,color .2s}
.xr-nav button:hover:not(:disabled){background:var(--navy);color:#fff;border-color:var(--navy)}
.xr-nav button:disabled{opacity:.4;cursor:default}
.xr-nav .count{margin-left:auto;font-size:.85rem;color:var(--muted)}
.xr-tool:focus-visible,.xr-nav button:focus-visible,.xr-tools .btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.xr-tools .btn:focus-visible{outline-color:#fff}

@media (max-width:980px){
  .xr-grid{grid-template-columns:1fr}
  .xr-panel{min-height:0}
  .xr-tools .btn{margin-left:0}
}
@media (max-width:560px){
  .xr-tool{font-size:.85rem;padding:.55rem .85rem}
  .xr-num{width:1.55rem;height:1.55rem;margin:-.775rem 0 0 -.775rem;font-size:.78rem}
  .xr-pt::after{width:1.55rem;height:1.55rem;margin:-.775rem 0 0 -.775rem}
  .xr-tag{font-size:.7rem;padding:.32rem .45rem}
  .xr-lens{width:7.5rem;height:7.5rem}
}
@media (prefers-reduced-motion:reduce){
  .xr-pt::after{animation:none!important;opacity:0}
  .xr *{transition:none!important}
}