/* Interference hunt: ticket, spectrum analyzer, and the parkade direction-finding map. */
.xr-hunt .xr-hunt-step { margin: 28px 0 6px; padding-top: 18px; border-top: 1px solid #1d3742; color: #e6f7fb; font: 600 15px/1.4 var(--sans); }
.xr-hunt .xr-hunt-copy { max-width: 66ch; margin: 8px 0 12px; color: #b9ced8; font: 400 14px/1.65 var(--sans); }
.xr-hunt .xr-hunt-copy em { color: #e6f7fb; font-style: normal; font-weight: 600; }

.xr-hunt-ticket { padding: 14px 16px; border: 1px solid #35505d; border-left: 3px solid #f2b56b; border-radius: 0 8px 8px 0; background: #0d2631; }
.xr-hunt-ticket p { margin: 0 0 6px; color: #cfe3ea; font: 400 14px/1.55 var(--sans); }
.xr-hunt-ticket strong { color: #e6f7fb; }
.xr-hunt-rtwp svg { display: block; width: 100%; height: auto; margin-top: 8px; }
.xr-hunt-rtwp-line { fill: none; stroke: #f2b56b; stroke-width: 2; stroke-linejoin: round; }
.xr-hunt-normal { stroke: #72e5ef; stroke-dasharray: 4 4; opacity: .6; }
.xr-hunt-tick { fill: #8fa9b6; font: 400 11px var(--mono); }

.xr-hunt-analyzer { padding: 8px; border: 1px solid #35505d; border-radius: 8px; background: #06121a; }
.xr-hunt-analyzer canvas { display: block; width: 100%; }
.xr-hunt-analyzer [data-hunt-spectrum] { height: 200px; }
.xr-hunt-analyzer [data-hunt-waterfall] { height: 120px; margin-top: 6px; border-top: 1px solid #1d3742; image-rendering: pixelated; }
.xr-hunt-analyzer canvas[hidden] { display: none; }
.xr-hunt-axis { display: flex; justify-content: space-between; margin-top: 4px; color: #8fa9b6; font: 400 11px var(--mono); }
.xr-hunt-axis span:nth-child(2) { color: #87e8a0; }

.xr-hunt-field { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(16px, 3vw, 28px); align-items: start; }
.xr-hunt-map-wrap { border: 1px solid #35505d; border-radius: 8px; background: #0a1d27; }
.xr-hunt-map { border-radius: 0 0 8px 8px; }
.xr-hunt-map svg { display: block; width: 100%; height: auto; }
.xr-hunt-wall { fill: #0c2029; stroke: #4a6977; stroke-width: 2; }
.xr-hunt-stalls path { stroke: #2b4652; stroke-width: 1.5; }
.xr-hunt-pillars rect { fill: #35505d; }
.xr-hunt-room { fill: #10262f; stroke: #35505d; }
.xr-hunt-room-label, .xr-hunt-north { fill: #8fa9b6; font: 500 11px var(--mono); letter-spacing: .06em; }
.xr-hunt-chargers rect { fill: #2b4652; stroke: #4a6977; }
.xr-hunt-chargers text { fill: #6f8a96; font: 500 10px var(--mono); }
.xr-hunt[data-solved=true] .xr-hunt-chargers rect { fill: #ff7b6b; stroke: #ffd1c7; filter: drop-shadow(0 0 6px #ff7b6b); }
.xr-hunt[data-solved=true] .xr-hunt-chargers text { fill: #ffb4a6; }
.xr-hunt-beam { fill: #72e5ef1c; stroke: #72e5ef55; }
.xr-hunt[data-overload=true] .xr-hunt-beam { fill: #ff7b6b1c; stroke: #ff7b6b66; }
.xr-hunt-line { stroke: #f2b56b; stroke-width: 2; stroke-dasharray: 6 4; }
.xr-hunt-cross { fill: none; stroke: #f2b56b; stroke-width: 2.5; }
.xr-hunt-cross[hidden] { display: none; }

/* The live reading sits right under the map, inside its card. */
.xr-hunt-meter { padding: 10px 14px 12px; border-top: 1px solid #1d3742; }
.xr-hunt-meter-bar { height: 10px; border-radius: 5px; background: #102630; overflow: hidden; }
.xr-hunt-meter-bar span { display: block; height: 100%; background: linear-gradient(90deg, #72e5ef, #f2b56b); transition: width .12s; }
.xr-hunt[data-overload=true] .xr-hunt-meter-bar span { background: #ff7b6b; }
.xr-hunt-meter p { margin: 8px 0 0; color: #b9ced8; font: 400 13px/1.5 var(--mono); }
.xr-hunt-meter strong { color: #e6f7fb; }
.xr-hunt .xr-hunt-overload { color: #ffb4a6; font-family: var(--sans); font-weight: 600; }
.xr-hunt-overload[hidden] { display: none; }

.xr-hunt-verdict { margin-top: 12px; padding: 14px 18px; border-left: 3px solid #87e8a0; border-radius: 0 8px 8px 0; background: #0d2631; color: #d9edf5; font: 400 14px/1.6 var(--sans); }
.xr-hunt-verdict[hidden], .xr-hunt [data-hunt-confirm][hidden] { display: none; }

@media (max-width: 760px) {
  .xr-hunt-field { grid-template-columns: 1fr; }
  .xr-hunt-analyzer [data-hunt-spectrum] { height: 170px; }
}

/* Free positioning and the bearing log. */
.xr-hunt-map { cursor: crosshair; touch-action: manipulation; }
.xr-hunt-map:focus-visible { outline: 2px solid #72e5ef; outline-offset: 3px; }
.xr-hunt-me { fill: #72e5ef; stroke: #dffcff; stroke-width: 2; filter: drop-shadow(0 0 6px #72e5ef); pointer-events: none; }
.xr-hunt-line-dot { fill: #f2b56b; stroke: #07151d; stroke-width: 1.5; }
.xr-hunt-line-label { fill: #07151d; font: 700 11px var(--mono); pointer-events: none; }
.xr-hunt .xr-hunt-where { margin: 0 0 4px; color: #e6f7fb; font: 500 14px/1.5 var(--sans); }
.xr-hunt-log { margin-top: 10px; }
.xr-hunt-log[hidden] { display: none; }
.xr-hunt-log ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: bearing; }
.xr-hunt-log li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border: 1px solid #35505d; border-radius: 6px; background: #0d2631; color: #cfe3ea; font: 400 12.5px/1.45 var(--sans); counter-increment: bearing; }
.xr-hunt-log li::before { content: counter(bearing); display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #f2b56b; color: #07151d; font: 700 11px var(--mono); }
.xr-hunt-log li > span { flex: 1; }
.xr-hunt-log strong { color: #e6f7fb; }
.xr-hunt-log em { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: #ff7b6b26; color: #ffb4a6; font-style: normal; font-size: 11px; }
.xr-hunt-log li.is-new { animation: xr-hunt-flash 1.2s ease-out; }
@keyframes xr-hunt-flash { from { border-color: #f2b56b; background: #f2b56b26; } }
.xr-hunt-remove { flex: none; width: 36px; height: 36px; border: 1px solid #35505d; border-radius: 6px; background: #102630; color: #b3cdd7; font: 18px/1 var(--sans); cursor: pointer; }
.xr-hunt-remove:hover { border-color: #ff7b6b; color: #ffb4a6; }

/* Aiming lives with the map: a drag handle on the beam, then the slider, nudges and reading right below. */
.xr-hunt-knob { cursor: grab; touch-action: none; }
.xr-hunt[data-aiming=true] .xr-hunt-knob { cursor: grabbing; }
.xr-hunt-knob-hit { fill: transparent; }
.xr-hunt-knob-dot { fill: #07151d; stroke: #72e5ef; stroke-width: 2.5; filter: drop-shadow(0 0 5px #72e5ef99); }
.xr-hunt-knob:hover .xr-hunt-knob-dot, .xr-hunt[data-aiming=true] .xr-hunt-knob-dot { fill: #153b47; stroke: #dffcff; }
.xr-hunt-knob-arrows { fill: none; stroke: #b3f4f8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.xr-hunt-arm { stroke: #72e5ef; stroke-width: 2; }
.xr-hunt-badge rect { fill: #07151de6; stroke: #35505d; }
.xr-hunt-badge text { fill: #e6f7fb; font: 600 16px var(--mono); }
.xr-hunt[data-overload=true] .xr-hunt-badge text { fill: #ffb4a6; }
.xr-hunt[data-overload=true] .xr-hunt-badge rect { stroke: #ff7b6b; }
.xr-hunt-scope .xr-note { margin-top: 8px; }
.xr-hunt-knob:focus { outline: none; }
.xr-hunt-knob:focus-visible .xr-hunt-knob-dot { stroke: #fff; stroke-width: 3.5; }

/* Map key, saved-bearing ghosts, and the attenuator drawn as a signal chain. */
.xr-hunt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; color: #b3cdd7; font: 500 12px/1.4 var(--sans); }
.xr-hunt-legend li { display: flex; align-items: center; gap: 7px; }
.xr-hunt-key { display: inline-block; flex: none; }
.xr-hunt-key-beam { width: 20px; height: 12px; background: #72e5ef33; border: 1px solid #72e5ef77; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.xr-hunt-key-line { width: 22px; border-top: 2px dashed #f2b56b; }
.xr-hunt-key-cross { width: 12px; height: 12px; border: 2px solid #f2b56b; border-radius: 50%; }
.xr-hunt-ghost { fill: #f2b56b12; stroke: #f2b56b30; }
.xr-hunt-ghost-reading { fill: #f2c58b; font: 600 11px var(--mono); paint-order: stroke; stroke: #0c2029; stroke-width: 3px; }

.xr-hunt-chain { position: relative; display: inline-flex; align-items: center; flex: none; min-height: 44px; margin: 0; padding: 4px 8px; border: 1px dashed #456775; border-radius: 8px; background: #07151d; color: #b3cdd7; cursor: pointer; }
.xr-hunt-chain:hover { border-color: #72e5ef; }
.xr-hunt-chain:focus-visible { outline: 2px solid #72e5ef; outline-offset: 3px; }
.xr-hunt-chain svg { display: block; width: 168px; height: auto; }
.xr-hunt-chain-yagi path { fill: none; stroke: #b3cdd7; stroke-width: 2.5; stroke-linecap: round; }
.xr-hunt-chain-coax, .xr-hunt-chain-gap { fill: none; stroke: #72e5ef; stroke-width: 3; stroke-linecap: round; }
.xr-hunt-chain-pad rect { fill: #07151d; stroke: #6f8a96; stroke-width: 1.5; stroke-dasharray: 4 4; }
.xr-hunt-chain-pad text { fill: #6f8a96; font: 700 14px var(--mono); }
.xr-hunt-chain-analyzer > rect:first-child { fill: #102630; stroke: #4a6977; }
.xr-hunt-chain-screen { fill: #06121a; }
.xr-hunt-chain-trace { fill: none; stroke: #72e5ef; stroke-width: 1.5; }
.xr-hunt-chain[aria-pressed=true] { border-style: solid; border-color: #f2b56b88; }
.xr-hunt-chain[aria-pressed=true] .xr-hunt-chain-gap { stroke: transparent; }
.xr-hunt-chain[aria-pressed=true] .xr-hunt-chain-pad rect { fill: #f2b56b; stroke: #ffd9a8; stroke-dasharray: none; }
.xr-hunt-chain[aria-pressed=true] .xr-hunt-chain-pad text { fill: #07151d; }
/* Adding or removing the pad sends out one radar blip: a ring expands off the pad and fades, and the pad pops. */
.xr-hunt-chain svg { overflow: visible; }
.xr-hunt-chain-blip { fill: none; stroke: #ffd9a8; stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.xr-hunt-chain-pad { transform-box: fill-box; transform-origin: center; }
.xr-hunt-chain.is-blip .xr-hunt-chain-blip { animation: xr-hunt-blip 1100ms cubic-bezier(.15, .6, .3, 1) both; }
.xr-hunt-chain.is-blip .xr-hunt-chain-pad { animation: xr-hunt-blip-pad 450ms cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes xr-hunt-blip { 0% { opacity: 1; transform: scale(1); } 35% { opacity: .85; } 100% { opacity: 0; transform: scale(2.1, 2.8); } }
@keyframes xr-hunt-blip-pad { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .xr-hunt-chain.is-blip .xr-hunt-chain-blip, .xr-hunt-chain.is-blip .xr-hunt-chain-pad { animation: none; } }
.xr-hunt[data-overload=true] .xr-hunt-chain-trace { stroke: #ff7b6b; }
/* The pad sits in the toolbar beside Mark; its explanation is the button's label and tooltip. */
.xr-hunt-chain-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Mark lives on the map, top-left, so marking happens where you aim. */
.xr-hunt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid #1d3742; }
.xr-hunt-mark {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 11px 20px;
  border: 1px solid #f2b56b; border-radius: 999px; background: #07151dee; color: #ffd9a8;
  font: 600 13px/1 var(--sans); cursor: pointer;
}
.xr-hunt-mark:hover { background: #2a2215; }
.xr-hunt-mark:focus-visible { outline: 2px solid #72e5ef; outline-offset: 3px; }
.xr-hunt-mark.is-saved { background: #f2b56b; color: #07151d; }
@media (max-width: 480px) { .xr-hunt-toolbar { gap: 8px; padding: 10px; } .xr-hunt-mark { min-height: 40px; padding: 9px 15px; font-size: 12px; } .xr-hunt-chain { min-height: 40px; padding: 3px 6px; } .xr-hunt-chain svg { width: 132px; } }

/* Watch me / Try it yourself. */
.xr-hunt-mode { display: inline-flex; gap: 4px; margin: 4px 0 14px; padding: 4px; border: 1px solid #35505d; border-radius: 999px; background: #07151d; }
.xr-hunt-mode button { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: #b3cdd7; font: 600 13px/1 var(--sans); cursor: pointer; }
.xr-hunt-mode button:hover { color: #e6f7fb; }
.xr-hunt-mode button[aria-pressed=true] { background: #72e5ef; color: #07151d; }
.xr-hunt-mode button:focus-visible { outline: 2px solid #72e5ef; outline-offset: 2px; }

.xr-hunt-narration { margin-top: 10px; padding: 12px 16px; border-left: 3px solid #72e5ef; border-radius: 0 8px 8px 0; background: #0d2631; }
.xr-hunt-narration[hidden] { display: none; }
.xr-hunt .xr-hunt-narration-step { margin: 0 0 4px; color: #72e5ef; font: 500 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.xr-hunt .xr-hunt-narration-step:empty { display: none; }
.xr-hunt .xr-hunt-narration-text { min-height: 3.2em; margin: 0; color: #e6f7fb; font: 400 15px/1.6 var(--sans); }
.xr-hunt-narration-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.xr-hunt-narration-actions [hidden] { display: none; }

/* In the demo the controls show what I'm doing but don't take input. */
.xr-hunt[data-mode=demo] .xr-hunt-map, .xr-hunt[data-mode=demo] .xr-hunt-knob { cursor: default; }
.xr-hunt[data-mode=demo] .xr-hunt-mark:disabled, .xr-hunt[data-mode=demo] .xr-hunt-chain:disabled { opacity: 1; cursor: default; }
.xr-hunt[data-mode=demo] .xr-hunt-remove,
.xr-hunt[data-mode=demo] [data-hunt-confirm] { pointer-events: none; opacity: .5; }
.xr-hunt[data-mode=demo] .xr-hunt-map-wrap ~ .xr-note { display: none; }

/* The source lights up once the bearings cross on it. */
.xr-hunt-found { opacity: 0; transition: opacity .4s; }
.xr-hunt[data-solved=true] .xr-hunt-found { opacity: 1; }
.xr-hunt[data-solved=true] .xr-hunt-chargers text { display: none; }
.xr-hunt-found-ring { fill: #ff7b6b22; stroke: #ff7b6b; stroke-width: 2; transform-origin: 497px 28px; transform-box: view-box; }
.xr-hunt[data-solved=true] .xr-hunt-found-ring { animation: xr-hunt-found 1.8s ease-out infinite; }
.xr-hunt[data-solved=true] .xr-hunt-found-ring-2 { animation-delay: .9s; }
@keyframes xr-hunt-found { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.xr-hunt-found rect { fill: #ff7b6b; }
.xr-hunt-found text { fill: #07151d; font: 700 10px var(--mono); letter-spacing: .06em; }

/* Demo: the script marks for me, so the toolbar keeps only the pad, and Next is the main action. */
.xr-hunt[data-mode=demo] .xr-hunt-mark, .xr-hunt[data-mode=demo] .xr-hunt-reset { display: none; }
.xr-hunt .xr-hunt-next { background: #72e5ef; border-color: #72e5ef; color: #07151d; font-weight: 600; }
.xr-hunt .xr-hunt-next:hover { background: #a0f5fb; }
.xr-hunt .xr-hunt-next:disabled { background: #102630; border-color: #35505d; color: #8fa9b6; opacity: 1; }
.xr-hunt .xr-hunt-next[hidden] { display: none; }
.xr-hunt-reset { margin-left: auto; min-height: 44px; padding: 10px 16px; border: 1px solid #456775; border-radius: 999px; background: transparent; color: #b3cdd7; font: 500 13px/1 var(--sans); cursor: pointer; }
.xr-hunt-reset:hover { border-color: #72e5ef; color: #e6f7fb; }
.xr-hunt-reset:focus-visible { outline: 2px solid #72e5ef; outline-offset: 3px; }
@media (max-width: 480px) { .xr-hunt-reset { min-height: 40px; padding: 8px 12px; font-size: 12px; } }
.xr-hunt .xr-hunt-next.is-inviting { animation: xr-hunt-invite 1.6s ease-out infinite; }
@keyframes xr-hunt-invite { 0% { box-shadow: 0 0 0 0 #72e5efaa; } 70% { box-shadow: 0 0 0 12px #72e5ef00; } 100% { box-shadow: 0 0 0 0 #72e5ef00; } }

/* Live noise-floor readout under the analyzer. */
.xr-hunt-floor { margin: 8px 0 0; color: #b9ced8; font: 400 12px/1.5 var(--mono); }
.xr-hunt-floor-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border: 1px solid #87e8a066; border-radius: 999px; color: #87e8a0; font-weight: 600; }
.xr-hunt-floor-tag.is-high { border-color: #f2b56b88; color: #f2b56b; }

/* State feedback follows the measured floor without replacing its numeric readout. */
.xr-hunt-noise-message { display: grid; margin-top: 12px; padding: 13px 16px; border: 1px solid #35505d; border-left: 3px solid #72e5ef; border-radius: 0 8px 8px 0; background: #0d2631; }
.xr-hunt-noise-message p { grid-area: 1 / 1; visibility: hidden; color: #cfe3ea; font: 400 14px/1.6 var(--sans); }
.xr-hunt-noise-message strong { display: block; margin-bottom: 4px; color: #d9f7fb; font-weight: 600; }
.xr-hunt-noise-message[data-state=quiet] [data-noise-state=quiet],
.xr-hunt-noise-message[data-state=raised] [data-noise-state=raised],
.xr-hunt-noise-message[data-state=cleared] [data-noise-state=cleared] { visibility: visible; }
.xr-hunt-noise-message[data-state=raised] { border-color: #f2b56b66; border-left-color: #f2b56b; background: #2b231a; }
.xr-hunt-noise-message[data-state=raised] strong { color: #ffd4a3; }
.xr-hunt-noise-message[data-state=cleared] { border-left-color: #87e8a0; }

/* On-demand reference images keep the live sweep visible and independent. */
.xr-hunt-comparison { margin: 18px 0 24px; padding: clamp(14px, 3vw, 22px); border: 1px solid #456775; border-radius: 10px; background: #06121a; }
.xr-hunt-comparison[hidden] { display: none; }
.xr-hunt-comparison-head h5 { margin: 7px 0 14px; color: #e6f7fb; font: 500 21px/1.3 var(--display); }
.xr-hunt-comparison > svg { width: 100%; height: clamp(150px, 24vw, 240px); }
.xr-hunt-comparison-key { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; padding: 0; margin: 18px 0 12px; color: #c5dbe5; font: 400 12px/1.5 var(--sans); }
.xr-hunt-comparison-key li { display: flex; align-items: center; gap: 7px; }
.xr-hunt-comparison-key li::before { content: ''; flex: none; width: 18px; border-top: 2px solid #72e5ef; }
.xr-hunt-comparison-key .xr-hunt-key-carrier::before { height: 10px; border: 1px solid #87e8a077; background: #87e8a018; }
.xr-hunt-comparison-key .xr-hunt-key-extra::before { border-color: #f2b56b; }
.xr-hunt-comparison-key .xr-hunt-key-floor::before { border-top: 1px dashed #8fa9b6; }
.xr-hunt-comparison figcaption { color: #8fa9b6; font: 400 12px/1.5 var(--sans); }

/* Keep guided navigation above the map and within reach while reading a step. */
.xr-hunt-demo-bar { position: sticky; top: max(80px, calc(env(safe-area-inset-top) + 64px)); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid #456775; border-radius: 8px 8px 0 0; background: #102630; box-shadow: 0 6px 18px #0003; }
.xr-hunt-demo-bar [hidden] { display: none; }
.xr-hunt-demo-bar .xr-hunt-narration-step { margin: 0; }
.xr-hunt-demo-bar .xr-hunt-demo-hint { flex: 1 0 100%; min-height: 3em; margin: 0; color: #b9d5df; font: 400 12px/1.5 var(--sans); }
.xr-hunt-demo-bar .xr-hunt-next { min-width: 100px; }
.xr-hunt[data-mode=try] .xr-hunt-demo-bar { display: none; }
.xr-hunt [data-hunt-demo-card] { scroll-margin-top: 80px; }
.xr-hunt-map-wrap .xr-hunt-narration { margin: 0; border-left: 0; border-top: 1px solid #35505d; border-radius: 0 0 8px 8px; }
@media (prefers-reduced-motion: reduce) { .xr-hunt .xr-hunt-next.is-inviting { animation: none; } }
@media (max-width: 760px) {
  .xr-hunt-demo-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 25px 18px; gap: 2px 10px; height: 61px; box-sizing: border-box; padding: 6px 12px; }
  .xr-hunt-demo-bar .xr-hunt-narration-step { grid-column: 1; grid-row: 1; align-self: center; }
  .xr-hunt-demo-bar .xr-hunt-demo-hint { grid-column: 1; grid-row: 2; align-self: start; min-height: 1.5em; }
  .xr-hunt-demo-bar .xr-hunt-next, .xr-hunt-demo-bar [data-hunt-cta] { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; }
  .xr-hunt-demo-bar .xr-hunt-next { min-width: 96px; padding-inline: 10px; }
}