/* VitroVault Trust Centre — public-page ceremony overlay (NDA / request access). Injected by
   visitor.js; styled on the Meridian tokens so it reads as part of the supplier's trust page. */
.vv-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 18, 14, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.vv-modal {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  line-height: 1.6;
  background: var(--paper, #fff); color: var(--ink);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-card, 0 20px 60px rgba(0,0,0,.25));
  padding: 30px 28px;
}
.vv-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 1.5rem; line-height: 1;
  color: var(--ink-3); cursor: pointer; padding: 4px;
}
.vv-close:hover { color: var(--ink); }
.vv-modal h2 { font-family: var(--display); font-size: 1.4rem; margin: 0 0 6px; color: var(--ink); }
.vv-sub { color: var(--ink-2); font-size: .92rem; margin: 0 0 18px; }
.vv-badge {
  display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sa-ink, var(--accent-ink));
  background: var(--accent-tint); border: 1px solid var(--sa, var(--accent));
  border-radius: var(--r-pill); padding: 3px 10px; margin-bottom: 14px;
}
.vv-modal .field { margin-bottom: 14px; }
.vv-modal .field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
/* input AND textarea. Only `input` was styled here, and the trust page loads this stylesheet
   rather than ceremony.css -- so the box a buyer types their questions into fell back to the
   browser default: about twenty columns wide, monospaced, narrower than the field above it. The
   rows="8" in the markup never showed, because a default textarea sizes by its own font and
   columns rather than by the layout around it (F-15-13, browser run 15, found by G). */
.vv-modal .field input, .vv-modal .field textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .94rem;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
}
/* A buyer pastes several questions, one per line, so it has to look like somewhere that happens.
   Resizable vertically, because we cannot know how many they have. */
.vv-modal .field textarea { min-height: 170px; line-height: 1.55; resize: vertical; display: block; }
.vv-modal .field input:focus, .vv-modal .field textarea:focus { outline: 2px solid var(--sa, var(--accent)); outline-offset: 1px; border-color: var(--sa, var(--accent)); }
/* The assent sentence. It is the line the whole ceremony exists to obtain agreement to, and it was
   set smaller and lighter than the surrounding explanatory copy — the one line here that must be
   the easiest to read. */
.vv-check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.5;
  color: var(--ink); margin: 10px 0 4px; cursor: pointer; }
.vv-check input { margin-top: 3px; flex: none; }
.vv-actions { margin-top: 20px; }
.vv-btn {
  width: 100%; justify-content: center; font: inherit; font-weight: 600; font-size: .95rem;
  padding: 12px; border-radius: var(--r-md); cursor: pointer; border: 1px solid var(--sa, var(--accent));
  background: var(--sa, var(--accent)); color: var(--sa-ink-on, #fff);
}
.vv-btn.is-primary { background: var(--sa, var(--accent)); color: #fff; }
/* The quieter of two actions: "Resend code" beside "Continue", "Cancel" beside an accept. It must
   read as available, not as the thing to press. */
.vv-btn.is-secondary { background: transparent; color: var(--ink); border-color: var(--line-2);
  margin-top: 10px; }
.vv-btn.is-secondary:hover { background: var(--wash); }
.vv-btn:disabled { opacity: .5; cursor: not-allowed; }
.vv-audit { font-size: .78rem; line-height: 1.5; color: var(--ink-2); margin: 16px 0 0; }

/* ---- The agreement itself ----------------------------------------------------------
   A buyer is about to be bound by these words, so they are the one thing on the page that has to be
   COMFORTABLE to read rather than merely present: a wider modal, a taller panel, real leading, and
   a quiet ground so the text reads as a document rather than as another form field. */
.vv-modal.is-wide { max-width: 640px; }
.vv-nda {
  /* Taller than it was. The panel capped at 400px inside a modal with 180px of unused height below
     it, so a buyer read a third of the agreement at a time for no reason. */
  max-height: min(58vh, 520px); overflow-y: auto;
  border: 1px solid var(--line, #ddd); border-radius: var(--r-md, 12px);
  background: var(--wash, #f7f7f8); color: var(--ink);
  padding: 16px 18px; margin: 12px 0 6px;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: .9rem; line-height: 1.65;
  scrollbar-width: thin; scrollbar-color: var(--ink-3, #9a968f) transparent;
}
/* A drawn track, but ONLY on a panel that actually overflows. Forcing `scroll` on every panel gave
   a one-paragraph agreement a full-height scrollbar with arrow buttons that did nothing — which
   looks more broken than the overlay scrollbar it replaced, not less (G, 2026-08-22). The class is
   set once, when the text turns out not to fit, and never removed: a track that appears and
   disappears as you read is worse than one that stays. */
.vv-nda.is-scrollable { overflow-y: scroll; }
.vv-nda::-webkit-scrollbar { width: 10px; }
/* Chrome draws stepper arrows as soon as ::-webkit-scrollbar is styled at all. They are not an
   affordance anybody needs on a 500px panel, and they were the only thing a reader noticed. */
.vv-nda::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.vv-nda::-webkit-scrollbar-track { background: transparent; }
.vv-nda::-webkit-scrollbar-thumb {
  background: var(--ink-3, #9a968f); border-radius: 999px;
  border: 3px solid var(--wash, #f7f7f8);
}
/* While there is more below, fade the last line into the panel edge so the text visibly CONTINUES
   rather than stopping mid-sentence at a hard border. Removed the moment it has been read to the
   end, so the cue means something. */
.vv-nda.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
}
.vv-nda:focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 2px; }
/* The reading state, directly under the panel: "there is more below" or "you have seen it all".
   It is the difference between a tick that means something and one that does not. */
.vv-read { font-size: .82rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 10px; }
.vv-nda.has-more + .vv-read { color: var(--sa-ink, var(--accent-ink)); font-weight: 600; }
/* Version + fingerprint under the text: mono, because it is a reference somebody may need to quote
   back to us, and quoting a proportional hash is how digits get lost. */
#nda-meta { font-family: var(--mono); font-size: .76rem; color: var(--ink-2);
  overflow-wrap: anywhere; margin: 0 0 14px; }
.vv-msg { font-size: .86rem; padding: 0; border-radius: var(--r-md); margin: 0; }
.vv-msg.err { display: block; padding: 10px 12px; margin-bottom: 14px; background: var(--stop-tint); color: var(--stop); border: 1px solid var(--stop); }
.vv-msg.ok  { display: block; padding: 10px 12px; margin-bottom: 14px; background: var(--go-tint); color: var(--go); border: 1px solid var(--go); }

.vv-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper, #fff); padding: 11px 18px; border-radius: var(--r-pill);
  font-size: .88rem; box-shadow: var(--sh-card); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 110; max-width: 90vw; text-align: center;
}
.vv-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.vv-toast.err { background: var(--stop); color: #fff; }