/*
 * Styling for embedded resource viewers. Loaded only on resource pages that use
 * a [viewer:*] block. Everything is drawn from the site's existing dark theme
 * tokens (--panel, --line, --text, --muted, --cyan, --radius, --mono), so the
 * surface fits the page with no palette of its own.
 */
.resource-viewer {
  --viewer-model: #c7ccd6; /* light neutral model against the dark stage */
  display: block;
  margin: 26px 0;
}

.rv-stage {
  position: relative;
  height: 60vh;
  min-height: 340px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.rv-stage.rv-over { outline: 2px dashed var(--cyan); outline-offset: -6px; }

.rv-canvas { position: absolute; inset: 0; }
.rv-canvas canvas { display: block; width: 100% !important; height: 100% !important; }

.rv-drop { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.rv-drop.rv-hidden { display: none; }
.rv-drop-inner { display: grid; gap: 8px; color: var(--muted); padding: 0 16px; }
.rv-drop-inner strong { color: var(--text); font-size: 1.05rem; }

.rv-link {
  pointer-events: auto;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cyan);
  cursor: pointer;
  text-decoration: underline;
}
.rv-link:hover { color: var(--text); }

.rv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-family: var(--mono);
}
.rv-toggle { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }