/* ─────────────────────────────────────────────────────────────────────────────
   Certificate verification — the form beside a drawn certificate, then the
   result card (loading, verified, revoked, not found).
   ───────────────────────────────────────────────────────────────────────────── */

@layer page {

  .verify-hero {
    position: relative;
    isolation: isolate;
    padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 3vw, 4.5rem));
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  }
  .verify-hero .ambient { --glow-a: 20% 55%; --glow-b: 78% 35%; }
  .verify-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 5vw, 6rem);
  }
  .verify-hero__copy { display: grid; gap: var(--s-4); justify-items: start; }
  .verify-hero__title { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); line-height: var(--lh-tight); }
  .verify-hero__lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.85; max-width: 34rem; }

  /* ── Form: one field and its button in a single pill ────────────────────── */
  .verify-form {
    width: min(100%, 32rem);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-4);
    padding: var(--s-2);
    padding-inline-start: var(--s-5);
    border-radius: var(--r-pill);
    transition: box-shadow var(--dur-base) var(--ease-out);
  }
  .verify-form:focus-within { box-shadow: var(--shadow-inset), 0 0 0 4px rgb(244 63 117 / 0.14), var(--shadow-md); }
  .verify-form__icon { display: grid; color: var(--pink); }
  .verify-form__icon svg { width: 1.3rem; height: 1.3rem; }
  .verify-form__input {
    flex: 1;
    min-width: 0;
    height: 3rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--fs-body);
    letter-spacing: 0.04em;
    text-align: right;
  }
  .verify-form__input::placeholder { color: #8F7C86; letter-spacing: 0; }
  .verify-form__input:focus { outline: none; }
  .verify-form[aria-invalid="true"] { box-shadow: var(--shadow-inset), 0 0 0 4px rgb(217 45 32 / 0.12), var(--shadow-md); }
  .verify-form__error:not([hidden]) { display: block; padding-inline-start: var(--s-5); }

  /* ── The drawn certificate ──────────────────────────────────────────────── */
  .cert-art { justify-self: center; width: min(100%, 30rem); rotate: 2.5deg; }
  .cert-art__paper {
    padding: 12px;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, var(--white), var(--pink-mist));
    box-shadow: var(--shadow-lg);
  }
  .cert-art__frame {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    padding: var(--s-8) var(--s-8) var(--s-6);
    border-radius: calc(var(--r-md) - 6px);
    border: 1.5px solid var(--pink-border);
    outline: 1px solid rgb(244 63 117 / 0.18);
    outline-offset: -8px;
    text-align: center;
  }
  .cert-art__logo { width: 3.5rem; height: 3.5rem; }
  .cert-art__kicker { color: var(--ink-2); font-size: var(--fs-caption); letter-spacing: 0.02em; }
  .cert-art__title { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 700; color: var(--pink-strong); line-height: 1.2; }
  .cert-art__line { width: 70%; height: 0.55rem; border-radius: var(--r-pill); background: var(--bg-deep); }
  .cert-art__line--name { width: 55%; height: 0.9rem; margin-block: var(--s-2); background: linear-gradient(to left, var(--pink-border), var(--pink-soft)); }
  .cert-art__line--short { width: 42%; }
  .cert-art__foot {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: var(--s-5);
  }
  /* A QR-like block made of two gradients — never a scannable code. */
  .cert-art__qr {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 6px;
    background:
      conic-gradient(from 90deg at 30% 30%, var(--ink) 25%, transparent 0) 0 0 / 1.2rem 1.2rem,
      repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 7px),
      var(--white);
    border: 3px solid var(--white);
    outline: 1px solid var(--line-strong);
    opacity: 0.8;
  }
  .cert-art__number { position: relative; display: grid; place-items: center; width: 7rem; height: 2rem; }
  .cert-art__number-text { color: var(--ink-2); font-size: var(--fs-caption); letter-spacing: 0.06em; }
  /* The loop circles the printed number and its arrow tail sweeps in toward
     it. Measured on the artwork: the loop's centre sits at 23% × 45%, so the
     picture is placed (physically — it is not mirrored) to centre the loop on
     the number, with the tail stopping short of the QR block. */
  .cert-art__circle {
    position: absolute;
    top: -1.45rem;
    left: 0.75rem;
    width: 12rem;
    max-width: none;
    mask-image: conic-gradient(from 200deg, #000 var(--scribble-sweep), transparent 0);
    animation: scribble-draw 1s var(--ease-out) 0.9s both;
  }
  .cert-art__seal {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FF8FB0, var(--pink-strong));
    color: var(--white);
    box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--pink-border), var(--shadow-pink);
  }
  .cert-art__seal svg { width: 1.6rem; height: 1.6rem; }

  /* ── Result ─────────────────────────────────────────────────────────────── */
  .verify-result { max-width: 44rem; margin-inline: auto; }
  .verify-empty {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    border-radius: var(--r-lg);
    border: 1.5px dashed var(--pink-border);
    color: var(--ink-2);
    font-size: var(--fs-small);
  }
  .verify-empty__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--pink-soft); color: var(--pink-strong); }
  .verify-empty__icon svg { width: 1.25rem; height: 1.25rem; }

  .verify-card {
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    padding: clamp(1.75rem, 1rem + 3vw, 3rem);
    border-radius: var(--r-xl);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-lg);
    text-align: center;
    animation: verify-in 0.6s var(--ease-out);
  }
  @keyframes verify-in { from { opacity: 0; translate: 0 18px; } }
  .verify-card__badge { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; margin-bottom: var(--s-2); border-radius: 50%; }
  .verify-card__badge svg { width: 2rem; height: 2rem; }
  .verify-card--valid .verify-card__badge { background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 0 8px rgb(21 128 61 / 0.06); }
  .verify-card--invalid .verify-card__badge { background: var(--danger-soft); color: var(--danger); box-shadow: 0 0 0 8px rgb(217 45 32 / 0.05); }
  .verify-card__title { font-size: var(--fs-h3); }
  .verify-card--valid .verify-card__title { color: var(--ok-ink); }
  .verify-card--invalid .verify-card__title { color: var(--danger-ink); }
  .verify-card__text, .verify-card__code, .verify-card__hint { color: var(--ink-2); }
  .verify-card__hint { font-size: var(--fs-small); }
  .verify-card__cta { margin-top: var(--s-3); }

  .verify-facts { width: 100%; display: grid; gap: var(--s-2); margin-top: var(--s-4); text-align: start; }
  .verify-facts__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    background: var(--white);
    border: 1px solid var(--line);
  }
  .verify-facts__row dt { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-small); white-space: nowrap; }
  .verify-facts__row dt svg { width: 1.05rem; height: 1.05rem; color: var(--pink); }
  .verify-facts__row dd { font-weight: 600; text-align: end; }

  .verify-card--loading { justify-items: center; }
  .skeleton { display: block; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--bg-deep) 25%, var(--pink-soft) 50%, var(--bg-deep) 75%) 0 0 / 200% 100%; animation: skeleton-shine 1.2s linear infinite; }
  .skeleton--icon { width: 4.25rem; height: 4.25rem; border-radius: 50%; }
  .skeleton--title { width: 12rem; height: 1.4rem; margin-top: var(--s-2); }
  .skeleton--line { width: 70%; height: 0.8rem; }
  .skeleton--short { width: 45%; }
  @keyframes skeleton-shine { to { background-position: -200% 0; } }

  @media (max-width: 960px) {
    .verify-hero__grid { grid-template-columns: minmax(0, 1fr); }
    /* One column: the result follows the form directly; the drawing steps aside. */
    .cert-art { display: none; }
  }
  @media (max-width: 520px) {
    .verify-form { flex-wrap: wrap; border-radius: var(--r-lg); padding: var(--s-3); }
    .verify-form__input { flex-basis: calc(100% - 3rem); }
    .verify-form .btn { flex: 1 1 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cert-art__circle { animation: none; mask-image: none; }
    .verify-card { animation: none; }
    .skeleton { animation: none; }
  }
}