/* Inspect mode: an item picked up from the room, with a panel about it at the bottom of the screen. */

.inspect-panel {
  position: fixed; z-index: 7; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 32px)); max-height: 45vh; max-height: 45svh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.inspect-panel .step { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.inspect-panel h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.inspect-panel p { margin: 0; color: #C9CEDA; font-size: 15px; }
.inspect-panel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.inspect-panel dl:empty { display: none; }
.inspect-panel dt { color: var(--muted); }
.inspect-panel dd { margin: 0; }
.inspect-panel .inspect-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.inspect-panel .hint { font-size: 13px; color: var(--muted); }

/* While holding an item, hide the tour overlay so the item has the screen */
body.inspecting .card,
body.inspecting .pin,
body.inspecting .rail,
body.inspecting .cue { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }

@media (max-width: 720px) {
  .inspect-panel { padding: 16px 18px; }
  .inspect-panel h2 { font-size: 22px; }
  .inspect-panel p { font-size: 14px; }
  .inspect-panel .hint { display: none; }
}