/* ==========================================================================
   ShelfLens — a diagrammatic visual of on-device shelf recognition.
   Deliberately a DIAGRAM, not a faked photograph: it explains the pipeline
   without pretending to be a camera frame we don't have.
   ========================================================================== */

.lens {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--console-a), var(--console-b));
  padding: 18px;
  box-shadow: 0 28px 70px -24px var(--shadow);
}
.lens-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.lens-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 3px 9px;
}
.lens-chip i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--money);
  animation: pulse 2.4s infinite;
}

/* ── The shelf ──────────────────────────────────────────────────────────── */
.shelf {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #171F30 0%, #101725 100%);
  padding: 14px 12px;
  display: grid;
  gap: 12px;
}
.shelf-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}
/* Each "pack" is an abstract product block — colour and height vary so the
   row reads as a real shelf rather than a bar chart. */
.pack {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  position: relative;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: inset 0 -6px 10px -6px var(--shadow-soft);
}
.pack::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 24%;
  height: 16%;
  background: rgba(255, 255, 255, 0.24);
  border-radius: 1px;
}
.pack--gap {
  background: repeating-linear-gradient(
    45deg, rgba(var(--risk-rgb), .10) 0 6px, rgba(var(--risk-rgb), .02) 6px 12px);
  border: 1px dashed rgba(var(--risk-rgb), 0.5);
  box-shadow: none;
  height: 80px;
}
.pack--gap::after { display: none; }

/* The shelf is a fixed decorative diagram, so each pack's colour and height is
   addressed by position rather than by a style="" attribute — the CSP forbids
   inline styles, and this keeps the markup to structure only. */
.shelf-row--last { border-bottom: 0; padding-bottom: 0; }

.shelf-row:first-child .pack:nth-child(1) { --c1: #3B6FD4; --c2: #264C99; height: 74px; }
.shelf-row:first-child .pack:nth-child(2) { --c1: #D4703B; --c2: #994C26; height: 86px; }
/* :nth-child(3) is the gap — sized by .pack--gap */
.shelf-row:first-child .pack:nth-child(4) { --c1: #3BB4A0; --c2: #26786A; height: 70px; }

.shelf-row--last .pack:nth-child(1) { --c1: #8B5BD4; --c2: #5B3899; height: 56px; }
.shelf-row--last .pack:nth-child(2) { --c1: #D43B5B; --c2: #992639; height: 62px; }
.shelf-row--last .pack:nth-child(3) { --c1: #C9A227; --c2: #8A6E19; height: 58px; }
.shelf-row--last .pack:nth-child(4) { --c1: #3B6FD4; --c2: #264C99; height: 54px; }

/* ── Detection boxes ────────────────────────────────────────────────────── */
.det {
  position: absolute;
  inset: -3px;                /* hug the pack it belongs to */
  border: 1.5px solid var(--money);
  border-radius: 3px;
  pointer-events: none;
  animation: detIn 0.5s var(--ease) backwards;
}
/* Stagger the boxes so detection reads as a sweep rather than a snap. */
.shelf-row:first-child .pack:nth-child(2) .det { animation-delay: 0.1s; }
.shelf-row:first-child .pack:nth-child(3) .det { animation-delay: 0.2s; }
.shelf-row:first-child .pack:nth-child(4) .det { animation-delay: 0.3s; }
.shelf-row--last .pack:nth-child(1) .det { animation-delay: 0.4s; }
.det-l {
  position: absolute;
  top: -17px;
  left: -1.5px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  background: var(--money);
  color: var(--on-money);
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
  font-weight: 500;
}
.det--miss { border-color: var(--risk); border-style: dashed; }
.det--miss .det-l { background: var(--risk); color: var(--on-risk); }
@keyframes detIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .det { animation: none; } }

/* ── Read-out under the shelf ───────────────────────────────────────────── */
.lens-out {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
}
.lens-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 0.78rem;
}
.lens-line .sku { color: var(--ink-2); }
.lens-line .conf {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
}
.lens-badge {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid;
}
.lens-badge--ok   { color: var(--money); border-color: rgba(var(--money-rgb), 0.4); background: var(--money-soft); }
.lens-badge--oos  { color: var(--risk);  border-color: rgba(var(--risk-rgb), 0.4);  background: var(--risk-soft); }
.lens-foot {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lens-money { font-size: 0.9rem; font-weight: 550; }
.lens-note { font-size: 0.7rem; color: var(--ink-4); font-style: italic; }

/* ── Pipeline strip ─────────────────────────────────────────────────────── */
.pipe {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 30px;
  background: var(--surface);
}
.pipe-step {
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pipe-step:last-child { border-right: 0; }
.pipe-n { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-4); }
.pipe-step h4 { font-size: 0.88rem; letter-spacing: -0.015em; }
.pipe-step p { font-size: 0.76rem; color: var(--ink-3); line-height: 1.55; }
.pipe-ms {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--money);
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 900px) {
  .pipe { grid-template-columns: 1fr 1fr; }
  .pipe-step { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .pipe { grid-template-columns: 1fr; }
  .pipe-step { border-right: 0; }
  .lens-line { grid-template-columns: 1fr auto; }
  .lens-line .conf { display: none; }
}