/* Certificate verification: one narrow column with the form and the result card. */

.verify {
  inline-size: min(100%, 34rem);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 8vw, 6rem);
}
.verify h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.1; letter-spacing: -.03em; hyphens: auto; }
.verify-intro { margin: .75rem 0 0; color: var(--ink-muted); font-family: var(--font-ui); }

.verify-form { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2rem; }
.verify-form[hidden] { display: none; }
.verify-form input {
  flex: 1 1 14rem;
  min-inline-size: 0;
  min-block-size: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  padding: .65rem .8rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.verify-form ::placeholder { color: var(--ink-soft); opacity: 1; }
.verify-form button { flex: 0 0 auto; cursor: pointer; }
.verify-form button:disabled { cursor: progress; opacity: .6; }

.verify-error { margin: 1.5rem 0 0; color: var(--status-revoked-ink); font-weight: 600; }
.verify-offline { margin: 2rem 0 0; color: var(--ink-muted); }

.verify-card {
  --status-ink: var(--status-passed-ink);
  --status-surface: var(--status-passed-surface);
  margin-block-start: 2rem;
  border: 1px solid color-mix(in srgb, var(--status-ink) 25%, transparent);
  border-radius: var(--radius-panel);
  padding: 1.5rem;
  background: var(--status-surface);
}
.verify-card.is-expired { --status-ink: var(--status-expired-ink); --status-surface: var(--status-expired-surface); }
.verify-card.is-revoked { --status-ink: var(--status-revoked-ink); --status-surface: var(--status-revoked-surface); }
.verify-card.is-frozen { --status-ink: var(--status-review-ink); --status-surface: var(--status-review-surface); }

.verify-status { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--status-ink); font-size: 1.125rem; }
.verify-status svg { flex: none; }
.verify-description { margin: .5rem 0 1.25rem; color: var(--status-ink); }

.verify-details { display: grid; gap: .85rem; margin: 0; }
.verify-details dt { color: var(--ink-soft); font-size: .9375rem; }
.verify-details dd { margin: .1rem 0 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }