/* ==========================================================
   FAIM JEWELLERY ARABIA EXPERIENCE  |  tracking.css
   Shared by kiosk-gesture.css and kiosk-ar.css: tracker status
   chip and the calibration overlay (KOO.tracking.calibrate).
   ========================================================== */
.trk-chip { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.6rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--gold-faint); color: var(--smoke); font-size: .9rem; letter-spacing: .03em; white-space: nowrap; }
.trk-chip i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ash); flex: none; transition: background var(--t-med); }
.trk-chip[data-status="python"] i, .trk-chip[data-status="browser"] i { background: var(--ok); }
.trk-chip[data-status="connecting"] i { background: var(--gold); animation: breathe 1.6s ease-in-out infinite; }
.trk-chip[data-status="none"] i { background: var(--alert); }

/* calibration overlay: fills the stage it is mounted in */
.cal { position: absolute; inset: 0; z-index: 20; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; padding: 2rem 2.5rem; background: rgba(14, 11, 9, .94); border-radius: var(--r-m); animation: fadeIn .5s var(--ease); }
.cal-preview { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--tray); min-height: 0; display: grid; place-items: center; }
.cal-video, .cal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cal-video { transform: scaleX(-1); }
.cal-hand { position: absolute; width: 34%; height: auto; color: var(--gold); opacity: .55; filter: drop-shadow(0 0 1.5rem rgba(0,0,0,.6)); transition: opacity var(--t-med); }
.cal-dot { position: absolute; width: 3rem; height: 3rem; margin: -1.5rem; border-radius: 50%; border: 1.5px solid var(--gold); box-shadow: 0 0 0 .5rem rgba(210,178,113,.12); transition: left .09s linear, top .09s linear; pointer-events: none; }
.cal-wait { position: absolute; bottom: 1.5rem; inset-inline-start: 1.5rem; color: var(--ivory); }
.cal-side { display: flex; flex-direction: column; justify-content: center; gap: 1rem; min-width: 0; min-height: 0; overflow: auto; }
.cal-side h2 { font-size: 2.8rem; }
.cal-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.cal-steps li { display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; padding: 0 1.1rem; border: 1px solid var(--gold-faint); border-radius: var(--r-s); font-size: 1.15rem; color: var(--smoke); transition: color var(--t-med), border-color var(--t-med); }
.cal-steps li svg { width: 1.5rem; height: 1.5rem; margin-inline-start: auto; color: var(--gold); opacity: 0; transition: opacity var(--t-med); }
.cal-steps li.is-done { color: var(--ivory); border-color: var(--gold-dim); }
.cal-steps li.is-done svg { opacity: 1; }
.cal-n { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--gold-dim); display: grid; place-items: center; font-family: var(--display); font-size: 1.3rem; color: var(--gold); flex: none; }
.cal-meter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; }
.cal-bar { height: .4rem; border-radius: 999px; background: var(--gold-faint); overflow: hidden; }
.cal-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s var(--ease); }
.cal-acts { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .25rem; }
.cal-none { color: var(--ivory); font-size: 1.05rem; }
.cal-file { white-space: normal; text-align: start; }

@media (max-width: 1100px) {
  .cal { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.5rem; overflow: auto; }
  .cal-preview { min-height: 14rem; }
}