/* The verify page (/verify, and /v/<n>/<signature> with a preview): an app screen of the cards' family (app.css,
   design/DESIGN.md "Il sistema" and "La pagina di verifica"). The title row, then one 6-column grid
   (6 x 178.67 + 5 x 16 = 1152): the result (the lead, 4 columns: the verdict, the message as signed, the chain of six
   steps) beside the card that signed (2), then the form (4) beside the links that pass the check on (a quiet list, 2).
   With nothing read yet the form leads: it comes first and takes the lead's ground. */

.vhead { padding: var(--s1) 0 2px; margin-top: var(--s5); }
.vhead h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; }
.vsub { margin-top: var(--s1); color: var(--muted); max-width: 72ch; }
#serverNote { margin-top: var(--s4); }
.vgrid { margin-top: var(--s5); }
.vgrid > #result, .vgrid > #cardBox { align-self: stretch; }

/* the verdict sits where the card page's status does; the message as signed under it, on the raised tone */
#result .answer.stop { color: var(--pill-negative-ink); }
#result .finding { max-width: 70ch; }
.signed { margin: var(--s4) 0 0; padding: var(--s3) var(--s4) var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.signed figcaption { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.signed-text { margin-top: var(--s2); font-size: var(--fs-section); line-height: var(--lh-section); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; max-height: 240px; overflow-y: auto; }
.sample-block { margin: var(--s2) 0 0; font-family: var(--mono); font-size: var(--fs-small); line-height: 18px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; } /* taste-skill-ignore: a signature block is code */

/* six steps: the message's signature, then the card's five proofs, as on its page */
.chain.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#result .lead-foot { margin-top: auto; padding-top: var(--s4); }
#result.nocard .chain, #result.nocard .lead-foot { display: none; }
.vgrid > #result.nocard { align-self: start; }
/* while no card is read, the column of explanations spans two rows, so the form follows the result without a hole between */
@media (min-width: 961px) { .vgrid:has(> #result.nocard:not([hidden])) > #cardBox { grid-row: span 2; align-self: start; } }

/* the card that signed */
#cardBox { gap: 0; }
/* nothing shown yet: what to paste (the sample block, or the kinds of signature), then what the check covers */
.vcard-empty .note { margin-bottom: var(--s3); color: var(--text); max-width: 52ch; }
.vcard-empty .signed.sample { margin-top: 0; }
.checks-cap { margin-bottom: var(--s2); }
.checks { display: grid; gap: var(--s2); }
.checks li { position: relative; padding-left: var(--s4); color: var(--text); }
.checks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--control); } /* a tick on the margin, as the ledger line's stations */
.vcard { display: flex; flex-direction: column; flex: 1 1 auto; }
.vwho { display: flex; align-items: center; gap: var(--s3); }
.vwho .avatar { width: 40px; height: 40px; font-size: var(--fs-body); }
.vname { font-weight: 600; font-size: var(--fs-section); line-height: var(--lh-section); overflow-wrap: anywhere; }
.vurl { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
/* label and value on one row, as the card page's record facts */
.vfacts { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s2) var(--s3); margin-top: var(--s4); align-items: baseline; }
.vfacts dt { color: var(--muted); font-size: var(--fs-small); }
.vfacts dd { margin: 0; overflow-wrap: anywhere; }
.vfacts dd .k { color: var(--muted); font-size: var(--fs-small); }
.vfp-cap { margin-top: var(--s4); color: var(--muted); font-size: var(--fs-small); }
#fp { margin-top: var(--s2); }
#fp.words { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px var(--s3); font-size: var(--fs-body); line-height: var(--lh-body); justify-content: stretch; }
.vfp-note { margin: var(--s2) 0 var(--s4); font-size: var(--fs-small); line-height: var(--lh-small); }
.vfp-note.bad { color: var(--pill-negative-ink); }
.vopen { margin-top: auto; align-self: flex-start; }

/* nothing read yet: the form first, on the lead's ground, the empty result as a secondary panel */
.vgrid.idle #formPanel { order: -1; background: var(--surface); border-radius: var(--radius-card); padding: var(--pad-lead) var(--pad-x); }
.vgrid.idle #result { background: none; padding: 0; border-radius: 0; }
.vgrid.idle #formPanel { align-self: stretch; }
.vgrid.idle #formPanel .field:first-child { flex: 1 1 auto; grid-template-rows: auto minmax(120px, 1fr) auto; }
.vgrid.idle #block { height: 100%; }

/* the form */
#formPanel form { display: flex; flex-direction: column; flex: 1 1 auto; }
#formPanel .field:first-child { margin-top: 0; }
#block { font-family: var(--mono); font-size: var(--fs-small); line-height: 18px; min-height: 120px; } /* taste-skill-ignore: a signature block is code */
.hint { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.apart { margin-top: var(--s4); }
.apart summary { cursor: pointer; color: var(--muted); font-weight: 500; width: max-content; max-width: 100%; }
.apart summary:hover { color: var(--text); }
.apart-fields { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 0 var(--s4); }
.apart-fields .field.wide { grid-column: 1 / -1; }
#cardN {
  width: 100%; height: var(--control-height); padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--radius-nested);
  background: var(--field); color: var(--text); font-variant-numeric: tabular-nums;
}
.form-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: auto; padding-top: var(--s4); }
.err { color: var(--pill-negative-ink); font-size: var(--fs-small); }

/* passing it on: a quiet list beside the form */
.share { display: grid; gap: var(--s3); margin-top: var(--s3); justify-items: start; }
.share .btn { max-width: 100%; }
.share-why { margin-top: var(--s4); font-size: var(--fs-small); line-height: var(--lh-small); }

@media (max-width: 1080px) {
  .chain.six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s2); }
  .chain.six .step:nth-child(4)::before { content: none; }
}
@media (max-width: 760px) {
  /* on a phone, once there is a result, the ways to pass it on come right after the card and before the form */
  .vgrid:not(.idle) > #sharePanel { order: 1; }
  .vgrid:not(.idle) > #formPanel { order: 2; }
  .chain.six { grid-template-columns: 1fr; row-gap: 0; }
  .apart-fields { grid-template-columns: minmax(0, 1fr); }
  .signed-text { font-size: var(--fs-body); }
  .share .btn { width: 100%; }
}
/* the card beside a taller result shares the slack between its parts (who, facts, words, the way to the card) instead of
   leaving one band above its button */
.vgrid > #cardBox .vcard { justify-content: space-between; }
.vgrid > #cardBox .vopen { margin-top: var(--s2); }

/* what to check: a message, or a file or release (29 October 2026). The choice sits at the right of the form's title, as a
   segmented control (the one of /embed) */
