/* Certificates: the public verify page (Leer). Core tokens only (--cnx-*): a child re-skins the
   page by redefining them in its own stylesheet, loaded after this one. No inline style, no
   shadows or gradients (kit anti-patterns): the yellow accent is an underline on the name. */

.cert-page {
  max-width: 45rem;
  margin-inline: auto;
  font-family: var(--cnx-font-text);
  color: var(--cnx-text);
}
.cert-page--narrow { max-width: 32rem; }
.cert-page :where(p) { margin: 0; }

/* Credential */
.cert-doc {
  background: var(--cnx-surface);
  border: 1px solid var(--cnx-border);
  border-radius: var(--cnx-radius);
  overflow: hidden;
}
.cert-doc--revoked { border-color: var(--cnx-danger); }

.cert-doc__band {
  display: flex;
  align-items: center;
  gap: var(--cnx-s-3);
  padding: var(--cnx-s-3) var(--cnx-s-5);
  background: var(--cnx-primary);
  color: var(--cnx-on-primary);
}
.cert-doc__mark { flex: none; display: block; }
.cert-doc__tag {
  flex: 1;
  font-size: var(--cnx-fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cert-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--cnx-s-1);
  min-height: var(--cnx-s-5);
  padding: var(--cnx-s-1) var(--cnx-s-3);
  border-radius: var(--cnx-s-5);
  background: var(--cnx-surface);
  font-size: var(--cnx-fs-small);
  font-weight: var(--cnx-strong-weight);
}
.cert-state--active { color: var(--cnx-success); }
.cert-state--expired { color: var(--cnx-text-muted); }
.cert-state--revoked { color: var(--cnx-danger); }

.cert-doc__body { padding: var(--cnx-s-7) var(--cnx-s-6) var(--cnx-s-6); text-align: center; }
.cert-doc__lede { color: var(--cnx-text-muted); }
.cert-doc__name {
  margin: var(--cnx-s-2) 0 var(--cnx-s-4);
  font-family: var(--cnx-font-display);
  font-weight: var(--cnx-display-weight);
  font-size: var(--cnx-fs-title);
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--cnx-accent);
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.12em;
}
.cert-doc__course {
  margin-top: var(--cnx-s-2);
  font-family: var(--cnx-font-display);
  font-weight: var(--cnx-display-weight);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--cnx-link);
}
.cert-doc__desc {
  max-width: 46ch;
  margin: var(--cnx-s-4) auto 0;
  color: var(--cnx-text-muted);
}

/* Facts: a hairline grid, not cards */
.cert-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--cnx-border);
  border-block: 1px solid var(--cnx-border);
}
.cert-meta__item { background: var(--cnx-surface); padding: var(--cnx-s-4) var(--cnx-s-5); }
.cert-meta__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cert-meta dt {
  margin-bottom: var(--cnx-s-1);
  font-size: var(--cnx-fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cnx-text-muted);
}
.cert-meta dd {
  margin: 0;
  font-weight: var(--cnx-strong-weight);
  font-variant-numeric: tabular-nums;
}
.cert-meta__mono { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.cert-meta__sub { display: block; font-weight: var(--cnx-text-weight); color: var(--cnx-text-muted); }
.cert-meta__item--revoked dt,
.cert-meta__item--revoked dd { color: var(--cnx-danger); }
.cert-doc__actions { padding: var(--cnx-s-5); text-align: center; }

/* Revoked or expired notice */
.cert-alert {
  margin-bottom: var(--cnx-s-5);
  padding: var(--cnx-s-4) var(--cnx-s-5);
  border: 1px solid var(--cnx-danger);
  border-radius: var(--cnx-radius);
  background: var(--cnx-surface);
}
.cert-alert__tag {
  font-weight: var(--cnx-strong-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cnx-danger);
}
.cert-alert__reason { margin-top: var(--cnx-s-2); }

/* LinkedIn steps: native <details>, no script */
.cert-panel {
  margin-top: var(--cnx-s-5);
  border: 1px solid var(--cnx-border);
  border-radius: var(--cnx-radius);
}
.cert-panel__summary {
  min-height: var(--cnx-touch);
  display: flex;
  align-items: center;
  padding: var(--cnx-s-2) var(--cnx-s-5);
  font-weight: var(--cnx-strong-weight);
  cursor: pointer;
}
.cert-panel__summary:focus-visible {
  outline: var(--cnx-focus-ring-width) solid var(--cnx-focus-ring);
  outline-offset: calc(var(--cnx-focus-ring-width) * -1);
}
.cert-steps { margin: 0; padding: var(--cnx-s-4) var(--cnx-s-5) var(--cnx-s-5) var(--cnx-s-7); }
.cert-steps li + li { margin-top: var(--cnx-s-3); }
.cert-field {
  display: block;
  margin-top: var(--cnx-s-1);
  padding: var(--cnx-s-2) var(--cnx-s-3);
  border: 1px solid var(--cnx-border);
  border-radius: var(--cnx-radius);
  overflow-wrap: anywhere;
  user-select: all;
}
.cert-field--mono { font-family: ui-monospace, monospace; font-size: var(--cnx-fs-small); }

/* Footer and not-found */
.cert-foot {
  margin-top: var(--cnx-s-6);
  padding-top: var(--cnx-s-4);
  border-top: 1px solid var(--cnx-border);
  font-size: var(--cnx-fs-small);
  color: var(--cnx-text-muted);
  text-align: center;
}
.cert-foot p + p { margin-top: var(--cnx-s-2); }
.cert-foot a, .cert-empty a:not(.cnx-button) {
  color: var(--cnx-link);
  overflow-wrap: anywhere;
}
.cert-empty { text-align: center; }
.cert-empty > * + * { margin-top: var(--cnx-s-4); }
.cert-empty__title {
  font-family: var(--cnx-font-display);
  font-weight: var(--cnx-display-weight);
  font-size: var(--cnx-fs-title);
  line-height: 1.25;
}

@media (max-width: 40rem) {
  .cert-doc__band { flex-wrap: wrap; padding-inline: var(--cnx-s-4); }
  .cert-doc__body { padding: var(--cnx-s-6) var(--cnx-s-4) var(--cnx-s-5); }
  .cert-doc__name { font-size: 1.625rem; }
  .cert-doc__course { font-size: 1.25rem; }
  .cert-meta { grid-template-columns: minmax(0, 1fr); }
  .cert-doc__actions .cnx-button { width: 100%; }
}