/* Penampil pratinjau papan (partial _pratinjau.html). Memakai alias warna --h-* dari style.css (terang dan gelap). */
.pv { margin: 18px 0; background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r-besar); padding: 12px; }
.pv-tab { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--h-garis); padding-bottom: 8px; margin-bottom: 12px; }
.pv:not(.js) .pv-tab { display: none; }
.pv:not(.js) .pv-panel + .pv-panel { margin-top: 20px; }
.pv-tab button { font: inherit; font-weight: 600; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-kapsul, 999px); background: transparent; color: var(--h-teks-2); cursor: pointer; }
.pv-tab button[aria-selected="true"] { background: var(--h-lembut); color: var(--h-teks); border-color: var(--h-garis); }
.pv-tab button:focus-visible, .pv-tombol button:focus-visible, .pv-zoom:focus-visible { outline: 2px solid var(--tembaga-gelap); outline-offset: 2px; }
.pv-panel[hidden] { display: none; }
.pv-tombol { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.pv-tombol button { font: inherit; font-size: 14px; min-height: 44px; padding: 0 14px; border: 1px solid var(--h-garis); border-radius: var(--r); background: var(--h-kartu); color: var(--h-teks); cursor: pointer; }
.pv-tombol button[aria-pressed="true"] { background: var(--h-lembut); font-weight: 700; }
.pv-3d model-viewer { width: 100%; height: 440px; background: #eef0ee; border-radius: var(--r); --poster-color: transparent; }
.pv-cadangan { width: 100%; height: 440px; object-fit: contain; border-radius: var(--r); background: #eef0ee; }
.pv-catatan { font-size: 13.5px; color: var(--h-teks-2); margin: 8px 0 0; }
.pv-zoom { position: relative; overflow: hidden; height: 460px; background: #1b1f1d; border-radius: var(--r); touch-action: none; cursor: grab; user-select: none; }
.pv-zoom:active { cursor: grabbing; }
.pv-zoom img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.pv-pdf { width: 100%; height: 560px; border: 1px solid var(--h-garis); border-radius: var(--r); background: #fff; }
.pv-pdf-tautan { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.pv-info { margin: 12px 0 0; font-size: 13.5px; }
.pv-bom td:nth-child(2) { text-align: right; }
@media (max-width: 640px) {
  .pv { padding: 10px; }
  .pv-3d model-viewer { height: 320px; }
  .pv-zoom { height: 340px; }
  .pv-pdf { display: none; }  /* PDF di iframe tidak nyaman di HP: tombol "Buka skematik" saja */
  .pv-tab button { padding: 0 12px; }
}
/* Penampil React (frontend/src/components/PcbPreviewViewer.tsx, class .pv-r; brief 14). Penampil Jinja admin tetap memakai aturan di atas. */
.pv-r .pv-3d-kanvas { position: relative; width: 100%; height: 440px; background: #eef0ee; border-radius: var(--r); overflow: hidden; }
.pv-r .pv-3d model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border-radius: 0; }
/* poster (render KiCad) menutup model sampai model dan teksturnya selesai dimuat, lalu memudar halus */
.pv-r .pv-cadangan { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: #eef0ee; transition: opacity .2s ease; }
.pv-r .pv-cadangan.pudar { opacity: 0; pointer-events: none; }
.pv-r .pv-gagal { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 12px; background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r); font-size: 14px; }
.pv-r .pv-gagal p { margin: 0; }
.pv-r .pv-gagal button { font: inherit; font-size: 14px; min-height: 44px; padding: 0 14px; border: 1px solid var(--h-garis); border-radius: var(--r); background: var(--h-lembut); color: var(--h-teks); cursor: pointer; }
/* layout: tinggi mengikuti rasio papan (aspect-ratio diisi dari gambar), dibatasi 50-75vh; papan pas penuh di tengah wadah */
.pv-r .pv-zoom { width: 100%; height: auto; min-height: 50vh; max-height: 75vh; background: var(--h-lembut); border: 1px solid var(--h-garis); }
.pv-r .pv-zoom img { inset: 3%; width: 94%; height: 94%; object-fit: contain; transform-origin: center; }
@media (max-width: 640px) {
  .pv-r .pv-3d-kanvas { height: 320px; }
  .pv-r .pv-zoom { height: auto; }
}
/* tanpa JS: model-viewer tidak hidup, jadi tampilkan gambar poster */
.pv:not(.js) model-viewer, .pv:not(.js) .pv-3d .pv-tombol { display: none; }
.pv:not(.js) .pv-cadangan[hidden] { display: block; }
.pv:not(.js) .pv-zoom { height: auto; cursor: default; touch-action: auto; overflow: auto; } .pv:not(.js) .pv-zoom img { position: static; max-width: 100%; }
.pv-r:not(.js) .pv-zoom { min-height: 0; max-height: none; }