/* Shared components used by ui.js helpers. Scene-specific styling lives in
   css/scene-<id>.css so scenes never fight each other. */

/* ------------------------------------------------------------- image fallback */
.img-ph {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 12px, rgba(255,255,255,.018) 12px 24px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 90px;
}

/* --------------------------------------------------------------- journey rail */
.rail {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, .8vw, 16px);
}
.rail-item {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .55em .95em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  font-size: clamp(14px, .95vw, 18px);
  transition: all .45s var(--t);
}
.rail-dot {
  width: .62em; height: .62em; border-radius: 50%;
  background: rgba(255,255,255,.25);
  transition: all .45s var(--t);
}
.rail-label { color: var(--paper-dim); }
.rail-state { color: var(--paper-faint); font-size: .88em; letter-spacing: .06em; text-transform: uppercase; }

.rail-item.is-done {
  border-color: rgba(143,168,106,.55);
  background: rgba(143,168,106,.12);
}
.rail-item.is-done .rail-dot { background: var(--green-hi); box-shadow: 0 0 12px rgba(143,168,106,.7); }
.rail-item.is-done .rail-label { color: var(--paper); }
.rail-item.is-done .rail-state { color: var(--green-hi); }

.rail-item.is-current {
  border-color: rgba(228,193,105,.6);
  background: rgba(228,193,105,.12);
}
.rail-item.is-current .rail-dot {
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(228,193,105,.7);
  animation: pulseDot 1.9s ease-out infinite;
}
.rail-item.is-current .rail-label { color: var(--gold-hi); }
.rail-item.is-current .rail-state { color: var(--gold); }
.rail-item.is-locked { opacity: .5; }

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(228,193,105,.55); }
  70%  { box-shadow: 0 0 0 .75em rgba(228,193,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(228,193,105,0); }
}

/* -------------------------------------------------------------------- scanner */
.scanner {
  position: relative;
  width: clamp(150px, 15vw, 250px);
  height: clamp(150px, 15vw, 250px);
  display: grid;
  place-items: center;
}
.scanner-core {
  width: 44%;
  aspect-ratio: 1;
  border-radius: 26%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(228,193,105,.22), rgba(228,193,105,.05));
  border: 1px solid rgba(228,193,105,.5);
  color: var(--gold-hi);
}
.scanner-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(228,193,105,.34);
  animation: ripple 2.6s var(--t) infinite;
}
.scanner-ring.d2 { animation-delay: 1.3s; }
@keyframes ripple {
  0%   { transform: scale(.55); opacity: 0; }
  35%  { opacity: .85; }
  100% { transform: scale(1.18); opacity: 0; }
}
.scanner-label {
  position: absolute;
  bottom: -.4em;
  font-size: clamp(13px, .78vw, 14px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--paper-faint);
  white-space: nowrap;
}
.nfc-glyph { display: grid; place-items: center; }

/* ------------------------------------------------------------------------- QR */
.qr {
  position: relative;
  width: clamp(96px, 9vw, 168px);
  aspect-ratio: 1;
  background: #fff;
  border-radius: 10px;
  padding: 7%;
  overflow: hidden;
}
.qr i { position: absolute; background: #0B0C0A; }

/* scan beam sweeping a QR */
.qr.scanning::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(228,193,105,.85), transparent);
  animation: sweep 1.5s var(--t) infinite;
}
@keyframes sweep {
  0%   { top: -22%; }
  100% { top: 100%; }
}

/* ------------------------------------------------------------- receipt / POS */
.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 1.4em;
  padding: .5em 0;
  border-bottom: 1px dashed var(--line);
  font-size: clamp(13px, .95vw, 18px);
}
.receipt-row:last-child { border-bottom: 0; }
.receipt-row.total { border-top: 1px solid var(--line-2); border-bottom: 0; font-weight: 700; color: var(--gold-hi); margin-top: .3em; padding-top: .7em; }

/* ---------------------------------------------------------------- status pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .38em .85em;
  border-radius: 999px;
  font-size: clamp(13px, .8vw, 14px);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--line-2);
}
.pill.ok   { color: var(--green-hi); border-color: rgba(143,168,106,.5); background: rgba(143,168,106,.12); }
.pill.gold { color: var(--gold-hi);  border-color: rgba(228,193,105,.5); background: rgba(228,193,105,.12); }
.pill.wait { color: var(--paper-faint); }

/* ------------------------------------------------------------------ big panel */
.panel {
  padding: clamp(16px, 1.6vw, 34px);
  border-radius: var(--r-lg);
}
.panel-title {
  font-size: clamp(13px, .82vw, 15px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: .9em;
}

/* -------------------------------------------------------------------- number */
.big-number {
  font-size: clamp(28px, 3.2vw, 62px);
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}