/* ===========================================================================
   The public certificate — the hero screen.

   This is the only page most people will ever see, usually standing in a shop
   deciding whether to trust a price. It gets the full treatment: the saree fills
   the card, the Samiti's words sit on the photograph, a gold seal lands, and a
   zari hairline unspools before the provenance reveals itself.

   Four variants. Only the verified card discloses anything at all.
   =========================================================================== */

.verify-page {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 16px 60px;
  color: var(--ink);
}
.verify-page--verified { background: radial-gradient(130% 90% at 50% 0%, #3a0e1a, #140408); }
.verify-page--amber    { background: linear-gradient(178deg, #3a2a06, #5a3f08); }
.verify-page--flagged,
.verify-page--unknown  { background: linear-gradient(178deg, #3a0810, #5a0f18); }

.verify-back {
  align-self: flex-start; max-width: 420px; width: 100%;
  margin: 0 auto 14px; color: var(--zari-lt);
  font: 400 13px/1 var(--font-ui);
}
.verify-back:hover { color: var(--silk); }

.certificate {
  width: 100%; max-width: 420px;
  background: var(--paper);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-float);
  animation: fadeUp .5s ease both;
}
.certificate--flagged { border: 2px solid var(--danger); }

/* ---- hero band ---- */
.certificate__hero { position: relative; height: 330px; overflow: hidden; }
.certificate__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.certificate__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(transparent 42%, rgba(36,6,15,.88));
}

/* The seal. Lands with a small overshoot — it should feel stamped, not faded in. */
.seal {
  position: absolute; top: 18px; left: 18px;
  width: 66px; height: 66px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--zari-lt), var(--zari));
  border: 2px solid rgba(255,255,255,.4);
  box-shadow: 0 6px 18px rgba(36,6,15,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--plum);
  animation: sealIn .7s .2s both;
}
.seal__caption { font: 700 7px/1.15 var(--font-ui); letter-spacing: .06em; text-align: center; }

.provenance-stamp {
  position: absolute; top: 20px; right: 18px; text-align: right;
  color: var(--zari-lt); text-transform: uppercase; letter-spacing: .06em;
}
.provenance-stamp .hi { font: 400 12px/1.3 var(--font-deva); }
.provenance-stamp .en { font: 600 9px/1.3 var(--font-ui); opacity: .85; }

/* The quote — the emotional payload, and the one thing the Samiti can change
   for every saree already in the market. */
.certificate__quote { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.certificate__quote .hi {
  font: 400 23px/1.35 var(--font-deva); color: var(--silk);
  text-shadow: 0 2px 8px rgba(0,0,0,.5); margin: 0;
}
.certificate__quote .en {
  font: 400 13px/1.4 var(--font-ui); font-style: italic;
  color: var(--zari-lt); margin: 6px 0 0;
}

/* The zari hairline unspooling — a woven-thread beat between seal and data. */
.zari-thread {
  height: 2px; width: 0;
  background: linear-gradient(90deg, transparent, var(--zari), transparent);
  animation: unspool .9s .3s ease forwards;
}
@keyframes unspool { to { width: 86%; } }

/* ---- revealed body ---- */
.certificate__body {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 1s ease, opacity .8s ease;
  padding: 0 20px;
}
.certificate.is-revealed .certificate__body {
  max-height: 1400px; opacity: 1; padding: 20px;
}

.maker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.maker__icon {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--maroon), var(--oxblood));
  display: grid; place-items: center; color: var(--zari-lt);
}
.maker__role    { font: 400 16px/1.3 var(--font-deva); color: var(--ink); }
.maker__village { font: 400 12px/1.4 var(--font-ui); color: var(--muted); }

.attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-bottom: 18px; }
.attr__label { font: 600 10px/1 var(--font-ui); letter-spacing: .07em;
               text-transform: uppercase; color: var(--muted); }
.attr__value { font: 400 15px/1.3 var(--font-deva); color: var(--ink); margin-top: 4px; }
.attr__value--ui { font-family: var(--font-ui); }

.journey { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.journey__city {
  background: var(--silk); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 6px 12px;
  font: 400 13px/1 var(--font-deva); color: var(--ink);
}
.journey__arrow { color: var(--zari); }

.certificate__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--plum); color: var(--silk);
  font: 400 11px/1 var(--font-ui);
}
.certificate__foot .code { font-family: var(--font-mono); opacity: .6; }

.privacy-note {
  max-width: 420px; margin: 18px auto 0; text-align: center;
  font: 400 12px/1.6 var(--font-ui); color: rgba(247,239,224,.7);
}
.privacy-note b { color: var(--zari-lt); }

.report-suspicion {
  max-width: 420px; margin: 14px auto 0; text-align: left;
  font: 400 13px/1.5 var(--font-ui); color: rgba(247,239,224,.85);
}
.report-suspicion summary {
  cursor: pointer; text-align: center; color: rgba(247,239,224,.7);
  text-decoration: underline; text-underline-offset: 3px;
}
.report-suspicion textarea {
  background: rgba(255,255,255,.06); border: 1px solid rgba(247,239,224,.25);
  border-radius: var(--r-md); color: var(--silk); padding: 8px 10px;
  font: inherit; resize: vertical;
}
.report-suspicion textarea::placeholder { color: rgba(247,239,224,.45); }

/* ---- the three non-verified cards ---- */
.verdict {
  width: 100%; max-width: 420px; background: var(--paper);
  border-radius: var(--r-lg); padding: 32px 24px; text-align: center;
  box-shadow: var(--shadow-float); animation: fadeUp .5s ease both;
}
.verdict--flagged { border: 2px solid var(--danger); }
.verdict__icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; color: var(--paper);
}
.verdict__icon--amber   { background: var(--warn); }
.verdict__icon--danger  { background: var(--danger); }
.verdict__eyebrow {
  font: 600 11px/1 var(--font-ui); letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.verdict h2 { font: 400 24px/1.25 var(--font-display); margin: 0 0 12px; }
.verdict__hi { font: 400 17px/1.5 var(--font-deva); color: var(--ink); margin: 0 0 12px; }
.verdict__body { font: 400 14px/1.6 var(--font-ui); color: var(--muted); margin: 0 0 20px; }
.verdict__code {
  display: inline-block; font-family: var(--font-mono); font-size: 13px;
  background: var(--silk-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 14px; color: var(--ink);
}

/* ---- scanner ---- */
.scanner {
  position: relative; width: 100%; max-width: 320px; aspect-ratio: 1;
  margin: 0 auto; border-radius: var(--r-xl); overflow: hidden;
  background: var(--plum); border: 2px dashed rgba(201,162,39,.5);
}
.scanner__hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(247,239,224,.6); font: 400 13px/1 var(--font-ui);
}