/* viewer.css — the 3D viewer page. Loaded after styles.css and built on its tokens; only what
 * the viewer adds: a full-viewport stage, a slim bar instead of the sidebar, translucent panels. */

body.viewer-body { display: block; overflow: hidden; min-height: 100vh; }
.stage { position: fixed; inset: 0; }
.stage canvas { display: block; }

/* the bar: brand, title, the way back, theme, panel toggle — over the canvas, only the items catch the pointer */
.viewer-bar { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px 20px; pointer-events: none; }
.viewer-bar > * { pointer-events: auto; }
.viewer-bar .brand { margin: 0; }
.viewer-bar .brand a { text-decoration: none; }
.viewer-title { font-size: var(--t-nav); font-weight: 400; color: var(--ink-2); margin: 0 auto 0 0; }
.viewer-back { font-size: var(--t-nav); }
.viewer-toggle, .viewer-button, .viewer-option { font-size: var(--t-small); padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--bg); background: color-mix(in srgb, var(--bg) 80%, transparent); }
.viewer-toggle { border-radius: 999px; }
.viewer-toggle:hover, .viewer-button:hover { background: var(--lift); }

/* status and help, over the canvas */
.viewer-status { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; font-size: var(--t-lead); color: var(--ink-2); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.viewer-help { position: fixed; left: 20px; bottom: 20px; z-index: 10; font-size: var(--t-small); color: var(--ink-2); }

/* the panel */
.viewer-panel { position: fixed; top: 72px; right: 20px; z-index: 20; width: 264px; max-height: calc(100vh - 92px); overflow: auto; padding: 18px; display: grid; gap: 18px; font-size: var(--t-small); border: 1px solid var(--line); border-radius: 12px; background: var(--bg); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.viewer-panel[hidden] { display: none; }
.viewer-h { font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; }
.viewer-select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.viewer-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 10px 0 0; }
.viewer-meta dt { color: var(--ink-2); }
.viewer-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.viewer-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.viewer-check input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.viewer-choice { display: flex; gap: 6px; }
.viewer-option { flex: 1; text-align: center; color: var(--ink-2); }
.viewer-option[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.viewer-label { display: block; margin-top: 12px; color: var(--ink-2); }
.viewer-panel .viewer-label + .viewer-select { margin-top: 4px; }
.viewer-range { display: flex; justify-content: space-between; margin-top: 12px; }
.viewer-range output { color: var(--ink); font-variant-numeric: tabular-nums; }
.viewer-panel input[type="range"] { width: 100%; accent-color: var(--ink); margin: 6px 0 0; }
.viewer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.viewer-row .viewer-check { margin: 0; }

@media (max-width: 767.98px) {
  .viewer-help, .viewer-title { display: none; }
  .viewer-bar { padding: 10px 12px; gap: 10px; }
  .viewer-panel { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 46vh; }
}