/* 3D tools (view): the model viewer, converter, thumbnails, turntable, AR Quick Look, 360° and HDRI viewers.
   Styles owned by the 3D view work (site/three3d/view*, convert*); shared tokens stay in style.css. */
:root { --v3-stage: #eef1ef; --v3-check-a: #ffffff; --v3-check-b: #dde2e0; }
:root[data-theme="dark"] { --v3-stage: #1a1f22; --v3-check-a: #2a3236; --v3-check-b: #20272a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --v3-stage: #1a1f22; --v3-check-a: #2a3236; --v3-check-b: #20272a; } }

.v3 { gap: 16px; }
.v3 [hidden] { display: none !important; }
.v3-status:empty { display: none; }

/* the model and its facts side by side; stacked on narrow screens */
.v3-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 16px; align-items: start; }
.v3-convert, .v3-panowork { display: grid; gap: 14px; }
@media (max-width: 760px) { .v3-work { grid-template-columns: minmax(0, 1fr); } }

.v3-view { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--v3-stage); }
.v3-stage { position: relative; width: 100%; height: clamp(300px, 56vh, 620px); touch-action: none; }
.v3-stage canvas.stage3d { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.v3-stage canvas.stage3d:active { cursor: grabbing; }
.v3-convert .v3-stage { height: clamp(240px, 40vh, 440px); }
.v3-stage:fullscreen { height: 100vh; background: #000; }
.v3-checker, .v3-stage.v3-checker { background-color: var(--v3-check-a); background-image: conic-gradient(var(--v3-check-b) 25%, transparent 0 50%, var(--v3-check-b) 0 75%, transparent 0); background-size: 20px 20px; }

/* the toolbar floats over the bottom edge of the view */
.v3-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.v3-bar > * { pointer-events: auto; }
.v3-tog, .v3-bar select { border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--ink); border-radius: 8px; padding: 5px 10px; font: 600 13px/1.3 var(--body); cursor: pointer; }
.v3 .v3-bar select { width: auto; padding: 5px 8px; border-width: 1px; border-radius: 8px; background: color-mix(in srgb, var(--panel) 88%, transparent); }
.v3-tog:hover { border-color: var(--ink); }
.v3-tog[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.v3-tog:focus-visible, .v3-anim:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

/* facts */
.v3-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.v3-name { margin: 0; font: 600 17px/1.3 var(--body); overflow-wrap: anywhere; }
.v3-name small { font-weight: 500; color: var(--muted); }
.v3-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; }
.v3-facts dt { color: var(--muted); }
.v3-facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v3-note { color: var(--ink); background: var(--soft); border-radius: 10px; padding: 8px 10px; }
.v3-warn { font-size: 13px; color: var(--muted); }
.v3-warn summary { cursor: pointer; }
.v3-warn ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; overflow-wrap: anywhere; }

/* animations */
.v3-anims { display: grid; gap: 6px; }
.v3-anims h4, .v3-lostbox h4 { margin: 0; font-size: 14px; }
.v3-anim { text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 6px 10px; font: 600 14px/1.3 var(--body); cursor: pointer; overflow-wrap: anywhere; }
.v3-anim small { color: var(--muted); font-weight: 500; }
.v3-anim[aria-pressed="true"] { border-color: var(--ink); background: var(--soft); }

