/* RGAB public website - the tabs and the two newer checks of the page /verify/ (assets/js/verify-tabs.js, result-verify.js, document-verify.js).
   Loaded only by that page, after rgab.css and rgab-verify.css (it reuses the answer card of the assessment result check: .vr-card, .vr-seal, .vr-rows ...). This file only adds
   what the page needs on top: the tab bar, the panels, the picture of the one-time check, the hidden trap field and the status badge of a document.
   No inline style, no image of its own, no font and no script of any other site. The answers are told apart by an icon, a title and the words, never by colour alone.
   Focus rings are never removed. Targets are at least 44 px high. Nothing here moves (no animation, no transition), so there is nothing to switch off for visitors who ask
   for less motion. */

[hidden].vt-panel, .vr-form[hidden], .vt-locked[hidden], .vt-after [hidden] { display: none; }

/* ---------------------------------------------------------------- the tab bar */
.vt-tabs { margin-top: 1.25rem; }
.vt-tablist { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vt-tab {
  flex: 1 1 10rem;
  min-height: 44px;
  margin: 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(27, 42, 75, 0.22);
  border-bottom: 4px solid rgba(27, 42, 75, 0.22);
  border-radius: 12px;
  background: var(--soft-white);
  color: var(--navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vt-tab:hover { border-color: var(--navy); }
.vt-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); border-bottom-color: var(--gold); color: var(--soft-white); }
.vt-tab:focus-visible { outline: 3px solid var(--midnight); outline-offset: 3px; }
.vt-tab-title { display: block; font-weight: 800; font-size: 1rem; line-height: 1.25; }
.vt-tab-sub { display: block; margin-top: 0.15rem; font-size: 0.8rem; font-weight: 600; }

/* ---------------------------------------------------------------- the panels */
.vt-panel { margin-top: 1rem; }
.vt-h2 { margin: 0 0 0.5rem; font-size: 1.45rem; line-height: 1.2; color: var(--navy); }
.vt-h3 { margin: 0 0 0.4rem; font-size: 1.2rem; line-height: 1.25; color: var(--navy); }
.vt-intro { margin: 0 0 1rem; color: var(--charcoal); }
.vt-panel .vr-form { margin-top: 0.75rem; }
.vt-panel .vr-form .field-input + .vt-hint { margin-top: -12px; margin-bottom: 18px; }
.vt-sent { margin: 0 0 1rem; padding: 0.8rem 1rem; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--porcelain); color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }
.vt-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.vt-after { margin: 1rem 0 0; }
.vt-small-btn { min-height: 44px; padding: 10px 18px; font-size: 0.78rem; }
.vt-small-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* wide, spaced digits make a code easy to compare with the e-mail or the document */
.vt-digits { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.12em; }

/* the picture of six digits */
.vt-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.vt-picture { display: block; max-width: 100%; height: auto; border-radius: 8px; background: #FFFFFF; }
.vt-picture:not([src]) { visibility: hidden; }

/* the trap field for robots: out of sight and out of the tab order, but still in the page (a person never sees or reaches it) */
.vt-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* "This check is not open yet" */
.vt-locked { margin: 0 0 1rem; padding: 1.1rem 1.25rem; border: 1px solid rgba(27, 42, 75, 0.16); border-top: 8px solid var(--gold); border-radius: 16px; background: var(--soft-white); overflow-wrap: anywhere; }
.vt-locked p { margin: 0; color: var(--charcoal); }
.vt-locked a { color: var(--navy); font-weight: 700; text-decoration: underline; }

/* the status of a document */
.vr-row dd.vt-status { display: inline-block; justify-self: start; padding: 0.2rem 0.85rem; border: 2px solid var(--navy); border-radius: 999px; letter-spacing: 0.04em; }
.vr-row dd.vt-status--valid { background: #1F6F4A; border-color: #1F6F4A; color: #FFFFFF; }
.vr-row dd.vt-status--voided, .vr-row dd.vt-status--reversed { background: var(--gold); border-color: var(--gold); color: var(--navy); }

@media (max-width: 520px) {
  .vt-tablist { gap: 0.4rem; }
  .vt-tab { flex: 1 1 100%; }
  .vt-h2 { font-size: 1.25rem; }
  .vt-digits { font-size: 1.05rem; letter-spacing: 0.08em; }
  .vt-actions .btn { width: 100%; text-align: center; }
}