/* ==========================================================================
   Certificates — /verify, the holder's page, and /the-alliance/certified
   ========================================================================== */

/* The certified seal standing in for the hero image */
.verify-hero__seal {
  justify-self: center;
  width: min(70%, 340px);
}

.verify {
  display: grid;
  gap: var(--space-4);
  max-width: 52rem;
}

/* The number box: big and calm, like a search on its own page */
.verify-form {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}
.verify-form__label { font-size: var(--fs-h3); font-weight: 600; }
.verify-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.verify-form__input {
  flex: 1 1 16rem;
  min-height: 56px;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.verify-form__input::placeholder { letter-spacing: .06em; text-transform: none; }
.verify-form__row .btn { min-height: 56px; padding-inline: 2rem; }
.verify-form__hint { color: var(--ink-soft); font-size: var(--fs-small); }

/* The answer */
.verify-result {
  --result: var(--primary-ink);
  --result-tint: var(--primary-tint);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 2px solid var(--result);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.verify-result--expired { --result: #9A5B00; --result-tint: #FBF0DF; }
.verify-result--withdrawn { --result: var(--error); --result-tint: var(--error-tint); }
.verify-result--muted { --result: var(--line-strong); --result-tint: var(--hover-wash); }
.verify-result__status {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  justify-self: start;
  padding: .45rem 1rem .45rem .75rem;
  border-radius: var(--radius-pill);
  background: var(--result-tint);
  color: var(--result);
  font-weight: 600;
}
.verify-result--muted .verify-result__status { color: var(--ink); }
.verify-result__status svg { flex-shrink: 0; }
.verify-result__name { overflow-wrap: anywhere; }
.verify-result__text { color: var(--ink-soft); max-width: 60ch; }
.verify-result__facts {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg);
}
@media (min-width: 600px) {
  .verify-result__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.verify-result__facts dt { color: var(--ink-soft); font-size: var(--fs-small); }
.verify-result__facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.verify-result__checked { color: var(--ink-soft); font-size: var(--fs-small); }

.verify-more {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .verify-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The holder's page */
.holder { display: grid; gap: var(--space-4); }
.holder__grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .holder__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.holder__card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}
.holder__card > p { color: var(--ink-soft); }
.holder__small { color: var(--ink-soft); font-size: var(--fs-small); }

.copy-field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.copy-field .input { flex: 1 1 14rem; font-size: var(--fs-small); }

.badge-files {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.badge-files li { border-bottom: 1px solid var(--line); }
.badge-files .kit-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding: .875rem .25rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.badge-files .kit-file:hover { background: var(--hover-wash); }
.badge-files .kit-file__title { font-weight: 600; }
.badge-files .kit-file__icon { color: var(--primary-ink); }

.live-badge {
  display: grid;
  place-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.live-badge img { max-width: 100%; height: auto; }
.embed-code {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: .8125rem;
  line-height: 1.5;
  resize: vertical;
}

/* /the-alliance/certified */
.certified-card__badge {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  justify-self: start;
  align-self: flex-start;
  padding: .3rem .75rem .3rem .55rem;
  border-radius: var(--radius-pill);
  background: var(--primary-tint);
  color: var(--primary-ink);
  font-size: var(--fs-small);
  font-weight: 600;
}
.certified-card__place { color: var(--ink-soft); }