/* converter options and results */
.v3-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 14px; align-items: end; }
.v3-opts .check { padding-bottom: 10px; }
.v3-opts > .note { align-self: center; }
.v3-pair { display: flex; gap: 8px; align-items: center; }
.v3 .v3-pair input[type=number] { width: 7em; }
.v3 .v3-pair input[type=color] { width: 44px; height: 40px; padding: 2px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); }
.v3 .v3-pair input[type=range] { flex: 1; }
.v3-pair output { min-width: 5em; font-variant-numeric: tabular-nums; font-weight: 600; }
.v3-lost { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.v3-lost:empty { display: none; }
.v3-lost .v3-keep { list-style: none; margin-left: -18px; color: var(--muted); }
.v3-result:empty { display: none; }
.v3-result { border-top: 1px solid var(--line); padding-top: 14px; }
.v3-done { display: grid; gap: 8px; justify-items: start; }
.v3-done p { margin: 0; overflow-wrap: anywhere; }
.v3-lostbox { display: grid; gap: 6px; }
.v3-thumb, .v3-video { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.v3-result progress { width: 100%; height: 10px; accent-color: var(--ink); }
.v3-panofacts { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.v3-ios { max-width: 70ch; }

@media (max-width: 480px) {
  .v3-stage { height: 62vh; }
  .v3-opts { grid-template-columns: minmax(0, 1fr); }
}

/* viewer first: the stage is there before a model, with the start card over it */
.v3-work.v3-first { grid-template-columns: minmax(0, 1fr); }
.v3-work.v3-first > .v3-side { display: none; }
.v3-view.v3-empty .v3-bar, .v3-view.v3-empty .v3-topnote { display: none; }
.v3-view.over { outline: 3px dashed var(--ink); outline-offset: -6px; }
.v3-first .v3-stage, .v3-big .v3-stage { height: clamp(420px, 62vh, 640px); }
.v3-start { position: absolute; inset: 0; display: none; place-items: center; padding: 16px; pointer-events: none; }
.v3-view.v3-empty .v3-start { display: grid; }
.v3-card { pointer-events: auto; width: min(100%, 420px); display: grid; gap: 10px; padding: 18px; border-radius: 16px; text-align: center;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); box-shadow: var(--card-lift); }
.v3-card .fileslot { display: grid; justify-items: center; gap: 6px; padding: 16px 14px; border-radius: 12px; background: var(--panel); }
.v3-card .fileslot:hover .v3-choose, .v3-card .fileslot:focus-visible .v3-choose { filter: brightness(.96); }
.v3-card .fileslot:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.v3-starticon svg { display: block; width: 40px; height: 40px; }
.v3-starticon .c-face { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.v3-starticon .c-edge { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.v3-starttitle { font: 700 19px/1.2 var(--display); color: var(--ink); }
.v3-choose { display: inline-flex; align-items: center; background: var(--yellow); color: #1C2428; border-radius: 10px; padding: 8px 16px; margin: 2px 0; font-weight: 600; }
.v3-formats { font-size: 12.5px; line-height: 1.35; color: var(--muted); max-width: 32ch; }
.v3-try { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.v3-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.v3-ex, .v3-exitem { display: grid; gap: 1px; justify-items: center; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 10px;
  padding: 7px 6px; font: 600 14px/1.25 var(--body); cursor: pointer; }
.v3-ex small, .v3-exitem small { font-weight: 500; font-size: 12px; color: var(--muted); }
.v3-ex:hover, .v3-exitem:hover { border-color: var(--ink); }
.v3-ex:focus-visible, .v3-exitem:focus-visible, .v3-exmenu summary:focus-visible, .v3-open:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.v3-ex:disabled, .v3-exitem:disabled { opacity: .5; cursor: progress; }
.v3-fetch:empty { display: none; }
.v3-fetch { display: grid; gap: 6px; font-size: 14px; color: var(--ink); }
.v3-fetch.err { color: var(--server); font-weight: 600; }
.v3-fetch progress { width: 100%; height: 8px; accent-color: var(--ink); }
.v3-credit { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.v3-credits { display: inline; }
.v3-credits summary { display: inline; cursor: pointer; text-decoration: underline; color: var(--ink); }
.v3-credits summary::-webkit-details-marker { display: none; }
.v3-creditnote { text-align: left; margin-top: 6px; display: grid; gap: 4px; }
.v3-creditnote p, .v3-creditnote ul { margin: 0; }
.v3-creditnote ul { padding-left: 16px; }
.v3-creditnote a { color: var(--ink); overflow-wrap: anywhere; }
.v3-excredit { font-size: 12.5px; }

/* after a model: "Open…" and the Examples menu in the toolbar; example fetch progress at the top */
.v3-exmenu { position: relative; }
.v3-exmenu summary { list-style: none; }
.v3-exmenu summary::-webkit-details-marker { display: none; }
.v3-exlist { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 2; display: grid; gap: 4px; min-width: 150px; padding: 6px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--card-lift); }
.v3-exitem { justify-items: start; }
.v3-topnote { position: absolute; top: 8px; left: 50%; translate: -50% 0; width: min(90%, 320px); pointer-events: none; }
.v3-topnote .v3-fetch { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); }

/* 3D studio: what to do with the model */
.v3-actions { display: grid; gap: 6px; }
.v3-actrow { display: flex; flex-wrap: wrap; gap: 6px; }
.v3-actrow .btn { padding: 8px 12px; font-size: 14px; }
.v3-actnote:empty { display: none; }

@media (max-width: 480px) {
  .v3-first .v3-stage, .v3-big .v3-stage { height: 72vh; min-height: 470px; }
  .v3-card { padding: 14px; gap: 8px; }
  .v3-card .fileslot { padding: 12px 10px; }
}

/* 3D studio's side panels (Light, Snapshot) and a USD's Layers list: collapsible cards */
.v3-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.v3-panel > summary { cursor: pointer; padding: 9px 12px; font: 600 15px/1.3 var(--body); list-style-position: inside; }
.v3-panel > summary small { font-weight: 500; color: var(--muted); }
.v3-panel > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-radius: 12px; }
.v3-panelbody { display: grid; gap: 10px; padding: 0 12px 12px; min-width: 0; }
.v3-panelbody .f { margin: 0; }
.v3-panelbody .v3-result { padding-top: 10px; }
.v3-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.v3-presets .v3-tog { padding: 6px 8px; }
.v3-lightlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v3-lightlist:empty { display: none; }
.v3-light { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.v3-light.on { border-color: var(--ink); background: var(--soft); }
.v3-lighthead { display: flex; gap: 6px; align-items: center; }
.v3-lightname { flex: 1; min-width: 0; text-align: left; border: 0; background: none; color: var(--ink); font: 600 14px/1.3 var(--body); padding: 2px 0; cursor: pointer; overflow-wrap: anywhere; }
.v3-lightname:focus-visible, .v3-lightdel:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.v3-lightdel { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; width: 30px; height: 30px; font: 600 17px/1 var(--body); cursor: pointer; }
.v3-lightdel:hover { border-color: var(--ink); }
.v3-lightrow { display: flex; gap: 8px; align-items: center; }
.v3 .v3-lightrow input[type=color] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); flex: none; }
.v3-power { flex: 1; min-width: 0; }
.v3 .v3-power input[type=range] { flex: 1; min-width: 0; }
.v3-power output { min-width: 2.5em; }
.v3-xyz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.v3-xyz label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.v3 .v3-xyz input { width: 100%; min-width: 0; padding: 4px 6px; font-size: 13px; }
.v3-light .check { font-size: 14px; }
.v3-addlight { display: flex; gap: 6px; align-items: center; }
.v3 .v3-addlight select { flex: 1; min-width: 0; }
.v3-addlight .btn { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
.v3-lighthint { font-size: 12.5px; margin: 0; }
.v3-snappanel .v3-thumb { max-width: 100%; }
.v3-layerlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.v3-layer { display: grid; gap: 1px; padding: 5px 8px 5px calc(8px + var(--depth, 0) * 12px); border-left: 3px solid var(--line); border-radius: 4px; background: var(--paper); }
.v3-layer code { font-size: 13px; overflow-wrap: anywhere; }
.v3-layerkind { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.v3-layer.missing { border-left-color: var(--server); }
.v3-layermiss { color: var(--server); font-weight: 600; font-size: 12.5px; }
.v3-layernote { font-size: 12.5px; margin: 0; }
.v3-rootpick { display: grid; gap: 8px; }
.v3-rootpick .btn { padding: 6px 10px; font-size: 14px; }

/* without WebGL: a note where the stage would be; the start card and the toolbar sit below it */
.v3 .v3-noglview .v3-stage.v3-noglhost { height: auto; min-height: 0; touch-action: auto; }
.v3-noglview .v3-start { position: static; padding: 0 16px 16px; }
.v3-noglview .v3-bar { position: static; padding: 0 8px 8px; }
.v3-noglview .v3-bar:empty { display: none; }
.v3-noglview .v3-topnote { position: static; translate: none; width: auto; padding: 0 16px 12px; }
.v3-nogl { display: grid; gap: 6px; padding: 18px 20px; max-width: 64ch; }
.v3-nogl p { margin: 0; }
.v3-noglmsg { font-weight: 600; color: var(--ink); line-height: 1.45; }
.v3-noglhint { font-size: 14px; color: var(--muted); }