/* Styles for the in-browser verifier (verify.html). Class names are used by assets/js/verify.js and tsr-verify.js. */

.verifier{padding-top:28px; padding-bottom:20px;}
.verifier code{overflow-wrap:anywhere;}
.pin-banner{border:2px solid var(--warn); background:var(--warn-soft); color:var(--warn); border-radius:10px; padding:12px 16px; margin:0 0 20px; font-size:15px;}
.pin-banner strong{display:block; font-size:16px; margin-bottom:2px;}
.pin-banner.pin-set{border-color:var(--line); background:var(--surface); color:var(--ink);}
.pin-banner.pin-set strong{color:var(--ok);}

.vgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{position:relative; border:1px dashed var(--steel-300); border-radius:10px; padding:12px; background:var(--surface);}
.field.drag-over{border-color:var(--accent); background:var(--accent-soft);}
.field label{display:block; font-size:14.5px; font-weight:600; margin-bottom:6px;}
.field textarea{width:100%; min-height:240px; padding:10px; border:1px solid var(--line); border-radius:8px; font-family:var(--mono); font-size:12.5px; line-height:1.45; background:var(--bg); color:var(--ink); resize:vertical;}
.field .hint{font-size:13px; color:var(--muted); margin:6px 0 0;}
.field input[type=file]{margin-top:6px; max-width:100%; font-size:13.5px;}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0;}
.verifier button{font:inherit; font-weight:600; padding:10px 18px; border-radius:8px; border:1px solid var(--steel-300); background:var(--surface); color:var(--ink); cursor:pointer; min-height:44px;}
.verifier button.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.verifier button:disabled{opacity:.6; cursor:progress;}

.samples{margin:26px 0 20px; padding-top:18px; border-top:1px solid var(--line);}
.samples h2{font-size:1.2rem; margin:0 0 4px;}
.samples h3{font-size:1rem; margin:18px 0 4px;}
.samples p{margin:0 0 10px; color:var(--muted); font-size:14.5px;}
.samples button{font-weight:500; font-size:14px; padding:8px 12px; margin:0 8px 8px 0;}

.result-panel{margin:24px 0; border-radius:12px; padding:20px; border:2px solid var(--line); background:var(--surface);}
.result-banner{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px;}
.result-badge{font-weight:800; font-size:1.5rem; letter-spacing:.04em; padding:4px 16px; border-radius:8px;}
.result-sub{margin:0; flex:1 1 260px; overflow-wrap:anywhere;}
.result-valid{border-color:var(--ok);} .result-valid .result-badge{background:var(--ok-soft); color:var(--ok);}
.result-valid-unpinned{border-color:var(--warn);} .result-valid-unpinned .result-badge{background:var(--warn-soft); color:var(--warn);}
.result-invalid{border-color:var(--bad);} .result-invalid .result-badge{background:var(--bad-soft); color:var(--bad);}
.result-malformed{border-color:var(--warn);} .result-malformed .result-badge{background:var(--warn-soft); color:var(--warn);}
.unpinned-warning{border:2px solid var(--warn); background:var(--warn-soft); color:var(--warn); padding:10px 14px; border-radius:8px; margin:0 0 12px;}
ul.check-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.check-item{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); margin:0;}
.check-icon{flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
.check-pass .check-icon{background:var(--ok-soft); color:var(--ok);}
.check-fail .check-icon{background:var(--bad-soft); color:var(--bad);}
.check-skip .check-icon{background:var(--warn-soft); color:var(--warn);}
.check-label{font-weight:600; font-size:14.5px;}
.check-detail{font-size:13.5px; color:var(--muted); overflow-wrap:anywhere;}
.verify-disclaimer{font-size:13px; color:var(--muted); margin:14px 0 0;}
.limits{font-size:14px; color:var(--muted); margin:24px 0 8px;}

/* independent timestamp (tsr-verify.js) */
.tsr-field{margin-top:16px;}
.tsr-field details{margin-top:10px; font-size:14.5px;}
.tsr-field summary{cursor:pointer; font-weight:600;}
.tsr-field details label{display:block; margin:8px 0 4px; font-weight:600; font-size:14px;}
.field textarea.tsr-small{min-height:90px;}
#tsr-result h2.tsr-title{font-size:1.15rem; margin:0 0 10px;}
dl.tsr-facts{display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:0 0 14px; font-size:14px;}
dl.tsr-facts dt{font-weight:600; color:var(--muted);}
dl.tsr-facts dd{margin:0; overflow-wrap:anywhere;}
@media (max-width:760px){
  .vgrid{grid-template-columns:1fr;}
  dl.tsr-facts{grid-template-columns:1fr;}
  dl.tsr-facts dd{margin-bottom:6px;}
}