/* esign-view.css — İmzalı dosya aç (W1): the extracted documents, the signer information as written in the file and
   the EYP package fields in the result pane (js/esign-view.js), plus the legal block above Go. Linked only on the
   esign_open / eyp_open pages. Below 1024 px the box wraps to its own full-width line under the result (before the
   download button on a phone); from 1024 px it takes the story card's place beside the result, like Publisher's
   preview. Ink rules, no rounding, no ticks or "valid" colours: the signer block is information, not a verdict. */
.maint--legal { border-inline-start-color: var(--ink); }
.pane--done:has(> .esg) { flex-wrap: wrap; }
.esg { flex: 1 0 100%; min-width: 0; margin-top: 6px; border-top: 1px solid var(--ink); padding-top: 14px; display: grid; row-gap: 18px; align-content: start; }
.esg[hidden] { display: none; }
.esg__sec { margin: 0; min-width: 0; }
.esg__k { margin: 0 0 10px; font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.esg__docs { border-top: 1px solid var(--rule); }
.esg__doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: baseline; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.4; }
.esg__role { font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.esg__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.esg__size { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.esg__dl { white-space: nowrap; font-size: 14px; }
.esg__sigs { display: grid; gap: 12px; }
.esg__sig { border: 1px solid var(--rule); padding: 10px 12px; background: var(--paper); }
.esg__sr { margin: 0 0 6px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.esg__kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 14px; row-gap: 4px; margin: 0; font-size: 14.5px; line-height: 1.4; }
.esg__kv dt { color: var(--ink-2); font-size: var(--t-meta); }
.esg__kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.esg__none { margin: 0; padding: 10px 12px; border-inline-start: 3px solid var(--ink-3); background: var(--paper-2); font-size: var(--t-meta); color: var(--ink-2); }
.esg__legal { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); max-width: 70ch; }
.esg__legal .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--ink); }
.esg__legal b { color: var(--ink); }
@media (max-width: 719.98px) {
  .esg__doc { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; font-size: var(--t-sm); }
  .esg__role { grid-column: 1 / -1; }
  .esg__size { grid-column: 1; }
  .esg__dl { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .esg__kv { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .esg__kv dd { margin-bottom: 6px; }
}
/* ≥ 1024 px: beside the result, from the top of the pane (the story card steps aside on this page; the share tile in
   the side column keeps its own thumbnail). [data-esg] lifts the specificity over tool.css / share.css. */
@media (min-width: 1024px) {
  .pane--done:has(> .esg[data-esg]) { flex-wrap: nowrap; align-items: flex-start; }
  .pane--done:has(> .esg[data-esg]) > .shc { display: none; }
  .pane--done:has(> .esg[data-esg]) > .res { flex: 0 1 38%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .pane--done:has(> .esg[data-esg]) .res__num { font-size: clamp(88px, 8.6vw, 150px); }
  .pane--done:has(> .esg[data-esg]) .res__flow { grid-column: 1; grid-row: auto; margin-top: 18px; }
  .esg { flex: 1 1 0; margin-top: 0; border-top: 0; padding-top: 0; }
  body:has(.pane--done > .esg[data-esg]) .shr { grid-template-columns: 84px minmax(0, 1fr) 20px; }
  body:has(.pane--done > .esg[data-esg]) .shr .shr__thumb { display: block; }
}