/* Site inspection stage. Only transform/opacity animate. Tokens come from base.css. */

.inspect {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 16px;
  align-items: start;
}
.insp-main { position: relative; min-width: 0; border: 2px solid var(--ink); background: var(--sheet); }

/* Scene scroller: on phones the scene keeps 900px and pans with native touch scroll. */
.insp-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-2) var(--paper);
}
.insp-scroller::-webkit-scrollbar { height: 8px; }
.insp-scroller::-webkit-scrollbar-track { background: var(--paper); border-top: 1px solid var(--rule); }
.insp-scroller::-webkit-scrollbar-thumb { background: var(--ink-2); border-radius: 4px; }
.insp-scene {
  position: relative;
  min-width: 900px;
  width: 100%;
  aspect-ratio: 1000 / 550;
}
.scene-svg { display: block; width: 100%; height: 100%; }
.stage--host .insp-scene { min-width: 0; }

.insp-hint {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; min-height: 36px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--sheet); border-radius: 999px;
  font-weight: 700; font-size: var(--t-14);
  pointer-events: none;
  animation: insp-hint-in .3s ease-out 1;
}
.insp-hint[hidden] { display: none; }
@keyframes insp-hint-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Hotspots ---------- */
.hs {
  position: absolute; z-index: 2;
  width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0;
  display: grid; place-items: center;
  border: 3px solid var(--sheet); border-radius: 50%;
  background: var(--ink); color: var(--sheet);
  font-family: var(--f-display); font-weight: 800; font-size: 1.375rem; line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--ink);
}
span.hs { cursor: default; }
.hs:focus-visible { outline: 2px solid var(--pub); outline-offset: 5px; }
.hs-glyph { position: relative; display: grid; place-items: center; z-index: 1; }
.hs-glyph svg { display: block; }
.hs-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 3px solid var(--sheet);
  box-shadow: 0 0 0 2px var(--ink);
  pointer-events: none;
}
.is-live .hs:not(.is-flagged):not(.is-revealed) .hs-ring { animation: hs-ping 1.6s ease-out infinite; }
@keyframes hs-ping { from { transform: scale(.75); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.hs.is-flagged { background: var(--open); }
.hs.is-flagged .hs-ring, .hs.is-revealed .hs-ring { animation: none; opacity: 0; }
.hs.is-nope { background: var(--ink-2); }
.hs.is-locked { cursor: default; }

/* reveal marks: icon + colour, never colour alone */
.hs.is-revealed.is-relevant { background: var(--ok-ink); }
.hs.is-revealed.is-herring { background: var(--bad-ink); }
.hs.is-revealed:not(.is-yours) { opacity: .92; }
.hs.is-missed .hs-ring {
  display: block; opacity: 1; border-color: var(--res); box-shadow: 0 0 0 2px var(--ink);
}
.is-live .hs.is-missed .hs-ring { animation: hs-ping 1.1s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .is-live .hs .hs-ring { animation: none; } }
.hs.is-missed { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--res); }

.hs-toast {
  position: absolute; left: 50%; bottom: calc(100% + 12px); translate: -50% 0;
  white-space: nowrap; pointer-events: none;
  padding: 6px 12px; background: var(--sheet); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-btn);
  font-family: var(--f-body); font-weight: 700; font-size: var(--t-14); line-height: 1.2;
  animation: hs-toast 2.4s ease-out 1 forwards;
}
.hs-toast::after {
  content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0;
  border: 7px solid transparent; border-top-color: var(--ink);
}
@keyframes hs-toast { 0% { opacity: 0; transform: translateY(6px); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Evidence tray ---------- */
.insp-tray { border: 2px solid var(--ink); background: var(--sheet); padding: 14px; min-width: 0; }
.tray-title { margin: 0 0 10px; font-size: var(--t-20); }
.tray-count { font-family: var(--f-body); font-weight: 600; font-size: var(--t-14); color: var(--ink-2); }
.tray-empty { margin: 0; padding: 12px; border: 2px dashed var(--rule); color: var(--ink-2); font-size: var(--t-14); }
.tray-list, .host-key, .insp-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tray-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 44px; padding: 4px 4px 4px 12px;
  border: 2px solid var(--ink); background: #fff;
}
.tray-label { flex: 1 1 auto; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.tray-tag { font-size: var(--t-14); font-weight: 700; color: var(--part-ink); }
.tray-rm {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 2px solid var(--ink); background: var(--sheet); color: var(--ink); border-radius: var(--r-btn); cursor: pointer;
}
.tray-rm[hidden] { display: none; }
.tray-rm:hover:not(:disabled) { background: #fff; }
.tray-rm:disabled { opacity: .4; cursor: not-allowed; }
.insp-fly { background: var(--sheet); font-size: var(--t-16); }

/* ---------- Reveal notes ---------- */
.insp-notes { margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.note {
  display: grid; gap: 4px; padding: 10px 12px; border: 2px solid var(--ink); border-left-width: 8px; background: #fff;
}
.note.is-relevant { border-left-color: var(--ok-ink); }
.note.is-herring { border-left-color: var(--bad-ink); }
.note-mark { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-14); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.is-relevant .note-mark { color: var(--ok-ink); }
.is-herring .note-mark { color: var(--bad-ink); }
.note-status { font-size: var(--t-14); font-weight: 700; color: var(--ink-2); }
.note-text { font-size: var(--t-14); color: var(--ink); }

/* ---------- Host: heat dots + key ---------- */
.heat {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--s) * 1cqw); aspect-ratio: 1; translate: -50% -50%;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(46, 95, 166, .38); border: 3px solid var(--pub);
  pointer-events: none; z-index: -1;
}
.insp-scene { container-type: inline-size; }
.heat-n {
  position: absolute; left: 50%; top: calc(100% + 2px); translate: -50% 0;
  min-width: 2.2em; padding: 0 .5em; text-align: center;
  background: var(--sheet); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px;
  font-family: var(--f-display); font-weight: 800; font-size: 1rem; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.stage--host .hs { width: 56px; height: 56px; margin: -28px 0 0 -28px; font-size: 1.75rem; }
.host-key li { display: grid; grid-template-columns: 32px 1fr; gap: 2px 10px; align-items: center; padding: 8px 10px; border: 2px solid var(--rule); background: #fff; }
.host-key li.is-relevant { border-color: var(--ok-ink); }
.host-key li.is-herring { border-color: var(--bad-ink); }
.hk-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--sheet); font-family: var(--f-display); font-weight: 800; }
.hk-label { font-weight: 700; font-size: var(--t-20); line-height: 1.2; }
.hk-info { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); }
.stage--host .insp-notes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.stage--host .note-label, .stage--host .note-text { font-size: var(--t-20); }

/* ---------- Phones: tray goes below the scene ---------- */
@media (max-width: 820px) {
  .inspect { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hs-ring, .hs.is-missed .hs-ring { animation: none; }
  .hs.is-missed .hs-ring { opacity: 1; transform: scale(1.15); }
  .hs-toast { animation: none; }
  .insp-hint { animation: none; }
}