/* ============================================================================
   Security page — StealthLedger, v64.
   ---------------------------------------------------------------------------
   This stylesheet is scoped to security.html and only security.html.
   It intentionally reuses the same design tokens exposed by styles.css
   (--bg, --surface, --accent, --radius-*, --space-*, etc.) so the page
   feels native without pulling in the entire app shell.

   No inline styles because of require-trusted-types-for + no unsafe-inline.
   -- Elias, v64.
   ========================================================================== */

.sec-shell {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 60rem 32rem at 50% -6rem, var(--accent-subtle), transparent 70%),
    radial-gradient(ellipse 40rem 20rem at 90% 12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M40 0H0v40' fill='none' stroke='%23ffffff' stroke-opacity='0.025' stroke-width='1'/></svg>"),
    var(--bg);
  background-attachment: fixed, fixed, fixed, fixed;
  color: var(--text);
  font-family: var(--font-ui);
}

.sec-wrap {
  width: min(72rem, 100% - 2.5rem);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 3rem) 0 4rem;
}

/* --- Top bar --------------------------------------------------------------- */

.sec-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.sec-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
}

.sec-brand-mark {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: 0 0.2rem 0.6rem var(--accent-subtle);
}

.sec-top-links {
  display: inline-flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.sec-top-links a {
  color: var(--text-muted);
  text-decoration: none;
}

.sec-top-links a:hover {
  color: var(--accent);
}

/* "Home →" cap. Same weight as the other links but coloured like an accent
   so it reads as the primary way back to the marketing page rather than
   another doc link. Sits at the end of the nav on wide screens; on narrow
   screens it wraps naturally and the accent still marks it out. */
.sec-top-links a.sec-top-home {
  color: var(--accent);
  font-weight: 600;
}

.sec-top-links a.sec-top-home:hover {
  color: var(--accent-strong);
}

/* --- Hero ------------------------------------------------------------------ */

.sec-hero {
  padding: var(--space-6) 0 var(--space-7);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-7);
}

.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  background: var(--surface);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sec-eyebrow-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0.5rem var(--accent);
}

.sec-h1 {
  margin: var(--space-4) 0 var(--space-3);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}

.sec-lede {
  max-width: 42rem;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.55;
}

.sec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.sec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text);
  background: var(--surface);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}

.sec-chip:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
              0 0.4rem 1.4rem color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-1px);
}

.sec-chip {
  transition: border-color var(--ease), background var(--ease),
              box-shadow var(--ease), transform var(--ease);
}

.sec-chip-arrow {
  color: var(--accent);
}

/* --- Fingerprint pill (hero) ---------------------------------------------- */

.sec-fingerprint {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: var(--space-5);
  padding: 0.7rem 0.9rem 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--positive) 8%, var(--surface)) 0%,
    var(--surface) 55%
  );
  color: var(--text);
  text-decoration: none;
  max-width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.sec-fingerprint:hover {
  border-color: color-mix(in srgb, var(--positive) 55%, var(--border));
  box-shadow: 0 0.5rem 1.6rem color-mix(in srgb, var(--positive) 15%, transparent);
  transform: translateY(-1px);
}

.sec-fingerprint-dot {
  position: relative;
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0.55rem var(--positive);
}

.sec-fingerprint-dot::before {
  content: "";
  position: absolute;
  inset: -0.35rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--positive) 55%, transparent);
  animation: sec-fingerprint-pulse 2.4s ease-out infinite;
}

@keyframes sec-fingerprint-pulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-fingerprint-dot::before { animation: none; }
}

