/* ===========================================================================
   Marrow — public coach verification page.
   /verify/<slug>/  trust layer (Vision v2).

   Inherits the brand tokens from /css/styles.css and the profile chrome from
   /c/profile.css. This file only adds the verification-specific surfaces:
   the verify card, the QR panel, the calm not-found state.

   No new color or font tokens. Reuses --bone-cream, --bone-white,
   --bone-black, --marrow-red, --steel, --steel-light from styles.css.
   =========================================================================== */

.verify-page {
  background: var(--bone-cream);
}

/* ---- Loading + result section wrappers ---------------------------------- */

.verify-state,
.verify-result {
  padding: 56px 0 80px;
}

.verify-state-inner {
  text-align: center;
}

.verify-loading-line {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 26px;
  color: var(--steel);
  margin: 10px 0 0;
}

/* ---- The verify card ---------------------------------------------------- */

.verify-card {
  background: var(--bone-white);
  border: 1px solid var(--steel-light);
  border-radius: 16px;
  padding: 36px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 18px 48px -28px rgba(10, 9, 8, 0.4);
}

@media (max-width: 540px) {
  .verify-card { padding: 24px; border-radius: 12px; }
  .verify-state,
  .verify-result { padding: 32px 0 56px; }
}

/* ---- Hero: avatar + name + badge ---------------------------------------- */

.verify-hero {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

@media (max-width: 540px) {
  .verify-hero { flex-direction: column; gap: 16px; align-items: center; text-align: center; }
}

.verify-avatar {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bone-cream);
  border: 2px solid var(--marrow-red);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.verify-avatar span {
  font-family: "Switzer", -apple-system, system-ui, sans-serif;
  font-weight: 800;
  font-size: 34px;
  color: var(--marrow-red);
}

.verify-hero-meta {
  min-width: 0;
}

.verify-name {
  font-family: "Switzer", -apple-system, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.08;
  color: var(--bone-black);
  margin: 6px 0 4px;
}

.verify-location {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin: 0 0 14px;
}

.verify-location[hidden] { display: none; }

/* ---- Verified badge ----------------------------------------------------- */

.verify-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--bone-cream);
  border: 1px solid var(--marrow-red);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 6px;
}

.verify-badge-icon {
  flex: none;
  width: 30px;
  height: 30px;
}

.verify-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.verify-badge-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marrow-red);
  font-weight: 500;
}

.verify-badge-date {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 13px;
  color: var(--steel);
}

/* ---- Active-on-Marrow status row ---------------------------------------- */

.verify-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 4px;
  padding: 12px 14px;
  background: var(--bone-cream);
  border-radius: 8px;
}

.verify-status-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--marrow-red);
}

.verify-status-text {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 14px;
  color: var(--bone-black);
  font-weight: 500;
}

/* ---- Verified credentials list ------------------------------------------ */

.verify-section-h {
  font-family: "Switzer", -apple-system, system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--bone-black);
  margin: 30px 0 14px;
}

.verify-credential-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.verify-credential {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  background: var(--bone-cream);
  border-left: 3px solid var(--marrow-red);
  border-radius: 6px;
}

.verify-credential-org {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marrow-red);
  font-weight: 500;
}

.verify-credential-name {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--bone-black);
}

.verify-credential-meta {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 12px;
  color: var(--steel);
}

.verify-credentials-empty {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
  margin: 0;
}

/* ---- What verification means -------------------------------------------- */

.verify-meaning-body {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--bone-black);
  margin: 0 0 12px;
}

.verify-meaning-foot {
  font-size: 12px;
  color: var(--steel);
  margin: 6px 0 0;
}

/* ---- CTA row ------------------------------------------------------------ */

.verify-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

/* ---- QR panel ----------------------------------------------------------- */

.verify-qr-panel {
  display: flex;
  gap: 22px;
  align-items: center;
  max-width: 720px;
  margin: 22px auto 0;
  padding: 24px;
  background: var(--bone-white);
  border: 1px solid var(--steel-light);
  border-radius: 14px;
}

@media (max-width: 540px) {
  .verify-qr-panel { flex-direction: column; text-align: center; padding: 20px; }
}

.verify-qr-box {
  flex: none;
  width: 132px;
  height: 132px;
  background: var(--bone-white);
  border: 1px solid var(--steel-light);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verify-qr-box svg {
  display: block;
  width: 100%;
  height: 100%;
}

.verify-qr-body {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--steel);
  margin: 8px 0 8px;
}

.verify-qr-url {
  font-size: 12px;
  color: var(--bone-black);
  word-break: break-all;
  margin: 0;
}

/* ---- Calm not-found state ----------------------------------------------- */

.verify-card-quiet {
  text-align: center;
}

.verify-quiet-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
}

.verify-quiet-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.verify-name-quiet {
  font-size: clamp(24px, 4vw, 32px);
}

.verify-quiet-body {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--steel);
  margin: 0 auto 12px;
  max-width: 52ch;
}

.verify-card-quiet .verify-cta-row {
  justify-content: center;
}

/* ---- Storefront verify affordance (used on /c/<slug>/) ------------------ */

.profile-verify-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marrow-red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.profile-verify-link:hover,
.profile-verify-link:focus-visible {
  border-bottom-color: var(--marrow-red);
}

.profile-verify-link[hidden] { display: none; }

/* ---- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .verify-card,
  .verify-qr-panel,
  .profile-cta-primary,
  .profile-cta-secondary,
  .profile-verify-link {
    transition: none !important;
  }
}