#formPanel > header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.seg { display: inline-flex; margin: 0; padding: 3px; border: 0; border-radius: var(--round); background: var(--panel); }
.vgrid:not(.idle) .seg { background: var(--raised); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { height: 28px; padding: 0 var(--s3); display: grid; place-items: center; border-radius: var(--round); color: var(--muted); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.seg label:hover { color: var(--text); }
.seg input:checked + label { background: var(--active); color: var(--text); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the file form: where files land, what landed, the signature pasted, the card */
#fForm { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: var(--gap-in); }
#fWant { margin: 0 0 var(--s4); }
#fWant > span > span { font-size: var(--fs-body); line-height: var(--lh-body); } /* the state's one instruction: drop the file */
.drop { display: grid; justify-items: start; gap: var(--s2); padding: var(--s5) var(--s4); border-radius: var(--radius-nested); background: var(--raised); transition: background-color var(--t-fast) var(--ease-out); }
/* on the page's ground (a result above it), the zone takes the surface tone, which both themes tell apart from the ground */
.vgrid:not(.idle) .drop { background: var(--surface); }
.drop.over, .vgrid:not(.idle) .drop.over { background: var(--active); }
.drop-t { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.drop .hint { max-width: 62ch; font-size: var(--fs-body); line-height: var(--lh-body); }
.drop .btn { margin-top: var(--s2); }
.drop:focus-within .btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropped { margin-top: var(--s3); }
.dropped li { display: flex; align-items: center; gap: var(--s3); min-height: 44px; border-bottom: 1px solid var(--rule); }
.dropped li:last-child { border-bottom: 0; }
.dropped .fname { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; unicode-bidi: isolate; }
.dropped .fwhat { flex: none; color: var(--muted); text-align: right; }
.dropped li.bad .fwhat { color: var(--pill-negative-ink); }
#fSig { font-family: var(--mono); font-size: var(--fs-small); line-height: 18px; min-height: 72px; } /* taste-skill-ignore: a signature is code */
#fCard {
  width: 100%; max-width: 280px; height: var(--control-height); padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--radius-nested);
  background: var(--field); color: var(--text);
}
.vgrid.idle #fForm .drop { padding-block: var(--s6); }
/* once a file is there the zone steps back to one line (its words and the button side by side); the files and the check lead */
.drop.compact, .vgrid.idle #fForm .drop.compact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--s3) var(--s4); }
.drop.compact .drop-t { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; color: var(--muted); }
.drop.compact .hint { display: none; }
.drop.compact .btn { margin-top: 0; }

/* the files as hashed here: a table on the raised tone, the hash bar while a file is read */
.signed.files { padding-bottom: var(--s3); }
.hashing { display: grid; gap: var(--s2); margin-top: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }
.hashing .bar { display: block; height: 2px; background: var(--active); border-radius: 2px; overflow: hidden; }
.hashing .bar span { display: block; height: 100%; background: var(--text); transform-origin: left; transform: scaleX(0); }
.ftable { width: 100%; margin-top: var(--s2); border-collapse: collapse; table-layout: fixed; }
.ftable th { padding: 0 0 var(--s2); border-bottom: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; text-align: left; }
.ftable th.r, .ftable td.r { text-align: right; }
.ftable td { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.ftable tr:last-child td { border-bottom: 0; }
.ftable th:nth-child(1) { width: 34%; } .ftable th:nth-child(2) { width: 30%; } .ftable th:nth-child(3) { width: 14%; } .ftable th:nth-child(4) { width: 22%; }
.ftable .c-name .fname { font-weight: 500; overflow-wrap: anywhere; unicode-bidi: isolate; }
.ftable .c-hash .mono { color: var(--muted); }
.ftable td + td { padding-left: var(--s3); }
.ftable .num { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

/* the card panel before a card, in file mode: the signatures this page reads, each with what makes it */
.formats { margin-top: 0; }
.formats-list { display: grid; gap: var(--s1) 0; margin-top: var(--s2); }
.formats-list dt { margin-top: var(--s2); font-weight: 500; }
.formats-list dt:first-child { margin-top: 0; }
.formats-list dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.formats-list code { font-family: var(--mono); font-size: var(--fs-small); color: var(--text); } /* taste-skill-ignore: a command to type */
.share #copyHash { justify-self: start; }

@media (max-width: 760px) {
  .ftable thead { display: none; }
  .ftable, .ftable tbody { display: block; }
  .ftable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
  .ftable tr:last-child { border-bottom: 0; }
  .ftable td { display: block; padding: 0; border: 0; }
  .ftable td + td { padding-left: 0; }
  .ftable .c-hash { grid-column: 1; grid-row: 2; }
  .ftable .c-size { grid-column: 2; grid-row: 2; }
  .ftable .c-res { grid-column: 2; grid-row: 1; }
  .dropped .fwhat { max-width: 45%; }
  #fCard { max-width: none; }
  #formPanel > header .seg { width: 100%; }
  #formPanel > header .seg label { flex: 1 1 0; }
}

/* ---------- UX pass, 29 October 2026 ---------- */
/* what to do next with the verdict: text actions on one line under the finding (the filled button stays "Open the card") */
.vnext { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s3); }
.vnext .text-btn { color: var(--text); }
.vnext .text-btn:hover { text-decoration: underline; }
/* beside the card's column the card has its own "Open the card": the line keeps it for the phone, where the card comes later */
@media (min-width: 961px) { .vnext .n-open { display: none; } }

/* a paste the page could not use: one quiet box under the form, its title, its sentence, the shape of a block, one action */
.vhelp { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.vgrid.idle .vhelp { background: var(--raised); }
.vhelp-t { font-weight: 600; }
.vhelp-p { margin-top: var(--s1); color: var(--muted); max-width: 66ch; }
.vhelp-shape { margin-top: var(--s2); color: var(--muted); }
.vhelp-act { margin-top: var(--s3); }
/* beside the form, on a wide screen, the column already shows the example block: the help doesn't repeat it */
@media (min-width: 961px) { .vgrid:has(> #cardBox #sampleBox:not([hidden])) .vhelp-shape { display: none; } }

/* files dragged over the page: one line that floats at its foot, and the drop zone lit wherever it is */
.vdrag { position: fixed; left: 50%; bottom: var(--s6); z-index: 6; transform: translateX(-50%); max-width: calc(100vw - 2 * var(--s4)); padding: var(--s3) var(--s5); border-radius: var(--round); background: var(--surface); box-shadow: var(--shadow-float); /* taste-skill-ignore: it floats over the page while a file is dragged */ color: var(--text); font-weight: 500; text-align: center; pointer-events: none; }
body.vdragging .drop { background: var(--active); }

/* Stability (polish pass, 30 October 2026). With nothing read yet the block's field has a height of its own instead of
   filling the panel: opening "Or the message and its signature separately" then takes the slack under it (or slides the
   panel longer, app.css), and the field, its hint and the summary stay where they are. "Message" and "File or release"
   glide the two columns to their new height (verify.js). */
.vgrid.idle #formPanel .field:first-child { flex: none; }
.vgrid.idle #block { height: auto; min-height: 216px; }
/* the example block, which verify.js writes in after the first paint, keeps its four lines from the start */
#sampleBlock:empty::before { content: "\200b\a\200b\a\200b\a\200b"; white-space: pre; }