/* model3d.css — v20.0.0: the 3D model element's styles (moved out of public/app.css, where the
   3D release had put them — an extension carries its own stylesheet, included by the layout through
   the registry's `styles`). Colour tokens follow the theme. */

/* the editor card's accent + palette button (editor-view.js reads label/icon/accent from the card module) */
.element-card.sf-el-model3d  { border-color: var(--bs-orange); }
.element-card.sf-el-model3d  .element-type-icon,
.element-card.sf-el-model3d  .element-type-label { color: var(--bs-orange); }
.btn-add-el-model3d  { background: #b4520a; background: color-mix(in srgb, var(--bs-orange) 78%, #000); } /* ≥4.5:1 with white text */

/* the element (participant + leader render, editor placer). <model-viewer> is a replaced-like custom
   element: give it a size or it is 0 px tall. The aspect ratio keeps the page from jumping when the
   model loads; the hotspot pill was the read-only label of v1 — clickable since v20.12.0 (below). */
.sf-model3d { position: relative; width: 100%; max-width: 100%; }
.sf-model3d model-viewer { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 70vh; background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius); display: block; --poster-color: transparent; }
@media (max-width: 575.98px) { .sf-model3d model-viewer { aspect-ratio: 1 / 1; } }
/* v21.3.0 (A.-000048 #5) — the loading state of a model without a poster: a tint over the empty stage with a spinner and one
   line, in the viewer's poster slot (shown until the model is revealed; a lazy viewer shows it only once scrolled to) */
.sf-model3d .sf-m3d-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); font-size: .875rem; border-radius: var(--bs-border-radius); }
.sf-model3d .sf-model3d-caption { font-size: .9rem; color: var(--bs-secondary-color); margin-top: .35rem; }
.sf-model3d .sf-model3d-poster-only { width: 100%; max-width: 100%; border-radius: var(--bs-border-radius); display: block; }
.sf-model3d .sf-model3d-snapshot[hidden] { display: none; }
/* v20.12.0 — no `overflow: hidden` on the pill: it clipped the absolutely placed text under it, so a hotspot's text
   never showed (hover, focus or tap). A long label (≤ 80 chars) widens the pill instead of being cut. */
.sf-hotspot { position: relative; display: inline-block; border: 0; border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; font-weight: 600; line-height: 1.3; background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: default; white-space: nowrap; transform: translate(-50%, -50%); }
/* v20.12.0 (A.-000031 #3) — a hotspot that does something on a tap looks like it: a pointer, an outline ring on hover / focus */
.sf-hotspot[aria-expanded], .sf-hotspot[data-m3d-goto], .sf-hotspot[data-m3d-answer-q], .sf-hotspot[data-m3d-set-var] { cursor: pointer; }
.sf-hotspot[aria-expanded]:hover, .sf-hotspot[data-m3d-goto]:hover, .sf-hotspot[data-m3d-answer-q]:hover, .sf-hotspot[data-m3d-set-var]:hover,
.sf-hotspot:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.sf-hotspot[data-m3d-goto]::after, .sf-hotspot[data-m3d-answer-q]::after { content: " \2192"; font-weight: 400; } /* an arrow: the tap leads somewhere on the page */
.sf-hotspot.is-picked { background: var(--bs-primary); color: #fff; }
/* the element a `goto` / `answer` hotspot leads to: marked for a moment */
.sf-m3d-goto-target { outline: 3px solid var(--bs-primary); outline-offset: 4px; border-radius: var(--bs-border-radius); transition: outline-color .6s ease-out; }
@media (prefers-reduced-motion: reduce) { .sf-m3d-goto-target { transition: none; } }
.sf-hotspot[data-visibility-state="hidden"], .sf-hotspot:not([slot]) { opacity: .25; pointer-events: none; }
.sf-hotspot .sf-hotspot-text { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: .3rem; min-width: 10rem; max-width: 16rem; white-space: normal; font-weight: 400; background: var(--bs-body-bg); color: var(--bs-body-color); padding: .35rem .5rem; border-radius: var(--bs-border-radius); box-shadow: 0 2px 8px rgba(0,0,0,.3); text-align: left; }
.sf-hotspot:hover .sf-hotspot-text, .sf-hotspot:focus .sf-hotspot-text, .sf-hotspot.is-open .sf-hotspot-text { display: block; }
.sf-model3d .sf-model3d-ar-note { font-size: .75rem; color: var(--bs-tertiary-color); }
.sf-model3d-editor-viewer model-viewer { aspect-ratio: auto; max-height: none; }
/* v20.13.0 — hotspot labels hidden (labels: "off", or the Labels button pressed off); the slots stay, so a tap on the button brings them back where they were */
.sf-model3d model-viewer[data-m3d-labels="off"] .sf-hotspot { display: none; }
/* v20.13.0 — the stage holds the viewer; the Labels button sits over its top-right corner (no row of its own) */
.sf-m3d-stage { position: relative; }
.sf-m3d-labels-bar { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.sf-m3d-labels-toggle[aria-pressed="true"] { background: var(--bs-body-bg); }
.sf-m3d-labels-toggle[aria-pressed="false"] { opacity: .85; }
/* v25.5.0 (A.-000099 #17) — a drag HANDLE's ring: a slotted hotspot the bundle keeps on the part (model3d-interact.js); 44 px to
   the touch, no page scroll under a finger on it, the grab cursor; the focused ring takes the arrow keys */
.sf-m3d-handle { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.sf-m3d-handle[hidden] { display: none; }
.sf-m3d-handle-ring { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 7px; border-radius: 50%; border: 2px solid #fff; background: rgba(33, 37, 41, .55); color: #fff; font-size: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.sf-m3d-handle:hover .sf-m3d-handle-ring, model-viewer[data-m3d-dragging] .sf-m3d-handle-ring { background: var(--bs-primary); }
.sf-m3d-handle:focus-visible { outline: none; }
.sf-m3d-handle:focus-visible .sf-m3d-handle-ring { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
model-viewer[data-m3d-dragging] { cursor: grabbing; }