.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; }

#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; }

.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; }
@media (min-width: 961px) { .vgrid:has(> #result.nocard:not([hidden])) > #cardBox { grid-row: span 2; align-self: start; } }

#cardBox { gap: 0; }
.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); }
.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); }
.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; }

.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%; }

#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; }
.hint { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.apart { margin-top: var(--s4); }
.apart-fields { padding-bottom: var(--s4); }
.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); }

.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) {
  .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%; }
}
.vgrid > #cardBox .vcard { justify-content: space-between; }
.vgrid > #cardBox .vopen { margin-top: var(--s2); }

#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; }

#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); }
.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); }
.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; }
#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); }
.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; }

.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; }

.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); }
.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; }
}

.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; }
@media (min-width: 961px) { .vnext .n-open { display: none; } }

.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); }
@media (min-width: 961px) { .vgrid:has(> #cardBox #sampleBox:not([hidden])) .vhelp-shape { display: none; } }

.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); color: var(--text); font-weight: 500; text-align: center; pointer-events: none; }
body.vdragging .drop { background: var(--active); }

.vgrid.idle #formPanel .field:first-child { flex: none; }
.vgrid.idle #block { height: auto; min-height: 216px; }
#sampleBlock:empty::before { content: "\200b\a\200b\a\200b\a\200b"; white-space: pre; }