.sec-fingerprint-labels {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.sec-fingerprint-key {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sec-fingerprint-val {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.86rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sec-fingerprint-cta {
  margin-left: 0.25rem;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 32rem) {
  .sec-fingerprint-val { font-size: 0.76rem; }
  .sec-fingerprint-cta { display: none; }
}

/* --- Section skeleton ------------------------------------------------------ */

.sec-section {
  margin-bottom: var(--space-7);
}

.sec-h2 {
  position: relative;
  margin: 0 0 var(--space-3);
  padding-left: 0.9rem;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  letter-spacing: -0.01em;
  color: var(--text);
}

.sec-h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  box-shadow: 0 0 0.6rem color-mix(in srgb, var(--accent) 60%, transparent);
}

.sec-h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.05rem;
  color: var(--text);
}

.sec-p {
  color: var(--text-muted);
  line-height: 1.62;
  margin: 0 0 var(--space-3);
}

.sec-p strong {
  color: var(--text);
  font-weight: 600;
}

.sec-p--pull {
  margin-top: var(--space-4);
}

.sec-list {
  margin: 0 0 var(--space-3);
  padding-left: 1.15rem;
  color: var(--text-muted);
  line-height: 1.62;
}

.sec-list li + li {
  margin-top: 0.35rem;
}

.sec-list li strong {
  color: var(--text);
}

/* --- Trust boundary side-by-side ------------------------------------------ */

.sec-trust {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin-top: var(--space-4);
}

.sec-trust-card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.sec-trust-card {
  position: relative;
  overflow: hidden;
}

.sec-trust-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

.sec-trust-card.is-server {
  border-color: color-mix(in srgb, var(--negative) 45%, var(--border));
  background: var(--negative-subtle);
}

.sec-trust-card.is-server::before {
  background: linear-gradient(180deg, var(--negative), color-mix(in srgb, var(--negative) 40%, transparent));
}

.sec-trust-card.is-client {
  border-color: color-mix(in srgb, var(--positive) 45%, var(--border));
  background: var(--positive-subtle);
}

.sec-trust-card.is-client::before {
  background: linear-gradient(180deg, var(--positive), color-mix(in srgb, var(--positive) 40%, transparent));
}

.sec-trust-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--space-3);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
}

.sec-trust-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text);
  line-height: 1.55;
}

.sec-trust-list li + li {
  margin-top: 0.35rem;
}

.sec-trust-list.is-neg li::marker { color: var(--negative); }
.sec-trust-list.is-pos li::marker { color: var(--positive); }

/* --- Primitives table ------------------------------------------------------ */

.sec-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.sec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: var(--text);
}

.sec-table th,
.sec-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.sec-table thead th {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.72rem;
  background: var(--surface-strong);
}

.sec-table tbody tr:last-child td {
  border-bottom: none;
}

.sec-table code {
  padding: 0.05em 0.3em;
  border-radius: 0.25rem;
  background: var(--surface-strong);
  font-size: 0.9em;
}

/* --- Code block ------------------------------------------------------------ */

.sec-code {
  position: relative;
  margin: 0 0 var(--space-4);
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 80%, var(--bg)));
  box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 4%, transparent) inset,
              0 0.6rem 1.6rem color-mix(in srgb, #000000 25%, transparent);
  overflow: hidden;
}

.sec-code-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.9rem 0.55rem 3.6rem;
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(circle at 0.85rem 50%, #ff5f56 0 0.28rem, transparent 0.32rem),
    radial-gradient(circle at 1.75rem 50%, #ffbd2e 0 0.28rem, transparent 0.32rem),
    radial-gradient(circle at 2.65rem 50%, #27c93f 0 0.28rem, transparent 0.32rem),
    var(--surface-strong);
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sec-code-head-name {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
}

.sec-code pre {
  margin: 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  color: var(--text);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.85rem;
  line-height: 1.55;
  white-space: pre;
}

.sec-code pre code {
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
}

/* --- Hash card ------------------------------------------------------------- */

.sec-hash {
  position: relative;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 6%, var(--surface)) 0%,
    var(--surface) 60%
  );
  overflow: hidden;
}

.sec-hash::after {
  content: "";
  position: absolute;
  right: -6rem;
  top: -6rem;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  pointer-events: none;
}

.sec-hash-row {
  display: grid;
  gap: 0.3rem;
}

.sec-hash-key {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sec-hash-val {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.88rem;
  color: var(--text);
  word-break: break-all;
}

.sec-hash-val a {
  color: var(--accent);
  text-decoration: none;
}

.sec-hash-val a:hover {
  text-decoration: underline;
}

/* --- Callout --------------------------------------------------------------- */

.sec-callout {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text);
  line-height: 1.55;
}

.sec-callout strong {
  color: var(--text);
}

/* --- Footer ---------------------------------------------------------------- */

.sec-footer {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.sec-footer a {
  color: var(--text-muted);
  text-decoration: none;
}

.sec-footer a:hover {
  color: var(--accent);
}

/* --- Small screens --------------------------------------------------------- */

@media (max-width: 40rem) {
  /* Let the top bar wrap: brand on row one, nav links wrap to a second
   * row instead of overflowing the viewport horizontally. min-width: 0
   * stops the nav's min-content size from forcing the page wider than the
   * screen (which hid Changelog / Home off the right edge). */
  .sec-top { flex-wrap: wrap; gap: var(--space-3) var(--space-2); }
  .sec-top-links {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    gap: var(--space-2) var(--space-3);
    font-size: 0.85rem;
    justify-content: flex-start;
  }
  .sec-code pre { font-size: 0.78rem; }
  .sec-hash-val { font-size: 0.78rem; }
}

/* --- Reporting form ------------------------------------------------------- */

.sec-form {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
}

.sec-form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-subtle) 100%);
  opacity: 0.55;
}

