/* od3d.css - the "View in 3D" card and viewer for Our Dartmoor (localhost trial, Paul 2026-10-21). Colours are tokens so the site template can swap them. */
:root{--od-ink:#23261d;--od-card:#f4f1e8;--od-accent:#4f5f33;--od-accent-ink:#fff;--od-line:#d9d4c3;--od-bg3d:#2a2b27;--od-focus:#e0a100}
@media (prefers-color-scheme:dark){:root{--od-ink:#ecebe4;--od-card:#262822;--od-accent:#7d9650;--od-accent-ink:#10120c;--od-line:#44463c}}
.od3d{position:relative;border:1px solid var(--od-line);border-radius:12px;overflow:hidden;background:var(--od-card);color:var(--od-ink);font:16px/1.4 system-ui,sans-serif;max-width:900px}
.od3d__stage{position:relative;aspect-ratio:4/3;background:var(--od-bg3d);touch-action:none}
.od3d__stage canvas{display:block;width:100%;height:100%;outline:none}
.od3d__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.od3d__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.6em;padding:.8em 1.3em;border:0;border-radius:999px;background:var(--od-accent);color:var(--od-accent-ink);font:inherit;font-weight:700;cursor:pointer;box-shadow:0 2px 12px #0006}
.od3d__play:hover{filter:brightness(1.1)}
.od3d__badge{position:absolute;left:10px;bottom:10px;max-width:min(24em,calc(100% - 20px));background:#000b;color:#fff;padding:.5em .8em;border-radius:8px;font-size:.82em;line-height:1.35;pointer-events:none}
.od3d__bt{font-weight:700;font-size:1.05em}.od3d__bl{opacity:.9}
.od3d__bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border-top:1px solid var(--od-line);justify-content:center}
.od3d__grp{display:flex;gap:4px;align-items:center;padding:0 4px}
.od3d__grp+.od3d__grp{border-left:1px solid var(--od-line);padding-left:10px}
.od3d__lbl{font-size:.72em;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-right:2px}
.od3d__btn{min-width:48px;min-height:48px;border:1px solid var(--od-line);border-radius:10px;background:var(--od-card);color:var(--od-ink);font:inherit;font-size:1.15em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.3em;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.od3d__btn:hover{border-color:var(--od-accent)}
.od3d__btn[aria-pressed=true]{background:var(--od-accent);color:var(--od-accent-ink);border-color:var(--od-accent)}
/* hand-drawn buttons: stone-shaped SVG backgrounds + one SVG icon each (icons/*.svg); .has-ico is only set once the icon has loaded, otherwise the plain glyph button above is used */
.od3d__ico{width:30px;height:30px;display:block;pointer-events:none;-webkit-user-drag:none}
.od3d__btn.has-ico{border:0;background:url(icons/btn.svg?v=3) center/100% 100% no-repeat;padding:0;color:#41454B}
.od3d__btn.has-ico:hover{background-image:url(icons/btn.svg?v=3);transform:rotate(-2deg)}
.od3d__btn.has-ico[aria-pressed=true]{background:url(icons/btn-active.svg?v=3) center/100% 100% no-repeat}
.od3d__btn.has-ico[aria-pressed=true] .od3d__ico{filter:brightness(0) invert(1)}
.od3d__btn.has-ico .od3d__glyph{display:none}
.od3d__btn.has-ico.keep-text{padding:0 20px 0 14px;font-size:.9em;font-weight:600;min-width:84px}
.od3d__btn.has-ico.keep-text .od3d__glyph{display:inline}
.od3d__btn.has-ico.keep-text .od3d__ico{width:26px;height:26px}
.od3d__btn--s0.has-ico,.od3d__btn--s0.has-ico:hover{background-image:url(icons/btn.svg?v=5)}
.od3d__btn--s0.has-ico[aria-pressed=true]{background-image:url(icons/btn-active.svg?v=4)}
.od3d__btn--s1.has-ico,.od3d__btn--s1.has-ico:hover{background-image:url(icons/btn-2.svg?v=4)}
.od3d__btn--s1.has-ico[aria-pressed=true]{background-image:url(icons/btn-active-2.svg?v=4)}
.od3d__btn--s2.has-ico,.od3d__btn--s2.has-ico:hover{background-image:url(icons/btn-3.svg?v=4)}
.od3d__btn--s2.has-ico[aria-pressed=true]{background-image:url(icons/btn-active-3.svg?v=4)}
.od3d__btn--s3.has-ico,.od3d__btn--s3.has-ico:hover{background-image:url(icons/btn-4.svg?v=4)}
.od3d__btn--s3.has-ico[aria-pressed=true]{background-image:url(icons/btn-active-4.svg?v=4)}
.od3d__btn--s0.has-ico{transform:rotate(-1.5deg)}.od3d__btn--s1.has-ico{transform:rotate(1.5deg)}.od3d__btn--s2.has-ico{transform:rotate(-0.5deg)}.od3d__btn--s3.has-ico{transform:rotate(2deg)}
.od3d__btn.has-ico{transition:transform .18s cubic-bezier(.3,1.8,.5,1)}
.od3d__btn--s0.has-ico:hover{transform:rotate(-7deg) scale(1.12) translate(-1px,-2px)}
.od3d__btn--s1.has-ico:hover{transform:rotate(6deg) scale(1.1) translate(2px,-1px)}
.od3d__btn--s2.has-ico:hover{transform:rotate(-4deg) scale(1.14) translate(1px,2px)}
.od3d__btn--s3.has-ico:hover{transform:rotate(8deg) scale(1.08) translate(-2px,1px)}
.od3d__btn.has-ico:active{transform:scale(.94) rotate(1.5deg)}
.od3d__btn:focus-visible,.od3d__play:focus-visible,.od3d__stage canvas:focus-visible{outline:3px solid var(--od-focus);outline-offset:2px}
.od3d__hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#000b;color:#fff;padding:.35em .8em;border-radius:999px;font-size:.85em;white-space:nowrap;pointer-events:none;transition:opacity .6s}
.od3d__hint.is-gone{opacity:0}
.od3d__load{position:absolute;left:12%;right:12%;bottom:22%;height:8px;background:#fff3;border-radius:4px;overflow:hidden}
.od3d__load i{display:block;height:100%;width:0;background:var(--od-accent)}
.od3d__msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1em;color:#fff;background:#0007}
.od3d__cap{padding:10px 14px 4px;font-weight:700}.od3d__sub{padding:0 14px 10px;font-size:.9em;opacity:.8}
@media (max-width:520px){.od3d__lbl{display:none}.od3d__btn{min-width:44px}}

.od3d__notes{padding:6px 14px 12px;font-size:.92em}.od3d__notes summary{cursor:pointer;font-weight:700;padding:6px 0;min-height:32px}.od3d__notes p{margin:.4em 0}