/* ================================================================
   StitchMix scan module styles.
   Uses the EXISTING site variables (--paper, --card, --ink, --navy,
   --snug, --match, --roomy, --rule, --mono, --disp, --body, --r).
   If mounted somewhere without them, these fallbacks apply.
   Scoped under .scan-root so nothing here leaks into the rest of the site.
   ================================================================ */
.scan-root{
  --s-ink: var(--ink, #161A18);
  --s-ink2: var(--ink-2, #5E665F);
  --s-paper: var(--card, #F6F7F2);
  --s-surface: var(--card-2, #EFF1EA);
  --s-rule: var(--rule, #CBD0C4);
  --s-navy: var(--navy, #1F3A5F);
  --s-clay: var(--snug, #B34733);
  --s-match: var(--match, #3C7A54);
  --s-disp: var(--disp, "Archivo", system-ui, sans-serif);
  --s-body: var(--body, "Karla", system-ui, sans-serif);
  --s-mono: var(--mono, "DM Mono", ui-monospace, monospace);

  max-width: 640px;
  margin: 0 auto;
  padding: 16px 18px 96px;
  font-family: var(--s-body);
  color: var(--s-ink);
}

/* progress rail */
.scan-rail{ display:flex; gap:6px; margin-bottom:22px; }
.scan-rail i{
  flex:1; height:3px; border-radius:2px; background:var(--s-rule);
  transition: background .35s ease;
}
.scan-rail i.done{ background:var(--s-navy); }
.scan-rail i.now{ background:var(--s-clay); }

/* stages: only one shown */
.scan-stage{ display:none; }
.scan-stage.on{ display:block; animation: scanFade .32s ease; }
@keyframes scanFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1;transform:none;} }
@media (prefers-reduced-motion: reduce){
  .scan-stage.on{ animation:none; }
  .scan-rail i{ transition:none; }
}

.scan-eyebrow{
  font-family:var(--s-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--s-ink2); margin-bottom:8px;
}
.scan-opt{ color:var(--s-ink2); font-weight:400; text-transform:none; letter-spacing:0; }
.scan-h{
  font-family:var(--s-disp); font-size:24px; line-height:1.15;
  margin:0 0 12px; letter-spacing:-.01em;
}
.scan-lede{ font-size:16px; line-height:1.5; color:var(--s-ink); margin:0 0 16px; }
.scan-why{
  font-size:14px; line-height:1.5; color:var(--s-ink2);
  border-left:2px solid var(--s-rule); padding:6px 0 6px 12px; margin:16px 0;
}

.scan-field{ display:block; margin:16px 0; }
.scan-field span{ display:block; font-size:14px; color:var(--s-ink2); margin-bottom:6px; }
.scan-field select, .scan-field input{
  width:100%; padding:13px 12px; border:1px solid var(--s-rule);
  border-radius:var(--r,3px); background:var(--s-paper); font-size:16px;
}

.scan-checklist{ margin:8px 0 0; padding-left:20px; }
.scan-checklist li{ margin:8px 0; line-height:1.45; }

/* illustrative example blocks (CSS-drawn, no external assets) */
.scan-example{
  height:160px; border-radius:var(--r,3px); background:var(--s-surface);
  border:1px solid var(--s-rule); margin:14px 0; position:relative; overflow:hidden;
}
.scan-example[data-illus="flat"]::after{
  content:""; position:absolute; inset:26px; border-radius:6px;
  background:
    linear-gradient(var(--s-navy),var(--s-navy)) center/58% 78% no-repeat;
  clip-path: polygon(20% 8%,35% 0,65% 0,80% 8%,100% 26%,86% 40%,86% 100%,14% 100%,14% 40%,0 26%);
  opacity:.85;
}
.scan-example[data-illus="marker"]::after{
  content:""; position:absolute; left:44%; top:42%; width:44px; height:28px;
  background:var(--s-ink); border-radius:3px; box-shadow:0 0 0 3px var(--s-paper);
}

/* toggle (card vs marker) */
.scan-toggle{ display:flex; gap:8px; margin:12px 0; }
.scan-toggle button{
  flex:1; padding:10px; border:1px solid var(--s-rule); background:var(--s-paper);
  border-radius:var(--r,3px); font-size:14px; color:var(--s-ink2);
}
.scan-toggle button.on{ border-color:var(--s-navy); color:var(--s-navy); font-weight:600; }
.scan-ref-body p{ font-size:15px; line-height:1.5; }

/* capture surface */
.scan-capture{
  position:relative; width:100%; aspect-ratio:3/4; background:#000;
  border-radius:var(--r,3px); overflow:hidden; margin:12px 0;
}
.scan-video, .scan-preview, .scan-canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.scan-frameguide{
  position:absolute; inset:9%; border:2px dashed rgba(255,255,255,.55);
  border-radius:6px; pointer-events:none;
}
.scan-frameguide.tag{ inset:26% 12%; }
.scan-capture-actions{ display:flex; flex-direction:column; gap:10px; }
.scan-filebtn{
  text-align:center; padding:12px; border:1px solid var(--s-rule);
  border-radius:var(--r,3px); font-size:15px; color:var(--s-navy); cursor:pointer;
}
.scan-retake{ display:flex; flex-direction:column; gap:10px; }

/* buttons */
.scan-primary{
  width:100%; padding:15px; border:none; border-radius:var(--r,3px);
  background:var(--s-navy); color:#fff; font-size:16px; font-weight:600;
  margin-top:8px; cursor:pointer;
}
.scan-primary:disabled{ opacity:.45; cursor:not-allowed; }
.scan-text{
  width:100%; padding:12px; border:none; background:none; color:var(--s-navy);
  font-size:15px; margin-top:6px; cursor:pointer; text-decoration:underline;
}

/* analyzing steps */
.scan-steps{ list-style:none; padding:0; margin:20px 0; }
.scan-steps li{
  padding:13px 0 13px 34px; position:relative; color:var(--s-ink2);
  border-bottom:1px solid var(--s-rule); font-size:15px;
}
.scan-steps li::before{
  content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; border:2px solid var(--s-rule);
}
.scan-steps li.now{ color:var(--s-ink); font-weight:600; }
.scan-steps li.now::before{ border-color:var(--s-clay); border-right-color:transparent;
  animation: scanSpin .8s linear infinite; }
.scan-steps li.done::before{ background:var(--s-match); border-color:var(--s-match); }
@keyframes scanSpin{ to{ transform:translateY(-50%) rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .scan-steps li.now::before{ animation:none; } }

/* review */
.scan-overlay-wrap{ position:relative; margin:12px 0; }
.scan-overlay{ width:100%; border-radius:var(--r,3px); display:block; }
.scan-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.scan-svg line{ stroke:var(--s-clay); stroke-width:.6; opacity:.25; transition:opacity .2s; }
.scan-svg line.hot{ opacity:1; stroke-width:.9; }

.scan-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.scan-chip{
  border:1px solid var(--s-rule); border-radius:100px; padding:8px 12px;
  font-size:14px; background:var(--s-paper); cursor:pointer; display:flex;
  align-items:center; gap:8px;
}
.scan-chip .v{ font-family:var(--s-mono); font-weight:600; }
.scan-chip .ic{ font-size:12px; }
.scan-chip[data-state="high"] .ic{ color:var(--s-match); }
.scan-chip[data-state="review"] .ic{ color:var(--chalk,#D9A62B); }
.scan-chip[data-state="photo"] .ic, .scan-chip[data-state="na"] .ic{ color:var(--s-ink2); }
.scan-chip.on{ border-color:var(--s-navy); box-shadow:0 0 0 1px var(--s-navy); }

.scan-editrow{ display:flex; gap:8px; align-items:center; margin:8px 0; }
.scan-editrow input{ width:80px; padding:8px; border:1px solid var(--s-rule);
  border-radius:var(--r,3px); font-family:var(--s-mono); }

.scan-tagread{
  background:var(--s-surface); border:1px solid var(--s-rule);
  border-radius:var(--r,3px); padding:12px; margin:12px 0; font-size:14px;
}
.scan-tagread b{ font-family:var(--s-mono); }

.scan-consent{
  display:flex; gap:10px; align-items:flex-start; margin:16px 0;
  font-size:14px; line-height:1.5; color:var(--s-ink);
}
.scan-consent input{ margin-top:3px; width:18px; height:18px; flex:none; }

.scan-account{
  margin-top:16px; padding:14px; background:var(--s-surface);
  border-radius:var(--r,3px); border:1px solid var(--s-rule);
}

.scan-error{
  margin-top:14px; padding:12px 14px; border-radius:var(--r,3px);
  background:#FBEEEC; border:1px solid var(--s-clay); color:#7A2A1C;
  font-size:14px; line-height:1.5;
}

/* thumb-reachable primary actions on small screens */
@media (max-width:520px){
  .scan-h{ font-size:22px; }
  .scan-root{ padding-bottom:110px; }
}