/* Fili — companion sheet for the utility pages (verifier, demo).

   The verifier is working UI with a dozen .vz-* states; its rules are carried
   here verbatim from style.css rather than rewritten, so the migration to V2
   cannot change how the checker behaves. What changes is the palette they
   resolve against: the bridge below re-points the old token names at the V2
   ones, so every carried rule picks up Fili teal, the new divider and the dark
   theme without a single selector being touched.

   Load AFTER v2.css. */

:root {
  --primary:        var(--color-accent);
  --primary-hover:  var(--color-accent-700);
  --primary-tint:   var(--color-accent-100);
  --on-primary:     var(--on-accent);
  --text:           var(--color-text);
  --text-muted:     color-mix(in srgb, var(--color-text) 70%, transparent);
  --border:         var(--color-divider);
  --surface:        var(--color-surface);
  --surface-sunken: var(--color-sunken);
  --bg:             var(--color-bg);
}

.tagline { font-size: 19px; color: var(--text-muted); margin-top: 16px; max-width: 56ch; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; align-items: center; }

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

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 20px; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
}

.card h3 { margin: 0 0 6px; font-size: 16px; }

.card p { font-size: 14.5px; color: var(--text-muted); }

.privacy-band {
  background: var(--primary-tint); border-radius: 12px; padding: 20px 22px; margin-top: 20px;
}

.privacy-band strong { color: var(--primary); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.vz {
  border: 2px dashed var(--border); border-radius: 14px;
  background: var(--surface); padding: 34px 24px; margin-top: 24px;
  text-align: center; cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.vz:hover, .vz.over { border-color: var(--primary); background: var(--primary-tint); }

.vz:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.vz.busy { cursor: progress; border-style: solid; }

.vz-hint { display: block; margin-top: 6px; font-size: 14.5px; color: var(--text-muted); }

.vz-formats { display: block; margin-top: 14px; font-size: 13.5px; color: var(--text-muted); }

.vz-spinner {
  width: 22px; height: 22px; margin: 0 auto 10px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--primary);
  animation: vz-spin 700ms linear infinite;
}

.vz-error {
  margin-top: 14px; padding: 11px 14px; border-radius: 10px;
  background: var(--surface-sunken); color: var(--text);
  font-size: 14.5px; text-align: left;
}

.vz-card {
  margin-top: 24px; padding: 22px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); text-align: left;
}

.vz-card.found { border-color: var(--primary); background: var(--primary-tint); }

/* The big seal a found verdict wears — the document's own, drawn by the
   script from the verified facts. The script's `hidden` is the authority
   (author display would defeat the attribute), so the shown rule excludes it. */
.vz-card .vz-card-seal { display: none; }

.vz-card.found .vz-card-seal:not([hidden]) {
  display: block; float: right;
  width: 170px; height: 170px;
  margin: -4px -2px 14px 20px;
}

.vz-card.found::after { content: ""; display: block; clear: both; }

@media (max-width: 560px) {
  .vz-card.found .vz-card-seal { float: none; margin: 2px auto 16px; }
}

.vz-card h3 { font-size: 18px; margin-bottom: 10px; }

.vz-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0; font-size: 15px; }

.vz-facts dt { color: var(--text-muted); }

.vz-facts dd { font-weight: 600; }

.vz-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }

.vz-visual { margin: 12px 0 0; padding-left: 20px; font-size: 14.5px; color: var(--text-muted); }

.vz-visual li + li { margin-top: 4px; }

/* The OCR offer. It sits under the visual checklist because it is the same
   answer by another route: read the pixels, or read them yourself. The note is
   not decoration — a visitor about to pull four megabytes is owed the reason,
   and the assurance that the megabytes come here rather than their document
   going anywhere. */
.vz-ocr { margin-top: 16px; }

.vz-ocr-note {
  margin-top: 8px; max-width: 46ch;
  font-size: 13.5px; line-height: 1.45; color: var(--text-muted);
}

.vz-caveat {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-muted);
}

.vz-restart {
  margin-top: 16px; background: none; border: 0; padding: 0;
  font: inherit; font-size: 14.5px; color: var(--primary);
  text-decoration: underline; cursor: pointer;
}

.vz-restart:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.vz-contact { display: grid; gap: 14px; margin-top: 22px; max-width: 520px; }

.vz-contact label { display: grid; gap: 5px; font-size: 14.5px; color: var(--text-muted); }

.vz-contact input, .vz-contact textarea {
  padding: 11px 14px; font: inherit; color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
}

.vz-contact textarea { resize: vertical; min-height: 96px; }

.vz-contact input:focus-visible, .vz-contact textarea:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px;
}

.vz-contact .btn { border: 0; cursor: pointer; justify-self: start; }

.vz-contact-note { font-size: 13px; color: var(--text-muted); margin-top: 12px; }

.vz-contact-note a { color: var(--primary); }


/* The carried rules kept style.css's rounded corners. V2 is a square,
   hairline-drawn system — flatten them so the verifier's dropzone, cards and
   result panels sit in the same drawing set as everything else. */
.vz, .vz-card, .vz-error, .vz-caveat, .card, .privacy-band, .vz-contact input,
.vz-contact textarea, .vz-restart { border-radius: 0; }


/* ---- the watermark page (site/filigraner/, site/en/watermark/) ----
   Drawn square from the start, so nothing here needs flattening. The dropzone
   and error reuse the .vz rules above; these are the mark-side states the
   verifier never had: wording field, opacity fold, preview, actions. */

.fz-result { margin-top: 24px; }

.fz-field-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-bottom: 14px;
}

.fz-field { display: grid; gap: 5px; }

.fz-field label { font-size: 14.5px; color: var(--text-muted); }

.fz-optional { font-size: 12.5px; }

.fz-field textarea, .fz-field input, .fz-field select {
  padding: 11px 14px; font: inherit; color: var(--text);
  border: 1px solid var(--border); background: var(--surface);
}

.fz-field textarea { resize: vertical; }

.fz-field textarea:focus-visible, .fz-field input:focus-visible, .fz-field select:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px;
}

.fz-advanced { margin-top: 12px; }

.fz-advanced summary { font-size: 13.5px; font-weight: 500; cursor: pointer; color: var(--text-muted); }

.fz-slider { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.fz-slider label { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }

.fz-slider-end { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.fz-slider input[type="range"] { flex: 1; accent-color: var(--primary); }

.fz-preview { margin-top: 18px; display: flex; justify-content: center; }

.fz-preview canvas {
  max-width: 100%; height: auto;
  border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(10, 24, 21, 0.10);
}

/* Stand-in for PDFs, which the page deliberately ships no rasteriser for:
   an A4-shaped card with the wording tiled at the chosen opacity. */
.fz-pdfcard {
  position: relative; overflow: hidden;
  width: min(420px, 85%);
  aspect-ratio: 1 / 1.414;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(10, 24, 21, 0.10);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}

.fz-glyph { font-size: 26px; font-weight: 700; color: var(--primary); letter-spacing: 0.04em; }

.fz-name { font-size: 13px; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fz-pages { font-size: 12px; color: var(--text-muted); }

.fz-tiles {
  position: absolute; inset: -60%;
  display: flex; flex-direction: column; justify-content: space-around;
  transform: rotate(-30deg); pointer-events: none;
}

.fz-tiles span { font-size: 13px; font-weight: 600; white-space: nowrap; color: rgb(60, 60, 70); text-align: center; }

.fz-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }

.fz-actions .vz-restart { margin-top: 0; }

.fz-downloaded { font-size: 14px; color: var(--primary); }