/* ==========================================================================
   KuduDoc — verification pages
   Shared by /verify.html (marketing, interactive tool) and
   /app/verify-result.html (authenticated, single-document result).
   Reuses .card, .chip, .btn, .doc-window, .steps, .input, .field from
   components.css — this file only adds what those don't already cover.
   ========================================================================== */

/* ---- Generic small helpers ---- */
.btn-row{ display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* ---- Hero certificate preview (inside a .doc-window) ---- */
.cert-preview__title{ font-weight: 700; font-size: var(--text-small); color: var(--ink-900); }
.cert-preview__meta{ font-size: var(--text-micro); color: var(--text-tertiary); margin-top: 4px; margin-bottom: var(--space-5); }
.cert-preview__row{
  display: flex; align-items: center; gap: var(--space-3);
  padding-block: var(--space-3); border-top: 1px dashed var(--ink-100);
  font-size: var(--text-small); font-weight: 600; color: var(--ink-700);
}
.cert-preview__row:first-of-type{ border-top: none; }
.cert-preview__check{ width: 20px; height: 20px; color: var(--success-700); flex-shrink: 0; }
.cert-preview__footnote{ margin-top: var(--space-5); font-size: var(--text-micro); color: var(--text-tertiary); }

/* ---- Trust chip row under hero copy ---- */
.trust-row{ display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---- Verification tool card ---- */
.verify-tool-card{ max-width: 640px; margin-inline: auto; padding: var(--space-8) var(--space-7); }
@media (max-width: 560px){
  .verify-tool-card{ padding: var(--space-6) var(--space-5); }
}

.verify-tabs{
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  border-bottom: var(--border-hairline); margin-bottom: var(--space-6);
}
.verify-tab{
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-small); font-weight: 600; color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.verify-tab:hover{ color: var(--blue-600); }
.verify-tab.is-active{ color: var(--blue-700); border-bottom-color: var(--blue-600); }

.verify-panel[hidden]{ display: none; }
.verify-sample-btn{ margin-top: var(--space-4); }

/* ---- Dropzone ---- */
.dropzone{
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 2px dashed var(--ink-200); border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.dropzone:hover{ border-color: var(--blue-300); background: var(--blue-50); }
.dropzone.is-dragover{ border-style: solid; border-color: var(--blue-600); background: var(--blue-50); }
.dropzone.has-file{ border-style: solid; border-color: var(--success-500); background: var(--success-50); cursor: default; }
.dropzone__icon{ width: 36px; height: 36px; color: var(--blue-600); }
.dropzone.has-file .dropzone__icon{ color: var(--success-700); }
.dropzone__title{ font-weight: 600; font-size: var(--text-body); color: var(--ink-900); }
.dropzone__hint{ font-size: var(--text-small); color: var(--text-tertiary); }
.dropzone__file{ display: none; align-items: center; gap: var(--space-3); max-width: 100%; }
.dropzone.has-file .dropzone__empty{ display: none; }
.dropzone.has-file .dropzone__file{ display: flex; }
.dropzone__filename{ font-weight: 600; font-size: var(--text-small); word-break: break-all; }
.dropzone__clear{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--white); border: var(--border-hairline-strong); color: var(--ink-700);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.dropzone__clear:hover{ background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-500); }
.dropzone__clear svg{ stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }

/* ---- Fingerprint paste field ---- */
.input--mono{ font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; letter-spacing: 0.01em; }

/* ---- Check row / loading equalizer ---- */
.verify-check-row{ margin-top: var(--space-7); }
.equalizer{
  display: none; align-items: flex-end; justify-content: center; gap: 5px; height: 34px;
}
.verify-check-row.is-checking .equalizer{ display: flex; }
.equalizer__bar{
  width: 5px; border-radius: var(--radius-full); background: var(--blue-600);
  transform-origin: bottom center;
  animation: eq-pulse 900ms var(--ease-in-out) infinite;
}
.equalizer__bar:nth-child(1){ height: 22px; animation-delay: -150ms; }
.equalizer__bar:nth-child(2){ height: 34px; background: var(--orange-500); animation-delay: -450ms; }
.equalizer__bar:nth-child(3){ height: 24px; animation-delay: -700ms; }
.equalizer__bar:nth-child(4){ height: 17px; animation-delay: -300ms; }
@keyframes eq-pulse{
  0%, 100%{ transform: scaleY(0.35); }
  50%{ transform: scaleY(1); }
}

/* ---- Result card ---- */
.verify-result{ margin-top: var(--space-7); }
.verify-result__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-5); flex-wrap: wrap; }
.verify-result__value{ margin-bottom: var(--space-4); font-size: var(--text-small); font-weight: 600; word-break: break-word; }
.verify-result__hash{
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; color: var(--text-secondary);
  letter-spacing: 0.02em; line-height: 1.7; word-break: break-all; margin-bottom: var(--space-4);
}
.verify-result__hash--mismatch{ color: var(--danger-700); font-weight: 600; }
.verify-result__statusbar{ width: 100%; justify-content: center; padding-block: 10px; margin-top: var(--space-2); }
.verify-result__note{ margin-top: var(--space-4); font-size: var(--text-small); color: var(--danger-700); font-weight: 600; }