.sec-form-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.sec-form-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.sec-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 40rem) {
  .sec-form-row { grid-template-columns: 1fr; }
}

.sec-form-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.sec-form-opt {
  color: var(--text-muted);
  opacity: 0.7;
  font-weight: 400;
}

.sec-form input[type="text"],
.sec-form input[type="email"],
.sec-form select,
.sec-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-strong);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}

.sec-form textarea {
  min-height: 8rem;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.45;
}

.sec-form input:focus,
.sec-form select:focus,
.sec-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.sec-form-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.sec-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-1);
}

.sec-form-submit {
  background: var(--accent);
  color: #0a0f0a;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 8px);
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 100ms var(--ease), box-shadow 120ms var(--ease), background 120ms var(--ease);
}

.sec-form-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.24);
}

.sec-form-submit:active {
  transform: translateY(0);
}

/* --- Thanks page ---------------------------------------------------------- */

.sec-thanks-shell {
  max-width: 46rem;
}

.sec-thanks-section {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.sec-cta {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 100ms var(--ease);
}

.sec-cta:hover { border-bottom-color: var(--accent); }


/* ---------------------------------------------------------------------------
 * Verify build page
 * ---------------------------------------------------------------------------
 * Uses the .sec-* shell + typography from above, then adds a summary block
 * and a per-file row list. Colours reuse the app palette so pass/fail read
 * the same way on this page and on the movers pills.
 * ------------------------------------------------------------------------- */

.verify-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0 1.4rem;
}

.verify-manifest-link {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.verify-manifest-link:hover { color: var(--accent); }

.verify-summary {
  margin: 1rem 0 1.6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.verify-summary-ok { border-color: color-mix(in srgb, var(--positive) 45%, var(--border)); }
.verify-summary-fail { border-color: color-mix(in srgb, var(--negative) 45%, var(--border)); }

.verify-summary-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.verify-summary-count {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.verify-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
}

.verify-meta dt {
  color: var(--text-muted);
  margin: 0;
}

.verify-meta dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.verify-self-ok { color: var(--positive); }
.verify-self-fail { color: var(--negative); }

.verify-note {
  margin: 0.9rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.verify-results { margin-top: 0.5rem; }

.verify-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.55rem;
  background: color-mix(in oklab, var(--surface), transparent 30%);
}

.verify-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.6rem 1rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.85rem;
}

@media (max-width: 700px) {
  .verify-row {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .verify-hash {
    grid-column: 1 / -1;
    padding-left: 3rem;
    color: var(--text-muted);
  }
}

.verify-row-ok { background: color-mix(in oklab, var(--positive-subtle), transparent 55%); }
.verify-row-fail { background: color-mix(in oklab, var(--negative-subtle), transparent 40%); }
.verify-row-pending { background: color-mix(in oklab, var(--surface-strong), transparent 40%); }

.verify-path {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verify-hash {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.verify-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-strong), transparent 20%);
  color: var(--text-muted);
}

.verify-badge-ok {
  background: var(--positive-subtle);
  color: var(--positive);
  border-color: color-mix(in srgb, var(--positive) 40%, transparent);
}

.verify-badge-fail {
  background: var(--negative-subtle);
  color: var(--negative);
  border-color: color-mix(in srgb, var(--negative) 40%, transparent);
}

.verify-badge-pending {
  color: var(--text-muted);
}

.verify-err {
  color: var(--negative);
  background: var(--negative-subtle);
  border: 1px solid color-mix(in srgb, var(--negative) 40%, transparent);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin: 1rem 0;
}

.verify-explainer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.verify-explainer h2 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  color: var(--text);
}

.verify-explainer ol {
  padding-left: 1.3rem;
  margin: 0.6rem 0;
  color: var(--text);
  line-height: 1.6;
}

.verify-explainer code {
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.9em;
}