/* ==========================================================
   FAIM JEWELLERY ARABIA EXPERIENCE  |  kiosk-ar.css
   AR mirror screen (kiosk-ar.js). Needs tracking.css.
   ========================================================== */
.ar-wrap { height: 100%; display: grid; grid-template-columns: 1fr 34rem; gap: 3rem; padding: 1.5rem 3.5rem 2rem; }
.ar-stage { position: relative; border-radius: var(--r-m); overflow: hidden; background: #1a1512; min-height: 0; }
.ar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.ar-standin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: linear-gradient(#3b3129, #1d1814); }
.ar-standin svg { width: 62%; height: auto; }
.ar-standin svg path { fill: #c9b6a2; }
.ar-standin__hand { fill: none !important; stroke: #c9b6a2; stroke-width: 3; opacity: .7; }
.ar-standin .note { position: absolute; top: 1.5rem; inset-inline: 1.5rem; color: #f2e9dc; }

/* overlay layer: pieces are positioned in stage pixels by JS */
.ar-layer { position: absolute; inset: 0; pointer-events: none; }
.ar-piece { position: absolute; left: 0; top: 0; width: 20%; mix-blend-mode: multiply; opacity: 0; transition: opacity .4s var(--ease); transform-origin: center; will-change: transform; }
.ar-piece.is-on { opacity: 1; }
.ar-piece img { width: 100%; height: auto; display: block; pointer-events: none; user-select: none; }
.ar-piece[data-type="earring"] { overflow: hidden; }
.ar-piece[data-type="earring"] img { width: 200%; max-width: none; }
.ar-piece[data-type="earring"][data-side="b"] img { transform: translateX(-50%); }
.ar-piece.is-manual { pointer-events: auto; touch-action: none; cursor: move; }
.ar-cue { position: absolute; top: 1.25rem; inset-inline-start: 50%; transform: translateX(-50%); z-index: 6; color: #fff; background: rgba(14,11,9,.55); padding: .5rem 1.25rem; border-radius: 999px; font-size: 1.05rem; white-space: nowrap; animation: fadeIn .4s var(--ease); }
html[dir="rtl"] .ar-cue { transform: translateX(50%); }
.ar-status { position: absolute; top: 1.25rem; inset-inline-start: 1.25rem; z-index: 6; display: flex; gap: .6rem; flex-wrap: wrap; max-width: 60%; }
.ar-status .trk-chip { background: rgba(14,11,9,.6); }
.ar-status .demo-flag { background: rgba(14,11,9,.7); }
.ar-disclaimer { position: absolute; bottom: 1rem; inset-inline: 1rem; z-index: 6; text-align: center; font-size: .95rem; color: #fff; background: rgba(14,11,9,.6); padding: .5rem 1rem; border-radius: 999px; width: max-content; margin: auto; max-width: 90%; }
.ar-cal { position: absolute; inset: 0; z-index: 20; }

/* side panel */
.ar-side { display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; }
.ar-side h1 { font-size: 3.2rem; }
.ar-rail { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: max-content; gap: .7rem; flex: 1; min-height: 0; align-content: start; overflow: auto; }
.ar-thumb { aspect-ratio: 1; width: 100%; display: block; border: 2px solid transparent; transition: border-color var(--t-fast); }
.ar-thumb img { padding: 6%; }
.ar-thumb.is-on { border-color: var(--gold); }
.ar-adjust { border-top: 1px solid var(--gold-faint); padding-top: .8rem; }
.ar-adjust summary { min-height: 3rem; display: flex; align-items: center; cursor: pointer; color: var(--smoke); font-size: 1rem; letter-spacing: .03em; }
.ar-adjust label { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 1rem; min-height: 3rem; font-size: .95rem; color: var(--smoke); }
.ar-adjust input { accent-color: var(--gold); height: 3rem; width: 100%; }
.ar-acts { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

/* result modal */
.ar-modal { max-width: min(80rem, 94vw); }
.ar-result { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.ar-result > img { width: 100%; border-radius: var(--r-s); }
.ar-result h2 { font-size: 2.8rem; margin-bottom: 1rem; }
.ar-result .note { margin-bottom: .8rem; }
.ar-result .ar-acts { margin: 1.5rem 0 1rem; }

@media (max-width: 1100px) {
  .ar-wrap { grid-template-columns: 1fr; height: auto; }
  .ar-stage { height: 60vh; }
  .ar-result { grid-template-columns: 1fr; }
}

/* ================= v4: detection graphics, chips, confidence arc, controls ================= */
.ar-piece { transition: opacity .3s var(--ease); }
.ar-piece.is-on.is-faded { opacity: .3; transition: opacity .3s var(--ease) .1s; }
.ar-detect { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.ar-detect[hidden] { display: none; }
.ar-detect circle, .ar-detect line, .ar-detect ellipse { fill: none; stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ar-g-face { stroke-dasharray: 6 8; opacity: .8; }
.ar-g-eye { fill: rgba(239,230,213,.9) !important; stroke: none !important; r: 4; }
.ar-g-ear { fill: var(--gold) !important; stroke: none !important; }
.ar-g-neck, .ar-g-shoulder { stroke: rgba(239,230,213,.55); stroke-dasharray: 4 6; }
.ar-g-bone { stroke: rgba(239,230,213,.5); }
.ar-g-joint { fill: rgba(210,178,113,.6) !important; stroke: none !important; r: 3; }
.ar-g-wrist { stroke-width: 2; r: 8; }
.ar-g-anchor line, .ar-g-anchor circle { stroke: var(--gold); stroke-width: 1.6; }
.ar-chips { position: absolute; top: 4.5rem; inset-inline-start: 1.25rem; z-index: 6; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; max-width: 40%; pointer-events: none; }
.ar-chip { font-size: .8rem; letter-spacing: .04em; padding: .3rem .8rem; border-radius: 999px; background: rgba(14,11,9,.65); color: var(--smoke); border: 1px solid transparent; display: inline-flex; align-items: center; gap: .4rem; animation: fadeIn .3s var(--ease); }
.ar-chip::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ash); }
.ar-chip[data-c="ok"] { color: var(--gold); border-color: var(--gold-dim); } .ar-chip[data-c="ok"]::before { background: var(--gold); }
.ar-chip[data-c="warn"] { color: var(--alert); } .ar-chip[data-c="warn"]::before { background: var(--alert); }
.ar-conf { position: absolute; top: 1.25rem; inset-inline-end: 1.25rem; width: 3.4rem; height: 3.4rem; z-index: 6; transform: rotate(-90deg); }
.ar-conf circle { fill: none; stroke: rgba(239,230,213,.18); stroke-width: 2; }
.ar-conf__arc { stroke: var(--gold) !important; stroke-width: 3 !important; stroke-dasharray: 163; stroke-dashoffset: 163; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.ar-ctl { display: flex; flex-wrap: wrap; gap: .5rem; }
.ar-ctl .btn, .ar-acts .btn--small { min-height: 3rem; padding: 0 1rem; font-size: .95rem; }
.ar-ctl .btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.ar-ctl .btn[hidden] { display: none; }
.ar-fingers, .ar-quality { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ar-fingers[hidden] { display: none; }
.ar-fingers .note, .ar-quality .note { margin-inline-end: .4rem; font-size: .9rem; }
.ar-fingers .chip, .ar-quality .chip { min-height: 2.6rem; padding: 0 1rem; font-size: .95rem; }
.ar-diag { position: absolute; inset-inline-end: 1rem; bottom: 4rem; z-index: 8; width: 24rem; max-height: 70%; overflow: auto; background: rgba(14,11,9,.88); border: 1px solid var(--gold-dim); border-radius: var(--r-s); padding: 1rem; font-size: .8rem; }
.ar-diag[hidden] { display: none; }
.ar-diag pre { white-space: pre-wrap; color: var(--smoke); font-size: .72rem; line-height: 1.35; margin: .5rem 0; max-height: 28rem; overflow: auto; }
.ar-pin { font-size: 1.6rem; letter-spacing: .4em; text-align: center; padding: .6rem; background: var(--tray-2); color: var(--ivory); border: 1px solid var(--gold-dim); border-radius: var(--r-s); width: 100%; }