/* RAWLITY — the report, alive. Pairs with report-inspect.js.
 *
 * Loaded by BOTH report.html and index.html — report.html does not load the main RAWLITY.css,
 * so this stands alone. Tokens are repeated as fallbacks (var(--accent,#FFF4D4)) so it is
 * correct on a page that never defined them.
 *
 * Theme: solid #242424 frames (no translucent borders), cream as accent only, black panels,
 * no emoji, thin strokes.
 */

/* ── The report inline (homepage sample: sheet with card hot zones) ─────────────
   The sheet image is the floor; .ir-hot is a transparent window over the card drawn inside it.
   Clicking anywhere opens the one full-screen inspector — nothing pops before that. */
/* No native image-drag, no text-selection highlight, anywhere in the inspect UI. Without this a
   real mouse drag lifts a ghost of the image instead of panning the sheet — the exact "ลากไม่
   เต็มที่" bug (ซา 2026-07-17). Same guard collection.html already carries for the slab. */
.ir-sheet-wrap img, .ir-card3d-img, .ir-def-fig img, .rz-lb-stage img, .ir-mag {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

.ir-sheet-live { margin: 0 auto; max-width: 920px; position: relative; }
.ir-sheet-wrap { position: relative; line-height: 0; }
.ir-sheet-img {
  display: block; width: 100%; height: auto; cursor: zoom-in;
  border: 1px solid #242424; border-radius: 8px; background: #000;
}
.ir-sheet-x { display: none; }
/* Expand in place: the SAME sheet grows to fill the screen, so its cards keep tilting, the loupe
   keeps working and the pins stay clickable (ซา 2026-07-17). Not a dead image swap. */
.ir-sheet-full {
  position: fixed; inset: 0; z-index: 1500; margin: 0; max-width: none; padding: 2.5vh 2.5vw;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 6, 6, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
@supports not (backdrop-filter: blur(4px)) { .ir-sheet-full { background: #060606; } }
.ir-sheet-full .ir-sheet-wrap { width: auto; transform-origin: center center; touch-action: none; cursor: grab; }
.ir-sheet-full .ir-sheet-wrap:active { cursor: grabbing; }
/* Cards + loupe stay live when expanded (ซา 2026-07-17: they only take their own small space, so
   they don't block the free drag+zoom of the rest of the sheet). "Free" was about the zoom range,
   now unbounded. */
.ir-sheet-full .ir-sheet-img {
  max-height: 95vh; max-width: 95vw; width: auto; height: auto; cursor: inherit;
}
.ir-sheet-full .ir-sheet-x {
  display: flex; position: fixed; top: 1.4rem; right: 1.4rem; z-index: 3;
  width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; color: rgba(239, 216, 185, .52); cursor: pointer;
  font: inherit; font-size: 1.05rem; font-weight: 300; line-height: 1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9); transition: color .18s ease, transform .18s ease;
}
.ir-sheet-full .ir-sheet-x:hover { color: var(--accent, #FFF4D4); transform: scale(1.08); }
@media (max-width: 560px) { .ir-sheet-full .ir-sheet-x { top: .9rem; right: .9rem; } }
.ir-hot { position: absolute; cursor: zoom-in; }
/* A quiet "Expand" tag on the card, so the customer knows the sheet is more than a picture —
   faint until they reach for it, never a box sitting on the art. */
.ir-hot-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: .35rem .7rem; border: 1px solid rgba(239, 216, 185, .5); border-radius: 3px;
  background: rgba(6, 6, 6, .55); color: rgba(239, 216, 185, .85);
  font-size: .55rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1; opacity: 0; transition: opacity .18s ease; pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
.ir-hot:hover .ir-hot-hint, .ir-hot:focus-visible .ir-hot-hint { opacity: 1; }
.ir-hot:focus-visible, .ir-sheet-img:focus-visible,
.ir-card .ir-main:focus-visible, .ir-def-fig img:focus-visible {
  outline: 2px solid var(--accent, #FFF4D4); outline-offset: 2px;
}

/* ── The report page: front/back scans grid ─────────────────────────────────── */
.ir-live { margin: 0 auto 2.6rem; max-width: 920px; }
.ir-live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.ir-card { margin: 0; }
.ir-card .ir-main {
  display: block; width: 100%; height: auto; background: #050505; cursor: zoom-in;
  border: 1px solid #242424; border-radius: 8px;
}
.ir-cap { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin: .7rem 0 0; }
.ir-cap b {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent, #FFF4D4);
}
.ir-cap span { font-size: .6rem; letter-spacing: .08em; color: rgba(239, 216, 185, .5); }

/* ── The playable card (3D tilt + free-floating loupe) ─────────────────────────
   The card tilts to the pointer with a holo sheen; a loupe follows the cursor and spills past
   the card edge (fixed, un-clipped), but only appears while the pointer is on the card.
   (ซา 2026-07-17: "เล่น 3d ... แว่นขยาย ทะลุออกมาฟรีสไตล์ แต่ส่องได้เฉพาะการ์ด") */
.ir-card3d { margin: 0; }
/* On the sheet: the card overlays exactly where rawtool drew it, so it IS the report's card. */
.ir-card3d-onsheet { position: absolute; }
.ir-card3d-onsheet .ir-card3d-inner,
.ir-card3d-onsheet .ir-card3d-img,
.ir-card3d-onsheet .ir-card3d-holo { width: 100%; height: 100%; }
.ir-card3d-onsheet .ir-card3d-img { border: 0; border-radius: 2px; object-fit: fill; }
/* Invisible clickable hotspot placed over the pin RAWTOOL already drew on the sheet — we do NOT
   draw our own pin (ซา 2026-07-17). At rest it shows nothing; a faint cream ring only on
   hover/focus tells the customer it is clickable. Sits above the card so the click hits it. */
.ir-pin {
  position: absolute; z-index: 4; transform: translate(-50%, -50%);
  width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%;
  background: none; border: 1px solid transparent; cursor: pointer;
  font-size: 0; line-height: 0; transition: border-color .12s ease, background .12s ease;
}
.ir-pin:hover, .ir-pin:focus-visible {
  outline: none; border-color: rgba(239, 216, 185, .8);
  background: radial-gradient(circle, rgba(255, 244, 212, .18), transparent 70%);
}
@media (max-width: 560px) { .ir-pin { width: 1.7rem; height: 1.7rem; } }
.ir-card3d-inner {
  position: relative; transform-style: preserve-3d; will-change: transform;
  transition: transform .12s ease-out;
}
.ir-card3d-img {
  display: block; width: 100%; height: auto; border-radius: 8px;
  border: 1px solid #242424; background: #050505;
}
/* Holo sheen: a soft cream light that tracks the cursor via --hx/--hy, screened over the art. */
.ir-card3d-holo {
  position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  mix-blend-mode: screen; opacity: 0; transition: opacity .15s ease;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%),
    rgba(255, 244, 212, .34), rgba(255, 244, 212, .06) 32%, transparent 55%);
}
.ir-card3d:hover .ir-card3d-holo { opacity: 1; }
/* The loupe. z 2500 clears the nav (1000); it only ever shows while a mouse is on a card. */
/* Side-panel zoom (ซา 2026-07-17: "แว่นทำแบบนี้ดีกว่า"): a marker shows the region on the card,
   and the big panel beside it paints that region large — the e-commerce product-zoom pattern. */
.ir-zoombox {
  position: fixed; z-index: 2499; pointer-events: none;
  border: 1px solid rgba(239, 216, 185, .9); background: rgba(255, 244, 212, .12);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .04);
}
.ir-zoombox[hidden] { display: none; }
.ir-zoompanel {
  position: fixed; z-index: 2500; pointer-events: none; border-radius: 4px;
  border: 1px solid #242424; background-color: #050505; background-repeat: no-repeat;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .8);
}
.ir-zoompanel[hidden] { display: none; }

/* ── Defect close-ups ─────────────────────────────────────────────────────── */
.ir-def-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.ir-def-fig { margin: 0; }
.ir-def-fig img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid #242424;
  border-radius: 6px; background: #0c0a07; display: block; cursor: zoom-in;
}
.ir-def-fig figcaption {
  font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(239, 216, 185, .55); text-align: center; margin-top: .5rem; line-height: 1.4;
}

/* ── The one full-screen inspector ────────────────────────────────────────────
   z-index 2000, not 300: the site nav is fixed at 1000 and once painted over the top of this,
   putting the ✕ UNDER the mobile menu button so the only way out could not be clicked
   (measured 2026-07-17). Anything full-screen must clear the nav. Stays below the sign-in
   overlay (9999), which must always win. */
.rz-lb {
  position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column;
  background: rgba(6, 6, 6, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
/* No backdrop-filter (older Safari / in-app browsers) → fall back to solid, never to a
   see-through panel that makes the report unreadable. */
@supports not (backdrop-filter: blur(4px)) { .rz-lb { background: #060606; } }
.rz-lb[hidden] { display: none; }

/* Just the way out — a quiet mark, not a bar (ซา 2026-07-17: "ต้องการแค่กากบาทเลย ไม่ต้องทำ
   เป็น nav"; "ปุ่มแบบนี้ชัดเจนเกินแล้วไม่คุมธีม"). No fill, no frame. The 44px hit area stays
   even though the glyph is small — quiet must not mean hard to hit. */
.rz-lb-x {
  position: absolute; top: 1.4rem; right: 1.4rem; z-index: 3;
  width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; border-radius: 2px;
  color: rgba(239, 216, 185, .52); cursor: pointer;
  font: inherit; font-size: 1.05rem; font-weight: 300; line-height: 1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
  transition: color .18s ease, transform .18s ease;
}
.rz-lb-x:hover { color: var(--accent, #FFF4D4); transform: scale(1.08); }
.rz-lb-x:focus-visible { color: var(--accent, #FFF4D4); outline: 1px solid rgba(239, 216, 185, .45); outline-offset: 4px; }
@media (max-width: 560px) { .rz-lb-x { top: .9rem; right: .9rem; } }

.rz-lb-stage {
  flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab; min-height: 0;
}
.rz-lb-stage:active { cursor: grabbing; }
.rz-lb-stage img {
  max-width: 94vw; max-height: 100%; display: block; transform-origin: center center;
  will-change: transform; user-select: none; -webkit-user-drag: none;
}

/* Filmstrip — switch between the report and its parts IN PLACE, so nothing ever stacks
   (ซา 2026-07-17: no popup-on-popup). Only shown when there is more than one thing. */
.rz-lb-strip {
  flex: 0 0 auto; display: flex; gap: .55rem; padding: .8rem 1rem;
  overflow-x: auto; justify-content: center; border-top: 1px solid #242424; background: rgba(10, 10, 10, .6);
}
.rz-lb-strip[hidden] { display: none; }
.rz-lb-thumb {
  flex: 0 0 auto; width: 3.6rem; height: 3.6rem; padding: 0; cursor: pointer;
  border: 1px solid #242424; border-radius: 4px; background: #000; overflow: hidden;
  opacity: .55; transition: opacity .15s ease, border-color .15s ease;
}
.rz-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rz-lb-thumb:hover { opacity: .85; }
.rz-lb-thumb[aria-selected="true"] { opacity: 1; border-color: var(--accent, #FFF4D4); }
@media (max-width: 560px) { .rz-lb-thumb { width: 3rem; height: 3rem; } .rz-lb-strip { padding: .6rem; } }

@media (max-width: 760px) {
  .ir-live-grid { grid-template-columns: 1fr; }
  .ir-def-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .ir-def-grid { grid-template-columns: 1fr; } }