.verify-toggle-row{ margin-top: var(--space-6); text-align: center; }
.verify-tool__caption{
  text-align: center; margin-top: var(--space-6); font-size: var(--text-micro); color: var(--text-tertiary);
  max-width: 520px; margin-inline: auto;
}

/* ---- App shell additions: back link, page stack, recipients, audit trail ---- */
.app-topbar__back{
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: var(--text-small); font-weight: 600; color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.app-topbar__back svg{ width: 18px; height: 18px; flex-shrink: 0; }
.app-topbar__back:hover{ color: var(--blue-600); }
.app-topbar h1{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 480px){
  .app-topbar__back-label{
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}

.verify-page-stack{ display: flex; flex-direction: column; gap: var(--space-7); max-width: 760px; }
.verify-page-stack h2{ font-size: var(--text-h4); margin-bottom: var(--space-5); }

.recipients-list{ display: flex; flex-direction: column; }
.recipient{ display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-top: var(--border-hairline); flex-wrap: wrap; }
.recipient:first-child{ border-top: none; padding-top: var(--space-2); }
.recipient:last-child{ padding-bottom: var(--space-2); }
.recipient__info{ display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 120px; }
.recipient__name{ font-weight: 600; font-size: var(--text-small); }
.recipient__role{ font-size: var(--text-micro); }
.recipient__meta{ display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.recipient__time{ font-size: var(--text-micro); white-space: nowrap; }
@media (max-width: 480px){
  .recipient__meta{ width: 100%; justify-content: space-between; }
}

.audit-trail{ position: relative; display: flex; flex-direction: column; gap: var(--space-6); padding-left: 26px; }
.audit-trail::before{
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
  background-image: repeating-linear-gradient(to bottom, var(--ink-200) 0 6px, transparent 6px 12px);
}
.audit-trail__item{ position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.audit-trail__dot{
  position: absolute; left: -26px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-100);
}
/* success-700, not -500: a small solid dot needs ~3:1 against the white
   card behind it (WCAG 1.4.11) — -500 only measures ~2.3:1 there, -700 is
   the token this system already designates as the AA-safe shade. */
.audit-trail__item--sealed .audit-trail__dot{ background: var(--success-700); box-shadow: 0 0 0 3px var(--success-50); }
.audit-trail__label{ font-weight: 600; font-size: var(--text-small); }
.audit-trail__time{ font-size: var(--text-micro); color: var(--text-tertiary); }

.verify-back-row{ margin-top: var(--space-2); }

/* ---- Scope block — states precisely what a verify result does and doesn't
   mean. Deliberately prominent: the failure mode we design against is a
   reader treating "sealed" as "authenticated". ---- */
.verify-scope{ margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-hairline); }
.verify-scope__title{ font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary); margin-bottom: var(--space-4); }
.verify-scope__list{ display: flex; flex-direction: column; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.verify-scope__list li{ display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-small); line-height: 1.55; color: var(--text-secondary); }
.verify-scope__list svg{ width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.verify-scope__list .is-yes svg{ stroke: var(--success-700); }
.verify-scope__list .is-no svg{ stroke: var(--ink-500); }
.verify-scope__list .is-no strong{ color: var(--ink-900); }
.verify-scope__foot{ margin-top: var(--space-4); font-size: var(--text-micro); color: var(--text-tertiary); }

/* The fingerprint lookup answers a different question than the upload does,
   and saying so quietly is not enough — this sits above the input. */
.verify-warn{
  margin-top: var(--space-4); padding: var(--space-4);
  border: 1px solid var(--warning-500); border-radius: var(--radius-md);
  background: var(--warning-50);
}
.verify-warn__t{
  font-size: var(--text-small); font-weight: 700; color: var(--warning-700);
}
.verify-warn__d{
  margin-top: 5px; font-size: var(--text-micro);
  line-height: 1.65; color: var(--text-secondary);
}