/* Document verification. It builds on service.css and installation.css (type, sections, heads) and adds the lookup
   console with the record it answers with, the drawing of a certificate's footer with its legend, the PDF file check
   and what a lookup confirms. */

/* Start: the console and the record in one centred column */
.vf { max-width: 46rem; margin-inline: auto; }
.vf-form__label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.vf-form__label label { font-family: "Poppins", sans-serif; font-size: .95rem; font-weight: 600; color: var(--navy); }
.vf-form__label a { font-size: .95rem; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.vf-form__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.vf-code { width: 100%; min-height: 58px; padding: 0 18px; border: 1px solid #b9cbe0; border-radius: 10px; background: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 1.2rem; letter-spacing: .08em; color: var(--navy); caret-color: var(--blue); }
.vf-code::placeholder { color: #66748a; letter-spacing: .04em; }
.vf-code:focus { border-color: var(--navy); outline: 3px solid rgb(31 116 211 / .25); outline-offset: 0; }
.vf-submit { min-height: 58px; border: 0; cursor: pointer; }
.vf-submit:disabled { opacity: .6; cursor: progress; }

.vf-result > * { margin-top: 28px; }
.vf-result [hidden], .vf-sheet [hidden], .vf-file-result[hidden] { display: none; }
/* The record arrives: a short rise as each answer replaces the last */
.vf-result > :not([hidden]) { animation: vf-in .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes vf-in { from { opacity: 0; transform: translateY(8px); } }
.vf-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; color: var(--muted); }
.vf-spinner { width: 22px; height: 22px; border: 2.5px solid #cfe0f1; border-top-color: var(--blue); border-radius: 50%; animation: vf-spin .8s linear infinite; }
@keyframes vf-spin { to { transform: rotate(360deg); } }

/* The record: status, the registered data as label and value rows, then what to do with it */
.vf-sheet { overflow: hidden; border: 1px solid #d3e1ef; border-radius: 16px; background: #fff; box-shadow: 0 24px 48px -32px rgb(0 36 80 / .3); }
.vf-sheet__status { display: flex; align-items: center; gap: 14px; padding: 18px 24px; }
.vf-sheet__status > span:not([hidden]) { display: flex; flex: none; }
.vf-sheet__status svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; color: #fff; stroke-width: 2.8; }
.vf-sheet__status strong { display: block; font-family: "Poppins", sans-serif; font-size: 1.1rem; font-weight: 600; }
.vf-sheet__status div span { display: block; margin-top: 2px; font-size: .92rem; }
.vf-sheet__status.is-valid { background: #ecfdf3; color: #166534; }
.vf-sheet__status.is-valid svg { background: #16a34a; }
.vf-sheet__status.is-warning { background: #fff7e6; color: #8a5a00; }
.vf-sheet__status.is-warning svg { background: #d97706; }
.vf-sheet__status.is-invalid { background: #fdf0f0; color: #991b1b; }
.vf-sheet__status.is-invalid svg { background: #dc2626; }
.vf-sheet__data { padding: 6px 24px; }
.vf-sheet__data > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.vf-sheet__data > div:first-child { border-top: 0; }
.vf-sheet__data dt { font-size: .92rem; color: var(--muted); }
.vf-sheet__data dd { font-weight: 600; line-height: 1.45; color: var(--navy); overflow-wrap: anywhere; }
.vf-mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; letter-spacing: .06em; }
.vf-sheet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--ice); }
.vf-sheet__foot p { font-size: .92rem; line-height: 1.5; color: var(--muted); }
.vf-copy { min-height: 44px; padding: 0 16px; border: 1px solid #c9d8e8; border-radius: 10px; background: #fff; font-family: "Poppins", sans-serif; font-size: .92rem; font-weight: 600; color: var(--navy); cursor: pointer; transition: border-color .2s ease; }
.vf-copy:hover { border-color: var(--navy); }
.sv .vf-hints { padding: 18px 24px 18px 44px; list-style: disc; line-height: 1.6; }
.vf-hints li + li { margin-top: 6px; }
.vf-help { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: "Poppins", sans-serif; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.vf-help svg { width: 20px; height: 20px; color: #16a34a; }

/* Middle: the bottom of a certificate drawn to scale (millimetres of the A4 page, as in templates/pdf/footer.php),
   its top fading into the band; the two things to look for are ringed and numbered like the legend beside it */
.vf-where { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "fig ." "fig head" "fig list" "fig ."; grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(2rem, 6vw, 6rem); }
.vf-where__head { grid-area: head; }
.vd { grid-area: fig; align-self: center; margin: 0; filter: drop-shadow(0 22px 26px rgb(0 36 80 / .13)) drop-shadow(0 1px 1px rgb(0 36 80 / .08)); }
.vd__frame { container-type: inline-size; overflow: hidden; border-radius: 0 0 4px 4px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%); mask-image: linear-gradient(180deg, transparent, #000 32%); }
.vd__page { --zoom: 1; --mm: calc(100cqw * var(--zoom) / 210); --pt: calc(var(--mm) * .3528); display: flex; flex-direction: column; justify-content: space-between; width: calc(210 * var(--mm)); height: calc(97 * var(--mm)); padding: calc(8 * var(--mm)) calc(16 * var(--mm)); background: #fff; font-family: "Open Sans", Arial, sans-serif; color: #63718a; }
.vd__h { display: block; height: calc(7 * var(--mm)); border-bottom: max(1px, calc(.6 * var(--pt))) solid #dce6f2; background: linear-gradient(#002d5f, #002d5f) 0 0 / calc(36 * var(--mm)) calc(3.2 * var(--mm)) no-repeat; }
.vd__table { margin-top: calc(3 * var(--mm)); }
.vd__table i { display: block; height: calc(7 * var(--mm)); border-bottom: max(1px, calc(.6 * var(--pt))) solid #dce6f2; background-image: linear-gradient(#d5dfeb, #d5dfeb), linear-gradient(#d5dfeb, #d5dfeb), linear-gradient(#d5dfeb, #d5dfeb); background-repeat: no-repeat; background-size: calc(44 * var(--mm)) calc(1.8 * var(--mm)), calc(30 * var(--mm)) calc(1.8 * var(--mm)), calc(22 * var(--mm)) calc(1.8 * var(--mm)); background-position: calc(2 * var(--mm)) 50%, calc(78 * var(--mm)) 50%, calc(136 * var(--mm)) 50%; }
.vd__table i:first-child { background-color: #f5faff; background-size: calc(20 * var(--mm)) calc(1.6 * var(--mm)), calc(16 * var(--mm)) calc(1.6 * var(--mm)), calc(14 * var(--mm)) calc(1.6 * var(--mm)); }
.vd__table i:nth-child(3) { background-size: calc(52 * var(--mm)) calc(1.8 * var(--mm)), calc(26 * var(--mm)) calc(1.8 * var(--mm)), calc(18 * var(--mm)) calc(1.8 * var(--mm)); }
.vd__line { display: block; width: calc(62 * var(--mm)); height: calc(1.8 * var(--mm)); margin-top: calc(6 * var(--mm)); background: #e2e9f2; }
.vd__foot { display: grid; grid-template-columns: calc(25 * var(--mm)) minmax(0, 1fr) calc(54 * var(--mm)); padding-top: calc(3 * var(--mm)); border-top: max(1px, calc(.6 * var(--pt))) solid #dce6f2; font-size: calc(7.5 * var(--pt)); line-height: 1.4; }
.vd__qr { display: block; width: calc(22 * var(--mm)); height: calc(22 * var(--mm)); }
.vd__qr img { display: block; width: 100%; height: 100%; }
.vd__verify { padding-left: calc(3 * var(--mm)); }
.vd__verify strong { display: block; font-family: "Poppins", sans-serif; font-size: calc(9 * var(--pt)); font-weight: 600; color: #002d5f; }
.vd__verify p { margin: 0; }
.vd__verify b { font-weight: 700; }
.vd__codebox { display: inline-block; margin-top: calc(2.2 * var(--mm)); padding-right: calc(4 * var(--mm)); }
.vd__verify small { display: block; font-size: calc(7 * var(--pt)); }
.vd__code { display: block; font-family: "Poppins", sans-serif; font-size: calc(13 * var(--pt)); font-weight: 600; line-height: 1.3; letter-spacing: var(--pt); color: #002d5f; }
.vd__contact { text-align: right; line-height: 1.5; }
.vd__contact span { display: block; overflow-wrap: anywhere; }
.vd__contact .vd__pageno { margin-top: calc(2.2 * var(--mm)); }
.vd-mark { position: relative; border-radius: calc(1 * var(--mm)); outline: 2px solid var(--blue); outline-offset: calc(1.2 * var(--mm)); }
.vd-mark::before { content: attr(data-n); position: absolute; top: 50%; right: calc(-1.2 * var(--mm)); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); font: 600 12px/1 "Poppins", sans-serif; letter-spacing: 0; color: #fff; box-shadow: 0 0 0 2px #fff, 0 3px 10px rgb(0 36 80 / .35); transform: translate(50%, -50%); }

.vf-legend { grid-area: list; }
.vf-legend li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid #d3e1ef; }
.vf-legend li:last-child { border-bottom: 1px solid #d3e1ef; }
.vf-legend__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); font: 600 12px/1 "Poppins", sans-serif; color: #fff; }
.vf-legend h3 { font-family: "Poppins", sans-serif; font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--navy); }
.vf-legend p { margin-top: 6px; font-size: .95rem; line-height: 1.6; color: var(--muted); }
/* Same legend text as the installation page's on wide screens */
@media (min-width: 1301px) { .vf-legend p { font-size: .93rem; line-height: 1.55; } }

/* Middle: the file check, the text beside a plain file field */
.vf-file { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.vf-file__note { max-width: 34rem; margin-top: 18px; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.vf-drop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 28px; border: 1px solid #c9d8e8; border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.vf-drop:hover, .vf-drop.is-over { border-color: var(--blue); background: var(--ice); }
.vf-drop:focus-within { outline: 3px solid #1f74d3; outline-offset: 3px; }
.vf-drop__text strong { display: block; font-family: "Poppins", sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--navy); }
.vf-drop__text span { display: block; margin-top: 4px; font-size: .95rem; color: var(--muted); }
.vf-drop__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--navy); border-radius: 10px; font-family: "Poppins", sans-serif; font-size: .95rem; font-weight: 600; color: var(--navy); transition: background-color .2s ease, color .2s ease; }
.vf-drop:hover .vf-drop__btn { background: var(--navy); color: #fff; }
.vf-file-result { margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
@media (pointer: coarse) { .vf-drop__text span { display: none; } }

/* End: what a lookup confirms, four columns of text under rules, and where to ask for help */
.vf-confirms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.vf-confirms > div { padding-top: 22px; border-top: 1px solid #c9d8e8; }
.vf-confirms h3 { font-family: "Poppins", sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.35; color: var(--navy); }
.vf-confirms p { margin-top: 10px; line-height: 1.65; color: var(--muted); }
.vf-help-line { max-width: 46rem; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0; font-size: 1.0625rem; line-height: 1.6; text-align: center; text-wrap: balance; }
.vf-help-line a { font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: rgb(0 45 95 / .35); text-underline-offset: 4px; }
.vf-help-line a:hover { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .vf-result > :not([hidden]) { animation: none; }
}
@media (max-width: 1024px) {
  .vf-confirms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Below 1100px the drawing would shrink past reading size beside the text, so the section stacks in one centred column */
@media (max-width: 1100px) {
  .vf-where { grid-template-columns: minmax(0, 46rem); grid-template-areas: "head" "fig" "list"; grid-template-rows: none; justify-content: center; }
  .vd { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
}
@media (max-width: 900px) {
  .vf-file { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .vf-form__row { grid-template-columns: minmax(0, 1fr); }
  .vf-sheet__status, .vf-sheet__data, .vf-sheet__foot { padding-inline: 18px; }
  .vf-sheet__data > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vf-copy { width: 100%; }
  .vf-drop { padding: 22px 20px; }
  .vf-drop__btn { width: 100%; }
}
/* Phones: the drawing zooms onto the QR code and the code, its right edge fading out like its top */
@media (max-width: 600px) {
  .vd__frame { -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%), linear-gradient(270deg, transparent, #000 16%); mask-image: linear-gradient(180deg, transparent, #000 32%), linear-gradient(270deg, transparent, #000 16%); -webkit-mask-composite: source-in; mask-composite: intersect; }
  .vd__page { --zoom: 1.7; margin-left: calc(-6 * var(--mm)); }
  .vd-mark::before { width: 22px; height: 22px; font-size: 11px; }
  .vf-confirms { grid-template-columns: minmax(0, 1fr); }
}